single blog table and center image + border radius

src/app/dmag/components/SingleBlogPage.tsx

@@ -27,7 +27,7 @@ const SingleBlogPage: FC<Props> = ({ id }) => {
 
             <div className='mt-10 flex xl:flex-row flex-col gap-8'>
                 <div className='flex-1 bg-white rounded-4xl p-10'>
-                    <div className='flex gap-4'>
+                    <div className='flex xl:flex-row flex-col gap-4'>
                         <div className='flex gap-1'>
                             <div className='size-5 overflow-hidden rounded-full'>
                                 <Image

src/app/globals.css

@@ -120,6 +120,106 @@ tbody tr {
   color: #ea063e !important;
 }
 
+/* استایل‌های تصاویر داخل محتوای بلاگ */
+#blog-content img {
+  display: block;
+  margin: 16px auto;
+  max-width: 100%;
+  height: auto;
+  border-radius: 32px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* استایل‌های جدول برای محتوای بلاگ */
+#blog-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+#blog-content table td {
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 1.5;
+}
+
+#blog-content table tr:first-child td {
+  background-color: #70ad47;
+  color: white;
+  font-weight: bold;
+}
+
+#blog-content table tr:nth-child(even) td {
+  background-color: #c5e0b3;
+  color: black;
+}
+
+#blog-content table tr:nth-child(odd):not(:first-child) td {
+  background-color: #e2efd9;
+  color: black;
+}
+
+/* استایل‌های ریسپانسیو برای موبایل */
+@media screen and (max-width: 768px) {
+  #blog-content table {
+    font-size: 12px;
+    margin: 12px 0;
+  }
+
+  #blog-content table td {
+    padding: 8px 4px;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+
+  /* برای جداول عریض در موبایل */
+  #blog-content table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: thin;
+    scrollbar-color: #ccc transparent;
+  }
+
+  #blog-content table::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  #blog-content table::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+
+  #blog-content table::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+  }
+
+  #blog-content table::-webkit-scrollbar-thumb:hover {
+    background: #aaa;
+  }
+
+  #blog-content table tbody,
+  #blog-content table thead,
+  #blog-content table tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  #blog-content table td {
+    white-space: normal;
+    min-width: 120px;
+  }
+}
+
 .overflowX {
   overflow-x: scroll;
   scrollbar-width: none;
@@ -309,6 +409,6 @@ tbody tr {
   top: 55% !important;
 }
 
-.swiper-button-prev { 
+.swiper-button-prev {
   top: 55% !important;
 }