/* TÊN TAB: Chuông có nhãn và danh sách thông báo, dùng chữ hệ thống của app. */
/* Shared header grid: subtitle gets a full row, controls never displace it. */
header.topbar,header.topbar:has(#hcChuThongBao:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:44px auto;align-items:center;column-gap:4px;row-gap:2px;padding:6px 16px 10px}
header.topbar h1{grid-column:1;grid-row:1;min-width:0;white-space:normal;line-height:1.2;letter-spacing:0}
header.topbar .sub{grid-column:1/-1;grid-row:2;min-width:0;margin:0;font-size:13px;line-height:18px;white-space:nowrap}
header.topbar .gnt-lammoi,#hcChuThongBao{position:relative;top:auto;left:auto;right:auto;transform:none;grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px;border:0;border-radius:9px;background:transparent;color:inherit;opacity:.95;cursor:pointer}
#hcChuThongBao{grid-column:2}
#hcChuThongBao[hidden]{display:none}
#hcChuThongBao svg,header.topbar .gnt-lammoi svg{display:block;width:24px;height:24px;flex:none}
#hcChuThongBao .hc-tb-count{position:absolute;right:0;top:0;min-width:16px;padding:0 3px;border-radius:8px;background:#fff1c7;color:#7b3800;font-size:11px;font-weight:700;line-height:16px}
header.topbar:has(.gnt-ve),header.topbar:has(.gnt-ve):has(#hcChuThongBao){grid-template-columns:36px minmax(0,1fr) 44px 44px}
header.topbar:has(.gnt-ve) h1{grid-column:2}
header.topbar:has(.gnt-ve) #hcChuThongBao{grid-column:3}
header.topbar:has(.gnt-ve) .gnt-lammoi{grid-column:4}
header.topbar .gnt-ve{position:relative;grid-column:1;grid-row:1;left:-8px;top:auto;transform:none}
@media(max-width:359px){header.topbar h1{font-size:16px}header.topbar{column-gap:2px;padding-left:12px;padding-right:12px}header.topbar:has(.gnt-ve),header.topbar:has(.gnt-ve):has(#hcChuThongBao){grid-template-columns:28px minmax(0,1fr) 44px 44px}}

#hcThongBao{font:inherit;color:var(--text,#302923);background:var(--card,#fff);border:1px solid #cbbdaf;border-radius:16px;padding:18px;width:min(620px,calc(100vw - 28px));max-height:85vh;box-sizing:border-box;overflow-y:auto}
#hcThongBao::backdrop{background:rgba(0,0,0,.35)}
#hcThongBao button,#hcThongBao summary{min-height:44px;font:inherit;font-size:16px;padding:9px 12px;border:1px solid #d0c5bb;border-radius:9px;background:#fffaf3;color:#44362b;cursor:pointer}
#hcThongBao h2{font-size:19px;margin:0;line-height:1.5}#hcThongBao .hc-tb-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
#hcThongBao .hc-tb-list{display:grid;gap:10px;margin:14px 0}#hcThongBao .hc-tb-item{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
#hcThongBao .hc-tb-item time{font-size:13px;color:#6e6256}#hcThongBao .hc-tb-unread{border-left:4px solid #a56b2c;background:#fff4e3}#hcThongBao [aria-pressed=true]{background:#684b32;color:white}
#hcThongBao .hc-tb-note:empty{display:none}#hcThongBao .hc-tb-note{font-size:14px;line-height:1.5}#hcThongBao details{margin-top:18px}


/* Compact unread centre: device preference, browser grant and local subscription agree. */
#hcThongBao .hc-tb-head{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
#hcThongBao .hc-tb-head-actions{display:flex;align-items:center;gap:6px;flex:none}
#hcThongBao #hcTbDevice{width:44px;height:44px;padding:9px;border:0;background:#f0f2f2;color:#656b71;display:flex;align-items:center;justify-content:center}
#hcTbDevice svg{width:26px;height:26px;display:block;flex:none}
#hcThongBao #hcTbDevice[data-state=on]{background:#edf8ee;color:#247238}
#hcThongBao #hcTbDevice[data-state=off]{background:#fff0ef;color:#b52c31}
#hcThongBao #hcTbDevice[data-state=pending]{opacity:.6;cursor:wait}
#hcThongBao .hc-tb-read-all{display:block;margin:6px auto 0;background:transparent;border:0;font-size:13px;color:#71695f}
#hcThongBao .hc-tb-empty{color:#726b62;text-align:center;margin:24px 0;font-size:16px}
#hcThongBao button:focus-visible{outline:2px solid #1565c0;outline-offset:2px}
#hcThongBao .hc-tb-list:has(.hc-tb-empty){min-height:70px;align-content:center}