/* ==========================================================================
   SIMPLE SHOP UNIFIED STYLESHEET
   Contains: Shop Grid, Tabs, Category Archive Layouts, and Single Product Layouts
   ========================================================================== */

/* ==========================================================================
   PART 1: SHOP ARCHIVE & GRID SYSTEM (From simple_shop.css)
   ========================================================================== */
/* Reset đơn giản */
.sshop-tab-container,
.sshop-tab-menu,
.sshop-tab-item,
.sshop-tab-content,
.sshop-product {
    box-sizing: border-box;
}

/* Container tổng của toàn bộ khu vực tab */
.sshop-tab-container {
    margin-bottom: 30px;
    /*font-family: Arial, sans-serif;*/
}

/* Thanh menu tab: ngang, cuộn được trên mobile */
.sshop-tab-menu {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    /*border-bottom: 1px solid #ddd;*/
    margin-bottom: 10px;
    padding-bottom: 5px;
    scrollbar-width: none;
}
.sshop-tab-menu::-webkit-scrollbar {
    display: none;
}

/* Mỗi tab */
.sshop-tab-item {
    flex-shrink: 0;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #333;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px 4px 0 0;
}
.sshop-tab-item:hover {
    color: #1f2937;
    border-bottom: 2px solid #ccc;
}
.sshop-tab-item.active {
    background-color: #fdc236;
    color: #1f2937;
    font-weight: 600;
}


/* Nội dung tab (ẩn/hiện) */
.sshop-tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sshop-tab-content.active {
    display: block;
    opacity: 1;
}

/* Fade hiệu ứng khi chuyển tab */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grid sản phẩm */
.sshop-products-grid {
    display: grid;
    gap: 20px;
}

/* Tuỳ biến số cột qua shortcode */
.sshop-columns-2 .sshop-products-grid {
    grid-template-columns: repeat(2, 1fr);
}
.sshop-columns-3 .sshop-products-grid {
    grid-template-columns: repeat(3, 1fr);
}
.sshop-columns-4 .sshop-products-grid {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
    .sshop-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .sshop-products-grid {
        grid-template-columns: 1fr;
    }
}

/* Box sản phẩm */
.sshop-product {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background: #fff;
    transition: box-shadow 0.3s ease;
}
.sshop-product:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Ảnh sản phẩm */
.sshop-product img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* Tên sản phẩm */
.sshop-product-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

