/* Product Frames - แสดงเฉพาะกรอบรอบรูปภาพ */
/* เวอร์ชัน 1.2 - แสดงกรอบเฉพาะรอบรูปภาพ ไม่รวมเนื้อหา */
/* ใช้กับหน้า products.html และ index.html */

/* รีเซ็ตสไตล์กรอบเดิม */
.product-with-frame,
.product-with-frame::before,
.product-with-frame::after,
tr.row-with-frame,
tr.row-with-frame td {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
    position: static !important;
    transform: none !important;
}

/* สไตล์สำหรับกรอบรูปภาพ */
.product-with-frame .card-img-top,
.product-with-frame .card img,
.product-with-frame img.card-img-top,
.notebook-detected img,
.index-notebook img,
[class*="notebook"] img,
[id*="notebook"] img,
[class*="laptop"] img,
[id*="laptop"] img {
    border: 3px solid #0ea5e9 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* เอฟเฟกต์ hover */
.product-with-frame .card-img-top:hover,
.product-with-frame .card img:hover,
.product-with-frame img.card-img-top:hover,
.notebook-detected img:hover,
.index-notebook img:hover,
[class*="notebook"] img:hover,
[id*="notebook"] img:hover,
[class*="laptop"] img:hover,
[id*="laptop"] img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.7) !important;
}

/* สไตล์สำหรับกรอบรูปภาพใน Product Frame */
.product-frame img {
    border: 3px solid #0ea5e9 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
    transition: all 0.3s ease !important;
}

.product-frame img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.7) !important;
}

/* เจาะจงสำหรับภาพสินค้า Notebook ในหน้า index.html */
body[id="index"] .card img,
body.index .card img,
body.home .card img,
.notebook-section .card img,
.nb-section .card img,
.laptop-section .card img,
[id*="notebook"] .card img,
[id*="laptop"] .card img {
    border: 3px solid #0ea5e9 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* กรอบภาพในแถวตาราง */
tr.row-with-frame img,
tr.has-product-frame img {
    border: 3px solid #0ea5e9 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* แก้ไขกรณีบางหน้าอาจต้องการความเฉพาะเจาะจงเพิ่มเติม */
[data-product-id^="NB-"] img,
[data-product-id^="Index-NB"] img,
[data-frame-product-id^="NB-"] img,
.notebook-detected img {
    border: 3px solid #0ea5e9 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
}

/* กรณีภาพใน section ที่เกี่ยวข้องกับ notebook */
#notebook-section img,
.notebook-section img,
.nb-section img,
.laptop-section img {
    border: 3px solid #0ea5e9 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
}