respnsive pages

app/component/element/AutoCompleteSelect.js

@@ -8,10 +8,9 @@ function AutoCompleteSelect({ list, updateData, name, label }) {
             disablePortal
             options={list}
             className="!w-full !rounded-lg md:!w-[344px]"
-            onChange={(event) => {
+            onChange={(event) =>
                 updateData &&
-                    updateData(event, name)
-            }
+                updateData(event, name)
             }
             sx={{
                 ...styleTextSelectRight,

app/component/head/index.js

@@ -1,9 +1,13 @@
 function HeadPageList({ children, title, detail }) {
     return (
-        <div className="bg-[#F6F7F9]">
-            <div className="padding-responsive pt-[195px] pb-[85px] flex flex-col items-center gap-[25px]">
-                <p className="text-[#3B3B3B] text-[24px] text-center font-bold">{title}</p>
-                <p className="text-[#3B3B3B] text-[16px] text-center font-normal">{detail}</p>
+        <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
+            <div className="
+                padding-responsive flex flex-col items-center gap-[25px]
+                pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
+                pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
+            ">
+                <p className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">{title}</p>
+                <p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">{detail}</p>
                 {children}
             </div>
         </div>