/* Giá sản phẩm */
.sshop-product-price {
    font-size: 14px;
    color: #0073aa;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Nút đặt hàng */
.sshop-order-button {
    display: inline-block;
    background: #0073aa;
    color: white;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s ease;
}
.sshop-order-button:hover {
    background: #005f8d;
}
/* Khung từng thẻ sản phẩm */
/* Khung từng thẻ sản phẩm */
.sshop-product-card {
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sshop-product-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}

/* Bọc nội dung */
.sshop-product-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Khóa cứng kích thước khung chứa ảnh */
.sshop-product-image {
    width: 100% !important;
    height: 220px !important; /* Đặt chiều cao cố định cho tất cả các thẻ */
    overflow: hidden !important;
    background-color: #ffffff;
    display: block !important;
}

/* Ép ảnh cắt cúp vừa khung, chống bóp méo */
.sshop-product-image img {
    width: 100% !important;
    height: 100% !important; /* Phải để 100% để nó lấy chiều cao 220px từ thằng cha */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Nội dung */
.sshop-product-info {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Giới hạn tiêu đề chuẩn 3 dòng */
.sshop-product-title,
.sshop-product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Cắt chữ đúng 3 dòng */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    /* Thiết lập font */
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    
    /* Ép khung chữ giữ cố định khoảng trống dù có 1 dòng hay 3 dòng */
    min-height: calc(13px * 1.4 * 3) !important; 
}

/* Giá */
.sshop-product-price {
    font-size: 16px;
    color: #fdc236;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Hotline */
.sshop-product-hotline {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 14px;
}
.sshop-product-hotline a {
    color: #111827;
    text-decoration: none;
    font-weight: 500;
}
.sshop-product-hotline a:hover {
    text-decoration: underline;
}

/* Hành động */
.sshop-product-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Nút đặt hàng */
.sshop-order-btn {
    background-color: #fdc236;
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.sshop-order-btn:hover {
    background-color: #e5b221;
}

/* Nút Facebook */
.sshop-fb-msg {
    background-color: #1877f2;
    color: white;
    text-align: center;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}
.sshop-fb-msg:hover {
    background-color: #145dbf;
}

/* Lưới sản phẩm (nếu chưa có) */
.sshop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.sshop-tab-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    margin-bottom: 10px;
    cursor: pointer;
    color: #fdc236;
}

.sshop-tab-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
    border-bottom: 1px solid #ddd;
}

.sshop-tab-menu-wrapper {
    overflow-x: auto;
    flex: 1;
}

.sshop-tab-controls {
    display: flex;
    gap: 6px;
    position: relative;
    margin-bottom: 20px;
}

.sshop-tab-nav {
    background: none;
    border: 1px solid #fdc236;
    color: #fdc236;
    font-size: 18px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.sshop-tab-nav:hover {
    background: #fdc236;
    color: #fff;
}
.sshop-tab-nav svg {
    width: 16px;
    height: 16px;
}
.ss-archive-product {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 30px auto;
    position: relative;
}
/* Layout 3 cột */
.sshop-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
}
.custom-search-form {
    display: flex;
    width: 100%;
    max-width: 300px;
    border: 1px solid #e0e0e0;
}

.custom-search-form .search-field {
    flex: 1;
    padding: 5px;
    border: none;
    outline: none;
}

.custom-search-form .search-submit {
    background-color: #ffc400;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-search-form .search-submit .dashicons {
    font-size: 18px;
    color: white;
}

/* Style the cart table */
.simple-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
}

.simple-cart-table th, .simple-cart-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.simple-cart-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.simple-cart-table td input[type="number"] {
    width: 60px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.simple-cart-table td button {
    background-color: transparent;
    color: black;
    border: none;
    padding: 5px 10px;
    border-radius:50%;
    cursor: pointer;
}

.simple-cart-table td button:hover {
    background-color: #fdc236;
}

/* Cart totals and buttons */
.simple-cart-totals {
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
}

.simple-cart-buttons {
    margin-top: 25px;
}

.simple-cart-buttons .button {
    background-color: #fff;
    color: #fdc236;
    border: 1px solid #fdc236;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

.simple-cart-buttons button:hover {
    background-color:#fdc236;
    color: white;
}

/* Empty cart message */
.simple-cart-empty {
    font-size: 18px;
    color: #777;
    text-align: center;
    padding: 20px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .simple-cart-table th, .simple-cart-table td {
        padding: 8px;
    }

    .simple-cart-table td input[type="number"] {
        width: 50px;
    }

    .simple-cart-buttons button {
        width: 100%;
        margin-bottom: 10px;
    }
}
/* Checkout form styles */
.simple-checkout {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.simple-checkout h1 {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
}

.simple-checkout h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.simple-checkout label {
    font-size: 16px;
    margin-right: 15px;
    display: inline-block;
}

.simple-checkout input[type="text"],
.simple-checkout input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.simple-checkout input[type="radio"] {
    margin-right: 5px;
}

.simple-checkout button {
    width: 100%;
    padding: 15px;
    background-color: #fdc236;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.simple-checkout button:hover {
    background-color: #fff;
    color: #fdc236;
    border: 1px solid #fdc236;
}

.simple-checkout p {
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    font-weight: bold;
}
/* Thank you page styles */
.simple-thank-you {
    background-color: #f9f9f9;
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

.simple-thank-you h1 {
    font-size: 28px;
    color: #4CAF50;
    text-align: center;
}

.simple-thank-you h2 {
    font-size: 22px;
    color: #333;
    margin-top: 20px;
}

.simple-thank-you p {
    font-size: 16px;
    color: #555;
}

.simple-thank-you p strong {
    font-weight: bold;
    color: #333;
}

.simple-thank-you ul {
    list-style-type: none;
    padding-left: 0;
}

.simple-thank-you ul li {
    font-size: 16px;
    margin: 8px 0;
}

.simple-thank-you p {
    margin-top: 20px;
    font-size: 16px;
}

.simple-thank-you .thank-you-message {
    font-size: 18px;
    color: #777;
    text-align: center;
    margin-top: 30px;
}
.simple-missing {
    background-color: #f9f9f9;
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Layout mặc định 4 cột, responsive 2 cột và 1 cột */
.sshop-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* mặc định 4 cột */
    gap: 24px;
    margin-top: 20px;
}
.ss-content-area .sshop-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* mặc định 3 cột */
    gap: 24px;
    margin-top: 20px;
}
.ss-pagination {
    text-align: center;
    margin-top: 30px;
}

.ss-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.ss-pagination .page-numbers.current,
.ss-pagination .page-numbers:hover {
    background: #333;
    color: #fff;
}

@media (max-width: 768px) {
    .sshop-columns-4 .sshop-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ss-content-area .sshop-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 20px;
    }
    .ss-content-area {
        flex: 0 0 0% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .ss-sidebar {
        flex: 0 0 0% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .custom-search-form {
        display: flex;
        width: 100%;
        max-width: 100%;
        border: 1px solid #e0e0e0;
    }
}
/* ==========================================================================
   PRODUCT ARCHIVE GRID UNIFORMITY (Synchronized with archive.php)
   ========================================================================== */

/* Force advanced grid mechanism with auto-filling rows */
.ss-content-area .sshop-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important; /* Stretch cards to match exact height per row */
}

/* Base structure configuration for product items/cards */
.sshop-products-grid .sshop-product,
.sshop-products-grid .sshop-product-card,
.sshop-products-grid .inner-box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Enforce absolute image resolution matching without visual squishing */
.sshop-products-grid .sshop-product .image a img,
.sshop-products-grid .sshop-product img,
.sshop-products-grid img.wp-post-image {
    width: 100% !important;
    height: 260px !important; /* Fixed dimensional height threshold */
    object-fit: cover !important; /* Automatically crop and fill the frame cleanly */
    display: block !important;
}

/* Fluid inner information block expansion */
.sshop-products-grid .sshop-product .product-info,
.sshop-products-grid .sshop-product .product-details,
.sshop-products-grid .sshop-product .inner-box > div:not(.image) {
    padding: 20px !important;
    flex-grow: 1 !important; /* Dynamically expand to align elements and purchase buttons perfectly */
    display: flex !important;
    flex-direction: column !important;
}

/* Enforce maximum 3 lines restriction for product title headers */
.sshop-products-grid .sshop-product .product-title,
.sshop-products-grid .sshop-product h3,
.sshop-products-grid .sshop-product h3 a,
.sshop-products-grid .sshop-product h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Truncate title string safely at line 3 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    min-height: 4.2em; /* Establishes visual baseline sync */
}

/* Enforce maximum 5 lines restriction for product short description/excerpts */
.sshop-products-grid .sshop-product .product-excerpt,
.sshop-products-grid .sshop-product .product-description,
.sshop-products-grid .sshop-product p,
.sshop-products-grid .sshop-product .text {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important; /* Truncate text string safely at line 5 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--text-muted, #666) !important;
    margin-bottom: 15px !important;
}

/* Push pricing structure and actions to the absolute card base layer */
.sshop-products-grid .sshop-product .price,
.sshop-products-grid .sshop-product .product-row-container {
    margin-top: auto !important; /* Forces the control bar to sit flush at the bottom */
    padding-top: 15px;
}
/* ==========================================================================
   PRODUCT GRID & CARD COMPONENT ALIGNMENT (Fixes image sizing & text line-clamp)
   ========================================================================== */

/* Ensure all row blocks stretch evenly to match maximum item height */
.sshop-products-grid,
.ss-content-area .sshop-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important; /* Forces uniform column height per row */
}

/* Convert inner box to column flex model to distribute height components */
.sshop-products-grid .inner-box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sshop-products-grid .inner-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Standardize product image window dimensions uniformly */
.sshop-products-grid .inner-box .image,
.sshop-products-grid .inner-box .image a {
    display: block !important;
    width: 100% !important;
    height: 240px !important; /* Fixed viewport dimensional layout height */
    overflow: hidden !important;
    background-color: #f8f9fa;
}

.sshop-products-grid .inner-box .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Preserves aspect ratio dynamically by center cropping */
    transition: transform 0.5s ease;
}

.sshop-products-grid .inner-box:hover .image img {
    transform: scale(1.04);
}

/* Distribute lower content panel elements properly */
.sshop-products-grid .inner-box .lower-content,
.sshop-products-grid .inner-box > div:not(.image) {
    padding: 20px !important;
    flex-grow: 1 !important; /* Expands dynamically to flush action buttons downwards */
    display: flex !important;
    flex-direction: column !important;
}

/* Limit dynamic product title heading text to exactly 3 lines max */
.sshop-products-grid .inner-box h3,
.sshop-products-grid .inner-box h3 a,
.sshop-products-grid .inner-box .product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Native structural truncation line count */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #111111 !important;
    margin: 0 0 10px 0 !important;
    text-decoration: none !important;
    min-height: 4.2em; /* Syncs vertical layout flow regardless of single-line titles */
}

/* Limit dynamic short description/excerpt text block to exactly 4 lines max */
.sshop-products-grid .inner-box .text,
.sshop-products-grid .inner-box p,
.sshop-products-grid .inner-box .product-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; /* Truncates long paragraphs safely at line 4 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #666666 !important;
    margin-bottom: 15px !important;
}

/* Push dynamic pricing matrices and checkout items perfectly flush against card baseline */
.sshop-products-grid .inner-box .product-row-container,
.sshop-products-grid .inner-box .price {
    margin-top: auto !important; /* Auto margins drop elements down cleanly inside column flex */
    padding-top: 12px !important;
}

/* ==========================================================================
   PART 2: SINGLE PRODUCT & QUICK ORDER LAYOUTS (From single_shop.css)
   ========================================================================== */
.ss-contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-between;
    margin-bottom: 5px;
}
.ss-contact-buttons .ss-hotline,
.ss-contact-buttons .ss-facebook {
    flex: 0 0 48%; /* Mỗi cột chiếm ~50% */
    box-sizing: border-box;
}

