.btn-modern.add-to-cart-btn.is-added {
    background-color: #28a745 !important; /* ສີຂຽວ */
    color: #fff !important;
    border: none !important;
}
 .card-thumbnails { display: flex; gap: 5px; margin-bottom: 8px; height: 35px; overflow: hidden; }
 .card-thumb-img { width: 35px; height: 35px; object-fit: cover; border: 1px solid #ddd; border-radius: 2px; cursor: pointer; transition: all 0.2s; }
 .card-thumb-img:hover { border-color: #D32F2F; opacity: 0.8; }
 .section-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 5px; margin-top: 10x; border-bottom: 1px solid #f0f0f0; background: #fff; }
 .section-title-group { display: flex; align-items: center; gap: 10px; }
 @media (max-width: 767px) { .section-head { padding-left: 20px !important; padding-right: 15px !important; } }
 .section-title-text { font-size: 20px; font-weight: 700; text-transform: uppercase; color: #333; margin: 0; }
 .section-icon { color: var(--primary-color); font-size: 20px; }
 .view-more-link { font-size: 14px; color: var(--primary-color); text-decoration: none; display: flex; align-items: center; transition: opacity 0.3s; }
 .view-more-link:hover { color: #b71c1c; text-decoration: none; opacity: 0.8; }
 .view-more-link i { margin-left: 5px; font-size: 12px; }
 @media (min-width: 768px) { .col-custom-8 { width: 12.5%; float: left; padding: 0 5px; } .col-custom-8 .modern-product-card .card-title { font-size: 13px; height: 38px; margin-bottom: 5px; white-space: normal; line-height: 1.3; } .col-custom-8 .modern-product-card .price-current { font-size: 15px; font-weight: 700; margin-bottom: 5px; } .col-custom-8 .modern-product-card .price-original { display: none; } .col-custom-8 .card-actions { display: block; } .col-custom-8 .btn-modern { width: 100%; font-size: 12px; padding: 6px 0; margin-top: 5px; border-radius: 4px; } .col-custom-8 .btn-modern i { display: none; } }
 @media (min-width: 768px) and (max-width: 991px) { .col-custom-8 { width: 25%; float: left; padding: 0 5px; } }
 #recommended-item-carousel .carousel-control { width: 4%; background: none; }
 #recommended-item-carousel .carousel-control i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--primary-color); color: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 16px; }
 :root { --primary-color: #D32F2F; --text-color: #333; --gray-color: #f4f4f4; }
 .modern-product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.3s ease; border: 1px solid #eee; position: relative; display: flex; flex-direction: column; height: 100%; }
 .modern-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.12); transform: translateY(-5px); }
 .card-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform 0.5s ease; }
 .modern-product-card:hover .card-img-wrap img { transform: scale(1.05); }
 .badge-sale { position: absolute; top: 10px; left: 10px; background: var(--primary-color); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: bold; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
 .card-body { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
 .card-title { font-size: 14px; color: var(--text-color); margin-bottom: 4px; margin-top: 4px;font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; }
 .card-price { margin-bottom: 10px; }
.price-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1; /* ลดระยะห่างระหว่างบรรทัดลง */
}
.price-current {
    display: inline-block; /* เปลี่ยนจาก block เป็น inline-block */
    color: #D32F2F;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px; /* ระยะห่างระหว่างราคาส่วนลดกับราคาเต็ม */
}
.price-original {
    color: #aaa;
    text-decoration: line-through;
    font-size: 11px;
}

.discount-text {
    color: #D32F2F;
    font-size: 11px;
    font-weight: bold;
    margin-left: 3px;

}

@media (max-width: 767px) {
    .price-current { font-size: 15px; }
    .old-price-line { font-size: 10px; }
}
 .modern-product-card .card-body { display: flex; flex-direction: column; padding: 10px; height: 100%; }
 .card-actions { display: flex; gap: 8px; }
 .btn-modern { flex: 1; border: 1px solid #eee; background: #fff; color: #555; padding: 8px 0; border-radius: 6px; text-align: center; transition: all 0.2s; font-size: 14px; cursor: pointer; }
 .btn-modern:hover { background: #f4f4f4; color: var(--text-color); }
 .btn-cart { background: var(--primary-color); color: #fff; border: none; }
 .btn-cart:hover { background: #b71c1c; color: #fff; box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3); }
 .btn-variant { background: #333; color: #fff; border: none; }
 .btn-variant:hover { background: #000; color: #fff; }
 .banner-separator { margin: 20px 0; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
 .banner-separator img { width: 100%; height: auto; display: block; object-fit: cover; }
 .banner-separator a { display: block; }
 .banner-separator:hover { opacity: 0.95; transition: opacity 0.3s; }
 .product-status-labels { margin-bottom: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
 .price-tag-row {
    display: flex;
    flex-wrap: wrap; /* ป้องกันป้ายเบียดกับราคาบนจอมือถือเล็กๆ */
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}
 .status-tag { display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: bold; color: #fff; border-radius: 3px; text-transform: uppercase; }
 .tag-out { background-color: #999; }
 .tag-sale { background-color: #D32F2F; }
 .tag-ready { background-color: #ffebee; color: #d32f2f; border: 1px solid #ffcdd2; }
 .tag-popular { background-color: #ff9800; color: #fff; }

/* กรอบหลักสีแดง */
/* 1. กรอบหลักสีแดง (กำหนดความสูงตายตัวที่ 100px) */
/* 1. ขยายความสูงแถบหลักเป็น 120px (จากเดิม 100px) */
/* =========================================================
   1. STYLE ส่วนกลาง (ใช้ร่วมกันทั้ง 2 แบนเนอร์)
   ========================================================= */

/* สไตล์รูปสินค้าวงกลม */
.mini-product-img {
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.mini-product-link {
    display: inline-block;
    text-decoration: none;
}
.mini-product-link:hover {
    transform: scale(1.1); /* ขยายเมื่อชี้ */
}



}


/* =========================================================
   3. GENERAL BAR: แบนเนอร์สินค้าทั่วไป (สีฟ้า/เขียว - แบบยาว)
   ========================================================= */
.general-bar {
    /* สีพื้นหลังกำหนดใน HTML (style="...") หรือจะใส่ตรงนี้ก็ได้ */
    border-radius: 8px;
    padding: 0 30px;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 25px;
    margin-top: 20px;
}

/* ฝั่งซ้าย */
.general-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
}
.general-header h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.general-header span { font-size: 14px; opacity: 0.9; }

/* ปุ่มดูทั้งหมด */
.btn-view-all {
    background: rgba(255,255,255,0.2);
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
    transition: 0.3s;
}
.btn-view-all:hover { background: #fff; color: #333; }

/* ฝั่งขวา: รูปสินค้า */


/* =========================================================
   4. MOBILE RESPONSIVE: ปรับแต่งมือถือ (รวมทั้ง 2 แบบ)
   ========================================================= */

.card-img-wrap {
    position: relative; /* Essential for absolute positioning of the ribbon */
    overflow: hidden; /* Important to hide the part of the ribbon that goes outside the box */
}

/* The main ribbon wrapper (will hold the text) */
.ribbon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100px; /* Width of the entire banner box */
    height: 100px; /* Height of the entire banner box */
    z-index: 10; /* Make sure it's above the image */
    pointer-events: none; /* Allows clicks to go through to the product link */
}

/* The actual ribbon element (rotated and positioned) */
.ribbon {
    position: absolute;
    top: 15px; /* Position down a bit */
    left: -25px; /* Position left a bit */
    width: 150px; /* Length of the visible ribbon */
    padding: 2px 0;
    background-color: #D32F2F; /* Default: Sale/Discount color */
    color: white;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    transform: rotate(-45deg);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    text-transform: uppercase;
}

/* Specific colors for different status tags/ribbons */
.ribbon-out .ribbon {
    background-color: #757575; /* Gray for Out of Stock */
}
.ribbon-ready .ribbon {
    background-color: #4CAF50; /* Green for Ready/New */
}
.ribbon-popular .ribbon {
    background-color: #FF9800; /* Orange for Recommended */
}
/* .ribbon-sale uses the default red #D32F2F */


/* Redefine card-actions to be the combined Price/Button row */
.modern-product-card .card-actions {
    display: flex;
    justify-content: space-between; /* Price left, Button right */
    align-items: center;
    padding-top: 5px; 
    padding-bottom: 0; /* Remove bottom padding if any */
}

/* Price Box should take the remaining space */
.modern-product-card .card-body .price-box {
    flex-grow: 1;
    text-align: left;
    margin-right: 10px;
    white-space: nowrap; /* Prevent prices/discounts from wrapping weirdly */
}

/* Style for the Icon-Only Cart/Variant Buttons */
.modern-product-card .card-actions a.btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px !important; /* Fixed width for icon-only button */
    height: 38px; /* Fixed height for icon-only button */
    padding: 0;
    margin: 0;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1; 
    flex-shrink: 0; /* Prevent shrinking the button */
    font-size: 16px;
}

/* Hide the text in the icon-only 'Add to Cart' button */
.modern-product-card .card-actions a.btn-cart span {
    display: none;
}
.modern-product-card .card-actions a.btn-cart i {
    margin: 0; /* Remove margin from icon */
}

/* Style for 'Out of Stock' and 'Select Variant' buttons (full width with text) */
/* We target the element with width:100% in the style attribute */
.modern-product-card .card-actions a.btn-modern[style*="width:100%"] {
    width: 100% !important;
    display: flex;
    text-align: center;
    padding: 8px 10px; /* Add padding back for text button */
    height: auto;
    font-size: 14px;
}
/* Show icon and text for full-width buttons */
.modern-product-card .card-actions a.btn-modern[style*="width:100%"] span {
    display: inline;
}
.modern-product-card .card-actions a.btn-modern[style*="width:100%"] i {
    margin-right: 5px; /* Space between icon and text */
}

/* Ensure 'Select Group/Variant' button shows text when full-width */
.modern-product-card .card-actions a.btn-variant[style*="width:100%"] span {
    display: inline;
}

@media (max-width: 768px) {
.modern-product-card .card-actions {
    display: flex;
    justify-content: space-between; /* Price left, Button right */
    align-items: center;
    padding-top: 2px; 
    padding-bottom: 0; /* Remove bottom padding if any */
}
}