for userName/userRole — prevent base margin leak */
#navbar-container p {
margin-bottom: 0;
color: inherit;
}
/* GIỮ CHỖ cho thanh menu — lý do là hiệu năng, không phải thẩm mỹ.
Menu do JS dựng nên nó xuất hiện SAU lần vẽ đầu tiên (đo 09/08/2026: trang vẽ
xong ở 120–284ms, menu hiện ở 93–328ms). Ô chứa rỗng cao 0px, đến khi menu
chèn vào thì toàn bộ nội dung bên dưới bị đẩy xuống đúng 67px — đó chính là
cái "giật" khi chuyển trang. Đo được thành CLS 0.04–0.11 (dca-cost vượt ngưỡng
0.1 của Google), thủ phạm ghi rõ trong layout-shift: `div.container dịch 67px`.
Ba con số dưới đây là chiều cao THẬT của header đo ở từng dải, không phải ước
lượng: <1280 = 53px (menu thu vào hamburger, đệm gọn), 1280–1919 = 67px (dải
co giãn), ≥1920 = 71px (cỡ nguyên bản). Đổi padding/cỡ chữ của header thì phải
đo lại — lệch vài px là giật lại, ít hơn nhưng vẫn giật. Giữ chỗ ÍT hơn thật
thì giật; giữ chỗ NHIỀU hơn thật thì thừa một dải trống, nên khi phân vân hãy
chọn con số lớn hơn. */
#navbar-container { min-height: 53px; }
@media (min-width: 1280px) { #navbar-container { min-height: 67px; } }
@media (min-width: 1920px) { #navbar-container { min-height: 71px; } }
/* Ô vuông cố định cho MỌI biểu tượng trong thanh menu — cũng là chống giật.
Font biểu tượng về sau HTML. Trước lúc đó mỗi icon vẫn chiếm chỗ bằng
TÊN của nó ("equalizer", "account_balance_wallet"…): đo 09/08/2026 thanh menu
rộng 1755px suốt ~600ms đầu rồi co phắt về 1074px. `&display=block` không
chữa được — chữ vô hình vẫn chiếm chỗ. Nhốt vào ô 1em thì phần chữ dự phòng
bị cắt, bề rộng không đổi dù font về lúc nào. */
header.sticky .material-symbols-outlined,
.nav-dropdown-menu .material-symbols-outlined,
.navbar-menu .material-symbols-outlined,
.mobile-drawer .material-symbols-outlined,
.mobile-contact-dock .material-symbols-outlined {
display: inline-block;
width: 1em;
overflow: hidden;
white-space: nowrap;
}
/* ── Zalo Button (shared Navbar component) ───────────────── */
.btn-zalo {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 10px;
height: 36px;
min-height: unset;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
color: #fff;
text-decoration: none;
background:
radial-gradient(120% 120% at 18% 18%,
#028BD9 0%,
#027BC0 45%,
#026AAC 100%
);
border: 1px solid rgba(255,255,255,.22);
box-shadow: 0 14px 36px rgba(2,123,192,.28);
transition: transform .16s ease, filter .16s ease;
}
.btn-zalo:hover {
transform: translateY(-1px);
filter: brightness(1.03);
color: #fff;
}
.btn-zalo:active {
transform: translateY(0);
}
.mobile-contact-dock {
position: fixed;
left: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: none;
flex-direction: column;
gap: 8px;
}
.mobile-contact-dock__btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 12px;
border-radius: 999px;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.mobile-contact-dock__btn img,
.mobile-contact-dock__btn .material-symbols-outlined {
flex-shrink: 0;
}
.mobile-contact-dock__btn--support {
background: linear-gradient(135deg, #028bd9, #026aac);
}
.mobile-contact-dock__btn--community {
background: linear-gradient(135deg, #0f3bbd, #1d4ed8);
}
.mobile-contact-dock__btn:hover {
color: #fff;
filter: brightness(1.03);
}
/* Phones: collapse the dock to compact icon-only FABs so it stops covering the
centered login CTA / content. Tablets (641–1279) keep the labelled pills.
Only the text span is hidden — the community button's icon is itself a
.material-symbols-outlined span, so exclude it. */
@media (max-width: 640px) {
.mobile-contact-dock {
gap: 10px;
left: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobile-contact-dock__btn {
width: 46px;
min-height: 46px;
padding: 0;
justify-content: center;
border-radius: 999px;
}
.mobile-contact-dock__btn > span:not(.material-symbols-outlined) {
display: none;
}
}
@media (max-width: 1279.98px) {
.mobile-contact-dock {
display: flex;
}
/* Ẩn các nút chỉ dành cho desktop khi ở mobile. Navbar có mặt trên MỌI trang
nên luật responsive của nó phải nằm ở tệp dùng chung này, không nhét vào
tệp riêng của một trang như signalboard.css. Nhét sai chỗ thì những trang
không nạp tệp đó (bài viết, dca-*, livestream) vẫn giữ nguyên hai nút
Đăng nhập/Đăng ký khổ rộng; `white-space: nowrap` của chúng đẩy khung nhìn
vượt 768px và cả trang bị thu nhỏ lại. Trên mobile chúng được thay bằng
ngăn kéo hamburger + dock liên hệ nổi (.mobile-contact-dock). */
.btn-zalo,
.navbar-auth-btn,
header .relative:has(> .material-symbols-outlined:only-child),
header .h-8.w-\[1px\] {
display: none !important;
}
}
@media (min-width: 1280px) {
.mobile-contact-dock {
display: none !important;
}
}
/* ============================================
THANH MENU CHÍNH (.nav-pill)
============================================
Một khối bo góc, mỗi mục là một ô ngăn nhau bằng vạch dọc, mỗi ô hai dòng:
nhãn lớn + chú thích nhỏ.
Viết bằng CSS thuần, KHÔNG dùng class Tailwind: thanh này có mặt trên mọi
trang, kể cả trang chỉ nạp base.css; và mỗi class Tailwind mới còn buộc phải
chạy lại `npm run build` — quên là mất sạch style.
Biến màu trong :root là bảng nền TỐI, nên chỗ nào cần chạy được ở nền sáng
thì ghi màu tường minh rồi đè lại trong html.dark. */
/* Bảng màu của menu đặt trên CHÍNH nó, không đọc :root.
Lý do: mỗi trang công cụ có bảng màu riêng ở :root — `tool-shared.css` đặt
`--primary: #ff8a00`, nên hai trang DCA từng hiện nguyên thanh menu màu CAM
trong khi mọi trang khác màu xanh. Biến khai báo trên phần tử luôn thắng biến
kế thừa từ :root, nên khoá ở đây là menu trông y hệt nhau ở mọi trang.
⇒ Trong khối .nav-pill / .nav-dropdown-menu chỉ dùng var(--nav-*). */
/* Khai trên header.sticky nữa để MỌI thứ bên trong (nút, menu tài khoản) đọc
được; và trên .mobile-drawer vì ngăn kéo được gắn thẳng vào , nằm
NGOÀI header nên không kế thừa. */
header.sticky,
.nav-pill,
.nav-dropdown-menu,
.navbar-menu,
.mobile-drawer {
--nav-accent: #0f3bbd;
--nav-alert: #f59e0b;
--nav-border: #e2e8f0;
--nav-icon: #64748b;
--nav-sub: #64748b;
--nav-surface: #fff;
--nav-hover: rgba(15, 23, 42, 0.04);
--nav-transition: 150ms ease;
}
/* Chiều cao dòng ghim cho các KHỐI CHỮ, không ghim ở header.sticky: đặt lên cả
header thì mọi thứ bên trong đổi vị trí baseline vài px so với trước (đối
chiếu pixel bắt được ngay). Trang nào để line-height thoáng (about.css: 1.6)
thì chỉ những khối này miễn nhiễm là đủ — nút bấm đã tự đặt line-height. */
.nav-pill,
.nav-dropdown-menu,
.navbar-menu,
.mobile-drawer {
line-height: 1.25;
}
html.dark header.sticky,
html.dark .nav-pill,
html.dark .nav-dropdown-menu,
html.dark .navbar-menu,
html.dark .mobile-drawer {
--nav-accent: #fff;
--nav-border: #232c48;
--nav-icon: #92a0c9;
--nav-sub: #637099;
--nav-surface: #1a202e;
--nav-hover: rgba(255, 255, 255, 0.05);
}
.nav-pill {
display: flex;
align-items: stretch;
/* KHÔNG overflow:hidden — menu con của "Quản Lý Vốn" xổ ra ngoài khối này. */
border: 1px solid var(--nav-border);
border-radius: 14px;
background: #fff;
}
html.dark .nav-pill {
background: rgba(26, 32, 46, 0.6);
}
.nav-pill__slot {
position: relative;
display: flex;
}
.nav-pill__item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 14px;
border: none;
border-left: 1px solid var(--nav-border);
background: transparent;
font-family: inherit;
text-decoration: none;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--nav-transition);
}
.nav-pill > .nav-pill__item:first-child,
.nav-pill > .nav-pill__slot:first-child .nav-pill__item { border-left: none; }
.nav-pill__item:hover { background: var(--nav-hover); }
.nav-pill__item--active { background: rgba(15, 59, 189, 0.07); }
html.dark .nav-pill__item--active { background: rgba(255, 255, 255, 0.06); }
/* Mục chưa có trang: mờ đi và không phản ứng khi rê chuột — nhìn là biết chưa
bấm được, thay vì một link trông sống nhưng bấm chẳng ra gì. */
.nav-pill__item--soon { opacity: 0.5; cursor: default; }
.nav-pill__item--soon:hover { background: transparent; }
/* Ghi kèm phạm vi để thắng `.material-symbols-outlined { font-size: 24px }` của
Google Fonts dù trang chủ nhà nạp nó SAU navbar.css — một class trần thua
luật nạp sau, và hậu quả là cả thanh menu phình ra vài px mỗi ô. */
header.sticky .nav-pill__icon,
.mobile-drawer .nav-pill__icon {
font-size: 22px;
color: var(--nav-icon);
font-variation-settings: 'FILL' 0, 'wght' 300;
}
.nav-pill__item--active .nav-pill__icon { color: var(--nav-accent); }
.nav-pill__img {
width: 22px;
height: 22px;
border-radius: 4px;
object-fit: contain;
}
.nav-pill__labels {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.nav-pill__title {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
html.dark .nav-pill__title { color: #e6ebf7; }
.nav-pill__item--active .nav-pill__title { color: var(--nav-accent); }
.nav-pill__sub {
font-size: 11px;
font-weight: 500;
color: var(--nav-sub);
}
.nav-pill__sub--accent { color: var(--nav-alert); }
header.sticky .nav-premium-lock,
.mobile-drawer .nav-premium-lock {
font-size: 15px;
color: var(--nav-alert);
font-variation-settings: 'FILL' 1, 'wght' 400;
}
header.sticky .nav-pill__chevron,
.mobile-drawer .nav-pill__chevron {
font-size: 18px;
color: #94a3b8;
transition: transform var(--nav-transition);
}
.nav-pill__item--open .nav-pill__chevron { transform: rotate(180deg); }
/* Menu con */
.nav-dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 50;
min-width: 210px;
overflow: hidden;
border: 1px solid var(--nav-border);
border-radius: 12px;
background: var(--nav-surface);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(15, 23, 42, 0.12);
}
.nav-dropdown-menu.hidden { display: none; }
.nav-dropdown-menu__item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
font-size: 13px;
color: #334155;
text-decoration: none;
transition: background-color var(--nav-transition);
}
html.dark .nav-dropdown-menu__item { color: var(--nav-icon); }
.nav-dropdown-menu__item:hover { background: var(--nav-hover); }
html.dark .nav-dropdown-menu__item:hover { background: var(--nav-border); color: #fff; }
.nav-dropdown-menu__item--active { background: rgba(15, 59, 189, 0.08); color: var(--nav-accent); }
.nav-dropdown-menu__item .material-symbols-outlined { font-size: 18px; }
/* Trong ngăn kéo di động: cùng ruột, khác lớp bọc — một hàng đầy chiều ngang. */
.nav-pill__item--drawer {
width: 100%;
padding: 12px 16px;
border-left: none;
}
/* ============================================
KHUNG HEADER + KHỐI NÚT BÊN PHẢI
============================================
Cùng lý do với .nav-pill, nhưng lần này lỗi nhìn thấy được: header và mấy nút
này do Navbar.js dựng bằng class Tailwind, mà mỗi trang nạp một BẢN DỰNG
Tailwind khác nhau — `tailwind.css` cho trang chính, `tailwind-tools.css` cho
trang công cụ. Bản nào thiếu đúng utility màu viền thì `border` rơi về
currentColor, tức là VIỀN ĐEN quanh header và quanh từng nút (thấy ở
gioi-thieu.html và premium-gate.html), kèm nút cao thấp lệch nhau 4–8px giữa
các trang.
Ghi CSS thật ở đây để thanh menu trông y hệt nhau bất kể trang nạp bản dựng
nào — kể cả trang không nạp Tailwind. base.css luôn được nạp SAU bản dựng
Tailwind nên các luật cùng độ đặc hiệu ở đây thắng. */
/* Bố cục header + hai khối hai bên viết bằng CSS thật, không mượn Tailwind.
Trên trang trong site thì trùng kết quả với các class Tailwind đang có (đã
đối chiếu từng pixel); còn ở /ovpro/ và /stock-ml/ — nơi KHÔNG có Tailwind —
đây là thứ duy nhất giữ cho header không rã thành các khối xếp chồng. */
header.sticky {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
/* nowrap tường minh: app chủ nhà có luật `header { flex-wrap: wrap }` ở cấp
THẺ, không ghim ở đây thì thanh menu rơi xuống dòng hai — /ovpro/ từng cao
128px thay vì 67px vì đúng chuyện này. */
flex-wrap: nowrap;
padding: 12px 40px;
border: none;
border-bottom: 1px solid #e2e8f0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html.dark header.sticky {
border-bottom-color: #232c48;
background: rgba(17, 21, 34, 0.95);
}
/* Dưới 1280px đệm gọn lại — màn hẹp thì mỗi pixel chiều cao là một pixel nội
dung. Trước đây luật này nằm riêng ở signalboard.css + inline trong
dashboard-new.html nên CHỈ trang chủ được gọn (53px) còn mọi trang khác 61px:
cùng một thanh menu mà cao thấp khác nhau tuỳ trang. Đưa về đây một bản. */
@media (max-width: 1279.98px) {
header.sticky { padding: 8px 12px; }
}
.navbar-brand { display: flex; align-items: center; gap: 16px; }
.navbar-brand__link {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
transition: opacity 150ms ease;
}
.navbar-brand__link:hover { opacity: 0.9; text-decoration: none; }
.navbar-brand__icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 4px;
background: rgba(15, 59, 189, 0.1);
}
.navbar-brand__img { width: 32px; height: 32px; object-fit: contain; }
.navbar-right { display: flex; align-items: center; gap: 24px; }
.navbar-actions { display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: 12px; }
/* ── Khối tài khoản (người vào /ovpro/ và /stock-ml/ LUÔN ở trạng thái này) ── */
.navbar-user { position: relative; display: flex; align-items: center; gap: 12px; }
.navbar-user__info { text-align: right; }
.navbar-user__name { margin: 0; font-size: 14px; font-weight: 700; line-height: 1; color: #0f172a; }
html.dark .navbar-user__name { color: #fff; }
.navbar-user__plan { margin: 0; font-size: 12px; line-height: 1.4; color: #64748b; }
html.dark .navbar-user__plan { color: #92a0c9; }
.navbar-user__avatar-wrap { position: relative; }
.navbar-user__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 0 2px #232c48;
cursor: pointer;
transition: box-shadow 150ms ease;
}
.navbar-user__avatar:hover { box-shadow: 0 0 0 2px rgba(15, 59, 189, 0.5); }
.navbar-menu {
position: absolute;
right: 0;
top: 100%;
z-index: 50;
margin-top: 8px;
width: 192px;
overflow: hidden;
border: 1px solid var(--nav-border);
border-radius: 8px;
background: var(--nav-surface);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(15, 23, 42, 0.12);
}
.navbar-menu.hidden { display: none; }
.navbar-menu__item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 16px;
border: none;
background: transparent;
font-family: inherit;
font-size: 14px;
text-align: left;
text-decoration: none;
color: #334155;
cursor: pointer;
transition: background-color var(--nav-transition);
}
html.dark .navbar-menu__item { color: #fff; }
.navbar-menu__item:hover { background: var(--nav-hover); text-decoration: none; }
.navbar-menu__item .material-symbols-outlined { font-size: 18px; }
.navbar-menu__item--danger { color: #f43f5e; }
html.dark .navbar-menu__item--danger { color: #fb7185; }
.navbar-menu__divider { height: 1px; background: var(--nav-border); }
/* Chữ logo: gradient hổ phách. Cũng viết bằng CSS thật vì bản dựng
tailwind-tools.css không có `bg-clip-text` + nhóm `from-/via-/to-`, nên ở nền
TỐI chữ rơi về trắng trơn trong khi mọi trang khác vẫn hổ phách.
Viết kèm `header.sticky` chứ không để class trần: logo là thẻ , mà trang
nào đặt luật theo THẺ (about.css có `html.dark h2 { color:#fff }`) đều mạnh
hơn một class đơn và ăn mất màu chữ. */
header.sticky .navbar-logo-text {
/* margin:0 là BẮT BUỘC, không phải cho đẹp: logo là thẻ
nên nơi nào
không có reset toàn cục (`* { margin:0 }` của base.css) sẽ dính margin mặc
định 0.83em của trình duyệt → header cao vống thêm 10px. Đúng ca /stock-ml/. */
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
text-transform: uppercase;
background: linear-gradient(to right, #d97706, #ea580c, #b45309);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Nút hamburger (dưới 1280px). Cùng lý do với các nút khác: không có CSS thật
thì ở /ovpro/ và /stock-ml/ nó là một cái hộp xám mặc định của trình duyệt. */
.mobile-hamburger-btn {
align-items: center;
justify-content: center;
padding: 6px;
border: none;
border-radius: 8px;
background: transparent;
color: #475569;
line-height: 1;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.mobile-hamburger-btn:hover { background: #f1f5f9; color: #0f172a; }
html.dark .mobile-hamburger-btn { color: #92a0c9; }
html.dark .mobile-hamburger-btn:hover { background: #232c48; color: #fff; }
.mobile-hamburger-btn .material-symbols-outlined { font-size: 24px; }
#themeToggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border: none;
border-radius: 8px;
background: transparent;
color: #64748b;
line-height: 1;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
#themeToggle:hover { background: #f1f5f9; color: #334155; }
html.dark #themeToggle { color: #92a0c9; }
html.dark #themeToggle:hover { background: #232c48; color: #fff; }
.navbar-auth-btn,
.navbar-upgrade-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
/* Chiều cao nút tự quyết, không ăn theo line-height của trang — đó là thứ
làm header lúc 67px lúc 72px tuỳ trang. */
line-height: 1.25;
white-space: nowrap;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.navbar-auth-btn .material-symbols-outlined,
.navbar-upgrade-btn .material-symbols-outlined { font-size: 18px; line-height: 1; }
.navbar-auth-btn--register { background: transparent; border-color: #cbd5e1; color: #64748b; }
.navbar-auth-btn--register:hover { background: #f1f5f9; color: #1e293b; }
html.dark .navbar-auth-btn--register { border-color: #4a5680; color: #92a0c9; }
html.dark .navbar-auth-btn--register:hover { background: #232c48; color: #fff; }
.navbar-auth-btn--login { background: #0f3bbd; color: #fff; }
.navbar-auth-btn--login:hover { background: #0d32a0; }
.navbar-upgrade-btn { background: #f59e0b; color: #fff; }
.navbar-upgrade-btn:hover { background: #d97706; }
/* Chín ô hai dòng là một thanh menu RỘNG (đo được 1251px ở cỡ đầy đủ). Chỉ từ
~1800px trở lên nó mới nằm vừa cạnh logo và khối người dùng ở cỡ nguyên bản;
hẹp hơn thì phải nhường chỗ. Tràn ở đây KHÔNG hiện thành thanh cuộn ngang mà
CẮT CỤT nút Đăng nhập / avatar ở mép phải, nên nhìn qua tưởng vẫn bình thường
— vì vậy mỗi lần thêm mục mới phải đo lại (xem /tmp/shot trong ghi chú).
Số đo trên prod 08/08/2026 khi CHƯA có các dải này, tài khoản đã đăng nhập:
tràn 123px ở 1280 và 37px ở 1366 — tức là hỏng ngay ở 1366, độ phân giải
laptop phổ biến nhất.
Thứ tự hy sinh: co ô menu trước → rồi mới ẩn chữ ở HAI ĐẦU (chữ logo, tên
người dùng, nhãn nút Nâng cấp). Dòng chú thích của mỗi ô ("Xanh vào Đỏ ra",
"Cổ Phiếu A.I"…) giữ nguyên ở mọi cỡ vì đó chính là thiết kế.
Chọn theo cấu trúc thay vì theo class Tailwind: các lớp đó do Navbar.js dựng,
đổi lớp thì luật gãy trong im lặng. */
/* Trần của dải này là 1919.98 chứ không phải 1799.98 như ước lượng ban đầu: đo
lại khi ĐÃ ĐĂNG NHẬP (thêm tên người dùng + nút "Nâng cấp" có chữ) thì ở
1800px header tràn 40–69px. Chỉ từ 1920 mới đủ chỗ cho cỡ nguyên bản. */
@media (min-width: 1280px) and (max-width: 1919.98px) {
header.sticky {
padding-left: 10px;
padding-right: 10px;
}
header.sticky > div:last-child { gap: 12px; }
header.sticky > div:last-child > div:last-child { gap: 8px; }
.nav-pill { margin: 0 10px; }
.nav-pill__item { padding: 6px 9px; gap: 7px; }
.nav-pill__icon { font-size: 19px; }
.nav-pill__img { width: 19px; height: 19px; }
.nav-pill__title { font-size: 12px; }
.nav-pill__sub { font-size: 10px; }
.nav-pill__chevron { font-size: 16px; }
/* Nút Nâng cấp co còn biểu tượng (vẫn có tooltip), nút đăng nhập/đăng ký bớt
đệm — đây là hai thứ rẻ nhất để nhường chỗ. */
header.sticky .navbar-upgrade-btn__label { display: none; }
header.sticky .navbar-upgrade-btn { padding: 8px; }
header.sticky .navbar-auth-btn { padding-left: 12px; padding-right: 12px; }
}
/* Dưới 1536 thì co ô thôi chưa đủ: bỏ nốt CHỮ ở hai đầu. Logo vẫn còn dấu hiệu
nhận diện, avatar vẫn còn (bấm vào ra đủ menu tài khoản) — không mất chức
năng nào, chỉ mất chữ. */
@media (min-width: 1280px) and (max-width: 1535.98px) {
header.sticky .navbar-logo-text { display: none; }
}
/* Tên người dùng phải ẩn SỚM HƠN chữ logo một nhịp: người đã đăng nhập mà chưa
có gói còn kèm nút "Nâng cấp", và ở đúng 1536px — nơi chữ logo vừa hiện lại —
header tràn 9–34px tuỳ trang, tức là cắt cụt avatar ở mép phải. Avatar vẫn
còn, bấm vào ra đủ menu tài khoản, nên bỏ chữ là mất mát nhỏ nhất. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
header.sticky #userInfo { display: none; }
}
/* Khách chưa đăng nhập là ca chật nhất: có TỚI HAI nút (Đăng ký + Đăng nhập)
nằm cạnh thanh menu, và không có #userInfo nào để ẩn bớt. Dưới 1600 thì bỏ
biểu tượng trong hai nút đó — chữ mới là thứ người dùng đọc. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
header.sticky .navbar-auth-btn { padding-left: 10px; padding-right: 10px; }
header.sticky .navbar-auth-btn .material-symbols-outlined { display: none; }
}
/* Dưới 1440: vắt nốt phần đệm của từng ô. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
.nav-pill__item { padding: 6px 6px; gap: 6px; }
}
/* Dưới 1366: ổ khoá gắn thêm cho "Quản Lý Vốn" (09/08/2026) làm thanh menu rộng
thêm ~19px và tràn đúng ở mốc 1280 — đo được 16px ở gioi-thieu, 19px ở
dca-cost. Vắt nốt lề hai bên; đây là phần đệm thuần, không mất chữ nào. */
@media (min-width: 1280px) and (max-width: 1365.98px) {
header.sticky { padding-left: 4px; padding-right: 4px; }
header.sticky > div:last-child { gap: 6px; }
.nav-pill { margin: 0 4px; }
.nav-pill__item { padding: 6px 5px; gap: 5px; }
}
/* ============================================
MOBILE DRAWER STYLES
============================================ */
/* Backdrop */
.mobile-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-drawer-backdrop.open {
opacity: 1;
visibility: visible;
}
/* Drawer panel */
.mobile-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 999;
width: 85vw;
max-width: 360px;
background: #fff;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.dark .mobile-drawer {
background: var(--background-dark, #0c101a);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}
.mobile-drawer.open {
transform: translateX(0);
}
/* Drawer header */
.mobile-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.dark .mobile-drawer__header {
border-bottom-color: var(--border-dark, #232c48);
}
/* Drawer tabs */
.mobile-drawer__tabs {
display: flex;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.dark .mobile-drawer__tabs {
border-bottom-color: var(--border-dark, #232c48);
}
.mobile-drawer__tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.625rem 0;
min-height: 44px;
font-size: 0.8125rem;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.dark .mobile-drawer__tab {
color: #5a6a93;
}
.mobile-drawer__tab.active {
color: var(--primary, #0f3bbd);
border-bottom-color: var(--primary, #0f3bbd);
}
.dark .mobile-drawer__tab.active {
color: #fff;
border-bottom-color: var(--primary, #0f3bbd);
}
.mobile-drawer__tab:hover {
color: #1e293b;
}
.dark .mobile-drawer__tab:hover {
color: #92a0c9;
}
/* Drawer body */
.mobile-drawer__body {
flex: 1;
overflow: hidden;
position: relative;
}
.mobile-drawer__panel {
display: none;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-drawer__panel.active {
display: block;
}
/* Signal panel inside drawer: override LiveSignalPanel styles */
#mobileSignalPanelMount {
height: 100%;
overflow-y: auto;
}
#mobileSignalPanelMount .live-signal-panel-inline {
width: 100% !important;
height: 100% !important;
border: none !important;
border-radius: 0 !important;
}
#mobileSignalPanelMount .signal-card {
margin: 0.25rem 0.5rem;
}
/* Drawer close button */
.mobile-drawer__close {
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Hide mobile drawer elements on desktop */
@media (min-width: 768px) {
.mobile-drawer,
.mobile-drawer-backdrop {
display: none !important;
}
}
/* Utility Classes */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Chặn style của trang chủ nhà thấm ngược vào menu. Cả /ovpro/ lẫn /stock-ml/
đều có luật cấp THẺ `a:hover { text-decoration: underline }` — mạnh hơn một
class đơn — nên nếu không ghim ở đây thì rê chuột lên menu là chữ gạch chân. */
.nav-pill__item,
.nav-pill__item:hover,
.nav-dropdown-menu__item,
.nav-dropdown-menu__item:hover,
.navbar-menu__item:hover,
.navbar-brand__link:hover { text-decoration: none; }