/* ===== nc-bar (crumb bar) ===== */
.nc-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb;
  background: linear-gradient(180deg,#f8fafc,#eef2f7);
  color:#0f172a; box-shadow:0 2px 8px rgba(2,6,23,.04);
  margin-bottom:15px;
}
.nc-bar .nc-bc{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.nc-bar .nc-bc > li{ display:flex; align-items:center; }
.nc-bar .nc-bc > li a,
.nc-bar .nc-bc > li span{
  display:inline-block; padding:6px 10px; border-radius:8px; background:transparent;
  color:#334155; font-weight:700; text-decoration:none;
}
.nc-bar .nc-bc > li a:hover{ background:#f1f5f9; }
.nc-bar .nc-bc > li.is-active span{ background:#e9effa; color:#0f172a; }
.nc-bar .nc-bc > li + li::before{ content:"›"; margin:0 4px; color:#94a3b8; font-weight:700; }

/* ปุ่มออกจากระบบ */
.nc-logout{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:8px 12px; border-radius:10px; text-decoration:none;
  background:#fff; color:#0f172a; font-weight:700; border:1px solid #dbe2ea;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
  transition:transform .06s, box-shadow .12s, background .12s;
}
.nc-logout:hover{ background:#f8fafc; box-shadow:0 4px 12px rgba(2,6,23,.10); transform:translateY(-1px); }
.nc-logout i{ opacity:.9; }

@media (max-width:768px){
  .nc-bar{ flex-direction:column; align-items:stretch; gap:8px; }
  .nc-logout{ justify-content:center; }
}

/* ===== overlay ตอนออกจากระบบ ===== */
.nc-logout-overlay{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.nc-logout-overlay.is-active{ opacity:1; pointer-events:auto; }
.nc-logout-card{
  min-width:240px; padding:16px 18px; border-radius:12px; background:#fff; color:#0f172a; text-align:center;
  box-shadow:0 10px 28px rgba(2,6,23,.25); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.nc-logout-spin{ width:44px; height:44px; border-radius:50%; border:4px solid #e5e7eb; border-top-color:#0ea5e9; animation:nc-spin 1s linear infinite; }
@keyframes nc-spin{ to{ transform:rotate(360deg);} }
.nc-logout-msg{ font-weight:700; }