diff --git a/assets/css/frontend/header-userbox.css b/assets/css/frontend/header-userbox.css
index f6f63c45..01cee717 100644
--- a/assets/css/frontend/header-userbox.css
+++ b/assets/css/frontend/header-userbox.css
@@ -113,6 +113,25 @@
   margin: 0;
 }
 
+/* Anchor the VIP preview to the full navigation row instead of relying on
+ * the absolute panel's static position beside the compact CTA. */
+.navbar-top .aksrt-navbar-actions .navbar-vip-hover {
+  position: relative;
+  align-self: stretch;
+  align-items: center;
+  overflow: visible;
+}
+
+.navbar-top .aksrt-navbar-actions .navbar-vip-hover > .sub-vip-card {
+  top: 100%;
+  right: 0;
+  left: auto;
+  width: max-content;
+  max-width: calc(100vw - 24px);
+  margin: 0;
+  z-index: 1002;
+}
+
 /* Keep the drop-down search panel above a fixed header (z-index: 999). */
 .navbar-search {
   z-index: 1001;
diff --git a/tests/widget-system/page-display-contract.test.cjs b/tests/widget-system/page-display-contract.test.cjs
index f21b0415..43ae6d17 100644
--- a/tests/widget-system/page-display-contract.test.cjs
+++ b/tests/widget-system/page-display-contract.test.cjs
@@ -132,6 +132,8 @@ test('VIP navigation purchase switches are saved and consumed end to end', () =>
 })
 
 test('header VIP hover cards match the Zibll markup and style contract', () => {
+  assert.match(headerMenuButtons, /<span class="hover-show inline-block navbar-vip-hover">/)
+  assert.match(headerMenuButtons, /<div class="hover-show-con sub-menu sub-vip-card">/)
   assert.match(vipCardRenderer, /aksrt_get_lazy_attr\('lazy_other', \$icon_url, 'img-icon'\)/)
   assert.match(vipCardRenderer, /<div class=\"abs-center vip-baicon\"[^>]*>/)
   assert.match(vipCardRenderer, /<div class=\"vip-img abs-right\">/)
@@ -148,6 +150,8 @@ test('header VIP hover cards match the Zibll markup and style contract', () => {
   assert.match(zibllMainCss, /\.sub-vip-card \.vip-card\s*\{[^}]*display:\s*inline-block;[^}]*width:\s*240px;[^}]*margin:\s*5px;/s)
   assert.match(zibllMainCss, /\.sub-vip-card \.vip-baicon\.abs-center\s*\{[^}]*font-size:\s*10em;[^}]*left:\s*55%;/s)
   assert.match(zibllMainCss, /\.sub-vip-card \.vip-img\s*\{[^}]*display:\s*none;/s)
+  assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions \.navbar-vip-hover\s*\{[^}]*align-self:\s*stretch;[^}]*overflow:\s*visible;/s)
+  assert.match(headerCss, /\.navbar-top \.aksrt-navbar-actions \.navbar-vip-hover > \.sub-vip-card\s*\{[^}]*top:\s*100%;[^}]*right:\s*0;[^}]*left:\s*auto;[^}]*max-width:\s*calc\(100vw - 24px\);/s)
 })
 
 test('VIP purchase modal matches Zibll desktop-center and mobile-bottom positioning', () => {