/* ===== Top app bar ===== */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;padding-top:env(safe-area-inset-top);
  background:rgba(246,249,252,0.86);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.topbar-actions{display:flex;align-items:center;gap:10px;}

/* =========================================================
   Chọn ngôn ngữ — nút cờ + mã (VI/EN) + mở dropdown, thay cho
   cụm 2 nút to trước đây (đã đổi tên class .lang-switch/.lang-btn
   cũ → .topbar-lang-*, gọn hơn để cân đối với nút chuông bên
   cạnh). Dropdown dùng lại đúng khuôn .lost-country-panel/-item
   ở pages/lost/lost.css cho đồng bộ hoá kiểu dáng toàn app.
   ========================================================= */
.topbar-lang-wrap{position:relative;flex-shrink:0;}
.topbar-lang-btn{
  display:flex;align-items:center;gap:4px;padding:6px 8px 6px 7px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
}
.topbar-lang-flag{font-size:14px;line-height:1;}
.topbar-lang-code{
  font-size:11.5px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--navy);letter-spacing:0.02em;
}
.topbar-lang-chev{width:12px;height:12px;color:var(--slate-light);flex-shrink:0;transition:transform .15s;}
.topbar-lang-btn[aria-expanded="true"] .topbar-lang-chev{transform:rotate(180deg);}
.topbar-lang-btn:active{opacity:0.85;}

.topbar-lang-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:150px;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-md);overflow:hidden;
  animation:topbarLangIn .15s ease-out;
}
@keyframes topbarLangIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.topbar-lang-item{
  width:100%;display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:#fff;text-align:left;border-bottom:1px solid var(--line);
}
.topbar-lang-item:last-child{border-bottom:none;}
.topbar-lang-item:active,.topbar-lang-item.active{background:var(--mint-50);}
.topbar-lang-item-flag{font-size:15px;flex-shrink:0;}
.topbar-lang-item-name{flex:1;font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap;}
.topbar-lang-item.active .topbar-lang-item-name{color:var(--teal);}

/* ===== Chuông thông báo ===== */
.topbar-bell{
  position:relative;flex-shrink:0;width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--navy);
}
.topbar-bell svg{width:19px;height:19px;}
.topbar-bell:active{opacity:0.85;}
.topbar-bell-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--coral);color:#fff;border:1.5px solid var(--sky-50);
  font-size:9.5px;font-weight:800;line-height:13px;text-align:center;
  font-family:'Plus Jakarta Sans',sans-serif;
}