responsive

src/app/globals.css

@@ -822,3 +822,11 @@ html {
 .dark .ql-editor {
   color: #f3f4f6;
 }
+
+/* Fix scrollbar jump for modals (SweetAlert2, Headless UI, etc.) */
+body.swal2-shown,
+body.modal-open,
+body[data-scroll-locked] {
+  padding-right: 0 !important;
+  margin-right: 0 !important;
+}

src/app/user/about-us/page.tsx

@@ -46,7 +46,7 @@ export default function LandingPage() {
 
   return (
     // Sử dụng tông màu Vàng cổ (Parchment) và Xanh rêu (Dark Slate Green)
-    <div className="relative min-h-screen w-full text-[#2D3A3A] font-sans selection:bg-[#A88B4C] selection:text-white overflow-x-hidden">
+    <div className="relative min-h-screen max-w-[1200px] mx-auto text-[#2D3A3A] font-sans selection:bg-[#A88B4C] selection:text-white overflow-x-hidden">
       {/* --- BACKGROUND IMAGE --- */}
       <div className="fixed inset-0 -z-20 pointer-events-none">
         <Image
@@ -65,20 +65,6 @@ export default function LandingPage() {
         <div className="text-xl font-bold tracking-widest text-[#2D3A3A] uppercase">
           <span className="text-[#A88B4C]">Geo</span>History
         </div>
-        <nav className="flex gap-4 items-center">
-          <Link
-            href="/auth/signin"
-            className="text-sm font-semibold text-[#2D3A3A] hover:text-[#A88B4C] transition-colors"
-          >
-            Đăng nhập
-          </Link>
-          <Link
-            href="/user"
-            className="text-sm font-semibold px-4 py-2 bg-[#2D3A3A] text-[#FDFBF7] rounded-lg hover:bg-[#1a2323] transition-colors"
-          >
-            Vào Hệ thống
-          </Link>
-        </nav>
       </header>
 
       <main className="max-w-6xl mx-auto px-6 pt-32 pb-24 flex flex-col gap-32 w-full relative">

src/app/user/account/page.tsx

@@ -33,8 +33,8 @@ export default function Profile() {
   return (
     <div>
       <StickyHeader header={`Thông tin tài khoản`} />
-      <div className="p-6 my-8 flex mx-auto ">
+      <div className="md:px-12 flex mx-auto ">
-        <div className="max-w-82 pr-4 border-r border-gray-300">
+        <div className="xl:max-w-82 pr-4 border-r border-gray-300 md:max-w-72">
           <UserMetaCard data={user ?? {}} />
           <UserInfoCard data={{ ...user, openEdit: true }} />
           <AccountDetails data={user ?? {}} />

src/app/user/layout.tsx

@@ -44,7 +44,7 @@ export default function AdminLayout({
         className={`flex-1 transition-all  duration-300 ease-in-out ${mainContentMargin}`}
       >
         {/* <AppHeader /> */}
-        <div className="mx-auto max-w-(--breakpoint-2xl)">{children}</div>
+        <div className="mx-auto p-4 pt-0 max-w-[1240px]">{children}</div>
       </div>
       <ChatbotWidget />
     </div>

src/app/user/page.tsx

@@ -15,14 +15,14 @@ export const metadata: Metadata = {
 
 export default function Ecommerce() {
   return (
-    <div className="grid grid-cols-12 gap-4 md:gap-6">
+    <div className="grid grid-cols-12 gap-4 md:gap-6 2xl:gap-8">
-      <div className="col-span-12 space-y-6 xl:col-span-7">
+      <div className="col-span-12 space-y-6 xl:col-span-7 2xl:col-span-8">
         <EcommerceMetrics />
 
         <MonthlySalesChart />
       </div>
 
-      <div className="col-span-12 xl:col-span-5">
+      <div className="col-span-12 xl:col-span-5 2xl:col-span-4">
         <MonthlyTarget />
       </div>
 
@@ -30,11 +30,11 @@ export default function Ecommerce() {
         <StatisticsChart />
       </div>
 
-      <div className="col-span-12 xl:col-span-5">
+      <div className="col-span-12 xl:col-span-5 2xl:col-span-4">
         <DemographicCard />
       </div>
 
-      <div className="col-span-12 xl:col-span-7">
+      <div className="col-span-12 xl:col-span-7 2xl:col-span-8">
         <RecentOrders />
       </div>
     </div>