.wsg-app {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 10px;
    box-sizing: border-box;
}

/* --- 1. PRODUCT SLIDER --- */
.wsg-product-section { margin-bottom: 40px; position: relative; }
.wsg-swipe-hint { display: none; }

/* PC: Grid 4 cột cứng */
.wsg-prod-scroll-wrap { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
}

.wsg-prod-item { 
    background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px; 
    text-align: center; transition: box-shadow 0.3s; 
    display: flex; flex-direction: column; justify-content: space-between; 
}
.wsg-prod-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #e74c3c; }

.wsg-prod-link { text-decoration: none; color: inherit; }
.wsg-prod-img img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; aspect-ratio: 1/1; object-fit: cover; }
.wsg-prod-title { font-size: 14px; margin: 5px 0; line-height: 1.4; height: 40px; overflow: hidden; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wsg-prod-price { color: #e74c3c; font-weight: bold; font-size: 15px; margin-bottom: 8px; }

/* NÚT BẤM MÀU ĐỎ */
.wsg-add-cart-btn, #wsg-create-btn, #wsg-load-more, #wsg-popup-close { 
    background: #e74c3c; color: #ffffff !important; border: none; border-radius: 4px; 
    font-weight: 700; cursor: pointer; transition: background 0.2s; 
    box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3); 
}
.wsg-add-cart-btn { display: block; padding: 8px 10px; font-size: 13px; text-decoration: none; width: 100%; }
.wsg-add-cart-btn:hover, #wsg-create-btn:hover, #wsg-load-more:hover, #wsg-popup-close:hover { 
    background: #c0392b; color: #fff !important; 
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    /* Hiện gợi ý vuốt */
    .wsg-swipe-hint { 
        display: flex; align-items: center; justify-content: center; 
        margin-bottom: 10px; color: #777; font-size: 13px; animation: fadeHint 3s infinite; 
    }
    .wsg-hand-icon { font-size: 20px; margin-right: 5px; animation: swipeAnim 1.5s infinite ease-in-out; }
    
    @keyframes swipeAnim { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } }
    @keyframes fadeHint { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

    /* Slider Mobile (Scroll Snap) */
    .wsg-prod-scroll-wrap { 
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; 
        gap: 15px; padding-bottom: 15px; -webkit-overflow-scrolling: touch; 
    }
    .wsg-prod-item { 
        flex: 0 0 calc(50% - 10px); /* 2 Item một màn hình */
        scroll-snap-align: start; width: calc(50% - 10px); 
    }
    .wsg-prod-scroll-wrap::-webkit-scrollbar { display: none; }

    /* Fix Input tràn viền */
    .wsg-input-area { flex-direction: column; width: 100%; }
    #wsg-name { width: 100% !important; max-width: 100%; box-sizing: border-box; }
    #wsg-create-btn { width: 100%; margin-top: 10px; }
}

/* --- 2. TOOL INPUT --- */
.wsg-box { 
    background: #fff; padding: 30px 20px; border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; 
    border: 1px solid #eee; margin-bottom: 40px; 
}
.wsg-input-area { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
#wsg-name { 
    padding: 12px 20px; font-size: 16px; border: 2px solid #ddd; 
    border-radius: 4px; width: 300px; outline: none; transition: all 0.3s; 
}
#wsg-name:focus { border-color: #e74c3c; }
#wsg-create-btn { padding: 12px 30px; font-size: 16px; text-transform: uppercase; }

/* --- 3. KẾT QUẢ (NỀN TRẮNG - CHỮ ĐEN) --- */
.wsg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .wsg-grid { grid-template-columns: 1fr; } }

.wsg-card { 
    background: #ffffff; border: 1px solid #eee; border-radius: 8px; 
    padding: 15px; text-align: center; position: relative; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.3s ease; 
}
.wsg-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #e74c3c; }

.wsg-card canvas { max-width: 100%; height: auto; margin-bottom: 10px; }
.wsg-font-id { 
    font-size: 11px; color: #333; position: absolute; top: 10px; left: 10px; 
    background: #f5f5f5; padding: 2px 6px; border-radius: 4px; 
}

/* Nút Download */
.wsg-dl-btn { 
    display: inline-block; padding: 8px 25px; font-size: 14px; font-weight: 600; 
    color: #e74c3c !important; background: #ffffff; border: 1px solid #e74c3c; 
    border-radius: 25px; text-decoration: none; transition: all 0.2s ease; margin-top: 5px; 
}
.wsg-dl-btn:hover { 
    background: #e74c3c; color: #ffffff !important; 
    transform: translateY(-2px); box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3); 
}

/* --- 4. POPUP & LOADING --- */
.wsg-popup-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 9999; display: none; 
    justify-content: center; align-items: center; 
}
.wsg-popup-box { 
    background: #fff; padding: 30px; border-radius: 10px; width: 90%; 
    max-width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    animation: popIn 0.3s ease; 
}
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.wsg-popup-icon { 
    width: 50px; height: 50px; background: #ffe6e6; color: #e74c3c; 
    font-size: 24px; font-weight: bold; border-radius: 50%; 
    line-height: 50px; margin: 0 auto 15px; 
}
.wsg-popup-title { margin: 0 0 10px; color: #333; }
.wsg-popup-msg { color: #666; margin-bottom: 20px; }
#wsg-popup-close { padding: 10px 30px; }

#wsg-loading { text-align: center; padding: 20px; color: #666; }
.loader { display: inline-block; width: 20px; height: 20px; border: 3px solid #ddd; border-top-color: #e74c3c; border-radius: 50%; animation: spin 1s infinite; margin-right: 10px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.wsg-more-container { text-align: center; margin-top: 30px; padding-bottom: 50px; }
#wsg-load-more { padding: 12px 40px; border-radius: 30px; }