style(trips): fix responsive layout

src/pages/Trip/components/MainTripBody.tsx

@@ -1,7 +1,6 @@
 import { ProCard } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
 import { Flex, Grid } from 'antd';
-import { useState } from 'react';
 import HaulTable from './HaulTable';
 import TripCostTable from './TripCost';
 import TripCrews from './TripCrews';
@@ -23,7 +22,6 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
   //   console.log('tripInfo:', tripInfo);
   const { useBreakpoint } = Grid;
   const screens = useBreakpoint();
-  const [isResponsive, setIsResponsive] = useState(false);
   const { data, getApi } = useModel('getTrip');
   const tripCosts = Array.isArray(tripInfo?.trip_cost)
     ? tripInfo.trip_cost
@@ -77,11 +75,14 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
           padding: 0,
           paddingInline: 0,
           gap: 10,
+          backgroundColor: 'transparent',
         }}
       >
         <ProCard
-          split={screens.lg ? 'vertical' : 'horizontal'}
-          bodyStyle={{ padding: 0, gap: 5 }}
+          gutter={16} // tạo khoảng cách thay vì split (không có border)
+          direction={screens.lg ? 'row' : 'column'} // responsive: ngang/dọc
+          bodyStyle={{ padding: 0, gap: 10 }}
+          style={{ color: 'transparent' }}
         >
           <ProCard
             colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
@@ -92,7 +93,7 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              borderBottom: '1px solid #f0f0f0',
+              // borderBottom: '1px solid #f0f0f0',
             }}
             title="Chi phí chuyến đi"
             style={{ minHeight: 300 }}