/* Reset cơ bản */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
}

/* Wrapper chính */
#tool-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* --- CSS HIỆU ỨNG --- */
.glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.glass-header { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.upload-zone { transition: all 0.3s ease; border: 2px dashed rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; }
.upload-zone:hover { border-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); }
.upload-zone.dragover { border-color: #10b981; background: rgba(16, 185, 129, 0.1); transform: scale(1.01); }

.loading-spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 3px solid #667eea; width: 30px; height: 30px; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.grid-responsive { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.transparency-bg { background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-color: white; }
.image-card { background: rgba(255, 255, 255, 0.95); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); color: #333; transition: transform 0.3s ease; }
.image-card:hover { transform: translateY(-5px); }

.btn-secondary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); transition: all 0.3s; }
.btn-secondary:hover { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }

.status-success { color: #10b981; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
.status-error { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

#tool-wrapper img { max-width: 100%; height: auto; display: block; border: none; margin: 0; padding: 0; }
#tool-wrapper h1, #tool-wrapper h2, #tool-wrapper h3 { margin-top: 0; line-height: 1.2; }

/* Menu Link Hover Effect */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: #fff; transition: width 0.3s; }
.nav-link:hover::after { width: 100%; }

/* Toast Notification */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 999999; }

/* Glow Effect for Upload Icon */
.icon-glow { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }

/* Blog Specifics */
.glass-card { background: rgba(255, 255, 255, 0.95); border-radius: 16px; transition: transform 0.3s; overflow: hidden; display: flex; flex-direction: column; }
.glass-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

/* Legal Content */
.legal-content { background: #fff; padding: 3rem; border-radius: 16px; color: #333; line-height: 1.6; }
.legal-content h1 { margin-bottom: 2rem; border-bottom: 2px solid #eee; padding-bottom: 1rem; color: #4c1d95; }
.legal-content h2 { font-weight: bold; font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.75rem; color: #1f2937; }
.legal-content p { margin-bottom: 1rem; color: #4b5563; }
.legal-content ul { list-style: disc; margin-left: 1.5rem; margin-bottom: 1rem; color: #4b5563; }

/* Feature Card */
.feature-card { background: rgba(255, 255, 255, 0.9); padding: 2rem; border-radius: 1rem; transition: transform 0.3s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Guide & About */
.glass-panel { background: rgba(255, 255, 255, 0.95); padding: 3rem; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.glass-form { background: rgba(255, 255, 255, 0.95); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.faq-item { background: rgba(255, 255, 255, 0.1); border-radius: 8px; margin-bottom: 0.5rem; border: 1px solid rgba(255,255,255,0.2); }
.faq-item h4 { cursor: pointer; padding: 1rem; color: white; font-weight: bold; }
.faq-item p { padding: 0 1rem 1rem 1rem; color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.stat-card { background: #f3f4f6; padding: 1.5rem; border-radius: 12px; text-align: center; }
.guide-card { background: rgba(255, 255, 255, 0.95); padding: 2.5rem; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); height: 100%; }
.step-number { width: 3.5rem; height: 3.5rem; background: #667eea; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; margin-bottom: 1.5rem; }

/* Single Post Specific Styles (Ported from blog-post-detail.html) */
.glass-panel-post { background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); overflow: hidden; }
.glass-sidebar { background: rgba(255, 255, 255, 0.9); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.post-content h2 { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin-top: 2rem; margin-bottom: 1rem; }
.post-content h3 { font-size: 1.25rem; font-weight: 600; color: #374151; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.post-content p { font-size: 1rem; line-height: 1.75; color: #4b5563; margin-bottom: 1.25rem; }
.post-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; color: #4b5563; }
.post-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; color: #4b5563; }
.post-content blockquote { border-left: 4px solid #7c3aed; padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: #5b21b6; background: #f5f3ff; padding: 1rem; border-radius: 0 8px 8px 0; }
.post-content img { border-radius: 8px; margin: 1.5rem 0; width: 100%; display: block; }
.post-content strong { font-weight: 700; color: #1f2937; }

@keyframes shimmer { 100% { transform: translateX(100%); } }