/**
 * File Path: nano-xanh/style.css
 * Mô tả: Quản lý giao diện Portal Nano Xanh (Định dạng One-liner)
 */
:root { --nx-green: #2e7d32; --nx-green-hover: #1b5e20; --nx-green-light: #e8f5e9; --nx-dark: #2A1A12; --nx-gold: #c8a05a; --sidebar-width: 280px; }
body { font-family: 'Inter', sans-serif; background-color: #f4f6f8; color: #333; margin: 0; overflow: hidden; height: 100vh; }

/* ================= SIDEBAR & LOGO ================= */
.nx-sidebar { width: var(--sidebar-width); position: fixed; top: 0; bottom: 0; left: 0; background: #fff; border-right: 1px solid #e3e6ec; z-index: 1000; overflow-y: auto; }
.sidebar-brand { height: 120px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e3e6ec; background: #fff; padding: 15px; }
.sidebar-brand img { max-height: 100%; width: auto; max-width: 85%; object-fit: contain; }

/* ================= MENU TRÁI ================= */
.nav-menu { padding: 15px; }
.nav-menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-radius: 8px; color: #5c6a7a; font-weight: 600; text-decoration: none; margin-bottom: 4px; transition: 0.2s; font-size: 0.95rem; }
.nav-menu-item:hover, .nav-menu-item[data-bs-toggle="collapse"]:hover { background: var(--nx-green-light); color: var(--nx-green); }
.nav-menu-item.active { background: var(--nx-green); color: #fff; box-shadow: 0 4px 12px rgba(46,125,50,0.2); }
.submenu-container { padding-left: 10px; margin-left: 10px; margin-bottom: 10px; }
.submenu-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 15px; color: #6c757d; text-decoration: none; font-size: 0.85rem; font-weight: 500; border-radius: 6px; }
.submenu-item:hover { color: var(--nx-green); background: #f8f9fa; }
.submenu-item.active { color: var(--nx-green); font-weight: 700; background: var(--nx-green-light); }

/* ================= MAIN LAYOUT ================= */
.nx-main-wrapper { margin-left: var(--sidebar-width); display: flex; flex-direction: column; height: 100vh; }
.nx-topbar { height: 100px; flex-shrink: 0; background: #fff; border-bottom: 1px solid #e3e6ec; display: flex; align-items: center; padding: 0 30px; }
.nx-footer { flex-shrink: 0; background: #fff; border-top: 1px solid #e3e6ec; padding: 15px 30px; z-index: 10; }
.nx-content-scrollable { flex-grow: 1; overflow-y: auto; background: #f4f6f8; padding: 30px; position: relative; }
.nx-content-scrollable::-webkit-scrollbar { width: 6px; }
.nx-content-scrollable::-webkit-scrollbar-thumb { background: #cbd0d6; border-radius: 10px; }

/* ================= ĐIỀU CHỈNH GIAO DIỆN MOBILE ================= */
@media (max-width: 991.98px) {
    .nx-sidebar { left: calc(-1 * var(--sidebar-width)); transition: 0.3s; }
    .nx-sidebar.open { left: 0; }
    .nx-main-wrapper { margin-left: 0; }
    .btn-toggle-menu { display: block !important; }
}

@media (max-width: 767.98px) {
    .nx-topbar { padding: 0 15px; height: 75px; gap: 10px !important; }
    .nx-content-scrollable { padding: 15px; }
    .nx-footer { padding: 15px 10px; }
}

/* ================= TỐI ƯU HIỂN THỊ MOBILE CHO LỊCH HỘI THẢO ================= */
@media (max-width: 767.98px) {
    /* Ép thanh tìm kiếm trên mobile thành các khối dọc gọn gàng */
    .search-filter-bar .col-12 { margin-bottom: 10px; }
    .search-filter-bar .col-12:last-child { margin-bottom: 0; }
    
    /* Thu nhỏ chữ nút bấm và padding để 2 nút nằm ngang không bị ép dòng */
    .btn-event-action { font-size: 0.85rem !important; padding: 0.5rem 0.2rem !important; }
    
    /* Giảm triệt để lề các khối nội dung trên màn hình nhỏ */
    .nx-content-scrollable { padding: 10px !important; }
    .card-body { padding: 15px !important; }
    .modal-body { padding: 15px !important; }
}

/* Đảm bảo ảnh trong bài viết chi tiết không bị tràn khung */
#detailContent img { max-width: 100%; height: auto; border-radius: 8px; }