/* Khung dùng chung: thanh điều hướng, chuông báo, nút đăng xuất.
   Màu lấy từ biến của từng trang nên tự hợp với cả nền sáng lẫn nền tối. */

nav{display:flex;gap:4px}
nav a{font-size:13px;padding:5px 11px;border-radius:7px;text-decoration:none;
  color:var(--ink-2)}
nav a:hover{background:var(--surface-2);color:var(--ink)}
nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}

.epg-nm{font-weight:600}
.epg-link{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;
  cursor:pointer;padding:2px;text-decoration:underline;text-underline-offset:2px}
.epg-link:hover{filter:brightness(1.15)}

.epg-bellwrap{position:relative;display:flex}
.epg-bell{background:none;border:1px solid transparent;border-radius:8px;
  font-size:16px;line-height:1;padding:5px 7px;cursor:pointer;position:relative}
.epg-bell:hover{background:var(--surface-2);border-color:var(--line)}
.epg-badge{position:absolute;top:-2px;right:-3px;min-width:17px;height:17px;
  padding:0 4px;background:var(--crit);color:#fff;border-radius:9px;
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  font-family:"Segoe UI",system-ui,sans-serif}

.epg-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;z-index:40;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;
  box-shadow:0 6px 28px -8px rgba(0,0,0,.35);overflow:hidden}
.epg-nhead{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3)}
.epg-nhead .epg-link{text-transform:none;letter-spacing:0;font-size:12px}
.epg-nlist{max-height:min(60vh,420px);overflow:auto}

.epg-n{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.epg-n:last-child{border-bottom:0}
.epg-n.unread{background:var(--accent-soft)}
.epg-nk{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
.epg-nk.crit{background:var(--crit);color:#fff}
.epg-nk.warn{background:var(--warn);color:#fff}
.epg-nk.ok{background:var(--ok);color:#fff}
.epg-nk.acc{background:var(--accent);color:#fff}
.epg-nt{font-size:13.3px;font-weight:600;line-height:1.4}
.epg-nb{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.epg-na{font-size:11px;color:var(--ink-3);margin-top:3px;
  font-family:"Cascadia Mono",Consolas,monospace}
.epg-nempty{padding:26px 14px;text-align:center;color:var(--ink-3);font-size:13px}

/* Chân trang chung. Viết thẳng trong HTML chứ không do JavaScript dựng ra,
   để nó vẫn hiện kể cả khi đoạn script của trang có hỏng. */
.epg-foot{margin-top:auto;padding:20px 22px 26px;text-align:center;
  font-size:12.5px;color:var(--ink-3);line-height:1.7;flex:0 0 auto}
.epg-foot a{color:var(--accent);text-decoration:none}
.epg-foot a:hover{text-decoration:underline;text-underline-offset:2px}
.epg-foot span{display:block}

/* Ô nhập giờ 24 giờ, kèm đồng hồ chọn tự dựng.
   Không dùng <input type="time"> vì trình duyệt tự hiện AM/PM theo ngôn
   ngữ của máy và không có cột giây. */
.gw{position:relative;display:block}
.gw > input{padding-right:24px}
.gw .dh{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:21px;height:21px;padding:0;border:0;background:none;cursor:pointer;
  border-radius:5px;color:var(--ink-3);display:flex;align-items:center;
  justify-content:center}
.gw .dh:hover{background:var(--surface-2);color:var(--accent)}
.gw .dh svg{width:14px;height:14px;display:block}
.gw > input[readonly] + .dh{display:none}

.gio-pick{position:fixed;z-index:60;display:flex;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:10px;box-shadow:0 8px 30px -8px rgba(0,0,0,.4);overflow:hidden}
.gio-pick[hidden]{display:none}
.gio-pick .cot{width:57px;border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.gio-pick .cot:last-child{border-right:0}
.gio-pick .dau{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);text-align:center;padding:6px 0;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.gio-pick .ds{overflow-y:auto;max-height:176px;scrollbar-width:thin}
.gio-pick .ds b{display:block;text-align:center;padding:5px 0;cursor:pointer;
  font-family:"Cascadia Mono",Consolas,monospace;font-size:13px;font-weight:400;
  color:var(--ink)}
.gio-pick .ds b:hover{background:var(--surface-2)}
.gio-pick .ds b.on{background:var(--accent);color:#fff;font-weight:700}