Gán điểm kết thúc của chặng trước làm điểm khởi hành của chặng sau

ItineraryTimeline.tsx

@@ -92,15 +92,25 @@ export const ItineraryTimeline = ({ onAddLocation }: { onAddLocation?: (legId: s
                 return acc;
               }, 0);
 
+              // Xác định địa điểm cuối cùng của chặng trước đó để hiển thị tính liên tục
+              const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
+
               return (
                 <div key={leg.id} className="relative mb-12 animate-in fade-in slide-in-from-bottom-4 duration-300">
                   {/* Leg Header */}
                   <div className="sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2">
-                    <div className="font-black text-blue-600 text-xl truncate flex-1 flex items-center gap-2">
+                    <div className="font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1">
+                      <div className="flex items-center gap-2">
                       <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm">
                         {leg.sequence}
                       </span>
                       {leg.note || `Chi tiết Chặng ${leg.sequence}`}
+                      </div>
+                      {prevLegLastLoc && (
+                        <div className="flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10">
+                          <Navigation className="w-2.5 h-2.5 rotate-90" /> Tiếp nối từ {prevLegLastLoc.name}
+                        </div>
+                      )}
                     </div>
                     <div className="flex items-center gap-2 ml-4">
                       {['OWNER', 'MANAGER'].includes(userRole || '') && (
@@ -156,7 +166,8 @@ export const ItineraryTimeline = ({ onAddLocation }: { onAddLocation?: (legId: s
                   </div>
 
                   {/* Vertical Line for the whole leg */}
-                  <div className="absolute left-6 top-16 bottom-0 w-0.5 bg-blue-100 -z-0" />
+                  {/* Mở rộng đường kẻ xuống dưới (bottom-[-3rem]) để nối liền với chặng tiếp theo */}
+                  <div className={`absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0`} />
 
                   <div className="ml-2">
                     {leg.locations.map((location, idx) => {