From b9988333719b5db1cc71351f42b685d95914378b Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 24 Jun 2026 10:40:59 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20thay=20=C4=91=E1=BB=95i=20m=C3=A0u=20the?=
 =?UTF-8?q?me=20t=E1=BB=95i=20c=E1=BB=A7a=20timeline=20h=C3=A0nh=20tr?=
 =?UTF-8?q?=C3=ACnh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ItineraryTimeline.tsx | 262 +++++++++---------
 frontend/src/index.css                        |  23 +-
 2 files changed, 142 insertions(+), 143 deletions(-)

diff --git a/frontend/src/components/ItineraryTimeline.tsx b/frontend/src/components/ItineraryTimeline.tsx
index 0511179..7a88637 100644
--- a/frontend/src/components/ItineraryTimeline.tsx
+++ b/frontend/src/components/ItineraryTimeline.tsx
@@ -335,11 +335,11 @@ export const ItineraryTimeline = ({
                         </div>
                         <button 
                           onClick={() => onAddLocation?.(leg.id, true)}
-                          className="flex-1 bg-blue-50/20 p-4 rounded-xl border border-dashed border-blue-100 hover:border-blue-400 hover:bg-blue-50 transition-all flex items-center justify-between group"
+                          className="flex-1 bg-blue-50/20 dark:bg-slate-800/20 p-4 rounded-xl border border-dashed border-blue-100 dark:border-slate-700 hover:border-blue-400 dark:hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-slate-800/40 transition-all flex items-center justify-between group"
                         >
                           <div className="text-left">
-                            <span className="inline-block px-2 py-0.5 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm xuất phát</span>
-                            <h3 className="font-bold text-gray-400 text-sm italic">Nhấn để ghim điểm bắt đầu cho Tour...</h3>
+                            <span className="inline-block px-2 py-0.5 bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-300 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm xuất phát</span>
+                            <h3 className="font-bold text-gray-400 dark:text-slate-400 text-sm italic">Nhấn để ghim điểm bắt đầu cho Tour...</h3>
                           </div>
                           <Plus className="w-5 h-5 text-blue-500 group-hover:scale-110 transition-transform" />
                         </button>
@@ -350,17 +350,17 @@ export const ItineraryTimeline = ({
                     {legIdx === legs.length - 1 && !legs.some((l: any) => l.locations.some((loc: any) => loc.plannedEnd && new Date(loc.plannedEnd).getTime() === 0)) && (
                       <div className="relative flex group mb-6 opacity-80 hover:opacity-100 transition-opacity">
                         <div className="z-10 mt-1.5 mr-4">
-                          <div className="w-8 h-8 bg-white rounded-full border-2 border-dashed border-red-200 flex items-center justify-center text-red-400">
+                          <div className="w-8 h-8 bg-white dark:bg-slate-800 rounded-full border-2 border-dashed border-red-200 dark:border-red-700 flex items-center justify-center text-red-400">
                             <Flag className="w-4 h-4" />
                           </div>
                         </div>
                         <button 
                           onClick={() => onAddLocation?.(leg.id, false, true)}
-                          className="flex-1 bg-red-50/20 p-4 rounded-xl border border-dashed border-red-100 hover:border-red-400 hover:bg-red-50 transition-all flex items-center justify-between group"
+                          className="flex-1 bg-red-50/20 dark:bg-red-900/20 p-4 rounded-xl border border-dashed border-red-100 dark:border-red-700 hover:border-red-400 dark:hover:border-red-400 hover:bg-red-50 dark:hover:bg-red-900/40 transition-all flex items-center justify-between group"
                         >
                           <div className="text-left">
-                            <span className="inline-block px-2 py-0.5 bg-red-50 text-red-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
-                            <h3 className="font-bold text-gray-400 text-sm italic">Nhấn để ghim điểm kết thúc cho Tour...</h3>
+                            <span className="inline-block px-2 py-0.5 bg-red-50 dark:bg-red-700 text-red-600 dark:text-red-300 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
+                            <h3 className="font-bold text-gray-400 dark:text-slate-400 text-sm italic">Nhấn để ghim điểm kết thúc cho Tour...</h3>
                           </div>
                           <Plus className="w-5 h-5 text-red-500 group-hover:scale-110 transition-transform" />
                         </button>
@@ -558,14 +558,14 @@ export const ItineraryTimeline = ({
           <div className="flex flex-col gap-3 pb-20 mt-8">
             <button
               onClick={handleDeclareLegs}
-              className="w-full py-4 rounded-2xl bg-white text-blue-600 border-2 border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-bold"
+              className="w-full py-4 rounded-2xl bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-300 border-2 border-dashed border-blue-200 dark:border-slate-700 hover:bg-blue-50 dark:hover:bg-slate-700 transition-all flex items-center justify-center gap-2 text-sm font-bold"
             >
               <List className="w-5 h-5" /> 
               {legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"}
             </button>
             <button
               onClick={handleAddLeg}
-              className="w-full py-4 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold"
+              className="w-full py-4 rounded-2xl bg-blue-600 dark:bg-blue-700 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold"
             >
               <Plus className="w-5 h-5" /> Thêm chặng lẻ vào cuối
             </button>
@@ -574,132 +574,132 @@ export const ItineraryTimeline = ({
 
       {/* Modal Khai báo số chặng (Popover) */}
       {isLegCountModalOpen && (
-        <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
-          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
-          <div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
-            <div className="flex justify-between items-center mb-6">
-              <h3 className="text-xl font-black text-gray-900">Số chặng lộ trình</h3>
-              <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-                <X className="w-5 h-5 text-gray-400" />
-              </button>
-            </div>
-            
-            <p className="text-sm text-gray-500 mb-6 leading-relaxed">
-              Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
-            </p>
-
-            <div className="flex items-center justify-center gap-6 mb-8">
-              <button 
-                onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
-                className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all"
-              >
-                -
-              </button>
-              <span className="text-4xl font-black text-blue-600 w-12 text-center">{tempLegCount}</span>
-              <button 
-                onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
-                className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all"
-              >
-                +
-              </button>
-            </div>
-
-            <button
-              onClick={confirmDeclareLegs}
-              className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95"
-            >
-              Xác nhận
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Modal Chỉnh sửa Chặng (Popover) */}
-      {isEditModalOpen && (
-        <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
-          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} />
-          <div className="relative w-full max-w-md bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
-            <div className="flex justify-between items-center mb-6">
-              <h3 className="text-xl font-black text-gray-900">Chỉnh sửa Chặng</h3>
-              <button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-                <X className="w-5 h-5 text-gray-400" />
-              </button>
-            </div>
-            
-            <div className="space-y-5">
-              <div>
-                <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label>
-                <input
-                  type="text"
-                  value={editingLegData.note}
-                  onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })}
-                  placeholder="VD: Ngày 1: Khởi hành"
-                  className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                />
-              </div>
-
-              <div>
-                <label className="flex items-center gap-2 text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">
-                  <AlignLeft className="w-3 h-3" /> Mô tả chi tiết
-                </label>
-                <textarea
-                  value={editingLegData.description}
-                  onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })}
-                  placeholder="Mô tả các hoạt động chính trong chặng này..."
-                  className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none"
-                />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="flex items-center gap-2 text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">
-                    <CalendarIcon className="w-3 h-3" /> Bắt đầu
-                  </label>
-                  <input
-                    type="date"
-                    value={editingLegData.startDate}
-                    onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })}
-                    className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                  />
+            <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
+              <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
+              <div className="relative w-full max-w-sm bg-white dark:bg-slate-900 rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
+                <div className="flex justify-between items-center mb-6">
+                  <h3 className="text-xl font-black text-gray-900 dark:text-white">Số chặng lộ trình</h3>
+                  <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
+                    <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
+                  </button>
                 </div>
-                <div>
-                  <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label>
-                  <input
-                    type="date"
-                    value={editingLegData.endDate}
-                    onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })}
-                    className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                  />
+                
+                <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed">
+                  Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
+                </p>
+
+                <div className="flex items-center justify-center gap-6 mb-8">
+                  <button 
+                    onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
+                    className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
+                  >
+                    -
+                  </button>
+                  <span className="text-4xl font-black text-blue-600 dark:text-blue-400 w-12 text-center">{tempLegCount}</span>
+                  <button 
+                    onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
+                    className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
+                  >
+                    +
+                  </button>
+                </div>
+
+                <button
+                  onClick={confirmDeclareLegs}
+                  className="w-full py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
+                >
+                  Xác nhận
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Modal Chỉnh sửa Chặng (Popover) */}
+          {isEditModalOpen && (
+            <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
+              <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} />
+              <div className="relative w-full max-w-md bg-white dark:bg-slate-900 rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
+                <div className="flex justify-between items-center mb-6">
+                  <h3 className="text-xl font-black text-gray-900 dark:text-white">Chỉnh sửa Chặng</h3>
+                  <button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
+                    <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
+                  </button>
+                </div>
+                
+                <div className="space-y-5">
+                  <div>
+                    <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label>
+                    <input
+                      type="text"
+                      value={editingLegData.note}
+                      onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })}
+                      placeholder="VD: Ngày 1: Khởi hành"
+                      className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
+                      <AlignLeft className="w-3 h-3" /> Mô tả chi tiết
+                    </label>
+                    <textarea
+                      value={editingLegData.description}
+                      onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })}
+                      placeholder="Mô tả các hoạt động chính trong chặng này..."
+                      className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none text-gray-800 dark:text-white"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
+                        <CalendarIcon className="w-3 h-3" /> Bắt đầu
+                      </label>
+                      <input
+                        type="date"
+                        value={editingLegData.startDate}
+                        onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })}
+                        className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label>
+                      <input
+                        type="date"
+                        value={editingLegData.endDate}
+                        onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })}
+                        className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3 mt-8">
+                  <button
+                    onClick={() => setIsEditModalOpen(false)}
+                    className="py-4 bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 font-bold rounded-2xl transition-all active:scale-95"
+                  >
+                    Hủy
+                  </button>
+                  <button
+                    onClick={saveLegEdit}
+                    className="py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
+                  >
+                    Lưu thay đổi
+                  </button>
                 </div>
               </div>
             </div>
