use sass

src/app/(home)/components/Consultant/index.tsx

@@ -5,7 +5,7 @@ import { isMobile } from "react-device-detect";
 import Image from "next/image";
 import { Swiper, SwiperSlide, SwiperClass } from "swiper/react";
 import "swiper/css";
-import styles from "./consultant.module.css";
+import styles from "./consultant.module.scss";
 import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import { fetchConsultants } from "@/lib/cms";
 

src/app/(home)/components/Contact/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import Image from "next/image";
-import styles from "./contact.module.css";
+import styles from "./contact.module.scss";
 
 const Contact: React.FC = () => {
   const [currentIndex, setCurrentIndex] = useState(0);

src/app/(home)/components/Customer/index.tsx

@@ -7,7 +7,7 @@ import { Swiper, SwiperSlide, SwiperClass } from "swiper/react";
 import "swiper/css";
 import "swiper/css/navigation";
 import { GoChevronLeft, GoChevronRight } from "react-icons/go";
-import styles from "./customer.module.css";
+import styles from "./customer.module.scss";
 import { fetchCustomers } from "@/lib/cms";
 
 interface CustomerType {

src/app/(home)/components/Services/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import styles from "./services.module.css";
+import styles from "./services.module.scss";
 import { fetchServiceProducts } from "@/lib/cms";
 
 interface ServiceType {

src/app/(home)/components/Show/index.tsx

@@ -5,7 +5,7 @@ import { EffectCoverflow } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import { GoChevronLeft, GoChevronRight } from "react-icons/go";
-import styles from "./show.module.css";
+import styles from "./show.module.scss";
 import { fetchVideos } from "@/lib/cms";
 
 interface VideoType {

src/app/about/page.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "./about.module.css";
+import styles from "./about.module.scss";
 import about from "./asset/about.png";
 import aboutIcon1 from "./asset/about_icon1.png";
 import aboutIcon2 from "./asset/about_icon2.png";

src/app/articleDetail/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "./articleDetail.module.css";
+import styles from "./articleDetail.module.scss";
 import { fetchArticleDetail } from "@/lib/cms";
 import { getDesc180 } from "@/lib/parser";
 

src/app/caseList/page.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "./caseList.module.css";
+import styles from "./caseList.module.scss";
 import { fetchArticleList } from "@/lib/cms";
 
 interface ArticleType {

src/app/contactUs/page.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useRef } from "react";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "./contact.module.css";
+import styles from "./contact.module.scss";
 import { addContact } from "@/lib/contact";
 import { ProForm, ProFormInstance } from "@ant-design/pro-components";
 import { Form, Input, Modal } from "antd";

src/app/partner/[id]/page.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "./partner.module.css";
+import styles from "./partner.module.scss";
 import { fetchConsultants, fetchConsultantDetail } from "@/lib/cms";
 import { getDescLast } from "@/lib/parser";
 

src/components/Footer/footer.module.css

@@ -252,7 +252,7 @@
           flex-direction: column;
           gap: 30px;
           align-items: flex-start;
-          width: 100% - 40px;
+          width: calc(100% - 40px);
           padding: 0;
 
           .col-md-3 {

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Image from "next/image";
-import styles from "./footer.module.css";
+import styles from "./footer.module.scss";
 
 const Footer: React.FC = () => {
   return (

src/components/Header/headerMobile.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import styles from "./header.module.css";
+import styles from "./header.module.scss";
 
 const HeaderMobile: React.FC = () => {
   const [showMenu, setShowMenu] = useState("");

src/components/Header/headerPC.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import Link from "next/link";
 import Image from "next/image";
-import styles from "./header.module.css";
+import styles from "./header.module.scss";
 
 const HeaderPC: React.FC = () => {
   return (

src/components/Nav/navMobile.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import styles from "./nav.module.css";
+import styles from "./nav.module.scss";
 
 const NavMobile: React.FC = () => {
   const [showMenu, setShowMenu] = useState("");

src/components/Nav/navPC.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
-import styles from "./nav.module.css";
+import styles from "./nav.module.scss";
 
 interface NavPCProps {
   title: string;