/* ══════════════════════════════════════════════════════════════ */
/* VTHINK v8.0.0 - 30 PROFESSIONAL THEMES (15 Grid + 15 Carousel) */
/* ══════════════════════════════════════════════════════════════ */

.vthink-v8-container { width: 100%; margin: 20px 0; }

/* THEME 1 - CLASSIC */
.vthink-v8-container.theme-theme-1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vthink-v8-container.theme-theme-1 .vthink-v8-product { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 12px; }

/* THEME 2 - MODERN */
.vthink-v8-container.theme-theme-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.vthink-v8-container.theme-theme-2 .vthink-v8-product { background: #f9f9f9; border-radius: 8px; overflow: hidden; }

/* THEME 3 - ELEGANT */
.vthink-v8-container.theme-theme-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.vthink-v8-container.theme-theme-3 .vthink-v8-product { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 12px; padding: 15px; }

/* THEME 4 - MINIMAL */
.vthink-v8-container.theme-theme-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vthink-v8-container.theme-theme-4 .vthink-v8-product { background: transparent; border-bottom: 1px solid #e0e0e0; padding: 10px 0; }

/* THEME 5 - BOLD */
.vthink-v8-container.theme-theme-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.vthink-v8-container.theme-theme-5 .vthink-v8-product { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; padding: 15px; }

/* THEME 6 - PREMIUM */
.vthink-v8-container.theme-theme-6 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.vthink-v8-container.theme-theme-6 .vthink-v8-product { background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 16px; padding: 20px; }

/* THEME 7 - CREATIVE */
.vthink-v8-container.theme-theme-7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.vthink-v8-container.theme-theme-7 .vthink-v8-product { background: white; border-left: 4px solid #667eea; border-radius: 0; padding: 12px; }

/* THEME 8 - DARK */
.vthink-v8-container.theme-theme-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vthink-v8-container.theme-theme-8 .vthink-v8-product { background: #1e1e1e; color: white; border-radius: 8px; padding: 15px; }

/* THEME 9 - LIGHT */
.vthink-v8-container.theme-theme-9 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.vthink-v8-container.theme-theme-9 .vthink-v8-product { background: #fafaf9; border-radius: 8px; padding: 12px; }

/* THEME 10 - COLORFUL */
.vthink-v8-container.theme-theme-10 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vthink-v8-container.theme-theme-10 .vthink-v8-product { background: white; border-top: 4px solid #ff6b6b; border-radius: 8px; padding: 12px; }

/* THEME 11 - LUXURY */
.vthink-v8-container.theme-theme-11 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.vthink-v8-container.theme-theme-11 .vthink-v8-product { background: white; border: 2px solid #d4a574; border-radius: 12px; padding: 18px; }

/* THEME 12 - SIMPLE */
.vthink-v8-container.theme-theme-12 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vthink-v8-container.theme-theme-12 .vthink-v8-product { background: white; border: none; border-radius: 0; padding: 10px; }

/* THEME 13 - ADVANCED */
.vthink-v8-container.theme-theme-13 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vthink-v8-container.theme-theme-13 .vthink-v8-product { background: white; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 15px; }

/* THEME 14 - PROFESSIONAL */
.vthink-v8-container.theme-theme-14 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vthink-v8-container.theme-theme-14 .vthink-v8-product { background: white; border: 1px solid #e8e8e8; border-radius: 6px; padding: 14px; }

/* THEME 15 - CUSTOM */
.vthink-v8-container.theme-theme-15 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vthink-v8-container.theme-theme-15 .vthink-v8-product { background: white; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 16px; }

/* CAROUSEL THEMES (same numbers, different display) */
.vthink-v8-container.layout-carousel { display: flex; overflow-x: auto; gap: 20px; padding: 20px 0; }
.vthink-v8-container.layout-carousel .vthink-v8-product { flex: 0 0 calc(25% - 15px); }

/* PRODUCT CARDS */
.vthink-v8-product { position: relative; transition: all 0.3s; cursor: pointer; }
.vthink-v8-product:hover { transform: translateY(-4px); }
.vthink-v8-product-image { height: 200px; overflow: hidden; margin-bottom: 10px; border-radius: 4px; }
.vthink-v8-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.vthink-v8-product:hover .vthink-v8-product-image img { transform: scale(1.05); }
.vthink-v8-product h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.product-price { font-weight: 700; font-size: 16px; margin: 8px 0; }
.product-excerpt { margin: 8px 0; color: #666; line-height: 1.4; }
.ribbon { position: absolute; top: 10px; right: -35px; padding: 5px 35px; background: #ff6b6b; color: white; font-size: 11px; font-weight: 600; transform: rotate(45deg); }
.wishlist-btn { position: absolute; top: 10px; right: 10px; background: white; border: none; cursor: pointer; width: 35px; height: 35px; border-radius: 50%; font-size: 16px; }
.wishlist-btn.added { color: #ff6b6b; }
.add-to-cart-btn { width: 100%; padding: 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; margin-top: 8px; transition: all 0.3s; }
.add-to-cart-btn:hover { background: #764ba2; }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .vthink-v8-container { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
    .vthink-v8-container { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
    .vthink-v8-container.layout-carousel .vthink-v8-product { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 480px) {
    .vthink-v8-container { grid-template-columns: 1fr !important; gap: 12px !important; }
    .vthink-v8-container.layout-carousel .vthink-v8-product { flex: 0 0 100%; }
}