@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');:root {    --primary: #123456;    --primary-light: rgba(19, 91, 236, 0.1);    --primary-soft: rgba(19, 91, 236, 0.05);    --bg-body: #f6f6f8;    --text-main: #0d121b;    --text-muted: #64748b;    --border-color: #e7ebf3;    --border-hover-color: #d9e4fb;    --sidebar-width: 17.5rem;    --header-height: 4.375rem;    --radius-lg: 0.75rem;    --radius-md: 0.625rem;    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}html { scroll-behavior: smooth; }*, *::before, *::after { box-sizing: border-box; }body.rvn-dashboard-body {    margin: 0; padding: 0;    background: linear-gradient(180deg, rgb(255 252 248) 0%, rgba(103, 136, 255, 0.007) 15.74%, rgba(103, 136, 255, 0.1) 100%);    background-attachment: fixed;    min-height: 100vh;    font-family: 'Be Vietnam Pro', sans-serif;}::-webkit-scrollbar { width: 8px; height: 8px; }::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }::-webkit-scrollbar-thumb {     background: #cbd5e1; border-radius: 10px; border: 2px solid #f1f5f9; }::-webkit-scrollbar-thumb:hover { background: #94a3b8; }* { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }.rvn-main-header {    width: 100%; height: var(--header-height);    background: rgba(255, 255, 255, 0.95);    backdrop-filter: blur(10px);    border-bottom: 1px solid var(--border-color);    position: sticky; top: 0; z-index: 1050;    display: flex; justify-content: center;}.header-inner {    width: 100%; max-width: 1366px;    padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between;}.rvn-dashboard-container {    display: flex; width: 100%; max-width: 13666px; margin: 0 auto;    min-height: calc(100vh - var(--header-height));    background-color: #ffffff;    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05); position: relative;}.rvn-main-wrapper { flex: 1; min-width: 0; background-color: var(--bg-body); padding: 5px;}.rvn-content-area { padding: 1.75rem;  width: 100%; flex: 1;  background: #fff; border-radius: 12px; box-shadow: 0 2px 15px rgb(0 0 0 / 5%); min-height: 100vh; }.header-left { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 200px; }.header-center { flex: 2; display: flex; justify-content: center; padding: 0 1rem; }.header-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; min-width: 200px; }.dashboard-logo { text-decoration: none; display: flex; align-items: center; transition: var(--transition); }.dashboard-logo:hover { opacity: 0.8; }.brand-name { font-size: 1.25rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.5px; white-space: nowrap; }.text-primary { color: var(--primary); }.header-center .search-box {    display: flex; align-items: center; background: #f6f8fb;    padding: 0 1rem; border-radius: var(--radius-md);    width: 100%; max-width: 28rem; height: 40px; gap: 0.75rem;    border: 1px solid transparent; transition: var(--transition);}.header-center .search-box:focus-within { background: #ffffff; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }.header-center .search-box input { border: none; background: transparent; outline: none; font-size: 0.875rem; width: 100%; color: var(--text-main); }.top-bar-actions { display: flex; align-items: center; gap: 0.75rem; }.icon-btn {    background: #f8fafc; border: none; width: 38px; height: 38px;    border-radius: 50%; display: flex; align-items: center; justify-content: center;    cursor: pointer; color: var(--text-muted); transition: var(--transition); position: relative;}.icon-btn:hover { background: var(--primary-soft); color: var(--primary); transform: translateY(-1px); }.icon-btn svg { width: 20px !important; height: 20px !important; stroke-width: 2; }.user-dropdown img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; transition: 0.2s; cursor: pointer; }.user-dropdown:hover img { border-color: var(--border-hover-color); }.breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }.breadcrumb a { color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.375rem; transition: var(--transition); }.breadcrumb a:hover { color: var(--primary); }.breadcrumb a svg { width: 14px; height: 14px; }.breadcrumb .separator { color: var(--border-color); font-weight: 300; }.breadcrumb .current { color: var(--text-main); }.tab-header { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 0; margin-bottom: 2rem; }.header-icon { width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-light); color: var(--primary); padding: 0.6rem; transition: var(--transition); }.header-icon svg { width: 1.75rem; height: 1.75rem; }.header-text h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; }.header-text p { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--text-muted); }.tab-header:hover .header-icon { background: var(--primary-soft); border-color: var(--border-hover-color); transform: translateY(-2px); }.section-divider { border: 0; height: 1px; background: var(--border-color); margin: 0.5rem 0 2rem 0; }.rvn-top-notif-wrapper { position: relative; display: flex; align-items: center; }.rvn-notif-dropdown {    position: absolute; top: calc(100% + 12px); right: 0; width: 380px;    background: #ffffff; border-radius: 16px;    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);    z-index: 9999; overflow: hidden;    opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98);    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);    display: block;}.rvn-notif-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }.dropdown-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }.dropdown-header h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-main); }.quick-notif-item {    position: relative; padding: 16px 20px; border-bottom: 1px solid #f1f5f9;    transition: all 0.2s ease; display: flex; flex-direction: column;}.quick-notif-item:hover { background: #f8fafc; padding-left: 24px; }.quick-notif-item.unread { background: rgba(59, 130, 246, 0.04); }.notif-top { display: flex; align-items: center; margin-bottom: 8px; gap: 8px; }.notif-category { font-size: 10px; font-weight: 700; padding: 2px 10px; border-radius: 20px; text-transform: uppercase; }.cat-xac-thuc { background: #dbeafe; color: #1e40af; }.cat-tin-dang { background: #ffedd5; color: #9a3412; }.cat-tai-khoan { background: #dcfce7; color: #166534; }.cat-he-thong { background: #f1f5f9; color: #475569; }.cat-ho-so { background: #f3e8ff; color: #7e22ce; }.notif-time { font-size: 11px; color: var(--text-muted); font-weight: 400; }.badge-new-text {    background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;    padding: 2px 6px; border-radius: 4px; margin-left: auto;}.quick-notif-content strong { color: var(--text-main); font-size: 14px; font-weight: 600; line-height: 1.4; }.quick-notif-content p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.5; }.delete-quick-notif {    position: absolute; right: 19px; bottom: 12px;    width: 24px; height: 24px; border-radius: 6px;    background: #fee2e2; color: #ef4444;    display: flex; align-items: center; justify-content: center;    opacity: 0; transform: scale(0.8); transition: all 0.2s; border: none; cursor: pointer;}.quick-notif-item:hover .delete-quick-notif { opacity: 1; transform: scale(1); }.delete-quick-notif:hover { background: #ef4444; color: #fff; }.rvn-notif-badge {    position: absolute; top: -2px; right: -2px;    background: #ff3b30; color: white; font-size: 8px; font-weight: 700;    height: 18px; min-width: 18px; border-radius: 10px;    border: 2px solid #fff; display: flex; align-items: center; justify-content: center;    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);}.notif-status-msg, .notif-empty-state { padding: 30px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }.notif-empty-state .dashicons { font-size: 40px; width: 40px; height: 40px; color: #cbd5e1; background: #f8fafc; padding: 15px; border-radius: 50%; }.text-danger { color: #ef4444 !important; background: #fef2f2; padding: 12px; border-radius: 8px; border: 1px solid #fee2e2; width: calc(100% - 20px); margin: 10px auto; display: flex; align-items: center; justify-content: center; gap: 8px; }.rvn-loading-icon { width: 18px; height: 18px; border: 2px solid #e2e8f0; border-top-color: var(--primary); border-radius: 50%; animation: rvn-spin 0.8s linear infinite; }@keyframes rvn-spin { to { transform: rotate(360deg); } }.rvn-hamburger { display: none; background: none; border: none; width: 40px; height: 40px; cursor: pointer; color: var(--text-main); align-items: center; justify-content: center; border-radius: var(--radius-md); }@media (max-width: 991px) {    .rvn-hamburger { display: flex; }    .header-center { display: none; }    .header-left, .header-right { flex: 1; min-width: auto; }}.notif-trigger-expand {    display: flex;    justify-content: space-between;    align-items: flex-start;    cursor: pointer;    gap: 8px;    padding-right: 25px;    position: relative;}.notif-trigger-expand strong {    font-size: 14px;    color: var(--text-main);    line-height: 1.4;    transition: color 0.2s;}.notif-trigger-expand:hover strong {    color: var(--primary);}.expand-icon {    position: absolute;    right: 0;    top: 50%;    transform: translateY(-50%);    font-size: 16px;    color: #94a3b8;    transition: transform 0.3s ease;}.rvn-notif-dropdown .notif-detail-content {    margin-top: 10px;    border-top: 1px dashed var(--border-color);}.rvn-notif-main-wrapper .notif-detail-content {    margin-top: 10px;    border-top: 1px dashed var(--border-color);    padding: 10px 15px;    }.inner-msg {    margin-top: 10px;    padding: 12px;    background: #f8fafc;    border-radius: 8px;    font-size: 13px;    color: #475569;    line-height: 1.6;    border: 1px solid #eef2f6;}.quick-notif-item.is-expanded {    background: #fff;    box-shadow: inset 2px 0 0 var(--primary);}.is-expanded .expand-icon {    transform: translateY(-50%) rotate(180deg);}.delete-notif {    min-width: 26px;    height: 26px;    padding: 0 5px;    background: #f1f5f9;    border-radius: 4px;    border: none;    cursor: pointer;    overflow: hidden;    transition: all 0.3s ease;    display: flex;    align-items: center;    justify-content: center;    white-space: nowrap;}.delete-notif.is-confirming {    background: #ef4444 !important;    color: white !important;    min-width: 100px;    border-radius: 4px !important;    animation: rvn-pulse-red 1s infinite;}@keyframes rvn-pulse-red {    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }}.delete-label {    font-size: 11px;    font-weight: bold;    margin-left: 2px;}.dropdown-footer {    text-align: center;    padding: 8px 10px 10px;    border-top: 1px solid #e7ebf3;}.rvn-notif-dropdown-header {    display: flex;    justify-content: space-between;    align-items: center;    padding: 10px 15px;    border-bottom: 1px solid #eee;}.btn-mark-all-read {    background: none;    border: none;    color: #3b82f6;    font-size: 12px;    font-weight: 500;    cursor: pointer;    display: flex;    align-items: center;    gap: 4px;    padding: 4px 8px;    border-radius: 4px;    transition: background 0.2s;}.btn-mark-all-read:hover {    background: #eff6ff;    color: #1d4ed8;}#rvn-quick-notif-list {    max-height: 400px;    overflow-y: auto;    overflow-x: hidden;    scrollbar-width: thin;    position: relative;}#rvn-quick-notif-list::-webkit-scrollbar {    width: 6px;}#rvn-quick-notif-list::-webkit-scrollbar-thumb {    background: #cbd5e1;    border-radius: 10px;}.dropdown-toggle-wrapper {    padding: 10px;    background: #fff;    border-top: 1px solid #f1f5f9;    position: sticky;    bottom: 0;    text-align: center;    z-index: 10;}.btn-toggle-notif {    width: 100%;    background: #f8fafc;    border: 1px solid #e2e8f0;    padding: 8px;    border-radius: 6px;    color: #3b82f6;    font-size: 13px;    font-weight: 600;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    gap: 5px;}.btn-toggle-notif:hover {    background: #3b82f6;    color: #fff;}.btn-toggle-notif .dashicons {    line-height: inherit;    font-size: 16px;}.count-tag-modern.notifications {    transition: all 0.3s ease;}.pulse-animation {    transform: scale(1.3);    background-color: #ef4444 !important;    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);}.notif-load-more-wrapper, #rvn-delete-all, #rvn-mark-all-read {    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.is-removing {    opacity: 0;    transform: scale(0.9);    pointer-events: none;}