respnsive pages

components/doctor/detailDoctor/Link.js

@@ -17,21 +17,23 @@ function Link() {
             {listLink.map((item, idx) => (
                 <li
                     key={idx}
+                    className="flex"
                 >
                     <a href={`#${item.link}`}>
                         <Button
                             onClick={() => setActiveId(idx)}
-                            className={`
-                        !text-[20px] !font-bold !mx-[56px] !py-px
-                        ${idx !== 0 && idx !== listLink.length - 1 ?
-                                    'relative before:absolute before:right-[-56px] before:top-0 before:h-full before:w-px before:bg-[#BABABA] after:absolute after:left-[-56px] after:top-0 after:h-full after:w-px after:bg-[#BABABA]'
-                                    : ''}
-                        ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
-                        `}
+                            className={`!text-[20px] !font-bold !p-1
+                                ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
+                            `}
                             variant="text">
                             {item.name}
                         </Button>
                     </a>
+                    {listLink.length > idx + 1 && (
+                        <span
+                            className="block bg-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]"
+                        ></span>
+                    )}
                 </li>
             ))}
         </ul>