-
-            <div className="grid grid-cols-2 gap-3 mt-8">
-              <button
-                onClick={() => setIsEditModalOpen(false)}
-                className="py-4 bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold rounded-2xl transition-all active:scale-95"
-              >
-                Hủy
-              </button>
-              <button
-                onClick={saveLegEdit}
-                className="py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95"
-              >
-                Lưu thay đổi
-              </button>
-            </div>
-          </div>
+          )}
+          <CommentModal
+            isOpen={isCommentModalOpen}
+            onClose={() => setIsCommentModalOpen(false)}
+            locationId={commentLocationId}
+            locationName={commentLocationName}
+            isPublicView={isPublicView}
+            onCommentAdded={() => handleCommentIncrement(commentLocationId)}
+            onCommentDeleted={() => handleCommentDecrement(commentLocationId)}
+          />
         </div>
-      )}
-      <CommentModal
-        isOpen={isCommentModalOpen}
-        onClose={() => setIsCommentModalOpen(false)}
-        locationId={commentLocationId}
-        locationName={commentLocationName}
-        isPublicView={isPublicView}
-        onCommentAdded={() => handleCommentIncrement(commentLocationId)}
-        onCommentDeleted={() => handleCommentDecrement(commentLocationId)}
-      />
-    </div>
   );
 };
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 12c8b3a..a8b865d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -17,8 +17,8 @@
     --border: #e5e7eb;           /* Light Border */
     --border-light: #f3f4f6;     /* Light Border Alt */
     