.ss-contact-buttons .ss-hotline a,
.ss-contact-buttons .ss-facebook a {
    display: block;
    text-align: center;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
}

/* button quick order */
.ss-quick-order {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin-top: 10px;
}

.ss-quick-order .ss-form-cart {
    flex: 0 0 48%; /* Chia đều 2 cột với khoảng cách */
    box-sizing: border-box;
}

.ss-quick-order .ss-form-cart form {
    width: 100%;
}

.ss-btn.ss-order-btn {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    background-color: #fdc236;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.3s ease;
    text-align: center;
}
.ss-btn.ss-single {
    background-color: #fff;
    color: #fdc236;
    border: 1px solid #fdc236;
}
.ss-btn.ss-single:hover {
    background-color: #fdc236;
    color: #fff;
    border: 1px solid #fdc236;
}
.button.btn-process,
.ss-btn.ss-single.quick-checkout{
    background-color: #fdc236;
    color: #fff;
    border: 1px solid #fdc236;
}
.button.btn-process:hover,
.ss-btn.ss-single.quick-checkout:hover {
    background-color: #fff;
    color: #fdc236;
    border: 1px solid #fdc236;
}
.ss-btn.ss-order-btn:hover {
    opacity: 0.9;
}

/* Responsive: 1 cột trên màn hình nhỏ */
@media (max-width: 600px) {
    .ss-quick-order .ss-form-cart {
        flex: 0 0 100%;
    }
}

