/* Product Image Size Adjustment */
/* เวอร์ชัน 1.5 - ปรับขนาดภาพสินค้า ชื่อสินค้า และหัวข้อบทความให้โดดเด่นขึ้น */

/* ปรับขนาดรูปภาพในการ์ด */
body.products-admin-page .card img,
body.products-admin-page .card-img-top,
body.products-admin-page .product-image img,
body.products-admin-page [class*="product"] img,
body.products-admin-page [class*="card"] img {
    max-width: var(--product-image-max-width, 100%) !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important; /* จัดให้อยู่กึ่งกลาง */
    display: block !important; /* ทำให้ margin auto ทำงานได้ */
}

/* สำหรับภาพสินค้าในหน้า products */
body.products-admin-page .index-product img,
body.products-admin-page .home-product img,
body.products-admin-page .card img {
    max-width: var(--product-image-max-width, 100%) !important;
    transition: transform 0.3s ease;
}

/* ปรับขนาดภาพในแถวตาราง */
body.products-admin-page tr img {
    max-width: var(--product-image-max-width, 100%) !important;
    height: auto !important;
}

/* ปรับขนาดภาพโน้ตบุ๊ก */
body.products-admin-page .notebook-image-frame,
body.products-admin-page [class*="notebook"] img,
body.products-admin-page [id*="notebook"] img,
body.products-admin-page [class*="laptop"] img {
    max-width: var(--product-image-max-width, 100%) !important;
}

/* แก้ไขสำหรับรูปภาพที่อาจโดนกระทบจากสไตล์อื่น */
body.products-admin-page .card-img-top.product-image-frame,
body.products-admin-page .card img.notebook-image-frame {
    max-width: var(--product-image-max-width, 100%) !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* ปรับขนาดชื่อสินค้าในหน้า products.html */
body.products-admin-page [class*="product-name"],
body.products-admin-page [class*="product-title"],
body.products-admin-page .card-body h5,
body.products-admin-page .card-body h4,
body.products-admin-page .card .title {
    font-size: 12px !important; /* ปรับให้ขนาดมาตรฐานและสม่ำเสมอ */
    line-height: 1.35 !important; /* ระยะห่างสบายตา */
    margin-bottom: 0.75rem !important; /* เผื่อพื้นที่หายใจด้านล่าง */
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important; /* จำกัดจำนวนบรรทัด */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #0066cc !important; /* เพิ่มสีฟ้าเข้มให้ชื่อสินค้า */
}

/* ปรับขนาดเนื้อหาส่วนย่อยหรือคุณสมบัติสินค้าให้เล็กลง 15% */
body.products-admin-page .card-body p,
body.products-admin-page .product-specs,
body.products-admin-page .product-features,
body.products-admin-page [class*="product-specs"],
body.products-admin-page [class*="product-features"],
body.products-admin-page [class*="specs"],
body.products-admin-page .card-body .text-muted,
body.products-admin-page .card-body small,
body.products-admin-page .card-body .small,
body.products-admin-page .card .description {
    font-size: 85% !important; /* ลดขนาดลง 15% */
    line-height: 1.2 !important; /* ปรับระยะห่างระหว่างบรรทัด */
    margin-bottom: 0.4rem !important; /* ลดระยะห่างด้านล่าง */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* จำกัดจำนวนบรรทัด */
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #666 !important; /* สีที่อ่อนลงเล็กน้อย */
}

/* ปรับหัวข้อบทความให้ชัดเจนและอ่านง่าย */
.article-title,
.blog-title,
article h1,
article h2,
.blog h1,
.blog h2,
.news-title,
.post-title,
[class*="article"] h1,
[class*="article"] h2,
[class*="blog"] h1,
[class*="blog"] h2,
[class*="post"] h1,
[class*="post"] h2,
[class*="news"] h1,
[class*="news"] h2,
.article .title,
.blog .title,
.post .title,
.blog-card .blog-title,
.card-blog .title,
.blog-content .blog-title,
.blog-content-card .blog-title,
.blog-content-card h2,
.blog-content-card h3,
.บทความล่าสุด h2,
.บทความล่าสุด h3,
.บทความล่าสุด .title,
#latestPosts .title,
#latestArticles .title,
#blogSection .title,
.blog-section .title,
.blog-section h1,
.blog-section h2,
.blog-section h3 {
    font-size: 14px !important; /* ปรับให้ชัดเจน อ่านง่าย */
    line-height: 1.35 !important; /* ระยะห่างสบายตา */
    margin-bottom: 0.75rem !important; /* เว้นระยะหายใจให้หัวข้อ */
    font-weight: 700 !important; /* เน้นหัวข้อให้เด่น */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
