From 354e89c8d131e97210b65b5b7d0e905c2e73c6c1 Mon Sep 17 00:00:00 2001
From: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Date: Tue, 24 Mar 2026 07:51:53 +0700
Subject: [PATCH] Payment app

---
 app/payment/page.tsx   | 22 +++++++++++++++++-----
 components/CartFab.tsx |  2 +-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/payment/page.tsx b/app/payment/page.tsx
index 09d4233..ae27fb5 100644
--- a/app/payment/page.tsx
+++ b/app/payment/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from 'next/link';
 import { useCart } from "@/lib/cart-context";
 
 const formatPrice = (value: number) =>
@@ -30,7 +31,7 @@ export default function PaymentPage() {
               </div>
             ) : (
               <div className="overflow-x-auto">
-                <table className="w-full min-w-[760px] text-sm">
+                <table className="w-full min-w-190 text-sm">
                   <thead>
                     <tr className="bg-(--color-border-light)/40 text-left">
                       <th className="px-4 py-3 font-semibold">Tên sản phẩm</th>
@@ -47,7 +48,7 @@ export default function PaymentPage() {
                         <td className="px-4 py-3 text-(--color-primary) font-semibold">
                           {formatPrice(item.price)}
                         </td>
-                        <td className="px-4 py-3 text-(--color-text-muted) max-w-[280px]">
+                        <td className="px-4 py-3 text-(--color-text-muted) max-w-70">
                           <p className="line-clamp-2">{item.description}</p>
                         </td>
                         <td className="px-4 py-3">
@@ -65,6 +66,7 @@ export default function PaymentPage() {
                               value={item.quantity}
                               onChange={(e) => setQuantity(item.id, Number(e.target.value))}
                               className="w-16 h-8 text-center rounded-lg border border-(--color-border) bg-transparent"
+                              title='Nhập số lượng'
                             />
                             <button
                               onClick={() => increaseQty(item.id)}
@@ -93,7 +95,7 @@ export default function PaymentPage() {
           </div>
         </section>
 
-        <aside className="xl:w-[340px] shrink-0">
+        <aside className="xl:w-85 shrink-0">
           <div className="sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) bg-card p-4 md:p-5">
             <h2 className="text-lg font-bold mb-4">Hóa đơn</h2>
 
@@ -104,7 +106,7 @@ export default function PaymentPage() {
 
             <div className="mt-4 grid grid-cols-2 gap-3">
               <button
-                className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 bg-(--color-primary) text-white hover:bg-(--color-primary-dark) transition-colors"
+                className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 bg-(--color-primary) text-white hover:bg-(--color-primary-dark) transition-colors cursor-pointer"
                 type="button"
               >
                 <i className="fa-solid fa-money-bill-wave"></i>
@@ -112,12 +114,22 @@ export default function PaymentPage() {
               </button>
 
               <button
-                className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors"
+                className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors cursor-pointer"
                 type="button"
               >
                 <i className="fa-solid fa-qrcode"></i>
                 <span className="hidden lg:inline">QR Code</span>
               </button>
+
+              <Link href="/">
+                <button
+                  className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors cursor-pointer"
+                  type="button"
+                >
+                  <i className="fa-solid fa-arrow-rotate-left"></i>
+                  <span className="hidden lg:inline">Quay về</span>
+                </button>
+              </Link>
             </div>
           </div>
         </aside>
diff --git a/components/CartFab.tsx b/components/CartFab.tsx
index dd6fe95..6da4f6d 100644
--- a/components/CartFab.tsx
+++ b/components/CartFab.tsx
@@ -12,7 +12,7 @@ export default function CartFab() {
     <Link
       href="/payment"
       aria-label="Đi đến trang thanh toán"
-      className="fixed right-5 bottom-6 z-[70] w-14 h-14 rounded-full
+      className="fixed right-5 bottom-6 z-70 w-14 h-14 rounded-full
                  bg-(--color-primary) text-white shadow-xl
                  flex items-center justify-center
                  hover:bg-(--color-primary-dark)