.ss-quick-order .add-contact {
    width: 100%;
    display: block;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}
/*style single product*/
/* Simple Shop Plugin CSS */

.ss-page-title {
    background-size: cover;
    padding: 60px 20px;
    text-align: center;
    color: #fff;
}

.ss-title-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.ss-title-box {
    position: relative;
    padding: 30px 50px 35px;
    z-index: 10;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.10);
}
.ss-title-box h2 {
    position: relative;
    color: #ffffff;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 10px;
}

.ss-single-product {
    padding: 40px 20px;
}

.ss-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.ss-content-area {
    flex: 1 1 70%;
}

.ss-flex-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.ss-image-column, .ss-info-column {
    flex: 1 1 47%;
}

.ss-img-holder {
    border: 1px solid #eee;
    padding: 10px;
}

.ss-img-main {
    width: 100%;
    height: auto;
    display: block;
}

.ss-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.ss-thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #ddd;
    cursor: pointer;
}

.ss-info-box h3 {
    margin-top: 0;
    font-size: 1.5em;
}

.ss-review-stars ul {
    padding: 0;
    list-style: none;
    display: flex;
    gap: 5px;
    color: #f5c518;
}

.ss-price {
    display: block;
    font-size: 1.2em;
    color: #fdc236;
    margin: 10px 0;
}

.ss-product-meta span {
    font-weight: bold;
}

.ss-product-meta a {
    color: #fdc236;
    text-decoration: none;
    margin-right: 5px;
}

.ss-contact-buttons {
    margin-top: 20px;
}

.ss-btn {
    margin: 5px 0;
    background: #fdc236;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 10px 15px;
    font-weight: bold;
   
}
.ss-btn.ss-quick-order {
    width: 100%;
}

button.ss-btn:hover,
a.ss-btn:hover,
a.ss-btn:hover{
    color: #fdc236;
    background: #fff;
    border: 1px solid #fdc236;
}
.ss-call-btn {
    background: #fdc236;
}

.ss-fb-btn {
    background: #fdc236;
}

.ss-order-btn {
    background: #fdc236;
}

.ss-tab-box {
    margin-top: 40px;
}

.ss-tab-menu {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    border-bottom: 2px solid #eee;
}

.ss-tab-menu li a {
    display: inline-block;
    padding: 10px;
    color: #333;
    text-decoration: none;
}

.ss-tab-menu li.active a,
.ss-tab-menu li a:hover {
    border-bottom: 3px solid #3498db;
    font-weight: bold;
}

.ss-tab-content {
    padding: 20px 0;
}
.ss-tab-content .ss-tab-pane {
    display: none;
}
.ss-tab-content .ss-tab-pane.active {
    display: block;
}
.ss-desc-content {
    line-height: 1.6;
}

.ss-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: flex-start;
}

.ss-content-area {
    flex: 0 0 75%;
    max-width: 75%;
    box-sizing: border-box;
}

.ss-sidebar {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
}
.ss-flex-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ss-image-column {
    flex: 0 0 47%;
    max-width: 50%;
    box-sizing: border-box;
}