-    --text-primary: #28536b;     /* Yale Blue (High contrast text) */
-    --text-secondary: #7ea8be;   /* Steel Blue */
+    --text-primary: #0596e4;     /* Yale Blue (High contrast text) */
+    --text-secondary: #74a8c4;   /* Steel Blue */
     --text-accent: #c2948a;      /* Rosy Taupe */
     --text-muted: #9ca3af;       /* Muted Text */
     --text-disabled: #d1d5db;    /* Disabled Text */
@@ -49,18 +49,17 @@
   /* ============ DARK THEME ============ */
   :root.dark {
     /* Dark Theme Variables - Vintage Grape & Bondi Blue */
-    --background: #4b658b;       /* Vintage Grape */
-    --background-alt: #2d253f;   /* Dark Alt */
-    --surface: #515d74;          /* Dusty Grape */
-    --surface-muted: #626186;    /* Surface Muted */
-    --surface-hover: #5f6b7e;    /* Surface Hover */
+    --background: #1e293b;       /* Dark slate-800 */
+    --background-alt: #0f172a;   /* Dark slate-900 */
+    --surface: #1e293b;          /* Dark slate-800 */
+    --surface-muted: #334155;    /* Dark slate-700 */
+    --surface-hover: #334155;    /* Dark slate-700 */
     
-    --border: #626186;           /* Border */
-    --border-light: #525174;     /* Border Light */
+    --border: #334155;           /* Dark slate-700 */
+    --border-light: #1e293b;     /* Dark slate-800 */
     
-    /* FIX LỖI 1: Thay đổi #173757 thành #f8fafc để chữ có màu trắng sữa chuẩn tương phản cao */
-    --text-primary: #f8fafc;     /* Soft White chính thức */
-    --text-secondary: #cbd5e1;   /* Sửa lại xám sáng để nhìn rõ hơn #6b6b6b cũ */
+    --text-primary: #f8fafc;     /* Soft White */
+    --text-secondary: #cbd5e1;   /* Light gray */
     --text-accent: #bce784;      /* Lime Cream */
     --text-muted: #94a3b8;       /* Muted Slate */
     --text-disabled: #64748b;    /* Disabled Text */