Edit style.css

style.css

@@ -14,7 +14,7 @@ body {
     padding: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
-    text-align: center; /* ทำให้เนื้อหาใน container อยู่ตรงกลาง */
+    text-align: center;
 }
 
 /* หัวข้อ */
@@ -25,8 +25,9 @@ h2 {
 
 /* ตารางสินค้า */
 .table-container {
-    width: 80%; /* จำกัดความกว้างของตาราง */
-    margin: auto; /* จัดให้อยู่ตรงกลาง */
+    width: 80%;
+    margin: auto;
+    overflow-x: auto; /* ป้องกันการล้นของตาราง */
 }
 
 table {
@@ -40,7 +41,7 @@ table, th, td {
 }
 
 th, td {
-    padding: 10px;
+    padding: 12px;
     text-align: center;
 }
 
@@ -49,37 +50,18 @@ th {
     color: white;
 }
 
-/* ฟอร์ม */
-form {
-    text-align: center;
-    margin: 20px 0;
-}
-
-input, button {
-    padding: 10px;
-    margin: 5px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-button {
-    background-color: #28a745;
+/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */
+.qty-btn {
+    padding: 5px 10px;
+    background-color: #007BFF;
     color: white;
+    border: none;
     cursor: pointer;
+    border-radius: 5px;
 }
 
-button:hover {
-    background-color: #218838;
-}
-
-/* ลิงก์ */
-a {
-    text-decoration: none;
-    color: #007BFF;
-}
-
-a:hover {
-    text-decoration: underline;
+.qty-btn:hover {
+    background-color: #0056b3;
 }
 
 /* ปุ่มลบ */
@@ -92,44 +74,22 @@ a:hover {
     color: darkred;
 }
 
-/* ตะกร้าสินค้า */
-.cart-container {
-    max-width: 600px;
-    margin: auto;
-}
-
-.cart-container table {
-    width: 100%;
-}
-
-.cart-container th, .cart-container td {
-    padding: 10px;
-}
-
-/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */
-.qty-btn {
-    padding: 5px 10px;
-    background-color: #007BFF;
-    color: white;
-    border: none;
-    cursor: pointer;
-    border-radius: 5px;
-}
-
-.qty-btn:hover {
-    background-color: #0056b3;
+/* ปุ่มชำระเงิน */
+.checkout-container {
+    text-align: center;
+    margin-top: 20px;
 }
 
-/* ปุ่มชำระเงิน */
 .checkout-btn {
-    display: block;
-    width: 100%;
-    text-align: center;
+    display: inline-block;
+    width: auto;
     background-color: #ffc107;
-    padding: 10px;
+    padding: 12px 20px;
     border-radius: 5px;
     font-size: 18px;
     color: black;
+    font-weight: bold;
+    text-decoration: none;
 }
 
 .checkout-btn:hover {