/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */

/* === ÉP KIỂU FONT CHỮ CỦA STITCH (TAILWIND) ĐÈ LÊN BOOTSTRAP === */
body, input, button, select, textarea {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif !important;
}

/* Tăng độ đậm và tương phản cho class text-muted trên toàn website */
.text-muted {
    color: #475569 !important;
    font-weight: 500 !important;
}
/* =============================================================== */

/* NukeViet Icon Font Synchronization */
@font-face {
    font-family: 'NukeVietIcons';
    src: url('../fonts/NukeVietIcons.woff2') format('woff2'),
        url('../fonts/NukeVietIcons.woff') format('woff'),
        url('../fonts/NukeVietIcons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^='icon-'], [class*=' icon-'] {
    display: inline-block;
    font: normal normal normal 14px/1 NukeVietIcons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    vertical-align: -10%;
}

.icon-nukeviet:before { content: '\e607'; }
.icon-today:before { content: '\e600'; }
.icon-qrcode:before { content: '\e601'; }
.icon-enter:before { content: '\e602'; }
.icon-exit:before { content: '\e603'; }

/* Standard NukeViet Info/Alert Blocks */
.nv-info {
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    background-color: #f7f7f7;
    color: #333;
    padding: 10px;
    margin-bottom: 15px;
}
.nv-info.error { background-color: #f8d7da !important; border-color: #f5c6cb !important; color: #721c24 !important; }
.nv-info.success { background-color: #d4edda !important; border-color: #c3e6cb !important; color: #155724 !important; }
.nv-info.info { background-color: #d1ecf1 !important; border-color: #bee5eb !important; color: #0c5460 !important; }

/* Hide messy inline alerts inside user forms to exclusively use nvToast */
form.nv-login-form .nv-info,
form.nv-register-form .nv-info,
form.user-reg-form .nv-info,
form.lostpass-form .nv-info {
    display: none !important;
}

/* Article Figure & Caption Styling */
figure.image {
    display: table !important;
    clear: both;
    text-align: center;
    margin: 10px auto;
}
figure.image img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
    padding: 5px 0;
}

/* Eduport Brand Identity */
:root {
    --edu-brand-color: #602ac9;
    --edu-brand-color-hover: #4e22a3;
    --edu-brand-color-soft: rgba(96, 42, 201, 0.1);
}

/* User Dropdown Branding */
.userBlock .dropdown-item.active,
.userBlock .dropdown-item:active,
.userBlock .dropdown-item:hover {
    background-color: var(--edu-brand-color-soft) !important;
    color: var(--edu-brand-color) !important;
}

.userBlock .dropdown-item:hover i,
.userBlock .dropdown-item.active i {
    color: var(--edu-brand-color) !important;
}

/* Eduport Admin Toolbar Modernization */
#admintoolbar {
    position: fixed;
    left: 0;
    top: 100px !important; /* Positioned below Eduport's sticky header */
    background: var(--edu-brand-color);
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
    border: 1px solid var(--edu-brand-color-hover);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    opacity: 0.8;
    transition: all 0.3s ease;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
}

#admintoolbar:hover {
    opacity: 1;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

#admintoolbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#admintoolbar li {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#admintoolbar li:last-child {
    border-bottom: none;
}

#admintoolbar a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

#admintoolbar a:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

#admintoolbar span {
    margin-left: 10px;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, margin-left 0.3s ease;
    display: inline-block;
}

#admintoolbar:hover span {
    max-width: 250px;
    margin-left: 12px;
}

#admintoolbar i, 
#admintoolbar .fas, 
#admintoolbar .far {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    display: inline-block;
}

/* Specific tooltip fix for news images */
.tooltip-inner img {
    margin-bottom: 5px;
    display: block;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TOAST NOTIFICATION SYSTEM
   Usage: nvToast('Thông báo gì đó', 'error');
   Types: error | success | info | warning
   Reusable across ALL modules
   ═══════════════════════════════════════════════════════════════════ */

.nv-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100% - 48px);
}

