/* ViCamBachGiai — translucent notification center v3.
   Icon itself is the site's own cyan accent (#26c2dc) per request,
   transparent/no-border/no-glow background at rest — the purple
   ring/glow + badge still kick in only while .has-unread is applied
   (notification-bell-attention.css), as the "something new" signal. */
.vc-notification-bell{position:relative;overflow:visible!important;color:#26c2dc!important;background:transparent!important;border-color:transparent!important;box-shadow:none}
.vc-notification-bell:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)!important}
.vc-notification-bell.has-unread{color:#c8b5ff!important;background:linear-gradient(145deg,rgba(174,139,255,.22),rgba(103,75,188,.1))!important;border-color:rgba(190,164,255,.6)!important}
.vc-notification-bell.has-unread:hover{color:#ddd2ff!important;border-color:rgba(211,194,255,.84)!important;box-shadow:0 0 12px rgba(168,128,255,.48),0 0 26px rgba(128,86,230,.25)}
.vc-notification-bell svg{width:24px;height:24px;display:block;fill:currentColor;stroke:none;transform-origin:50% 14%;animation:vc-bell-idle-wiggle 5s ease-in-out infinite}
/* Idle liveliness: sits still almost the whole loop, then does one
   quick wiggle burst near the end of each cycle, repeating — so the
   bell isn't a dead static icon even with nothing unread. Overridden
   by the bigger has-unread ring (notification-bell-attention.css),
   whose selector is more specific and loads after this file. */
@keyframes vc-bell-idle-wiggle{
  0%,88%,100%{transform:rotate(0deg)}
  90%{transform:rotate(11deg)}
  92%{transform:rotate(-9deg)}
  94%{transform:rotate(6deg)}
  96%{transform:rotate(-3deg)}
  98%{transform:rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){ .vc-notification-bell svg{animation:none} }
.vc-notification-bell.has-unread svg{filter:drop-shadow(0 0 4px rgba(183,148,255,.88)) drop-shadow(0 0 8px rgba(137,91,238,.48))}
.vc-notification-badge{position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;padding:0 4px;border:1px solid #fff1a8;border-radius:999px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe66a,#f5b914);box-shadow:0 0 7px rgba(255,215,64,.85),0 0 15px rgba(255,190,22,.48);color:#2b1b00;font-size:10px;font-weight:800;line-height:1}
/* Popover now matches the mobile menu's translucent-gray panel recipe
   (same gradient/border/bevel box-shadow/blur/entrance animation as
   .mobile-menu in mobile-menu-redesign-v1.css) instead of its old
   navy/purple look. Scoped overrides below (.vc-notif-popover ...)
   recolor the shared card/icon/empty-state classes only inside the
   popover — the standalone /thong-bao page (.vc-notif-hero, .vc-notif-list
   outside the popover) keeps its original purple styling untouched. */
/* Mobile Safari real-device test showed the popover's hero image
   bleeding straight through — not a transparency problem on its own,
   but the <680px media query below used to null out backdrop-filter
   entirely, so there was no blur at all behind the translucent gradient.
   Bumping opacity to .93/.96 "fixed" the bleed-through but also flattened
   the panel into a solid card, losing the frosted-glass depth .mobile-menu
   has (visible on a real device next to it: menu reads as glass, popover
   read as a flat gray card) — overcorrected past what was actually needed.
   With blur now active at every width, the original .74/.82 alpha (same
   as .mobile-menu, copied exactly so the two match) is enough on its own. */
.vc-notif-popover{--bell-right:16px;position:fixed;z-index:2400;top:70px;right:var(--bell-right);width:min(390px,calc(100vw - 24px));max-height:min(650px,calc(100vh - 92px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:1.75rem;background:linear-gradient(165deg,rgba(107,107,107,.74),rgba(66,66,66,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 18px 28px -20px rgba(255,255,255,.16),inset 0 -26px 36px -24px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%);animation:mmPanelIn .22s ease-out both}
.vc-notif-popover>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1rem .8rem;border-bottom:1px solid rgba(255,255,255,.14)}
.vc-notif-hero small{display:block;margin-bottom:.18rem;color:#9f88ea;font-size:.63rem;font-weight:800;letter-spacing:.16em}
.vc-notif-popover h3{margin:0;color:#e7ecf6;font-size:1.2rem}.vc-notif-popover header button{border:0;background:transparent;color:#26c2dc;font-size:.75rem;font-weight:700}
.vc-notif-pop-actions{display:flex;align-items:center;gap:.55rem}.vc-notif-pop-close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%!important;background:rgba(255,255,255,.09)!important;color:#e7ecf6!important;font-size:1.35rem!important;line-height:1}
.vc-notif-pop-list{overflow:auto;padding:.55rem}.vc-notif-view-all{display:flex;justify-content:center;align-items:center;gap:.55rem;padding:.9rem;border-top:1px solid rgba(255,255,255,.14);color:#26c2dc;font-size:.86rem;font-weight:700}.vc-notif-view-all span{font-size:1.1rem}
/* Notification cards + empty state inside the popover: recolored from
   purple to the menu's neutral-gray/cyan palette (#e7ecf6 body text,
   #26c2dc for icons/badges/anything meant to stand out), scoped so the
   full-page list elsewhere keeps the original purple treatment. */
.vc-notif-popover .vc-notif-card{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.vc-notif-popover .vc-notif-card:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09)}
.vc-notif-popover .vc-notif-card.is-unread{border-color:rgba(38,194,220,.4);background:linear-gradient(105deg,rgba(38,194,220,.16),rgba(255,255,255,.04) 48%)}
.vc-notif-popover .vc-notif-icon{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#26c2dc}
.vc-notif-popover .vc-notif-line b{color:#e7ecf6}
.vc-notif-popover .vc-notif-new{background:rgba(38,194,220,.2);color:#26c2dc}
.vc-notif-popover .vc-notif-copy p{color:#c3cad8}
.vc-notif-popover .vc-notif-copy time{color:#9aa3b5}
.vc-notif-popover .vc-notif-delete{color:#aab3c4}
.vc-notif-popover .vc-notif-delete:hover{background:rgba(255,255,255,.09);color:#e7ecf6}
.vc-notif-popover .vc-notif-empty b{color:#e7ecf6}
.vc-notif-popover .vc-notif-empty p{color:#c3cad8}
/* Entrance: panel pops in (mmPanelIn above), then header/cards/footer-link
   pop in one after another (mmItemPop, both @keyframes defined in
   mobile-menu-redesign-v1.css — reused here since the rule only needs the
   name to be declared somewhere in the page, not in this file). */
.vc-notif-popover>header,.vc-notif-popover .vc-notif-pop-list>*,.vc-notif-popover .vc-notif-view-all{animation:mmItemPop .42s cubic-bezier(.34,1.56,.64,1) backwards}
.vc-notif-popover>header{animation-delay:.05s}
.vc-notif-popover .vc-notif-pop-list>*:nth-child(1){animation-delay:.12s}
.vc-notif-popover .vc-notif-pop-list>*:nth-child(2){animation-delay:.17s}
.vc-notif-popover .vc-notif-pop-list>*:nth-child(3){animation-delay:.22s}
.vc-notif-popover .vc-notif-pop-list>*:nth-child(4){animation-delay:.27s}
.vc-notif-popover .vc-notif-pop-list>*:nth-child(5){animation-delay:.32s}
.vc-notif-popover .vc-notif-view-all{animation-delay:.37s}
@media(prefers-reduced-motion:reduce){
  .vc-notif-popover,.vc-notif-popover>header,.vc-notif-popover .vc-notif-pop-list>*,.vc-notif-popover .vc-notif-view-all{animation:none}
}
.vc-notification-page{max-width:900px!important;padding:1.3rem 1rem 4rem!important}.vc-notif-hero{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-bottom:1rem;padding:1.15rem 1.25rem;overflow:hidden;border:1px solid rgba(158,132,235,.28);border-radius:24px;background:linear-gradient(130deg,rgba(121,82,210,.16),rgba(19,31,51,.72) 60%,rgba(70,159,207,.08));box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 50px rgba(0,0,0,.18)}
.vc-notif-hero:after{content:"";position:absolute;right:-50px;top:-80px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(126,87,221,.18),transparent 70%);pointer-events:none}
.vc-notif-hero-icon{position:relative;width:56px;height:56px;display:grid;place-items:center;border:1px solid rgba(188,165,255,.35);border-radius:18px;background:rgba(130,91,222,.14);color:#cbbdff}.vc-notif-hero-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.vc-notif-hero-icon span{position:absolute;right:-5px;top:-5px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#7657d6;color:#fff;font-size:.66rem;font-weight:800}
.vc-notif-hero h1{margin:0;font-size:clamp(1.55rem,4vw,2rem)}.vc-notif-hero p{margin:.25rem 0 0;color:var(--muted);font-size:.86rem}.vc-notif-hero-actions{position:relative;z-index:1;display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.vc-notif-hero-actions .btn{font-size:.76rem;padding:.62rem .78rem}
.vc-notif-filters{display:flex;gap:.4rem;margin:0 0 .8rem;padding:.25rem;overflow:auto}.vc-notif-filters button{white-space:nowrap;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);padding:.58rem .85rem;font-size:.78rem;font-weight:700}.vc-notif-filters button.on{border-color:rgba(167,140,247,.36);background:rgba(127,89,219,.14);color:#cabaff}
.vc-notif-list{display:grid;gap:.65rem}.vc-notif-card{position:relative;display:grid;grid-template-columns:42px 1fr 34px;align-items:center;gap:.8rem;min-width:0;padding:.9rem 1rem;border:1px solid rgba(136,121,184,.16);border-radius:18px;background:rgba(14,20,34,.64);transition:border-color .18s ease,background .18s ease,transform .18s ease}.vc-notif-card:hover{transform:translateY(-1px);border-color:rgba(159,135,232,.36);background:rgba(21,27,45,.78)}.vc-notif-card.is-unread{border-color:rgba(156,123,247,.4);background:linear-gradient(105deg,rgba(119,79,214,.13),rgba(16,23,39,.78) 48%)}
.vc-notif-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(177,155,238,.22);border-radius:13px;background:rgba(121,83,207,.11);color:#c5b3ff;font-weight:800}.vc-kind-story .vc-notif-icon{border-color:rgba(191,157,85,.28);background:rgba(177,126,37,.1);color:#e2c27d}.vc-kind-comment .vc-notif-icon{border-color:rgba(73,176,211,.28);background:rgba(45,141,179,.09);color:#85cee7}
.vc-notif-copy{min-width:0;color:inherit}.vc-notif-line{display:flex;align-items:center;gap:.5rem;min-width:0}.vc-notif-line b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.91rem}.vc-notif-new{flex:none;border-radius:999px;background:rgba(120,83,213,.2);color:#c7b6ff;padding:.14rem .38rem;font-size:.57rem;font-style:normal;font-weight:800;text-transform:uppercase}.vc-notif-copy p{display:-webkit-box;margin:.22rem 0 .3rem;overflow:hidden;color:#b8bfd0;font-size:.79rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.vc-notif-copy time{color:#747f97;font-size:.68rem}.vc-notif-delete{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#717a90;font-size:1.2rem}.vc-notif-delete:hover{background:rgba(255,255,255,.05);color:#d8dbea}
.vc-notif-card.is-compact{grid-template-columns:36px 1fr;padding:.72rem;border:0;border-radius:14px;background:transparent}.vc-notif-card.is-compact:hover{transform:none;background:rgba(127,91,215,.09)}.vc-notif-card.is-compact .vc-notif-icon{width:34px;height:34px;border-radius:11px;font-size:.8rem}.vc-notif-card.is-compact .vc-notif-line b{font-size:.82rem}.vc-notif-card.is-compact .vc-notif-copy p{font-size:.73rem;-webkit-line-clamp:1}.vc-notif-card.is-compact .vc-notif-copy time{font-size:.63rem}
.vc-notif-empty{display:grid;place-items:center;text-align:center;min-height:220px;padding:2rem;color:var(--muted)}.vc-notif-empty span{width:52px;height:52px;display:grid;place-items:center;margin-bottom:.75rem;border:1px solid rgba(163,139,230,.25);border-radius:17px;background:rgba(126,89,213,.08);color:#a78fe9;font-size:1.25rem}.vc-notif-empty b{color:#c7ccda}.vc-notif-empty p{margin:.3rem 0 0;font-size:.78rem}.vc-notif-popover .vc-notif-empty{min-height:190px}
.vc-admin-notification{max-width:880px}.vc-admin-notification textarea{min-height:180px}.vc-admin-notification form{padding:1.1rem;border:1px solid rgba(151,128,218,.2);border-radius:20px;background:rgba(15,21,35,.62)}
.vc-body-count{display:block;margin-top:.35rem;text-align:right;color:var(--muted);font-size:.7rem}.vc-admin-form-actions,.vc-admin-notif-actions{display:flex;gap:.55rem;flex-wrap:wrap}.vc-admin-notif-history{margin-top:2rem}.vc-admin-notif-history h2{margin-bottom:.8rem}.vc-admin-notif-history>div{display:grid;gap:.7rem}.vc-admin-notif-card{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid rgba(151,128,218,.18);border-radius:18px;background:rgba(15,21,35,.55)}.vc-admin-notif-copy{min-width:0}.vc-admin-notif-copy h3{margin:0 0 .35rem;font-size:1rem}.vc-admin-notif-copy p{margin:0 0 .5rem;color:#c9cedd;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.vc-admin-notif-copy small,.vc-admin-notif-empty{color:var(--muted);font-size:.72rem}.vc-admin-notif-empty{padding:1.2rem;border:1px dashed rgba(151,128,218,.18);border-radius:16px;text-align:center}.vc-admin-notif-actions{flex:none}.vc-admin-notif-actions .btn{padding:.55rem .7rem;font-size:.72rem}.vc-admin-notif-actions .vc-danger{color:#ff9ca8;border-color:rgba(255,112,128,.28)}
.vc-notif-detail-bg{position:fixed;z-index:2600;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(2,5,12,.72);backdrop-filter:blur(8px)}.vc-notif-detail{width:min(560px,100%);max-height:min(720px,calc(100vh - 32px));overflow:auto;padding:1.2rem;border:1px solid rgba(175,148,248,.38);border-radius:24px;background:linear-gradient(145deg,rgba(23,29,48,.99),rgba(10,15,27,.99));box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 35px rgba(121,82,210,.16)}.vc-notif-detail>header{display:flex;align-items:center;justify-content:space-between}.vc-notif-detail>header button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#d8d0ef;font-size:1.4rem}.vc-notif-detail>small{display:block;margin-top:1rem;color:#a98df2;font-size:.65rem;font-weight:800;letter-spacing:.16em}.vc-notif-detail h2{margin:.3rem 0 .8rem;font-size:clamp(1.25rem,4vw,1.65rem);line-height:1.35}.vc-notif-detail-body{padding:1rem;border:1px solid rgba(151,126,218,.18);border-radius:16px;background:rgba(7,12,23,.42);color:#d7dbea;font-size:.95rem;line-height:1.7;white-space:pre-wrap}.vc-notif-detail>time{display:block;margin-top:.65rem;color:#7f899f;font-size:.7rem}.vc-notif-detail>footer{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem;flex-wrap:wrap}
.notify-edit-toggle{display:flex!important;align-items:flex-start;gap:.7rem;margin:.7rem 0 1rem;padding:.85rem 1rem;border:1px solid rgba(160,134,235,.25);border-radius:15px;background:rgba(122,84,210,.08);color:#d0c4f6!important}.notify-edit-toggle input{margin-top:.2rem}.notify-edit-toggle span{display:grid;gap:.18rem}.notify-edit-toggle small{color:var(--muted);font-weight:400}
@media(max-width:680px){.vc-notification-bell svg{width:22px;height:22px}.vc-notif-popover{top:62px;right:12px!important;width:calc(100vw - 24px);max-height:calc(100vh - 78px)}.vc-notif-hero{grid-template-columns:auto 1fr;padding:1rem}.vc-notif-hero-actions{grid-column:1/-1;justify-content:flex-start}.vc-notif-hero-actions .btn{flex:1}.vc-notif-hero-icon{width:48px;height:48px;border-radius:15px}.vc-notif-card{grid-template-columns:38px 1fr 30px;padding:.82rem}.vc-notif-icon{width:36px;height:36px;border-radius:12px}.vc-notif-line b{font-size:.84rem}.vc-notif-copy p{font-size:.75rem}.vc-notif-filters{margin-inline:-.25rem}.vc-admin-notif-card{display:grid}.vc-admin-notif-actions{width:100%}.vc-admin-notif-actions .btn{flex:1}}

/* Ported from the live site (vicambachgiai3): pinned notices + 'Xóa đã đọc'. */
/* Pinned notices: always above the list, no delete control. */
.vc-notif-pinned-list{display:grid;gap:.65rem;margin:0 0 1rem}
.vc-notif-pinned{grid-template-columns:42px 1fr;border-color:rgba(226,194,125,.5);background:linear-gradient(105deg,rgba(191,150,60,.16),rgba(16,23,39,.82) 55%);box-shadow:0 0 22px rgba(191,150,60,.08)}
.vc-notif-pinned:hover{border-color:rgba(226,194,125,.72);background:linear-gradient(105deg,rgba(191,150,60,.22),rgba(21,27,45,.86) 55%)}
.vc-notif-pinned .vc-pin-icon{border-color:rgba(226,194,125,.4);background:rgba(191,150,60,.16);color:#f0d38f}
.vc-pin-icon svg{width:19px;height:19px;fill:currentColor;transform:rotate(35deg)}
.vc-notif-pin-badge{flex:none;border-radius:999px;background:rgba(226,194,125,.2);color:#f0d38f;padding:.14rem .45rem;font-size:.57rem;font-style:normal;font-weight:800;text-transform:uppercase}
.vc-notif-pinned .vc-notif-copy p{display:block;white-space:pre-line;overflow-wrap:anywhere;-webkit-line-clamp:unset}.vc-notif-pinned .vc-notif-line b{white-space:normal;overflow:visible}
.vc-notif-popover .vc-notif-pinned-list{flex:none;max-height:42%;overflow:auto;margin:0;padding:.4rem .5rem 0;gap:.3rem}
.vc-notif-popover .vc-notif-pinned.is-compact{grid-template-columns:36px 1fr;border:1px solid rgba(226,194,125,.4);background:rgba(191,150,60,.1)}
.vc-notif-popover .vc-notif-pinned.is-compact .vc-notif-copy p{-webkit-line-clamp:2}
.vc-admin-pinned{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(136,121,184,.2)}
.vc-admin-pinned form{display:grid;gap:.8rem;margin-bottom:1.2rem}
/* Bell popover: keep pinned notices compact however long the text is. */
.vc-notif-popover .vc-notif-pinned-list{max-height:34%}
.vc-notif-popover .vc-notif-pinned.is-compact .vc-notif-copy p{display:-webkit-box;white-space:normal;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.vc-notif-popover .vc-notif-pinned.is-compact .vc-notif-line b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-notif-popover header button[data-notif-clear-read]{color:#f1a1ad}
.vc-notif-pop-actions{flex-wrap:wrap;justify-content:flex-end}