/* Keep navigation height separate from the fixed header stack and its flow spacer. */
:root {
  --site-banner-height: 0px;
  --site-header-offset: calc(var(--header-h, 60px) + var(--site-banner-height));
}
:root:has(.trial-banner-space:not([hidden])) { --site-banner-height: 50px; }
.site-breadcrumb { top: var(--site-header-offset, 60px); }
#siteHeader { top: var(--site-banner-height); }
/* The activity owns this panel separately from the general support widget. */
.trial-chat-panel { position: fixed; z-index: 1000; right: 70px; bottom: 100px; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); height: min(740px, calc(100dvh - 116px)); overflow: visible; background: #fff; border: 0; border-radius: 20px; box-shadow: 0 8px 32px #0002; }
.trial-chat-panel[hidden], .trial-chat-panel [hidden] { display: none; }
.trial-chat-close { position: absolute; top: -10px; right: -10px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #111827; box-shadow: 0 1px 6px #0002; cursor: pointer; font-size: 22px; }
.trial-chat-frame-host { flex: 1; min-height: 0; overflow: hidden; border-radius: inherit; }
.trial-chat-frame-host iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 480px) { .trial-chat-close { right: 0; top: 0; } .trial-chat-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100dvh - 16px); } }
.trial-banner-space { height: var(--site-banner-height); }
.trial-banner-space[hidden] { display: none; }
/* Keep the mobile menu scrollable below the header and optional banner. */
@media (max-width: 1279.98px) {
  #navContent {
    max-height: calc(100vh - var(--site-header-offset, 60px));
    max-height: calc(100dvh - var(--site-header-offset, 60px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  #navContent > * { flex-shrink: 0; }
}
.trial-banner { --offer-left: 18.39%; --cta-left: 76.2%; --close-left: 69.74%; --before-width: 391px; --after-width: 198px; --button-width: 104px; --button-height: 29px; --button-top: 10px; position: fixed; inset: 0 0 auto; z-index: 51; height: 50px; color: #000; background: url('/static/image/trial-banner/background.svg') center / cover; font-family: inherit; }
html[lang="zh-CN"] .trial-banner { --offer-left: 26.25%; --cta-left: 68.33%; --close-left: 63.18%; --before-width: 243px; --after-width: 96px; }
html[lang="vi"] .trial-banner { --offer-left: 13.8%; --cta-left: 79.01%; --close-left: 71.3%; --before-width: 512px; --after-width: 208px; }
.trial-banner button { cursor: pointer; border: 0; background: transparent; padding: 0; }
.trial-banner button:focus-visible { outline: 2px solid #7025cf; outline-offset: 3px; }
.trial-banner-confetti { position: absolute; pointer-events: none; }
.trial-banner-confetti-left { left: 8.49%; top: 3.02px; }
.trial-banner-confetti-right { right: 6.56%; top: 3.52px; }
.trial-banner-offer { position: absolute; left: var(--offer-left); top: 0; height: 50px; display: flex; align-items: center; gap: 20px; color: inherit; }
.trial-banner-gift { transform: rotate(-13deg); margin-right: 16px; flex-shrink: 0; }
.trial-banner-copy { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; white-space: nowrap; }
.trial-banner-copy > span:first-child { min-width: var(--before-width); }
.trial-banner-copy > span:last-child { min-width: var(--after-width); }
.trial-banner-copy strong { font-size: 30px; font-weight: 700; background: linear-gradient(90deg,#f5069b,#b613df 46%,#1b62f0); background-clip: text; color: transparent; }
.trial-banner-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; color: #a51bc5; white-space: nowrap; }
.trial-banner-badge > span { position: absolute; }
.trial-banner-tail { position: absolute; left: -6px; transform: rotate(-90deg); }
.trial-banner-close { position: absolute; left: calc(var(--close-left) - 8px); top: 2px; width: 28px; height: 28px; display: grid; place-items: center; }
.trial-banner-cta { position: absolute; left: var(--cta-left); top: var(--button-top); width: var(--button-width); height: var(--button-height); display: flex; align-items: center; justify-content: center; gap: 12px; color: white; font-size: 14px; font-weight: 500; }
.trial-banner-button { position: absolute; left: 0; top: 0; pointer-events: none; }
.trial-banner-cta > span, .trial-banner-arrow { position: relative; flex-shrink: 0; }
.trial-banner-cta > span { white-space: nowrap; }
html[lang="vi"] .trial-banner-confetti-left { left: 4.32%; }
html[lang="vi"] .trial-banner-confetti-right { right: 4.43%; }
html[lang="vi"] .trial-banner-cta { gap: 6px; font-size: 12px; }
@media (max-width: 1700px) {
  .trial-banner-offer { left: 8%; gap: 12px; }
  html[lang="zh-CN"] .trial-banner-offer { left: 18%; }
  html[lang="vi"] .trial-banner-offer { left: 3%; }
  .trial-banner-copy > span { min-width: 0 !important; }
  .trial-banner-copy { font-size: 18px; gap: 8px; }
  .trial-banner-copy strong { font-size: 26px; }
  .trial-banner-gift { margin-right: 8px; }
  .trial-banner-confetti-left { left: 2%; }
  .trial-banner-close { left: auto; right: 10px; }
  .trial-banner-cta { left: auto; right: 9%; }
  html[lang="vi"] .trial-banner-copy { font-size: 15px; }
  html[lang="vi"] .trial-banner-badge { font-size: 12px; }
  html[lang="vi"] .trial-banner-cta { right: 40px; }
}
@media (max-width: 1250px) {
  .trial-banner .trial-banner-offer { left: 16px; }
  .trial-banner-confetti, .trial-banner-badge { display: none; }
  .trial-banner-cta { right: 46px; }
  .trial-banner-copy { font-size: 15px; }
  .trial-banner-copy strong { font-size: 22px; }
  html[lang="vi"] .trial-banner-copy { font-size: 13px; }
}
@media (max-width: 760px) {
  .trial-banner-offer { right: 40px; gap: 10px; text-align: left; }
  .trial-banner-gift { flex-shrink: 0; }
  .trial-banner-copy { display: block; white-space: normal; font-size: 12px; line-height: 20px; }
  .trial-banner-copy strong { font-size: 18px; white-space: nowrap; }
  .trial-banner-cta { display: none; }
  html[lang="vi"] .trial-banner-copy { font-size: 12px; line-height: 16px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .trial-banner-cta { display: none; }
}