.ss-info-column {
    flex: 0 0 47%;
    max-width: 50%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .ss-flex-box {
        flex-direction: column;
    }
    .ss-image-column, .ss-info-column {
        flex: 1 1 100%;
    }
    .ss-wrapper {
        flex-direction: column;
    }
    .ss-image-column {
        flex: 0 0 0%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ss-info-column {
        flex: 0 0 0%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
.custom-review-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.custom-review-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.review-avatar img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.review-content {
    flex: 1;
}

.review-meta {
    font-weight: bold;
    margin-bottom: 5px;
}

.review-stars {
    color: #f2b01e;
    display: inline-block;
    margin-left: 10px;
}

.review-text {
    font-size: 16px;
    line-height: 1.6;
}
.ss-form-row {
    margin-bottom: 15px;
}
.ss-col-half {
    width: 48%;
    float: left;
    margin-right: 4%;
    margin-bottom: 15px;
}
.ss-col-half:last-child {
    margin-right: 0;
}
.ss-rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    display: flex;
    gap: 4px;
}
.ss-rating input {
    display: none;
}
.ss-rating label {
    font-size: 22px;
    color: #ccc;
    cursor: pointer;
}
.ss-rating input:checked ~ label,
.ss-rating label:hover,
.ss-rating label:hover ~ label {
    color: #f9b233;
}
.ss-submit-btn {
    background: #f9b233;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-weight: bold;
    cursor: pointer;
}
.ss-submit-btn:hover {
    opacity: 0.9;
}
input[type="tel"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
}

.two-col {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.two-col > p {
    flex: 1 1 48%;
}
// Thêm CSS cho thông báo (có thể thêm vào file CSS chính)
.comment-alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    animation: fadeIn 0.3s ease-in-out;
}
.comment-alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.comment-alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grid 2 dòng 2 cột */
.comment-form .comment-form-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.ss-field-group {
    width: 100%;
}

.ss-field {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Main product card styling */
.sshop-product-card {
    
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    background: #fff;
    transition: all 0.3s ease;
}

.sshop-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sshop-product-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}

/* Product title styling */

/* Responsive adjustments */

.product-row-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 15px;
}

.product-price-col {
    width: 75%;
    text-align: left;
}

.price-text {
    color: #6b7280; /* Equivalent to text-gray-100 */
}

.product-cart-col {
    width: 25%;
    text-align: right;
}

.cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-primary-sshop {
    background-color: #fdc236; /* Example primary color */
    color: white;
}

.transition-3d-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.sshop-product-title a {
    text-decoration: none;
    color: #6b7280;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 10px;
}
@media (min-width: 992px) {
    .price-text {
        font-size: 18px;
    }
    .simple-shop-recent-products .price-text {
        font-size: 1.8rem;
    }
    .simple-shop-recent-products .btn-primary-sshop {
        background-color: transparent;
        color: #fdc236;
    }
}

/* ==========================================================================
   PAGE LAYOUT: CONTENT AREA & SIDEBAR (Khôi phục chia cột Flexbox)
   ========================================================================== */

/* 1. Flex Container cho toàn bộ trang (Chia 2 cột chính) */
.simple-shop-plugin .sshop-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    align-items: flex-start !important; 
    width: 100% !important;
}

/* 2. Cột Nội dung sản phẩm (Bên trái - chiếm chính xác 75% trừ đi gap) */
.simple-shop-plugin .sshop-content-area {
    flex: 0 0 calc(75% - 30px) !important;
    max-width: calc(75% - 30px) !important;
    width: auto !important; 
    box-sizing: border-box !important;
}

/* 3. Cột Sidebar (Bên phải - chiếm chính xác 25%) */
.simple-shop-plugin .sshop-sidebar {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: auto !important; 
    box-sizing: border-box !important;
}

/* 4. Khóa cứng cấu trúc lưới sản phẩm thành 3 cột */
.simple-shop-plugin .sshop-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* ==========================================================================
   WIDGET STYLING: LÀM ĐẸP CHO WIDGET TỰ THÊM TỪ ADMIN
   ========================================================================== */
.simple-shop-plugin .sshop-sidebar .widget {
    background: #fdfdfd !important;
    padding: 5px !important;
    border: 1px solid #eee !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

.simple-shop-plugin .sshop-sidebar .widget-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--primary, #d8a356) !important;
    color: #111 !important;
    text-transform: uppercase !important;
    position: relative !important;
    display: inline-block !important;
}

/* ==========================================================================
   RESPONSIVE: Xử lý hiển thị trên Mobile và Tablet
   ========================================================================== */
@media (max-width: 991px) {
    .simple-shop-plugin .sshop-content-area,
    .simple-shop-plugin .sshop-sidebar {
        flex: 0 0 100% !important; 
        max-width: 100% !important;
    }
    
    .simple-shop-plugin .sshop-sidebar {
        margin-top: 40px !important; /* Cách sản phẩm ra khi Sidebar rớt xuống dưới */
    }

    .simple-shop-plugin .sshop-products-grid {
        /* Tablet: Thu về 2 cột */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .simple-shop-plugin .sshop-products-grid {
        /* Mobile: Ép giữ 2 cột trên điện thoại */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   PRODUCT CARD REFINEMENTS (Title, Image, Price/Cart Split)
   ========================================================================== */

/* 1. HÌNH ẢNH: Cố định chiều cao, không méo hình */
.sshop-products-grid .inner-box .image,
.sshop-products-grid .inner-box .image a {
    display: block !important;
    width: 100% !important;
    height: 220px !important; /* Chiều cao cố định đồng đều */
    overflow: hidden !important;
}

.sshop-products-grid .inner-box .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Tự động cắt cúp lấp đầy khung, chống méo */
    object-position: center !important;
}

/* 2. TIÊU ĐỀ: Giảm kích thước chữ, giới hạn đúng 3 dòng */
.sshop-products-grid .inner-box h3,
.sshop-products-grid .inner-box h3 a,
.sshop-products-grid .inner-box .product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Ép cắt chữ sau 3 dòng */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important; /* Giảm size font để tinh tế hơn */
    line-height: 1.4 !important;
    min-height: calc(14px * 1.4 * 3) !important; /* Khóa cứng chiều cao 3 dòng để các box bằng nhau */
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
}

/* 3. VÙNG CHỨA NÚT & GIÁ: Nằm dưới cùng thẻ */
.sshop-products-grid .inner-box .product-row-container {
    display: flex !important;
    flex-direction: row !important; /* Ép dàn hàng ngang */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: auto !important; /* Luôn ép vùng này dính chặt xuống đáy box */
    padding-top: 15px !important;
    border-top: 1px solid #f0f0f0 !important; /* Đường kẻ mỏng ngăn cách (tùy chọn) */
}

/* 4. CỘT GIÁ (Chiếm 60% bên trái) */
.sshop-products-grid .inner-box .product-price-col {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    text-align: left !important;
}

.sshop-products-grid .inner-box .price-text {
    font-size: 14px !important; /* Size vừa phải */
    font-weight: 700 !important;
    color: var(--primary, #d8a356) !important; /* Sử dụng màu vàng đồng của theme */
    display: block !important;
}

/* 5. CỘT GIỎ HÀNG (Chiếm 40% bên phải) */
.sshop-products-grid .inner-box .product-cart-col {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    text-align: right !important;
}

/* Thu nhỏ nút giỏ hàng lại một chút cho cân đối */
.sshop-products-grid .inner-box .cart-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap !important; /* Chống rớt dòng chữ "Mua ngay" */
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE GRID OPTIMIZATION (Force 2 Columns on Mobile)
   ========================================================================== */

/* Tablet and landscape mobile devices */
@media (max-width: 991px) {
    .ss-content-area,
    .ss-sidebar {
        flex: 0 0 100% !important; 
        max-width: 100% !important;
    }
    
    .ss-sidebar {
        margin-top: 40px !important; 
    }

    .sshop-products-grid,
    .ss-content-area .sshop-products-grid {
        /* Force exactly 2 columns on tablet screens */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Smartphone vertical mobile devices */
@media (max-width: 575px) {
    .sshop-products-grid,
    .ss-content-area .sshop-products-grid {
        /* Force exactly 2 columns on small mobile viewports instead of 1 column */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important; /* Tighter gap to maximize content viewport space */
    }

    /* Adjust product image height to maintain visual proportions in 2-column grid */
    .sshop-product-image {
        height: 160px !important; /* Hạ chiều cao xuống 160px để ảnh cân đối khi chia đôi */
    }

    /* Fine-tune padding inside the product layout cards */
    .sshop-products-grid .inner-box .lower-content,
    .sshop-products-grid .inner-box > div:not(.image) {
        padding: 12px !important; /* Giảm padding để có thêm khoảng trống hiển thị chữ */
    }

    /* Recalculate title minimum heights according to dynamic typography scales */
    .sshop-product-title,
    .sshop-product-title a {
        font-size: 12px !important; /* Hạ size chữ xuống một chút để không bị rớt dòng quá nhiều */
        min-height: calc(12px * 1.4 * 3) !important;
    }

    /* Stack pricing matrices and cart buttons if layout width becomes too narrow */
    .sshop-products-grid .inner-box .product-row-container {
        flex-direction: column !important; /* Chuyển thành hàng dọc nếu nút và giá đè nhau */
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .sshop-products-grid .inner-box .product-price-col,
    .sshop-products-grid .inner-box .product-cart-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important; /* Căn lề trái toàn bộ trên di động */
    }
}

/* ==========================================================================
   CATEGORY HERO BANNER OPTIMIZATION (Desktop & Mobile Space Fixes)
   ========================================================================== */

/* 1. Tinh chỉnh mặc định cho cấu trúc Title Box */
.ss-page-title.archive-banner .ss-title-box h2 {
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important;
}

/* 2. Tối ưu hóa triệt để không gian trên màn hình Mobile & Tablet */
@media (max-width: 768px) {
    /* Ép hẹp khoảng cách trên/dưới của cả khối banner, nới lỏng 2 bên lề */
    .ss-page-title.archive-banner {
        padding: 30px 15px !important; 
    }

    /* Giảm mạnh kích thước chữ của tiêu đề để hạn chế rớt dòng */
    .ss-page-title.archive-banner .ss-title-box h2 {
        font-size: 18px !important; 
        padding: 0 !important;
    }

    /* Thu gọn đường kẻ ngang màu vàng */
    .ss-page-title.archive-banner .ss-title-box .divider-line {
        margin: 10px auto !important;
        width: 50px !important;
        height: 3px !important;
    }

    /* Thu nhỏ chữ của thanh điều hướng (Breadcrumbs) */
    .ss-page-title.archive-banner .ss-title-box,
    .ss-page-title.archive-banner .ss-title-box a,
    .ss-page-title.archive-banner .ss-title-box span {
        font-size: 13px !important;
    }
}

/* 3. Màn hình điện thoại siêu nhỏ (iPhone SE, v.v.) */
@media (max-width: 480px) {
    .ss-page-title.archive-banner {
        padding: 0px 0px !important; /* Ép mỏng thêm một chút nữa */
    }
    
    .ss-page-title.archive-banner .ss-title-box h2 {
        font-size: 16px !important; /* Chữ nhỏ gọn vừa đủ đọc */
    }
}

/* ==========================================================================
   SIMPLE SHOP: INDEPENDENT STYLES (No Theme Conflicts)
   ========================================================================== */

/* 1. Reset Container dùng riêng cho plugin */
.simple-shop-plugin .sshop-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   2. BANNER ĐỘC LẬP (KHÓA CỨNG VỊ TRÍ, CHỐNG MỌI THEME ĐẨY CHỮ)
   ========================================================================== */

/* 1. Đảm bảo Banner là điểm neo tĩnh */
.simple-shop-plugin .sshop-archive-banner {
    background-color: #222 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    
    position: relative !important;
    overflow: hidden !important;
    height: 450px !important; /* KHÓA CỨNG CHIỀU CAO - KHÔNG DÙNG MIN-HEIGHT NỮA */
    padding: 0 !important; /* Hủy toàn bộ padding do Theme tạo ra */
    margin: 0 !important;
    display: block !important; /* Hủy Flexbox vì Flexbox bị lỗi với padding của body */
}

/* 2. Lớp phủ đen (Dark Overlay) */
.simple-shop-plugin .sshop-archive-banner::before {
    content: '';
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important; 
    backdrop-filter: blur(3px) !important;
    z-index: 0 !important;
}

/* 3. KÉO KHỐI CHỮ RA KHỎI LUỒNG BÌNH THƯỜNG - NEO VÀO CHÍNH GIỮA TUYỆT ĐỐI */
.simple-shop-plugin .sshop-title-wrapper {
    position: absolute !important; 
    
    /* Mặc định là 50%. Bạn tăng số này lên (ví dụ 58% hoặc 60%) 
       để đẩy khối chữ lùi xuống dưới theo ý mắt nhìn */
    top: 58% !important; 
    
    left: 50% !important; 
    transform: translate(-50%, -50%) !important; 
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1200px !important; 
    padding: 0 24px !important;
    
    /* Căn dọc nội dung bên trong */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. Triệt tiêu khoảng cách thừa của Title Box */
.simple-shop-plugin .sshop-title-box {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

/* Ép margin bằng 0 cho phần tử đầu và cuối để không bị lệch */
.simple-shop-plugin .sshop-title-box > *:first-child { margin-top: 0 !important; }
.simple-shop-plugin .sshop-title-box > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* 5. Typography (Font chữ) */
.simple-shop-plugin .sshop-title-box h2 {
    font-size: clamp(32px, 5vw, 48px) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4) !important;
    word-wrap: break-word !important;
}

.simple-shop-plugin .sshop-title-box a,
.simple-shop-plugin .sshop-title-box span {
    font-size: 16px !important;
    color: #ffffff !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4) !important;
}

.simple-shop-plugin .sshop-divider-line {
    width: 80px !important;
    height: 4px !important;
    background: #d8a356 !important;
    margin: 10px auto 20px !important;
    border-radius: 2px !important;
}

/* 6. Responsive Mobile */
@media (max-width: 768px) {
    .simple-shop-plugin .sshop-archive-banner {
        height: 250px !important; /* Rút gọn chiều cao trên điện thoại */
    }
    .simple-shop-plugin .sshop-title-box h2 {
        font-size: 24px !important;
    }
}
/* ==========================================================================
   SIDEBAR: SEARCH FORM & CATEGORY MENU (Isolated from Theme)
   ========================================================================== */

/* Search Form */
.simple-shop-plugin .sshop-sidebar .sshop-search-form {
    display: flex !important;
    position: relative !important;
    margin-bottom: 15px !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-search-form input[type="text"] {
    width: 100% !important;
    padding: 12px 45px 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    outline: none !important;
    background: #fff !important;
    color: #333 !important;
    box-shadow: none !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-search-form input[type="text"]:focus {
    border-color: var(--primary, #d8a356) !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-search-form button {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 45px !important;
    background: transparent !important;
    border: none !important;
    color: #666 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.3s ease !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-search-form button:hover {
    color: var(--primary, #d8a356) !important;
}

/* Sidebar Title */
.simple-shop-plugin .sshop-sidebar .sshop-sidebar-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--primary, #d8a356) !important;
    color: #111 !important;
    text-transform: uppercase !important;
    position: relative !important;
    display: inline-block !important;
}

/* Category Menu Wrapper */
.simple-shop-plugin .sshop-sidebar .sshop-category-menu-wrapper {
    background: #fdfdfd !important;
    padding: 20px !important;
    border: 1px solid #eee !important;
    border-radius: 6px !important;
    margin-bottom: 30px !important;
}

/* Category Menu List */
.simple-shop-plugin .sshop-sidebar .sshop-category-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list li {
    position: relative !important;
    display: block !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #eee !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list li:last-child {
    border-bottom: none !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list li a {
    display: block !important;
    padding: 12px 0 !important;
    color: #444 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: 0.3s ease !important;
    font-weight: 500 !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list li a:hover,
.simple-shop-plugin .sshop-sidebar .sshop-category-list li.current-cat > a {
    color: var(--primary, #d8a356) !important;
    padding-left: 5px !important; /* Slide slightly right on hover */
}

/* Sub-menu hidden by default */
.simple-shop-plugin .sshop-sidebar .sshop-category-list .sub-menu {
    display: none; /* JS will toggle this */
    list-style: none !important;
    margin: 0 0 10px 15px !important;
    padding: 0 !important;
    border-left: 2px solid #f0f0f0 !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list .sub-menu li {
    border-bottom: none !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list .sub-menu li a {
    padding: 8px 0 8px 15px !important;
    font-size: 14px !important;
    color: #666 !important;
}

/* Toggle +/- Button */
.simple-shop-plugin .sshop-sidebar .sshop-category-list .toggle-sub-menu {
    position: absolute !important;
    right: 0 !important;
    top: 8px !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f8f8 !important;
    border: 1px solid #eaeaea !important;
    border-radius: 4px !important;
    color: #666 !important;
    z-index: 2 !important;
    transition: 0.3s ease !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list .toggle-sub-menu:hover {
    background: var(--primary, #d8a356) !important;
    color: #fff !important;
    border-color: var(--primary, #d8a356) !important;
}

/* Icon Switching */
.simple-shop-plugin .sshop-sidebar .sshop-category-list .toggle-sub-menu .fa-minus {
    display: none !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list li.open > .toggle-sub-menu .fa-plus {
    display: none !important;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list li.open > .toggle-sub-menu .fa-minus {
    display: inline-block !important;
}

/* ==========================================================================
   SIDEBAR WIDGET: SYNCING STYLE WITH MAIN GRID
   ========================================================================== */

/* 1. Reset container cho widget sản phẩm mới nhất */
.simple-shop-plugin .sshop-sidebar .simple-shop-recent-products {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 2. Style cho từng item trong widget */
.simple-shop-plugin .sshop-sidebar .simple-product-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
}

/* 3. Hình ảnh sản phẩm trong widget (thu nhỏ lại cho vừa sidebar) */
.simple-shop-plugin .sshop-sidebar .simple-product-item .product-image {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

.simple-shop-plugin .sshop-sidebar .simple-product-item .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. Đồng bộ tiêu đề sản phẩm */
.simple-shop-plugin .sshop-sidebar .simple-product-item .product-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.simple-shop-plugin .sshop-sidebar .simple-product-item .product-title a {
    color: #333 !important;
    text-decoration: none !important;
}

/* 5. Đồng bộ giá và giỏ hàng (chia 2 cột) */
.simple-shop-plugin .sshop-sidebar .simple-product-item .product-row-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 5px !important;
}

.simple-shop-plugin .sshop-sidebar .simple-product-item .price-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--primary, #d8a356) !important;
}

.simple-shop-plugin .sshop-sidebar .simple-product-item .cart-btn {
    padding: 5px 10px !important;
    font-size: 12px !important;
    background: #f8f8f8 !important;
    border: 1px solid #eee !important;
    color: #333 !important;
    border-radius: 4px !important;
}

.simple-shop-plugin .sshop-sidebar .simple-product-item .cart-btn:hover {
    background: var(--primary, #d8a356) !important;
    color: #fff !important;
}
/* Styling cho Custom Search Widget */
.simple-shop-plugin .sshop-search-form {
    display: flex !important;
    position: relative !important;
    margin-bottom: 20px !important;
}

.simple-shop-plugin .sshop-search-form .search-field {
    width: 100% !important;
    padding: 12px 45px 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    outline: none !important;
}

.simple-shop-plugin .sshop-search-form .ss-search-button {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 45px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #666 !important;
}

.simple-shop-plugin .sshop-search-form .ss-search-button:hover {
    color: var(--primary, #d8a356) !important;
}

/* Sidebar Category Toggle */
.simple-shop-plugin .sshop-sidebar .sshop-category-list .children {
    display: none; /* Ẩn menu con ban đầu */
    list-style: none;
    padding-left: 15px;
}

.simple-shop-plugin .sshop-sidebar .sshop-category-list .toggle-sub-menu {
    cursor: pointer;
    margin-left: 5px;
    font-size: 12px;
}

/* Đổi icon */
.simple-shop-plugin .sshop-sidebar .sshop-category-list .toggle-sub-menu .fa-minus { display: none; }
.simple-shop-plugin .sshop-sidebar .sshop-category-list li.open > .toggle-sub-menu .fa-plus { display: none; }
.simple-shop-plugin .sshop-sidebar .sshop-category-list li.open > .toggle-sub-menu .fa-minus { display: inline; }