.nv-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #1a1a2e;
    color: #f0f0f5;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.88rem;
    line-height: 1.5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    animation: nvToastSlideIn 0.4s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    transform: translateX(120%);
}

.nv-toast.removing {
    animation: nvToastSlideOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Toast icon */
.nv-toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}

/* Toast content */
.nv-toast-content {
    flex: 1;
    min-width: 0;
}

.nv-toast-title {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.nv-toast-message {
    font-weight: 500;
}

/* Toast close */
.nv-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.2s;
}

.nv-toast-close:hover {
    color: #fff;
}

/* Timer bar */
.nv-toast-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    animation: nvToastTimer var(--toast-duration, 4s) linear forwards;
}

/* ── Type variations ── */

/* Error */
.nv-toast.error {
    background: linear-gradient(135deg, #2d1017, #1a1a2e);
    border-color: rgba(239, 68, 68, 0.3);
}
.nv-toast.error .nv-toast-icon {
    background: #ef4444;
    color: #fff;
}
.nv-toast.error .nv-toast-timer {
    background: #ef4444;
}
.nv-toast.error .nv-toast-title {
    color: #fca5a5;
}

/* Success */
.nv-toast.success {
    background: linear-gradient(135deg, #0d2818, #1a1a2e);
    border-color: rgba(34, 197, 94, 0.3);
}
.nv-toast.success .nv-toast-icon {
    background: #22c55e;
    color: #fff;
}
.nv-toast.success .nv-toast-timer {
    background: #22c55e;
}
.nv-toast.success .nv-toast-title {
    color: #86efac;
}

/* Warning */
.nv-toast.warning {
    background: linear-gradient(135deg, #2d2305, #1a1a2e);
    border-color: rgba(245, 158, 11, 0.3);
}
.nv-toast.warning .nv-toast-icon {
    background: #f59e0b;
    color: #fff;
}
.nv-toast.warning .nv-toast-timer {
    background: #f59e0b;
}
.nv-toast.warning .nv-toast-title {
    color: #fcd34d;
}

/* Info */
.nv-toast.info {
    background: linear-gradient(135deg, #0c1929, #1a1a2e);
    border-color: rgba(59, 130, 246, 0.3);
}
.nv-toast.info .nv-toast-icon {
    background: #3b82f6;
    color: #fff;
}
.nv-toast.info .nv-toast-timer {
    background: #3b82f6;
}
.nv-toast.info .nv-toast-title {
    color: #93c5fd;
}

/* ── Light mode override (for pages with white bg) ── */
body.nv-toast-light .nv-toast {
    background: #fff;
    color: #1e293b;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}
body.nv-toast-light .nv-toast.error { background: #fef2f2; border-color: #fecaca; }
body.nv-toast-light .nv-toast.error .nv-toast-title { color: #dc2626; }
body.nv-toast-light .nv-toast.success { background: #f0fdf4; border-color: #bbf7d0; }
body.nv-toast-light .nv-toast.success .nv-toast-title { color: #16a34a; }
body.nv-toast-light .nv-toast.warning { background: #fffbeb; border-color: #fde68a; }
body.nv-toast-light .nv-toast.warning .nv-toast-title { color: #d97706; }
body.nv-toast-light .nv-toast.info { background: #eff6ff; border-color: #bfdbfe; }
body.nv-toast-light .nv-toast.info .nv-toast-title { color: #2563eb; }
body.nv-toast-light .nv-toast-close { color: rgba(0,0,0,0.3); }
body.nv-toast-light .nv-toast-close:hover { color: #1e293b; }
body.nv-toast-light .nv-toast-message { color: #334155; }

/* ── Animations ── */
@keyframes nvToastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes nvToastSlideOut {
    from { transform: translateX(0); opacity: 1; max-height: 200px; margin-bottom: 0; }
    to   { transform: translateX(120%); opacity: 0; max-height: 0; margin-bottom: -10px; padding: 0 18px; }
}

@keyframes nvToastTimer {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Mobile responsive ── */
@media (max-width: 480px) {
    .nv-toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}