/* ─────────────────────────────────────────────────────────────
   notif-bell.css — Chuông thông báo (nút trên thanh điều hướng + ngăn thông báo dán sát mép phải)
   Dùng token của theme.css; nạp cùng notif-bell.js ở dashboard.html và ban-tin.html.
   ───────────────────────────────────────────────────────────── */
.pdv-bell{position:relative;display:inline-flex;align-items:center;}
.pdv-bell[hidden]{display:none;}

/* ── Nút chuông ── */
.pdv-bell__btn{
  position:relative;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--color-black);color:var(--color-black);cursor:pointer;padding:0;
  transition:background var(--ease),border-color var(--ease);
}
.pdv-bell__btn:hover,.pdv-bell.is-open .pdv-bell__btn{background:var(--color-gray-bg);}
.pdv-bell__btn:focus-visible{outline:2px solid var(--color-black);outline-offset:2px;}
.pdv-bell__btn svg{width:21px;height:21px;display:block;transform-origin:50% 4px;}
.pdv-bell.is-ring .pdv-bell__btn svg{animation:pdvBellRing .9s ease-in-out 1;}
@keyframes pdvBellRing{
  0%,100%{transform:rotate(0);} 15%{transform:rotate(14deg);} 30%{transform:rotate(-12deg);}
  45%{transform:rotate(9deg);} 60%{transform:rotate(-6deg);} 75%{transform:rotate(3deg);}
}
.pdv-bell__count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 4px;border-radius:var(--radius-pill);
  background:var(--color-red-signal);color:#fff;border:2px solid var(--color-white);box-sizing:border-box;
  font-family:var(--font-data);font-size:10.5px;font-weight:700;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.pdv-bell__count[hidden]{display:none;}

/* ── Ngăn thông báo: dán sát mép phải màn hình, từ dưới thanh điều hướng xuống hết chiều cao ──
   (top được notif-bell.js đặt theo vị trí thật của thanh điều hướng) */
.pdv-bell__panel{
  display:none;position:fixed;right:0;top:68px;bottom:0;z-index:300;
  width:400px;max-width:100vw;
  flex-direction:column;background:var(--color-white);border-left:1px solid var(--color-border);
  box-shadow:-14px 0 40px rgba(0,0,0,.12);
  color:var(--color-black);text-align:left;text-transform:none;letter-spacing:0;
}
.pdv-bell.is-open .pdv-bell__panel{display:flex;animation:pdvBellSlide .2s ease-out;}
@keyframes pdvBellSlide{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}

.pdv-bell__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px 20px;}
.pdv-bell__title{font-family:var(--font-heading);font-weight:800;font-size:17px;letter-spacing:-.01em;margin:0;}
.pdv-bell__title-n{font-family:var(--font-data);font-weight:600;font-size:14px;color:var(--color-gray-text);margin-left:2px;}
.pdv-bell__tools{display:flex;align-items:center;gap:4px;}
.pdv-bell__tool{
  width:34px;height:34px;border-radius:50%;border:none;background:none;color:var(--color-gray-text);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--ease),color var(--ease);
}
.pdv-bell__tool svg{width:19px;height:19px;}
.pdv-bell__tool:hover:not(:disabled){background:var(--color-gray-bg);color:var(--color-black);}
.pdv-bell__tool:focus-visible{outline:2px solid var(--color-black);outline-offset:1px;}
.pdv-bell__tool:disabled{opacity:.35;cursor:default;}
.pdv-bell__markall:not(:disabled){color:var(--color-green-text);}

