/* Đường dẫn: public/assets/css/app.css | Phiên bản: v1.0.0 */

/* 1. SCROLLBAR TÙY CHỈNH VÀ GIAO DIỆN CHUNG */
body { overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; height: 4px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #ea580c; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.cart-scroll::-webkit-scrollbar { width: 4px; }
.cart-scroll::-webkit-scrollbar-track { background: #0a0a0a; }

/* 2. CHỐNG AUTOFILL BACKGROUND TRÌNH DUYỆT PHÁ MÀU DARK THEME */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 3. TYPOGRAPHY - NỘI DUNG BÀI VIẾT (SEO CONTENT) */
.seo-content, .format-html { color: #d1d5db; font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; font-size: 16px; }
@media (min-width: 768px) { .seo-content, .format-html { font-size: 18px; } }
.seo-content p, .format-html p { margin-bottom: 1.25em; text-align: justify; }
.seo-content h1, .format-html h1 { font-weight: 900; color: #ea580c; font-size: 24px; margin-bottom: 1em; line-height: 1.4; }
@media (min-width: 768px) { .seo-content h1, .format-html h1 { font-size: 32px; } }
.seo-content h2, .format-html h2 { font-weight: 800; color: #ea580c; font-size: 22px; border-left: 4px solid #ea580c; padding-left: 0.75rem; line-height: 1.4; margin-bottom: 0.8em; margin-top: 1.5em; }
@media (min-width: 768px) { .seo-content h2, .format-html h2 { font-size: 28px; } }
.seo-content h3, .format-html h3 { font-weight: 700; color: #f97316; font-size: 20px; margin-bottom: 0.75em; margin-top: 1.2em; line-height: 1.4; }
@media (min-width: 768px) { .seo-content h3, .format-html h3 { font-size: 24px; } }
.seo-content h4, .format-html h4 { font-weight: 700; color: #fb923c; font-size: 18px; margin-bottom: 0.75em; margin-top: 1.2em; line-height: 1.4; }
@media (min-width: 768px) { .seo-content h4, .format-html h4 { font-size: 20px; } }
.seo-content h5, .format-html h5 { font-weight: 600; color: #fdba74; font-size: 16px; margin-bottom: 0.5em; margin-top: 1em; }
.seo-content h6, .format-html h6 { font-weight: 600; color: #fed7aa; font-size: 15px; margin-bottom: 0.5em; margin-top: 1em; }
.seo-content ul, .format-html ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25em; }
.seo-content ol, .format-html ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.25em; }
.seo-content li, .format-html li { margin-bottom: 0.5em; }
.seo-content li > ul, .format-html li > ul, .seo-content li > ol, .format-html li > ol { margin-top: 0.5em; margin-bottom: 0; }
.seo-content strong, .format-html strong, .seo-content b, .format-html b { font-weight: 700; color: #f3f4f6; }
.seo-content em, .format-html em, .seo-content i, .format-html i { font-style: italic; }
.seo-content blockquote, .format-html blockquote { border-left: 4px solid #ea580c; background-color: #1a1a1a; padding: 1rem 1.5rem; margin: 1.5rem 0; font-style: italic; border-radius: 0 0.5rem 0.5rem 0; color: #9ca3af; }
.seo-content a, .format-html a { color: #ea580c; font-weight: 600; border-bottom: 1px dashed #ea580c; }
.seo-content img, .format-html img { border-radius: 0.75rem; margin: 2rem auto; max-width: 100%; height: auto; display: block; }

/* 4. COMPACT UI & MICRO-INTERACTIONS */
.checkout-input { background-color: #0f0f0f; border: 1px solid #333; color: #fff; border-radius: 0.75rem; padding: 0.75rem 1rem; width: 100%; transition: all 0.3s; outline: none; }
.checkout-input:focus { border-color: #ea580c; box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.1); }
body.modal-open { overflow: hidden; }
#auth_modal_backdrop.active { opacity: 1; visibility: visible; }
#auth_login_modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* 5. HIỆU ỨNG ZOOM ẢNH SẢN PHẨM */
.img-zoom-container { overflow: hidden; position: relative; border-radius: 0.75rem; background: #0f0f0f; }
.img-zoom-container img { transition: transform 0.4s ease; transform-origin: center center; }
.img-zoom-container:hover img { transform: scale(1.3); cursor: crosshair; }

/* 6. THANH GIỎ HÀNG STICKY */
#sticky-cart-bar { transition: transform 0.3s ease-in-out, opacity 0.3s; }
.sticky-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.sticky-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 7. ANIMATIONS (LIVE CHAT, FLASH SALE) */
@keyframes pulse-flame { 0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); } }
.badge-hot { animation: pulse-flame 2s infinite; }

@keyframes pulse-ring { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(234, 88, 12, 0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); } }
.chat-pulse::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; animation: pulse-ring 2s infinite; z-index: -1; }

.typing-dot { animation: typing 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }