/* Topbar theo mục "Header / Topbar" của BSC Webtrade Design System.
   Tham chiếu: guidelines/header.card.html.

   Trang dùng class theme trên <body> (theme-dark / theme-light) chứ không phải
   [data-theme], nên token được khai báo lại theo cả hai cách. */

body.theme-light, [data-theme='light'] {
  --wt-topbar: #FFFFFF;
  --wt-topbar-text: rgba(0, 0, 0, 0.92);
  --wt-topbar-text-sub: rgba(0, 0, 0, 0.55);
  --wt-topbar-surface: rgba(0, 0, 0, 0.08);
  --wt-topbar-stroke: rgba(0, 0, 0, 0.20);
  /* Nối thẳng vào token gốc của design system thay vì chép giá trị: trước đây mỗi lần
     --color-tab-active đổi là phải nhớ sửa tay ở đây, và đã quên đúng một lần.
     tokens.css khai --color-tab-active trên body.fss.theme-*; trang nào nạp header.css cũng nạp
     tokens.css (đã kiểm cả bốn trang). Vẫn để giá trị dự phòng phòng khi body thiếu class .fss:
     var() không có fallback mà token không tồn tại thì cả khai báo hỏng, nhãn tab mất màu.
     Selector [data-theme='light'] trỏ vào <html> — nơi KHÔNG có --color-tab-active — nên chính
     nó luôn rơi về dự phòng; body vẫn thắng cho mọi thứ nằm trong body. */
  --wt-tab-active: var(--color-tab-active, #1E4D96);
  --wt-logo: #1E4D96;
  --wt-page-bg: #DBE2EB;
}

body.theme-dark, [data-theme='dark'] {
  --wt-topbar: #111419;
  --wt-topbar-text: rgba(255, 255, 255, 0.92);
  --wt-topbar-text-sub: rgba(255, 255, 255, 0.40);
  --wt-topbar-surface: rgba(255, 255, 255, 0.08);
  --wt-topbar-stroke: rgba(255, 255, 255, 0.20);
  --wt-tab-active: var(--color-tab-active, #FFFFFF);
  --wt-logo: #FFFFFF;
  --wt-page-bg: #05040D;
}

/* Chặn cú nháy màu xanh của topbar snapshot lúc mở trang.
   Snapshot còn <header class="header-menu"> của production với .theme-light .header-menu
   {background:#1e4d96} — nó vẽ ngay lần paint đầu, rồi board.js (script CUỐI CÙNG ở đáy body) mới
   gọi WTHeader.mount thay nó bằng .wtx-topbar. Khoảng trống giữa hai thời điểm đó là một khung
   hình xanh production, thấy rõ khi chuyển tab Chứng khoán → Bảng giá.
   File này nạp trong <head> và body đã có sẵn class theme trong HTML tĩnh, nên --wt-topbar giải
   ra đúng màu ngay lần paint đầu: tô header cũ bằng đúng màu topbar của theme và giấu nội dung
   bên trong, thì thứ người dùng thấy trong khung hình đó là một thanh trống cùng màu, không phải
   xanh. Không display:none: giữ hộp 50px để bố cục không nhảy lúc thay.
   (0,3,1) + !important để thắng mọi biến thể body.fss.theme-* .header-menu của bundle. */
body.fss.theme-light header.header-menu,
body.fss.theme-dark header.header-menu {
  background: var(--wt-topbar) !important;
  box-shadow: none !important;
}
body.fss header.header-menu > * { visibility: hidden !important; }

/* Topbar sát mép trên, không hở; khoảng thở 8px nằm phía dưới thanh.
   Không bo góc, không viền dưới, không lề hai bên. */
.wtx-topbar {
  height: 50px;
  /* body của bundle là flex container dọc; không có flex:none thì thanh bị co
     xuống bằng chiều cao nội dung (32px) thay vì giữ 50px. */
  flex: none;
  margin-top: 0;
  background: var(--wt-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: inherit;
  box-sizing: border-box;
}

/* align-self: stretch để .wtx-left cao trọn 50px — nếu không, height:100% của .wtx-nav
   rơi về auto và tab chỉ cao bằng dòng chữ, mất vùng bấm mà spec dựa vào. */
.wtx-left { display: flex; align-items: center; align-self: stretch; gap: 24px; min-width: 0; }

.wtx-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  color: var(--wt-logo);
  display: flex;
  align-items: center;
}
/* Cỡ 32px = kích thước gốc của file, đúng như production render (56x32, không thu phóng).
   translateY(-3px) tái tạo vị trí production: thanh 50px, phần tử 32px, căn giữa cho top=9,
   production để top=6. Lý do phải nhấc: viewBox 0 0 56 32 nhưng ba chữ BSC chỉ chiếm dải
   y 11.1-30.8, tâm chữ 20.95 chứ không phải 16 — mũi tên ở phần trên kéo tâm hình học lệch
   khỏi tâm quang học, nên căn giữa theo hộp thì chữ trông tụt xuống. */
.wtx-logo svg { height: 32px; width: auto; display: block; transform: translateY(-3px); }

/* gap = 0 để hai vùng hover dính liền nhau; khoảng cách 20px giữa chữ do padding 10px
   mỗi bên của tab tạo ra (10 + 0 + 10 = 20). Cách này giữ đúng nhịp chữ của spec mà
   nền hover không bị đứt quãng. */
.wtx-nav {
  /* Kéo nav sang trái 10px để triệt tiêu padding-trái của tab đầu tiên: gap của .wtx-left
     là 24px, cộng thêm 10px padding thì chữ tab đầu bị đẩy thành 34px so với logo.
     Dùng margin âm thay vì hạ gap, vì gap của flex áp cho cả cặp burger-logo. */
  margin-left: -10px;
  display: flex; align-items: center; gap: 0; height: 100%; min-width: 0; overflow-x: auto; }
.wtx-nav::-webkit-scrollbar { display: none; }

.wtx-tab {
  height: 100%;
  display: flex;
  align-items: center;
  /* Rộng theo CHỮ, không min-width. Padding ngang 10px không phải để nới tab mà để
     hai vùng hover chạm nhau: gap 0 + padding 10px hai bên = chữ vẫn cách nhau 20px.
     Bundle zero hoá padding của <a>/<button> nên phải !important. */
  padding: 0 10px !important;
  box-sizing: border-box;
  font-size: var(--text-medium);
  /* Bold cả hàng (anh Huy chốt). Trạng thái chọn/không chọn vẫn chỉ nói bằng MÀU — nét chữ
     giống nhau ở mọi tab nên không thành tín hiệu thứ hai. Ba file .ttf Helvetica Neue nạp
     riêng từng nét, bold có sẵn ở dải 600-700 nên không bị trình duyệt bôi đậm giả. */
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  color: var(--wt-topbar-text-sub);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
/* Hover đổi NỀN, không đổi màu chữ — màu chữ đã dành riêng cho trạng thái chọn,
   đổi cả hai thì hai tín hiệu chồng lên nhau. Dùng --wt-topbar-surface, cùng token
   với nền nút icon tròn, nên hai thứ trên topbar cùng một bậc nền. */
.wtx-tab:hover {
  background: var(--wt-topbar-surface);
  /* Bundle có a:hover{color:#0056b3; text-decoration:underline} — phải khai lại màu và
     bỏ gạch chân, nếu không hover sẽ đổi cả chữ lẫn nền. */
  color: var(--wt-topbar-text-sub);
  text-decoration: none;
}
.wtx-tab.is-active:hover { color: var(--wt-tab-active); }
/* Chỉ màu mang trạng thái — thêm gạch chân là nói hai lần cùng một điều. */
.wtx-tab.is-active { color: var(--wt-tab-active); }

/* Tab đóng được (Chứng khoán, Bộ lọc cổ phiếu, Copy danh mục): nút [x] ở góc phải, cùng màu chữ tab.
   Padding phải hạ còn 6px để nút sát mép như tab trình duyệt; khoảng chữ–nút 6px. */
.wtx-tab.wtx-tab-closable { padding-right: 6px !important; gap: 6px; }
.wtx-tab-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0 !important; border: 0; border-radius: 4px !important;
  background: none; color: inherit; cursor: pointer; opacity: .6; flex-shrink: 0;
}
.wtx-tab-x svg { width: 14px; height: 14px; }
/* Tab đang hover đã dùng nền --wt-topbar-surface, nên nút [x] dùng lớp xám mờ đè lên để vẫn thấy. */
.wtx-tab-x:hover { opacity: 1; background: rgba(127, 127, 127, .25); }
.wtx-tab-x:focus-visible { opacity: 1; outline: 1px solid currentColor; }

.wtx-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Bundle production đặt border-radius cho <button>; ép tròn theo spec "32px circles". */
.wtx-topbar .wtx-iconbtn {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: var(--wt-topbar-surface);
  border: 1px solid var(--wt-topbar-stroke);
  color: var(--wt-topbar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.wtx-iconbtn svg { width: 18px; height: 18px; display: block; }
.wtx-iconbtn:hover { border-color: var(--wt-topbar-text-sub); }
/* Hai icon sáng/tối cũ — giữ quy tắc phòng khi còn chỗ nào dùng, nút header nay là bánh xe. */
.wtx-iconbtn .wtx-moon, .wtx-iconbtn .wtx-sun { display: none; }
body.theme-light .wtx-iconbtn .wtx-moon { display: block; }
body.theme-dark .wtx-iconbtn .wtx-sun { display: block; }

/* ---------- Bảng thiết lập sau bánh xe ---------- */
.wtx-set-wrap { position: relative; display: flex; }
.wtx-set-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10000;
  min-width: 210px;
  padding: 12px;
  border-radius: 8px;
  background: var(--wt-topbar);
  border: 1px solid var(--wt-topbar-stroke);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  color: var(--wt-topbar-text);
}
.wtx-set-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.wtx-set-label { font-size: 12px; opacity: .55; margin: 10px 0 6px; }
.wtx-set-label:first-of-type { margin-top: 0; }
/* Các lựa chọn xếp thành lưới co giãn: hai nút giao diện nằm một hàng, bốn nút ngôn ngữ tự xuống
   dòng — không phải khai lại bố cục mỗi lần thêm một ngôn ngữ. */
.wtx-set-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wtx-set-row .wtx-set-opt {
  flex: 1 1 auto;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--wt-topbar-stroke);
  background: transparent;
  color: var(--wt-topbar-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.wtx-set-row .wtx-set-opt:hover { border-color: var(--wt-topbar-text-sub); }
.wtx-set-row .wtx-set-opt.active {
  border-color: var(--color-accent, #2681e0);
  color: var(--color-accent, #2681e0);
  background: color-mix(in srgb, var(--color-accent, #2681e0) 12%, transparent);
}

/* Kích thước lấy theo .btn-login của bundle production:
   padding 6px 10px, min-width 100px, weight regular. */
.wtx-login {
  height: 32px;
  min-width: 100px;
  padding: 6px 10px !important;
  border: 0;
  border-radius: 4px;
  /* Dải primary ĐỔI THEO THEME, đọc thẳng token (anh Huy chốt): dark #2681E0 → #265CAB,
     light #17B19D → #2B80E4. Trước đây nút này ghi cứng dải của dark ở cả hai theme, nên ở light
     nút Đăng nhập lam trong khi chip đang chọn lục lam — hai control cùng cấp CTA mà khác tông.
     Góc luôn 90deg để -start thật sự nằm bên trái; design system cố ý đảo giá trị so với bản đo
     production thay vì đổi góc, để tên token còn đúng nghĩa.
     Giữ giá trị dự phòng: var() không fallback mà token vắng thì cả khai báo hỏng, nút mất nền
     và chữ trắng nằm trên nền trong suốt. */
  background: linear-gradient(90deg,
    var(--gradient-btn-primary-start, #2681E0),
    var(--gradient-btn-primary-end, #265CAB));
  /* Chữ TRẮNG ở CẢ HAI theme — nền gradient primary luôn đủ đậm. Cần !important vì bundle có
     body.fss.theme-light button{color:#161f2c} đặc hiệu (0,2,1) thắng .wtx-login (0,1,0) nên
     light mode chữ sẽ thành đen. Đây là nguyên tắc "chữ trên nền gradient" của design system
     (--color-on-gradient) — xem readme.md mục Colour System. */
  color: #fff !important;
  font-size: var(--text-medium);
  font-weight: var(--font-weight-regular);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  /* Là thẻ <a> (mở trang SSO thật) nên phải tự căn giữa và bỏ gạch chân của bundle. */

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.wtx-login:hover,
.wtx-login:focus {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.06);
}

/* ---------- Bù offset của header cũ (chỉ có trên trang bảng giá) ----------
   Snapshot production dùng .header-menu với position:fixed, nên nội dung phải chừa
   50px để không bị che: .content-container{padding-top:50px} và .menu-tool{margin-top:50px}.
   Topbar mới nằm trong luồng tài liệu nên hai offset đó thành khoảng trống thừa.
   Kéo về 8px — cùng nhịp với khoảng hở phía trên topbar. */
body.fss .content-container { padding-top: 8px !important; }
/* Sidebar: bundle để height:calc(100vh - 50px) khớp với margin-top:50px của chính nó. Đổi
   margin xuống 8px mà giữ nguyên height thì đáy rail vượt khung nhìn 8px — bị
   body{overflow:hidden} cắt cụt (không mất icon nào, nhưng nền rail hụt ở đáy và tài liệu
   thừa 8px chiều dọc). Trừ đúng phần đã dời: 50 (chỗ header cũ) + 8 (margin) = 58. */
body.fss .menu-tool { margin-top: 8px !important; height: calc(100vh - 58px) !important; }

/* Icon ba gạch — production để trần bên trái, không có nền tròn như nhóm icon bên phải. */
.wtx-burger {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0 !important;
  cursor: pointer;
  color: var(--wt-topbar-text);
}
.wtx-burger svg { width: 24px; height: 24px; display: block; }
.wtx-burger:hover { color: var(--wt-tab-active); }

/* ---------- Rail icon bên trái ---------- */

/* Trang Chứng khoán không có sẵn rail nên tự định vị: cố định dưới topbar,
   và .wt-page chừa đúng 50px bên trái. Bảng giá đã có .fakeMenuTool giữ chỗ sẵn. */
body.fss .menu-tool.wt-rail-standalone {
  position: fixed;
  /* rail bản fixed tự định vị, không dùng margin bù của bảng giá */
  margin-top: 0 !important;
  left: 0;
  /* 50px topbar + 8px = cùng mốc với rail của bảng giá (rail ở đó có margin-top 8px
     để bù offset header cũ). Hai trang phải trùng nhau, nếu không icon nhảy 8px khi đổi tab. */
  top: 58px;
  bottom: 0;
  width: 50px;
  overflow-y: auto;
  z-index: 10;
  background: var(--wt-topbar);
}
body.fss:has(.wt-rail-standalone) .wt-page { margin-left: var(--wt-rail-w); }

/* ---------- Bề rộng rail: MỘT nguồn duy nhất ----------
   Trước đây 50px được khai ở HAI chỗ không biết đến nhau: .menu-tool (absolute, ngoài luồng,
   VẼ rail) và .fakeMenuTool (inline-block trong luồng, GIỮ CHỖ). Ẩn rail thì chỉ chỗ vẽ biến
   mất, lỗ 50px vẫn nguyên — đúng kiểu lỗi "hai khối phải tự đồng ý với nhau".
   Nay cả hai đọc chung một biến; tắt rail là biến về 0, chỗ trống tự thu, bảng tự nở ra. */
body.fss { --wt-rail-w: 50px; }
body.fss.wt-rail-off { --wt-rail-w: 0px; }
/* Bundle ghim .fss.isDeskTop .fakeMenuTool{display:inline-block!important;width:50px} — đặc
   hiệu (0,3,0) kèm !important, nên phải (0,4,0) kèm !important mới thắng. */
body.fss.isDeskTop .fakeMenuTool { width: var(--wt-rail-w) !important; }
/* Snapshot ghi width:50px ngay trên thẻ .menu-tool, inline nên chỉ !important mới đè được. */
body.fss .menu-tool { width: var(--wt-rail-w) !important; }

/* Trạng thái thu gọn: rail không vẽ nữa (bề rộng đã về 0 qua biến ở trên). */
body.wt-rail-off .menu-tool { display: none !important; }

/* ---------- Drawer menu (nút ba gạch) ----------
   Dựng lại theo ảnh chụp drawer của production: phủ lên rail và một phần nội dung,
   mỗi dòng gồm icon + nhãn, mục có menu con thì thêm dấu ›. */
.wt-drawer {
  position: fixed;
  left: 0;
  top: 58px;                 /* cùng mốc với rail */
  bottom: 0;
  width: 300px;
  /* Snapshot có nhiều lớp z-index cao trong vùng chart; drawer là overlay nên phải nằm trên hết. */
  z-index: 9999;
  overflow-y: auto;
  padding: 12px 0;
  box-sizing: border-box;
  background: var(--wt-topbar);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.wt-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 16px;
  color: var(--wt-topbar-text);
  text-decoration: none;
  font-size: var(--text-medium);
  cursor: pointer;
  box-sizing: border-box;
}
.wt-drawer-item:hover { background: var(--wt-topbar-surface); text-decoration: none; color: var(--wt-topbar-text); }
.wt-drawer-item.is-active { color: var(--wt-tab-active); background: var(--wt-topbar-surface); }
.wt-drawer-icon { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; }
.wt-drawer-icon svg { width: 24px; height: 24px; }
.wt-drawer-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-drawer-chev { opacity: .45; font-size: 18px; line-height: 1; }

/* Menu con trong drawer — bung/thu khi bấm mục cha, mỗi lúc chỉ mở một nhóm. */
.wt-drawer-group { display: block; }
.wt-drawer-item { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; }
.wt-drawer-chev { transition: transform .15s ease; }
.wt-drawer-item.is-open .wt-drawer-chev { transform: rotate(90deg); }
.wt-drawer-item.is-open { color: var(--wt-tab-active); }
.wt-drawer-sub { padding: 2px 0 6px; }
.wt-drawer-subitem {
  display: flex;
  align-items: center;
  min-height: 36px;
  /* 16px lề + 24px icon + 14px gap = 54px, để nhãn con thẳng hàng với nhãn cha */
  padding: 6px 16px 6px 54px;
  color: var(--wt-topbar-text-sub);
  font-size: var(--text-medium);
  cursor: pointer;
  line-height: 1.35;
}
.wt-drawer-subitem:hover { background: var(--wt-topbar-surface); color: var(--wt-topbar-text); }
/* Mục con đã có màn (sidebar.js → SCREENS) là <button>: bỏ kiểu nút mặc định để trông y mục thường.
   Lặp .fss để thắng `body.fss.theme-dark button {padding:0; color:#fff}` của bundle production — thiếu
   nó các mục Lịch sử mất lề 54px, nằm thụt ra ngang cấp 1 thay vì lùi vào như cấp 2 (sửa 04/10/2026). */
body.fss.fss button.wt-drawer-subitem {
  width: 100%;
  padding: 6px 16px 6px 54px;
  border: 0;
  background: transparent;
  color: var(--wt-topbar-text-sub);
  font-family: inherit;
  text-align: left;
}
body.fss.fss button.wt-drawer-subitem:hover { background: var(--wt-topbar-surface); color: var(--wt-topbar-text); }

/* ---------- Khối tài khoản + menu Đăng xuất ---------- */

/* Đứng bên trái nhóm icon: tên tài khoản dòng 1, số tài khoản dòng 2 — như production. */
.wtx-acct {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.25;
  margin-right: 4px;
  white-space: nowrap;
}
.wtx-acct-name {
  font-size: var(--text-small, 12px);
  font-weight: 700;
  color: var(--wt-topbar-text);
}
.wtx-acct-id {
  font-size: var(--text-small, 12px);
  color: var(--wt-topbar-text-sub);
}

/* Menu thả xuống dưới icon đầu người */
.wtx-acct-wrap { position: relative; display: flex; align-items: center; }

.wtx-usermenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10000;
  min-width: 140px;
  padding: 4px;
  border-radius: 4px;
  background: var(--wt-topbar);
  border: 1px solid var(--wt-topbar-stroke);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.wtx-signout {
  display: block;
  width: 100%;
  padding: 8px 12px !important;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--wt-topbar-text);
  font-size: var(--text-medium, 14px);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.wtx-signout:hover { background: var(--wt-topbar-surface); }

/* ---------- Bảng thông báo (chuông) ----------
   Dựng theo khung của production: .notification-dropdown bọc nút chuông,
   .notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel là bảng thả xuống (tiêu đề · 4 tab · danh sách). */
.notification-dropdown { position: relative; display: flex; align-items: center; }

/* Huy hiệu số chưa đọc, neo vào góc trên phải của chuông. */
.wtx-noti-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--color-price-down, #F92626);
  color: #fff;
  font-size: 10px; line-height: 1; font-weight: 600;
}
.wtx-iconbtn[data-icon="bell"] { position: relative; }

.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel {
  /* Bundle ép width:600px và height:600px cho .notification-container. Bảng của bản dựng hẹp
     hơn (panel 375px cạnh nó) và phải co theo nội dung: hộp thư trống mà vẫn cao 600px thì phần
     lớn bảng là khoảng trắng. */
  /* fixed chứ không absolute: bảng nằm trong khối bọc nút chuông, absolute thì mép phải chỉ
     tới mép nút — còn cách mép màn hình gần 200px vì bên phải chuông còn hai nút nữa.
     top do JS đặt (neoBang) để thẳng hàng với dải thẻ chỉ số. */
  position: fixed;
  height: auto;
  right: 0;
  z-index: 10000;
  /* Bằng đúng panel Giao dịch (quick-order.css) — hai bảng cùng neo mép phải, lệch bề ngang
     thì mép trái so le nhau mỗi lần mở cái này tắt cái kia. Khai thành biến để chiều cao tối đa
     của từng thông báo bám theo (xem .notification-item). */
  --noti-w: 375px;
  width: var(--noti-w);
  max-width: 100vw;
  /* Đệm ngang đưa xuống TỪNG PHẦN bên trong, không đặt ở khung: có đệm ở khung thì thanh cuộn
     của danh sách bị đẩy vào trong 12px, trong khi panel Giao dịch có thanh cuộn sát mép. */
  padding: 12px 0;
  border-radius: 8px 0 0 8px;
  background: var(--wt-topbar);
  border: 1px solid var(--wt-topbar-stroke);
  border-right: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  color: var(--wt-topbar-text);
  cursor: default;
}
.wtx-noti-title { font-size: 20px; font-weight: 700; line-height: 30px; margin-bottom: 8px; }

/* Bốn tab: cuộn ngang nếu hẹp, thay vì xuống dòng thành hai hàng lệch. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .container-button {
  display: flex; gap: 6px; margin-bottom: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .container-button::-webkit-scrollbar { display: none; }
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .btn-custom {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 0; border-radius: 4px;
  background: transparent;
  color: var(--wt-topbar-text);
  opacity: .6;
  font-size: 13px; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .btn-custom:hover { opacity: .85; }
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .btn-custom.active {
  opacity: 1;
  background: var(--color-accent, #0d6efd);
  color: #fff;
}

.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .container-list { max-height: 420px; overflow-y: auto; }
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item {
  padding: 8px 0;
  border-top: 1px solid var(--wt-topbar-stroke);
  cursor: default;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item:first-child { border-top: 0; }
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item .date { font-size: 11px; opacity: .55; margin-bottom: 2px; }
/* Nội dung thông báo do máy chủ soạn, có thể rất dài — cho xuống dòng tự do và ngắt cả từ dài
   (mã lệnh 18 chữ số) để không đẩy bảng rộng ra. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item .content {
  font-size: 13px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item .content a { color: var(--color-accent, #0d6efd); }

.wtx-noti-empty { padding: 16px 0; font-size: 13px; opacity: .6; text-align: center; }
.wtx-noti-more {
  display: block; width: 100%; margin-top: 8px; padding: 8px;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--color-accent, #0d6efd);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.wtx-noti-more:disabled { opacity: .5; cursor: default; }

/* Tiêu đề thông báo (title) — đứng trên phần thân, đậm hơn một bậc. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .wtx-noti-subject {
  font-size: 13px; font-weight: 600; margin-bottom: 2px;
}
/* Chưa đọc: vạch màu bên trái. Dấu chưa đọc bị xoá khi ĐÓNG bảng, nên trong lúc bảng còn mở
   người dùng vẫn phải phân biệt được cái nào mới. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .wtx-noti-unread {
  padding-left: 8px;
  border-left: 2px solid var(--color-accent, #0d6efd);
}

/* Bundle khai .container-list là FLEX (hàng ngang) và .notification-item có height cố định +
   overflow:auto. Với khung của production thì hợp lý, ở đây thì mỗi mục bị bóp còn 16px và chữ
   bị cắt mất — đo được: .inner cao 78px trong khi .notification-item chỉ 16px.
   Trả về dòng dọc, cao theo nội dung. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .container-list {
  display: block;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item {
  height: auto;
  min-height: 0;
  overflow: visible;
  flex: none;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item .inner {
  height: auto;
  overflow: visible;
}

/* Hai đường kẻ giữa hai thông báo: bundle kẻ border-top ở CẢ .notification-item lẫn .inner, cộng
   thêm margin-top 5px trên item nên hai đường tách hẳn ra và đọc như hai đường viền của hai hộp
   khác nhau. Giữ đúng MỘT đường trên item, bỏ đường của .inner và bỏ margin. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item {
  margin-top: 0;
  border-top: 1px solid var(--wt-topbar-stroke) !important;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item:first-child {
  border-top: 0 !important;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item .inner {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Đệm ngang của từng phần — thay cho đệm của khung (xem chú thích ở trên). */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .wtx-noti-title,
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .container-button {
  padding-left: 12px;
  padding-right: 12px;
}
/* Danh sách chạm hẳn mép phải để THANH CUỘN nằm sát mép màn hình; chữ giữ khoảng cách bằng đệm
   của từng mục, nên không dính vào thanh cuộn. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .container-list {
  padding-left: 12px;
  padding-right: 0;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item {
  padding-right: 10px;
}

/* Mốc cuối danh sách: chỗ IntersectionObserver theo dõi để nạp mẻ tiếp theo. Có chiều cao thật
   để quan sát được, và chính nó là chỗ hiện "Đang tải thêm…" hoặc nút thử lại khi hỏng. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .wtx-noti-sentinel {
  min-height: 32px;
}

/* Mỗi thông báo cao tối đa bằng chính bề rộng của nó — tin dài bị cắt, KHÔNG có thanh cuộn
   riêng (thanh cuộn lồng trong thanh cuộn là thứ gần như không ai lăn trúng). Trừ đi đệm của
   danh sách và của mục để con số thật sự là bề rộng phần nội dung.
   Muốn đọc trọn tin thì bấm vào — mở popup giữa màn. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item {
  max-height: calc(var(--noti-w) - 22px);
  overflow: hidden;
  cursor: pointer;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .notification-item:hover {
  background: var(--wt-topbar-surface);
}
/* Tin BỊ CẮT mới có dải mờ ở đáy: nó là dấu hiệu duy nhất cho biết còn chữ phía dưới. Tin ngắn
   không cắt thì không có dải, kẻo hiểu nhầm là còn nữa. */
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .wtx-noti-cut {
  position: relative;
}
.notification-dropdown .wtx-noti-panel.wtx-noti-panel.wtx-noti-panel .wtx-noti-cut::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--wt-topbar));
}

/* ---------- Popup đọc trọn một thông báo ---------- */
.wtx-noti-modal {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
}
.wtx-noti-modal-box {
  width: 520px; max-width: 100%;
  max-height: calc(100vh - 96px);
  display: flex; flex-direction: column;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--wt-topbar);
  border: 1px solid var(--wt-topbar-stroke);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  color: var(--wt-topbar-text);
}
.wtx-noti-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 8px;
}
.wtx-noti-modal-head .wtx-noti-subject { font-size: 15px; font-weight: 600; flex: 1; }
.wtx-noti-modal-close {
  flex: 0 0 auto; width: 28px; height: 28px;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--wt-topbar-text);
  font-size: 18px; line-height: 1; font-family: inherit; cursor: pointer; opacity: .6;
}
.wtx-noti-modal-close:hover { opacity: 1; background: var(--wt-topbar-surface); }
/* Chỉ THÂN tin cuộn, đầu và ngày đứng yên — cuộn cả hộp thì tiêu đề trôi mất khi tin dài. */
.wtx-noti-modal-body {
  padding: 0 16px 16px;
  overflow-y: auto;
  font-size: 14px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.wtx-noti-modal-body img { max-width: 100%; height: auto; }
.wtx-noti-modal-body a { color: var(--color-accent, #0d6efd); }
.wtx-noti-modal-date { padding: 0 16px 8px; font-size: 12px; opacity: .55; }

/* Dải nhãn bản mô phỏng. Màu cảnh báo, đứng cạnh logo — chỗ mắt chạm đầu tiên. Không dùng đỏ:
   đỏ trong ứng dụng này đã có nghĩa "giảm giá / lỗi", mượn thêm nghĩa thứ ba là làm loãng cả ba. */
.wtx-mockbadge {
  margin-left: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F8EC0C;
  color: #161F2C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: default;
}