/* Tab chủ đề */
.pdv-bell__tabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px 20px 12px;border-bottom:1px solid var(--color-border);}
.pdv-bell__tab{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-pill);
  border:1.5px solid var(--color-border);background:var(--color-white);cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--color-gray-text);
  transition:border-color var(--ease),color var(--ease),background var(--ease);
}
.pdv-bell__tab:hover{border-color:var(--color-black);color:var(--color-black);}
.pdv-bell__tab.is-active{background:var(--color-black);border-color:var(--color-black);color:#fff;}
.pdv-bell__tab:focus-visible{outline:2px solid var(--color-black);outline-offset:2px;}
.pdv-bell__tab-n{
  min-width:17px;height:17px;padding:0 5px;border-radius:var(--radius-pill);background:var(--color-red-signal);color:#fff;
  font-family:var(--font-data);font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;
}

.pdv-bell__list{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;padding:4px 14px 18px;background:var(--color-white);}

/* Tiêu đề nhóm theo ngày */
.pdv-bell__day{padding:16px 6px 8px;font-family:var(--font-heading);font-weight:800;font-size:13.5px;color:var(--color-black);}

/* ── Một thông báo (thẻ) ── */
.pdv-n{position:relative;display:flex;gap:12px;padding:12px 14px;margin-bottom:8px;border-radius:12px;cursor:pointer;
  background:var(--color-gray-bg);border:1px solid transparent;transition:background var(--ease),border-color var(--ease);}
.pdv-n:hover{border-color:var(--color-border);background:#efefef;}
.pdv-n:focus-visible{outline:2px solid var(--color-black);outline-offset:1px;}
.pdv-n:not(.is-read){background:var(--color-white);border-color:var(--color-border);box-shadow:0 1px 3px rgba(0,0,0,.05);}
.pdv-n:not(.is-read):hover{border-color:#cfcfcf;}
.pdv-n__ic{width:40px;height:40px;border-radius:12px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;}
.pdv-n__ic svg{width:20px;height:20px;}
.pdv-n__ic--ta{background:var(--color-green-bg);color:var(--color-green-text);}
.pdv-n__ic--fa{background:var(--color-black);color:#fff;}
.pdv-n__ic--portfolio{background:var(--color-amber-bg);color:var(--color-amber-text);}
.pdv-n__ic--smg{background:var(--color-green-primary);color:#fff;}

.pdv-n__main{flex:1 1 auto;min-width:0;padding-right:22px;}
.pdv-n__title{font-family:var(--font-body);font-size:14px;font-weight:700;line-height:1.35;margin:0 0 3px;color:var(--color-black);}
.pdv-n__body{font-size:13px;line-height:1.5;color:var(--color-gray-text);margin:0;}
.pdv-n:not(.is-open) .pdv-n__title,.pdv-n:not(.is-open) .pdv-n__body{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
.pdv-n:not(.is-open) .pdv-n__title{-webkit-line-clamp:2;line-clamp:2;}
.pdv-n:not(.is-open) .pdv-n__body{-webkit-line-clamp:2;line-clamp:2;}
.pdv-n.is-read .pdv-n__title{font-weight:600;color:#3d3d3d;}
.pdv-n__time{margin-top:7px;font-family:var(--font-data);font-size:11.5px;color:var(--color-gray-text);font-variant-numeric:tabular-nums;}

.pdv-n__detail{margin:10px 0 2px;padding:4px 12px;border-radius:var(--radius-sm);background:var(--color-white);border:1px solid var(--color-border);}
.pdv-n__detail--table{padding:0;overflow:hidden;}

/* Hàng "mã + các số": mã đậm, nhãn nhỏ xám, số đậm sắc nét (chữ số đều nhau để dễ so sánh) */
.pdv-tk{display:flex;align-items:center;gap:12px;padding:9px 0;}
.pdv-tk + .pdv-tk{border-top:1px solid var(--color-border);}
.pdv-tk__sym{flex:0 0 auto;min-width:44px;font-family:var(--font-heading);font-weight:800;font-size:15px;letter-spacing:.01em;color:var(--color-black);}
.pdv-tk__bits{display:flex;flex-wrap:wrap;gap:6px 16px;min-width:0;}
.pdv-tk__kv{display:inline-flex;flex-direction:column;line-height:1.2;}
.pdv-tk__kv i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--color-gray-text);}
.pdv-tk__kv b{font-family:var(--font-data);font-size:14.5px;font-weight:800;color:var(--color-black);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.pdv-tk__kv.is-up b{color:var(--color-green-text);}
.pdv-tk__kv.is-down b{color:var(--color-red-text);}
.pdv-tk__tag{align-self:center;padding:2px 9px;border-radius:var(--radius-pill);background:var(--color-gray-bg);border:1px solid var(--color-border);
  font-size:11.5px;font-weight:600;color:#3d3d3d;}
.pdv-tk--plain{font-size:13px;font-weight:600;color:var(--color-black);line-height:1.45;}

/* Bảng TOP SMG — cùng kiểu bảng "Hôm nay mua gì"/"Khuyến nghị" trên web: tiêu đề đen, dòng chẵn nền xám */
table.pdv-smg{width:100%;border-collapse:collapse;font-size:13px;}
table.pdv-smg thead th{background:var(--color-black);color:#fff;font-family:var(--font-data);font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;padding:9px 10px;text-align:left;white-space:nowrap;}
table.pdv-smg td{padding:9px 10px;border-bottom:1px solid var(--color-border);}
table.pdv-smg tbody tr:last-child td{border-bottom:none;}
table.pdv-smg tbody tr:nth-child(even) td{background:var(--color-gray-bg);}
table.pdv-smg .c{text-align:center;width:42px;font-family:var(--font-data);color:var(--color-gray-text);font-variant-numeric:tabular-nums;}
table.pdv-smg .r{text-align:right;}
table.pdv-smg td.tk{font-family:var(--font-heading);font-weight:800;font-size:14px;color:var(--color-black);}
table.pdv-smg td.sec{font-size:12px;color:var(--color-gray-text);line-height:1.3;}
.pdv-smg__pt{display:inline-block;min-width:46px;padding:2px 8px;border-radius:var(--radius-pill);text-align:center;
  background:#F3E8FA;color:#7E22A8;font-family:var(--font-data);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;} /* SMG ≥ 80 = tím "sóng tăng rất mạnh" như bản đồ nhiệt */
.pdv-n__go{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-pill);
  background:var(--color-black);color:#fff;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  transition:background var(--ease),transform var(--ease);
}
.pdv-n__go:hover{background:#242424;transform:translateY(-1px);}
.pdv-n__go:focus-visible{outline:2px solid var(--color-black);outline-offset:2px;}

.pdv-n__side{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.pdv-n__x{
  width:26px;height:26px;border-radius:50%;border:none;background:none;color:var(--color-gray-text);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--ease),background var(--ease),color var(--ease);
}
.pdv-n:hover .pdv-n__x,.pdv-n__x:focus-visible{opacity:1;}
.pdv-n__x:hover{background:var(--color-border);color:var(--color-black);}
.pdv-n__x:focus-visible{outline:2px solid var(--color-black);}
.pdv-n__x svg{width:14px;height:14px;}
.pdv-n__dot{width:9px;height:9px;border-radius:50%;background:var(--color-red-signal);margin-right:1px;}

.pdv-bell__empty{padding:56px 24px;text-align:center;color:var(--color-gray-text);font-size:13.5px;line-height:1.6;}
.pdv-bell__empty svg{width:34px;height:34px;margin:0 auto 10px;display:block;opacity:.35;}

/* nút nổi Zalo/Gọi điện nằm cùng mép phải → ẩn tạm khi ngăn thông báo đang mở */
body.pdv-bell-open .contact-fab{display:none;}

/* ── Điện thoại: ngăn trải hết chiều ngang ── */
@media(max-width:560px){
  .pdv-bell__panel{width:100vw;border-left:none;}
  .pdv-bell__head{padding:14px 12px 6px 16px;}
  .pdv-bell__tabs{padding:4px 16px 10px;}
  .pdv-bell__list{padding:2px 10px 18px;}
  .pdv-n__x{opacity:.8;}
}
@media (prefers-reduced-motion:reduce){
  .pdv-bell.is-ring .pdv-bell__btn svg{animation:none;}
  .pdv-bell.is-open .pdv-bell__panel{animation:none;}
}

/* ── Chuông cho khách chưa đăng nhập (giao diện mới 08/10/2026) ──
   Đặt cạnh nút ☰ trên điện thoại / trước nút Đăng nhập trên máy tính; thông báo hiện tiêu đề, nội dung khoá, kèm lời mời đăng ký. */
.nav .wrap.has-bell > .pdv-bell--guest{order:1;margin-left:auto;}
.nav .wrap.has-bell > .nav-actions{order:2;margin-left:12px;}
.nav .wrap.has-bell > .hamburger{order:3;margin-left:8px;}
.pdv-bell--guest .pdv-bell__btn{border-color:var(--color-black);width:40px;height:40px;}
.pdv-bell--guest .pdv-bell__count{top:-6px;right:-6px;}
.pdv-bell__cta{flex:none;padding:14px 18px 16px;border-top:1px solid var(--color-black);background:var(--color-gray-bg);}
.pdv-bell__cta p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--color-gray-text);}
.pdv-bell__cta-btns{display:flex;gap:8px;flex-wrap:wrap;}
.pdv-cta{padding:10px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--color-black);background:none;color:var(--color-black);
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;}
.pdv-cta--solid{background:var(--color-black);color:var(--color-white);}
.pdv-n__lock{display:flex;align-items:center;gap:7px;margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--color-gray-text);}
.pdv-n__lock svg{width:14px;height:14px;flex:none;}
.pdv-n--lock{cursor:pointer;}
/* thêm chuông vào thanh menu: thu gọn khoảng cách để vẫn gọn trong khung 1180px */
.nav .wrap.has-bell{gap:12px;}
.nav .wrap.has-bell .nav-link,.nav .wrap.has-bell .nav-grp__btn{padding:10px 9px;}
.nav .wrap.has-bell > .nav-actions{gap:8px;margin-left:8px;}
.nav .wrap.has-bell > .nav-actions .btn{padding:11px 15px;}

/* khách: không có nút ẩn thông báo */
.pdv-bell--guest .pdv-n__x{display:none;}

/* chuông của thành viên đã đăng nhập: cùng kiểu với chuông của khách (nút tròn viền mực, số đỏ ở góc trên phải) */
.pdv-bell__btn{width:40px;height:40px;}
.pdv-bell.is-open .pdv-bell__btn{background:var(--color-black);color:var(--color-white);}
.pdv-bell--guest.is-open .pdv-bell__btn{background:var(--color-black);color:var(--color-white);}