/* MosVPN customer theme. Design values come from /assets/mosvpn-tokens.css. */

html,
body,
#root,
#page-container,
#main-container,
#page-container .content {
    background-color: var(--mos-bg) !important;
}

body {
    color: var(--mos-navy);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Navigation */
#sidebar {
    background: rgba(255, 255, 255, .98) !important;
    border-right: 1px solid var(--mos-border);
    box-shadow: 10px 0 34px rgba(50, 18, 29, .035);
}

#sidebar .bg-header-dark,
#sidebar .bg-black-10 {
    background: linear-gradient(135deg, var(--mos-red), var(--mos-red-dark)) !important;
}

#sidebar .content-header {
    height: 64px;
}

#sidebar .link-fx {
    align-items: center;
    display: inline-flex;
    font-size: 1.16rem !important;
    font-weight: 850;
    letter-spacing: -.025em;
}

#sidebar .link-fx::before {
    align-items: center;
    background: url('/assets/brand/mosvpn-mark-light.svg') center / 28px 28px no-repeat;
    content: "";
    display: inline-flex;
    height: 31px;
    justify-content: center;
    margin-right: 10px;
    width: 31px;
}

#sidebar .content-side-full {
    padding: 18px 14px 30px;
}

.nav-main-heading {
    color: #9c8990 !important;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-top: 16px;
    padding-left: 13px;
}

.nav-main-link {
    border-radius: 11px;
    color: #586174 !important;
    margin-bottom: 4px;
    min-height: 43px;
    padding: .67rem .82rem;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.nav-main-link .nav-main-link-icon {
    color: #ae9ca3 !important;
}

.nav-main-link:hover {
    background: #fff6f8 !important;
    color: var(--mos-red-dark) !important;
    transform: translateX(2px);
}

.nav-main-link.active {
    background: var(--mos-red-soft) !important;
    box-shadow: inset 3px 0 0 var(--mos-red);
    color: var(--mos-red) !important;
    font-weight: 700;
}

.nav-main-link.active .nav-main-link-icon,
.nav-main-link:hover .nav-main-link-icon {
    color: var(--mos-red) !important;
}

#page-header {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid var(--mos-border);
    box-shadow: 0 5px 22px rgba(50, 18, 29, .04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#page-header .content-header {
    height: 64px;
}

#page-header .v2board-container-title,
#page-header .btn,
#page-header a,
#page-header .text-white,
#page-header .text-white-75 {
    color: var(--mos-navy) !important;
}

#page-header .v2board-container-title {
    font-weight: 750;
    letter-spacing: -.015em;
}

#page-header .btn {
    background: var(--mos-red-soft) !important;
    border-radius: 10px;
    color: var(--mos-red) !important;
}

#page-header .btn:hover {
    background: var(--mos-red-soft) !important;
    color: var(--mos-red) !important;
}

#page-header .btn.btn-primary {
    background: #fff !important;
    border-color: var(--mos-border) !important;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
    color: var(--mos-navy) !important;
}

#page-header .btn.btn-primary .fa,
#page-header .btn.btn-primary .si,
#page-header .btn.btn-primary span {
    color: inherit !important;
}

#page-header .btn.btn-primary:hover,
#page-header .btn.btn-primary:focus {
    background: var(--mos-red-soft) !important;
    border-color: rgba(212, 24, 53, .24) !important;
    box-shadow: 0 0 0 3px rgba(212, 24, 53, .10);
    color: var(--mos-red) !important;
    transform: none;
}

#page-container.page-header-fixed #main-container {
    padding-top: 64px;
}

/* Customer content */
.content {
    padding-top: 26px;
}

.block,
.card,
.ant-card,
.modal-content,
.dropdown-menu {
    background: var(--mos-card);
    border: 1px solid var(--mos-border) !important;
    border-radius: 17px !important;
    box-shadow: var(--mos-shadow);
    overflow: hidden;
}

.block-header,
.block-header-default,
.ant-card-head,
.block-header.plan {
    background: linear-gradient(90deg, #fff, #fff8fa) !important;
    border-bottom: 1px solid var(--mos-border) !important;
    border-radius: 17px 17px 0 0 !important;
    min-height: 56px;
}

.block-title,
.ant-card-head-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mos-navy);
    font-weight: 760;
    letter-spacing: -.02em;
}

.border,
.border-bottom,
.border-start {
    border-color: var(--mos-border) !important;
}

a,
.text-primary,
.si,
.fa {
    color: var(--mos-red) !important;
}

.v2board-shortcuts-item {
    border-bottom-color: var(--mos-border) !important;
    min-height: 83px;
    padding: 21px 24px;
    transition: background-color .18s ease, padding-left .18s ease;
}

.v2board-shortcuts-item:hover {
    background: var(--mos-red-pale) !important;
    padding-left: 29px;
}

.v2board-shortcuts-item > .description {
    color: var(--mos-muted);
    font-size: 12.5px;
    opacity: 1;
}

.mosvpn-plan-price-vnd {
    font-variant-numeric: var(--mos-tabular-nums);
    margin-bottom: var(--mos-space-1) !important;
}

.mosvpn-plan-price-rub {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-tight);
    margin: 0 0 var(--mos-space-2);
}

/*
 * The buy button on each plan card.
 *
 * XiaoBoard ships it as `btn btn-sm btn-alt-primary` — the compiled theme's
 * stock pale-blue variant, never themed here. On a 375px phone that left it
 * 118px wide, 40px tall, left-aligned and blue inside an otherwise red
 * interface: the single most important control on the site, styled like the
 * least important one. Nine in ten customers are on a phone, so it becomes a
 * full-width, brand-coloured target with a comfortable tap height.
 *
 * `btn-alt-primary` appears nowhere else in the customer app — verified across
 * dashboard, order, invite, profile, ticket, knowledge and the checkout page —
 * and the selector is scoped to the plan card besides.
 */
#main-container a.block-link-pop .block-content .btn.btn-alt-primary {
    background: var(--mos-color-red-500);
    border: var(--mos-border-width) solid var(--mos-color-red-500);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-neutral-0);
    display: block;
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-tight);
    /* Above the 44px touch target Apple and Google both ask for. */
    min-height: var(--mos-control-height-lg);
    padding: var(--mos-space-3) var(--mos-space-4);
    text-align: center;
    width: 100%;
}

#main-container a.block-link-pop .block-content .btn.btn-alt-primary:hover,
#main-container a.block-link-pop:hover .block-content .btn.btn-alt-primary {
    background: var(--mos-color-red-600);
    border-color: var(--mos-color-red-600);
    color: var(--mos-color-neutral-0);
}

#main-container a.block-link-pop .block-content .btn.btn-alt-primary:active {
    background: var(--mos-color-red-700);
    border-color: var(--mos-color-red-700);
}

#main-container a.block-link-pop .block-content .btn.btn-alt-primary:focus-visible {
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

/* Plan checkout: presentation-only enhancement over XiaoBoard's order flow. */
#cashier[data-mosvpn-checkout="true"] {
    align-items: flex-start;
    margin-left: -10px;
    margin-right: -10px;
}

#cashier[data-mosvpn-checkout="true"] > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

#cashier[data-mosvpn-checkout="true"] .block {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    box-shadow: var(--mos-shadow-sm);
}

.mosvpn-plan-checkout__hero {
    background:
        radial-gradient(circle at 94% 12%, rgba(211, 34, 53, .16), transparent 34%),
        linear-gradient(135deg, var(--mos-color-surface), var(--mos-color-red-50)) !important;
    min-height: 116px;
    padding: 28px 26px !important;
    position: relative;
}

.mosvpn-plan-checkout__hero::after {
    background: var(--mos-color-red-500);
    border-radius: var(--mos-radius-pill);
    content: "";
    height: 5px;
    left: 26px;
    position: absolute;
    top: 20px;
    width: 42px;
}

.mosvpn-plan-checkout__hero > h4 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.035em;
    margin-top: 13px;
    padding: 0 !important;
}

.mosvpn-plan-checkout__hero .v2board-plan-content {
    color: var(--mos-color-text-muted);
    padding: 14px 0 0;
}

.mosvpn-plan-checkout__hero .v2board-plan-content:empty {
    display: none;
}

.mosvpn-plan-checkout__periods > .block-header {
    min-height: 68px;
    padding: 0 22px;
}

.mosvpn-plan-checkout__periods .block-title {
    font-size: 1rem;
    font-weight: 750;
}

.mosvpn-plan-checkout__periods .block-content {
    display: grid;
    gap: 10px;
    padding: 16px !important;
}

.mosvpn-plan-checkout__period {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: 1px solid transparent !important;
    border-radius: 12px;
    min-height: 68px;
    padding: 12px 16px;
    transition: border-color var(--mos-motion-fast), box-shadow var(--mos-motion-fast), transform var(--mos-motion-fast);
}

.mosvpn-plan-checkout__period:hover {
    border-color: var(--mos-color-border-strong) !important;
    transform: translateY(-1px);
}

.mosvpn-plan-checkout__period.active {
    background: linear-gradient(135deg, var(--mos-color-red-50), var(--mos-color-surface)) !important;
    border-color: var(--mos-color-red-500) !important;
    box-shadow: 0 0 0 3px rgba(211, 34, 53, .10);
}

.mosvpn-plan-checkout__period > div:first-child {
    color: var(--mos-color-text);
    font-weight: 650;
}

.mosvpn-plan-checkout__period > div:last-child {
    color: var(--mos-color-text);
    font-size: 1rem;
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: 750;
}

.mosvpn-checkout-price-rub {
    color: var(--mos-color-text-subtle);
    display: block;
    font-size: .72rem;
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 4px;
}

.mosvpn-plan-checkout__sidebar {
    position: sticky;
    top: 84px;
}

.mosvpn-plan-checkout__coupon {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 14px !important;
    position: relative;
}

.mosvpn-plan-checkout__coupon .v2board-input-coupon {
    background: var(--mos-color-surface-muted) !important;
    border: 1px solid var(--mos-color-border) !important;
    flex: 1 1 auto;
    height: 48px;
    min-width: 0;
    padding: 0 14px !important;
}

.mosvpn-plan-checkout__coupon .btn {
    flex: 0 0 auto;
    min-height: 38px;
    position: static !important;
}

.mosvpn-plan-checkout__summary {
    color: var(--mos-color-text) !important;
    padding: 22px !important;
}

.mosvpn-plan-checkout__summary .text-light,
.mosvpn-plan-checkout__summary h1,
.mosvpn-plan-checkout__summary h5 {
    color: var(--mos-color-text) !important;
}

.mosvpn-plan-checkout__summary h5 {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mosvpn-plan-checkout__summary .row.no-gutters {
    border-bottom-color: var(--mos-color-border) !important;
    color: var(--mos-color-text-muted);
    line-height: 1.45;
}

.mosvpn-plan-checkout__summary .col-4.text-right {
    color: var(--mos-color-text);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: 700;
}

.mosvpn-plan-checkout__summary > .pt-3 {
    color: var(--mos-color-text-subtle) !important;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mosvpn-plan-checkout__summary h1 {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-variant-numeric: var(--mos-tabular-nums);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.mosvpn-plan-checkout__summary .mosvpn-checkout-price-rub--total {
    font-size: .82rem;
    letter-spacing: 0;
    margin-top: 8px;
}

.mosvpn-plan-checkout__summary .btn-block {
    min-height: 50px;
}

@media (max-width: 767.98px) {
    #cashier[data-mosvpn-checkout="true"] {
        margin-left: 0;
        margin-right: 0;
    }

    #cashier[data-mosvpn-checkout="true"] > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .mosvpn-plan-checkout__hero {
        min-height: 100px;
        padding: 23px 20px !important;
    }

    .mosvpn-plan-checkout__hero::after {
        left: 20px;
        top: 16px;
    }

    .mosvpn-plan-checkout__periods .block-content {
        gap: 8px;
        padding: 12px !important;
    }

    .mosvpn-plan-checkout__period {
        min-height: 62px;
        padding: 10px 12px;
    }

    .mosvpn-plan-checkout__sidebar {
        position: static;
    }

    .mosvpn-plan-checkout__summary {
        padding: 20px !important;
    }
}

.mosvpn-app-sync-item {
    align-items: center;
    background: #fff8fa;
    border-left: 3px solid var(--mos-red);
    cursor: default;
    display: flex;
    padding-left: 21px;
}

.mosvpn-app-sync-item:hover {
    background: #fff8fa !important;
    padding-left: 21px;
}

.mosvpn-app-sync-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.mosvpn-app-sync-copy strong {
    color: var(--mos-red-dark);
    display: block;
    font-weight: 750;
}

.mosvpn-app-sync-icon {
    color: var(--mos-red) !important;
    flex: 0 0 auto;
    margin-left: 16px;
    opacity: 1 !important;
    position: static !important;
}

/* Subscription URLs are consumed by the app API, not copied from the web UI. */
body.mosvpn-client [class*="oneClickSubscribe"],
body.mosvpn-client [class*="subsrcibe-for-link"],
body.mosvpn-client [class*="subscribe-for-qrcode"],
body.mosvpn-client .bind_telegram,
body.mosvpn-client [data-mosvpn-subscription-control],
body.mosvpn-client [data-subscribe-url],
body.mosvpn-client [data-subscription-url],
body.mosvpn-client a[href*="/client/subscribe"],
body.mosvpn-client a[href^="hiddify://"],
body.mosvpn-client a[href^="sing-box://"],
body.mosvpn-client a[href^="shadowrocket://"],
body.mosvpn-client a[href^="quantumult-x://"],
body.mosvpn-client a[href^="surge://"],
body.mosvpn-client a[href^="stash://"],
body.mosvpn-client a[href^="clash://"] {
    display: none !important;
}

body.mosvpn-client [data-mosvpn-subscription-reset="disabled"] {
    display: none !important;
}

.v2board-shortcuts-item i {
    align-items: center;
    background: var(--mos-red-soft);
    border-radius: 12px;
    color: var(--mos-red);
    display: flex;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    opacity: 1;
    right: 22px;
    top: 19px;
    width: 44px;
}

.v2board-plan-content {
    padding: 26px;
}

.v2board-plan-features > li::before {
    color: var(--mos-red);
}

.v2board-plan-tabs {
    border-color: var(--mos-red);
}

.v2board-plan-tabs > .active {
    background: var(--mos-red);
}

.v2board-sold-out-tag {
    background-color: var(--mos-red);
}

/* Buttons, forms and status */
.btn {
    border-radius: 11px;
    font-weight: 680;
    min-height: 40px;
    transition: box-shadow .18s ease, transform .18s ease;
}

.btn-primary,
.bg-primary,
.badge-primary,
.ant-btn-primary,
.ant-switch-checked,
.ant-pagination-item-active {
    background: linear-gradient(135deg, var(--mos-red), var(--mos-red-dark)) !important;
    border-color: var(--mos-red) !important;
    color: #fff !important;
}

.btn-primary .si,
.btn-primary .fa,
.ant-btn-primary .anticon {
    color: #fff !important;
}

.btn-primary:hover,
.ant-btn-primary:hover {
    box-shadow: 0 9px 20px rgba(215, 25, 63, .24);
    transform: translateY(-1px);
}

.form-control,
.custom-select,
.ant-input,
.ant-select-selection,
.ant-input-number,
.ant-picker {
    background: #fff !important;
    border: 1px solid #ded2d7 !important;
    border-radius: 11px !important;
    color: var(--mos-navy) !important;
    min-height: 42px;
}

.form-control:focus,
.custom-select:focus,
.ant-input:focus,
.ant-select-focused .ant-select-selection,
.ant-input-number-focused,
.ant-picker-focused {
    border-color: var(--mos-red) !important;
    box-shadow: 0 0 0 3px rgba(215, 25, 63, .12) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner {
    background-color: var(--mos-red) !important;
    border-color: var(--mos-red) !important;
}

.alert {
    border: 0 !important;
    border-left: 4px solid currentColor !important;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(35, 18, 25, .04);
}

.alert-danger {
    background: #fff0f2;
    color: #a81031;
}

.alert-success {
    background: #edfbf4;
    color: #14734a;
}

.alert-warning {
    background: #fff8e7;
    color: #8b6410;
}

/* Tables */
.table,
.ant-table,
.ant-table-container {
    color: #485267;
}

.table thead th,
.ant-table-thead > tr > th {
    background: #fff7f9 !important;
    border-bottom: 1px solid var(--mos-border) !important;
    color: #795963;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.table td,
.table th,
.ant-table-tbody > tr > td {
    border-color: var(--mos-border) !important;
}

.table-hover tbody tr:hover,
.ant-table-tbody > tr:hover > td {
    background: #fff7f9 !important;
}

.ant-tabs-ink-bar {
    background: var(--mos-red) !important;
}

.ant-pagination-item-active a,
.ant-pagination-item:hover a,
.ant-tabs-tab-active,
.ant-tabs-tab:hover {
    color: var(--mos-red) !important;
}

/* Login / register / password recovery */
.v2board-background {
    background-color: #fff6f8 !important;
    background-image:
        radial-gradient(circle at 13% 16%, rgba(215, 25, 63, .17), transparent 27%),
        radial-gradient(circle at 87% 82%, rgba(23, 35, 61, .10), transparent 29%),
        linear-gradient(135deg, #fff 0%, #fff4f7 100%) !important;
}

.v2board-auth-box .block {
    border-radius: 20px !important;
    box-shadow: 0 26px 76px rgba(88, 18, 39, .15);
}

.v2board-auth-box .font-size-h1 {
    color: var(--mos-red) !important;
    font-size: 2.2rem !important;
    font-weight: 850 !important;
    letter-spacing: -.045em;
}

.v2board-auth-box .text-muted {
    color: var(--mos-muted) !important;
}

.v2board-login-i18n-btn,
.v2board-auth-lang-btn {
    color: var(--mos-red) !important;
}

@media (max-width: 991.98px) {
    #sidebar {
        width: min(84vw, 310px);
    }

    .content {
        padding: 18px;
    }
}

@media (max-width: 767.98px) {
    #page-header .content-header {
        padding: 0 14px !important;
    }

    .content {
        padding: 12px !important;
    }

    .block {
        border-radius: 13px !important;
        margin-bottom: 12px !important;
    }

    .block-header {
        border-radius: 13px 13px 0 0 !important;
        padding: 11px 16px;
    }

    .block-content {
        border-radius: 0 0 13px 13px !important;
    }

    .v2board-shortcuts-item {
        padding-left: 18px;
        padding-right: 76px;
    }

    .v2board-shortcuts-item:hover {
        padding-left: 21px;
    }

    .v2board-auth-box {
        padding: 14px;
    }

    .v2board-auth-box .block {
        border-radius: 17px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    #sidebar,
    #page-header,
    .block-header,
    .block-header-default,
    .ant-card-head,
    .block-header.plan,
    .form-control,
    .custom-select,
    .ant-input,
    .ant-select-selection,
    .ant-input-number,
    .ant-picker,
    .ant-table-thead > tr > th {
        background: var(--mos-card) !important;
        color: var(--mos-navy) !important;
    }

    body,
    .table,
    .ant-table,
    .ant-table-container,
    .nav-main-link {
        color: #d4c8cd !important;
    }

    .table-hover tbody tr:hover,
    .ant-table-tbody > tr:hover > td,
    .nav-main-link:hover,
    .v2board-shortcuts-item:hover {
        background: #301a21 !important;
    }
}

/* 2026 MosVPN portal refresh: premium navigation, dashboard hero and split auth. */
.mosvpn-client:not(.mosvpn-auth-active) #sidebar {
    background:
        radial-gradient(circle at 20% 0, rgba(212, 24, 53, .14), transparent 34%),
        #101828 !important;
    border-right-color: rgba(255, 255, 255, .07);
    box-shadow: 12px 0 32px rgba(16, 24, 40, .12);
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .content-side-full {
    padding-top: 20px;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-heading {
    color: #7887a2 !important;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link {
    color: #c5cfdd !important;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link .nav-main-link-icon {
    color: #8290a7 !important;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active {
    background: linear-gradient(90deg, rgba(212, 24, 53, .28), rgba(212, 24, 53, .08)) !important;
    box-shadow: inset 3px 0 0 #f0445e;
    color: #fff !important;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active .nav-main-link-icon,
.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link:hover .nav-main-link-icon {
    color: #ff7186 !important;
}

.mosvpn-client:not(.mosvpn-auth-active) #sidebar .v2board-copyright {
    color: #a9b5c7;
    opacity: .46;
}

.mosvpn-client-hero {
    background:
        linear-gradient(90deg, rgba(10, 16, 29, .98) 0%, rgba(10, 16, 29, .90) 43%, rgba(10, 16, 29, .25) 100%),
        url('/theme/default/assets/mosvpn-auth-hero.webp') center right / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    box-shadow: 0 20px 54px rgba(16, 24, 40, .18);
    color: #fff;
    isolation: isolate;
    margin-bottom: 24px;
    min-height: 262px;
    overflow: hidden;
    padding: 34px 38px;
    position: relative;
}

.mosvpn-client-hero::after {
    background: radial-gradient(circle, rgba(212, 24, 53, .28), transparent 66%);
    content: "";
    height: 340px;
    position: absolute;
    right: -95px;
    top: -110px;
    width: 340px;
    z-index: -1;
}

.mosvpn-client-hero-content {
    max-width: 680px;
    position: relative;
    z-index: 2;
}

.mosvpn-client-eyebrow,
.mosvpn-auth-kicker {
    color: #ff8fa1;
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mosvpn-client-hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    letter-spacing: -.045em;
    line-height: 1.04;
    margin: 0 0 12px;
    max-width: 610px;
}

.mosvpn-client-hero p {
    color: #bac5d6;
    font-size: .98rem;
    line-height: 1.65;
    margin: 0 0 20px;
    max-width: 590px;
}

.mosvpn-client-hero-actions,
.mosvpn-client-hero-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mosvpn-client-hero-actions a {
    align-items: center;
    border-radius: 11px;
    display: inline-flex;
    font-size: .85rem;
    font-weight: 750;
    justify-content: center;
    min-height: 42px;
    padding: 9px 17px;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.mosvpn-client-hero-actions a:hover {
    transform: translateY(-1px);
}

.mosvpn-client-hero-primary {
    background: linear-gradient(135deg, #e52643, #b50f29);
    box-shadow: 0 10px 24px rgba(212, 24, 53, .3);
    color: #fff !important;
}

.mosvpn-client-hero-secondary {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff !important;
}

.mosvpn-client-hero-badges {
    gap: 18px;
    margin-top: 18px;
}

.mosvpn-client-hero-badges span {
    align-items: center;
    color: #aebbd0;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 650;
    gap: 7px;
}

.mosvpn-client-hero svg,
.mosvpn-auth-trust svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 18px;
}

.mosvpn-client-orbit {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    bottom: -145px;
    height: 360px;
    position: absolute;
    right: 4%;
    transform: rotate(-11deg);
    width: 520px;
}

.mosvpn-client-orbit::before,
.mosvpn-client-orbit::after {
    border: 1px solid rgba(212, 24, 53, .28);
    border-radius: inherit;
    content: "";
    inset: 35px;
    position: absolute;
}

.mosvpn-client-orbit::after {
    inset: 76px;
}

.mosvpn-client-orbit i {
    background: #ff5f77;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 95, 119, .9);
    height: 7px;
    position: absolute;
    width: 7px;
}

.mosvpn-client-orbit i:nth-child(1) {
    left: 76px;
    top: 70px;
}

.mosvpn-client-orbit i:nth-child(2) {
    right: 92px;
    top: 30px;
}

.mosvpn-client-orbit i:nth-child(3) {
    right: 62px;
    top: 145px;
}

.mosvpn-client:not(.mosvpn-auth-active) #main-container .content > .block,
.mosvpn-client:not(.mosvpn-auth-active) #main-container .content > .row .block {
    box-shadow: 0 12px 32px rgba(16, 24, 40, .07);
}

/* Authentication */
.mosvpn-auth-active,
.mosvpn-auth-active #root,
.mosvpn-auth-active #page-container,
.mosvpn-auth-active #main-container {
    background: #070b13 !important;
    color: #fff;
    min-height: 100%;
}

.mosvpn-auth-active .v2board-background {
    background:
        linear-gradient(90deg, rgba(7, 11, 19, .97) 0%, rgba(7, 11, 19, .84) 39%, rgba(7, 11, 19, .12) 74%, rgba(7, 11, 19, .35) 100%),
        url('/theme/default/assets/mosvpn-auth-hero.webp') center right / cover no-repeat !important;
    inset: 0;
}

/* Split screen, edge to edge: the form fills the left half, the picture the
   right. No outer frame or rounded card around the pair. */
.mosvpn-auth-active .v2board-auth-box {
    align-items: stretch;
    display: grid !important;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    inset: 0;
    margin: 0;
    min-height: 100vh;
    overflow: hidden auto;
    padding: 0 !important;
}

.mosvpn-auth-active .v2board-auth-box > div:first-child {
    align-items: stretch;
    background:
        radial-gradient(circle at 100% 20%, rgba(212, 24, 53, .16), transparent 36%),
        rgba(10, 16, 29, .97);
    border: 0;
    border-radius: 0;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    max-width: none !important;
    min-height: 100vh;
    min-width: 0;
    padding: 40px clamp(24px, 5vw, 72px) 40px;
    position: relative;
    z-index: 2;
}

.mosvpn-child-site-badge {
    background: rgba(212, 24, 53, .11);
    border: 1px solid rgba(255, 95, 119, .24);
    border-radius: 14px;
    display: grid;
    gap: 2px;
    margin-top: 18px;
    max-width: 430px;
    padding: 11px 14px;
    width: 100%;
}

.mosvpn-child-site-badge span {
    color: #ff9bab;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mosvpn-child-site-badge strong {
    color: #fff;
    font-size: .92rem;
}

.mosvpn-child-site-badge small {
    color: rgba(255, 255, 255, .66);
    line-height: 1.35;
}

.mosvpn-vat-registration {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 15px;
    margin: 17px 0;
    overflow: hidden;
    transition: border-color .2s ease, background-color .2s ease;
}

.mosvpn-vat-registration.is-open {
    background: rgba(212, 24, 53, .055);
    border-color: rgba(240, 68, 94, .32);
}

.mosvpn-vat-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    display: grid;
    gap: 11px;
    grid-template-columns: 38px minmax(0, 1fr) auto 18px;
    min-height: 68px;
    padding: 11px 13px;
    text-align: left;
    width: 100%;
}

.mosvpn-vat-toggle:focus-visible {
    box-shadow: inset 0 0 0 2px #ff7186;
    outline: 0;
}

.mosvpn-vat-toggle-icon {
    align-items: center;
    background: rgba(212, 24, 53, .18);
    border: 1px solid rgba(255, 113, 134, .22);
    border-radius: 11px;
    color: #ff8fa1;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.mosvpn-vat-toggle-icon svg,
.mosvpn-vat-chevron svg,
.mosvpn-vat-privacy svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 18px;
}

.mosvpn-vat-toggle-copy { min-width: 0; }
.mosvpn-vat-toggle-copy strong { color: #f8fafc; display: block; font-size: .85rem; font-weight: 760; line-height: 1.3; }
.mosvpn-vat-toggle-copy small { color: #8f9cb1; display: block; font-size: .69rem; line-height: 1.4; margin-top: 2px; }
.mosvpn-vat-toggle em { background: rgba(255, 255, 255, .08); border-radius: 999px; color: #abb6c8; font-size: .63rem; font-style: normal; font-weight: 750; padding: 4px 8px; white-space: nowrap; }
.mosvpn-vat-chevron { color: #8491a5; display: inline-flex; transition: transform .2s ease; }
.mosvpn-vat-registration.is-open .mosvpn-vat-chevron { color: #ff7186; transform: rotate(180deg); }

.mosvpn-vat-fields {
    border-top: 1px solid rgba(255, 255, 255, .075);
    display: grid;
    gap: 12px;
    padding: 14px;
}

.mosvpn-vat-fields[hidden] { display: none !important; }
.mosvpn-vat-name-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1.45fr) minmax(110px, .7fr); }
.mosvpn-vat-field { color: #aab5c7; display: block; font-size: .7rem; font-weight: 680; margin: 0; }
.mosvpn-vat-field > span { display: block; margin: 0 0 5px 2px; }

.mosvpn-auth-active .v2board-auth-box .mosvpn-vat-field .form-control {
    font-size: .82rem;
    height: 43px;
    min-height: 43px;
}

.mosvpn-vat-privacy {
    align-items: flex-start;
    color: #8795aa;
    display: flex;
    font-size: .68rem;
    gap: 7px;
    line-height: 1.5;
    margin: 1px 0 0;
}

.mosvpn-vat-privacy > span:first-child { color: #4cc38a; display: inline-flex; flex: 0 0 auto; margin-top: 1px; }

[data-mosvpn-child-invite-field][hidden] {
    display: none !important;
}

/* The column is a flex stack: the top row sits at the top, the form takes the
   free space and centres itself in it. */
.mosvpn-auth-active .v2board-auth-box > div:first-child > .mx-2 {
    display: flex;
    flex-direction: column;
    margin: 0 auto !important;
    max-width: 460px;
    min-height: calc(100vh - 80px);
    width: 100%;
}

.mosvpn-auth-active .v2board-auth-box > div:first-child > .mx-2 > .block {
    margin-bottom: auto !important;
    margin-top: auto !important;
}

.mosvpn-auth-top {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 40px;
}

.mosvpn-auth-tools {
    align-items: center;
    display: flex;
    gap: 8px;
}

/* Field names sit above the boxes, with a required mark and an icon inside
   the box. The label is a fixed 20px line so the icon and the reveal button
   can be placed against the box without measuring it. */
.mosvpn-auth-active .v2board-auth-box .form-group[data-mosvpn-auth-field] {
    margin-bottom: 18px;
    position: relative;
}

.mosvpn-auth-label {
    color: #e6ebf2;
    display: block;
    font-size: .84rem;
    font-weight: 650;
    height: 20px;
    line-height: 20px;
    margin: 0 0 8px;
}

.form-row > .mosvpn-auth-label {
    flex: 0 0 100%;
    padding: 0 5px;
}

.mosvpn-auth-label.is-required::before {
    color: #f0445e;
    content: "* ";
}

.mosvpn-auth-active .v2board-auth-box .form-group[data-mosvpn-auth-field] input.form-control {
    padding-left: 44px;
}

.mosvpn-auth-active .v2board-auth-box .form-group[data-mosvpn-auth-field="password"] input.form-control,
.mosvpn-auth-active .v2board-auth-box .form-group[data-mosvpn-auth-field="confirm"] input.form-control {
    padding-right: 48px;
}

.mosvpn-auth-field-icon {
    color: #8793a8;
    display: inline-flex;
    left: 15px;
    pointer-events: none;
    position: absolute;
    top: 43px;
}

.form-row > .mosvpn-auth-field-icon {
    left: 20px;
}

.mosvpn-auth-field-icon svg,
.mosvpn-auth-reveal svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 18px;
}

.mosvpn-auth-reveal {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: #8793a8;
    cursor: pointer;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    position: absolute;
    right: 2px;
    top: 28px;
    width: 46px;
}

.mosvpn-auth-reveal:hover,
.mosvpn-auth-reveal[aria-pressed="true"] {
    color: #ff7186;
}

.mosvpn-auth-reveal:focus-visible {
    box-shadow: inset 0 0 0 2px #ff7186;
    outline: 0;
}

.mosvpn-auth-forgot {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-top: 10px;
    text-align: right;
}

body.mosvpn-auth-active .mosvpn-auth-forgot,
body.mosvpn-auth-active .mosvpn-auth-forgot:visited {
    color: #ff7186;
    text-decoration: none;
}

body.mosvpn-auth-active .mosvpn-auth-forgot:hover {
    color: #ff97a7;
    text-decoration: underline;
}

/* Under the button: one centred line, "Bạn chưa có tài khoản? Đăng ký ngay".
   Password recovery moved up beside its box and language moved to the top
   row, so the bundle's copies of both are hidden here. */
.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter[data-mosvpn-auth-footer] {
    align-items: center;
    border-top: 0;
    flex-wrap: wrap;
    gap: 0 6px;
    justify-content: center;
    margin-top: 18px;
    padding: 0 !important;
}

.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter[data-mosvpn-prompt]::before {
    color: #9ba7ba;
    content: attr(data-mosvpn-prompt);
    font-size: .875rem;
}

.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter[data-mosvpn-auth-footer] .ant-divider,
.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter [data-mosvpn-auth-moved] {
    display: none !important;
}

.mosvpn-auth-active .v2board-auth-box:has(.mosvpn-auth-language) .v2board-login-i18n-btn {
    display: none !important;
}

body.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter[data-mosvpn-auth-footer] a.text-muted {
    color: #ff7186 !important;
    font-size: .875rem;
    font-weight: 650;
}

.mosvpn-auth-active .v2board-auth-box .block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mosvpn-auth-active .v2board-auth-box .row,
.mosvpn-auth-active .v2board-auth-box .bg-white,
.mosvpn-auth-active .v2board-auth-box .bg-gray-lighter,
.mosvpn-auth-active .v2board-auth-box .block-content {
    background: transparent !important;
}

.mosvpn-auth-active .v2board-auth-box .block-content {
    padding: 0 !important;
}

.mosvpn-auth-active .v2board-auth-box .mb-3.text-center {
    margin-bottom: 28px !important;
    text-align: left !important;
}

.mosvpn-auth-active .v2board-auth-box .font-size-h1 {
    color: #fff !important;
    cursor: default;
    font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
    letter-spacing: -.04em;
    line-height: 1.12;
    pointer-events: none;
}

.mosvpn-auth-active .v2board-auth-box .font-size-h1 .text-dark {
    color: #fff !important;
}

.mosvpn-auth-active .v2board-auth-box .font-size-sm.text-muted.mb-3 {
    color: #95a2b7 !important;
    font-size: .9rem;
    line-height: 1.6;
    margin: 9px 0 0 !important;
}

.mosvpn-auth-active .v2board-auth-box .form-group {
    margin-bottom: 14px;
}

.mosvpn-auth-active .v2board-auth-box .form-control {
    background: rgba(255, 255, 255, .065) !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: #fff !important;
    height: 48px;
    padding: 10px 14px;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.mosvpn-auth-active .v2board-auth-box .form-control::placeholder {
    color: #778399;
}

.mosvpn-auth-active .v2board-auth-box .form-control:focus {
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(240, 68, 94, .72) !important;
    box-shadow: 0 0 0 3px rgba(212, 24, 53, .16) !important;
}

.mosvpn-auth-active .v2board-auth-box .btn-primary {
    background: linear-gradient(135deg, #e52643, #b50f29) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: 0 12px 26px rgba(212, 24, 53, .25);
    color: #fff !important;
    font-weight: 750;
    height: 50px;
    letter-spacing: .03em;
    margin-top: 6px;
    text-transform: uppercase;
}

.mosvpn-auth-active .v2board-auth-box .btn-primary:hover {
    box-shadow: 0 15px 30px rgba(212, 24, 53, .34);
    transform: translateY(-1px);
}

.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    margin-top: 24px;
    padding: 20px 0 0 !important;
}

.mosvpn-auth-active .v2board-auth-box .text-muted {
    color: #9ba7ba !important;
}

.mosvpn-auth-active .v2board-auth-box a.text-muted:hover {
    color: #ff7186 !important;
}

.mosvpn-auth-active .v2board-login-i18n-btn {
    margin-left: auto;
}

/* The theme toggle on the sign-in page is the header's own button
   (.mosvpn-shell-theme-toggle in mosvpn-shell.css). */

/* In normal flow inside the sign-in card, above its heading. It used to be
   anchored to the viewport, which put it in a different coordinate space from
   the card: the card's own stacking context clipped the wordmark in half, and
   no z-index could win because the clip happens before compositing. Being a
   sibling of the heading also means it inherits the card's left padding, so it
   lines up with the inputs without repeating a magic offset. */
.mosvpn-auth-brand {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.15rem;
    font-weight: 600;
    gap: 10px;
    letter-spacing: -.02em;
    margin-bottom: 0;
    text-decoration: none;
}

/* The brand is an anchor now, so the theme's link colour applies to it and won
   on specificity — the wordmark came out brand red on the dark hero, which reads
   as washed out against it. Body-scoped selectors outrank that link rule, and
   strong is named explicitly because it carries its own inherited colour. */
body.mosvpn-auth-active .mosvpn-auth-brand,
body.mosvpn-auth-active .mosvpn-auth-brand:hover,
body.mosvpn-auth-active .mosvpn-auth-brand:focus-visible,
body.mosvpn-auth-active .mosvpn-auth-brand:active,
body.mosvpn-auth-active .mosvpn-auth-brand:visited,
body.mosvpn-auth-active .mosvpn-auth-brand strong {
    color: #fff;
    text-decoration: none;
}

/* Dark is the default here because the card renders on the dark hero. The
   light-theme override lives with the other light rules further down so both
   themes are declared, never left to inherit. */
.mosvpn-auth-brand strong {
    font-weight: 600;
}

.mosvpn-auth-mark {
    align-items: center;
    background: linear-gradient(135deg, #e52643, #b50f29);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(212, 24, 53, .26);
    display: inline-flex;
    flex: none;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.mosvpn-auth-mark img {
    height: 23px;
    width: 23px;
}

.mosvpn-auth-hero {
    align-items: center;
    background:
        linear-gradient(0deg, rgba(5, 9, 17, .9), rgba(5, 9, 17, .1) 62%),
        linear-gradient(90deg, rgba(5, 9, 17, .35), transparent 34%);
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    min-height: 100vh;
    overflow: hidden;
    padding: 64px clamp(32px, 5vw, 80px) 44px;
    position: relative;
    text-align: center;
}

/* Three messages stacked in one grid cell and cross-faded, so the panel
   never changes height between them. */
.mosvpn-auth-hero-copy {
    display: grid;
    max-width: 620px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.mosvpn-auth-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
    visibility: hidden;
}

.mosvpn-auth-slide.is-active {
    opacity: 1;
    transform: none;
    visibility: visible;
}

.mosvpn-auth-hero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3.1vw, 3rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    margin: 0 0 16px;
    white-space: pre-line;
}

.mosvpn-auth-slide > p {
    color: #bdc8d8;
    font-size: clamp(.95rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 520px;
}

.mosvpn-auth-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

.mosvpn-auth-dots button {
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 20px;
    padding: 8px 0;
    width: 26px;
}

.mosvpn-auth-dots button::before {
    background: rgba(255, 255, 255, .32);
    border-radius: 999px;
    content: "";
    display: block;
    height: 4px;
    transition: background-color .3s ease;
    width: 100%;
}

.mosvpn-auth-dots button.is-active::before {
    background: #f0445e;
}

.mosvpn-auth-dots button:focus-visible {
    outline: 2px solid #ff7186;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mosvpn-auth-slide {
        transform: none;
        transition: none;
    }
}

/* The authentication layout keeps its photographic hero in both modes while
   the form surface follows the shared explicit MosVPN theme preference. */
html[data-mosvpn-theme="light"] body.mosvpn-auth-active,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active #root,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active #page-container,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active #main-container {
    background: #f7f8fb !important;
    color: #20242d;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box > div:first-child {
    background:
        radial-gradient(circle at 100% 20%, rgba(212, 24, 53, .075), transparent 38%),
        rgba(255, 255, 255, .97);
    border-color: rgba(41, 48, 61, .11);
    box-shadow: 14px 0 44px rgba(24, 30, 42, .09);
}

/* Light theme darkens the wordmark; the mark keeps its brand red in both themes
   so the logo stays recognisable rather than inverting with the surface. */
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-brand,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-brand:hover,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-brand:focus-visible,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-brand:visited,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-brand strong,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .font-size-h1,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .font-size-h1 .text-dark {
    color: #20242d !important;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .font-size-sm.text-muted.mb-3,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .text-muted {
    color: #697386 !important;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .form-control {
    background: #f7f8fb !important;
    border-color: #dfe3ea !important;
    color: #20242d !important;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .form-control::placeholder {
    color: #8a94a5;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .form-control:focus {
    background: #fff !important;
    border-color: rgba(212, 24, 53, .65) !important;
    box-shadow: 0 0 0 3px rgba(212, 24, 53, .11) !important;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter {
    border-color: #e5e8ee;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-label {
    color: #20242d;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-field-icon,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-reveal {
    color: #8a94a5;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-reveal:hover,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-reveal[aria-pressed="true"],
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-auth-forgot,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter[data-mosvpn-auth-footer] a.text-muted {
    color: #c41432 !important;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter[data-mosvpn-prompt]::before {
    color: #697386;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-auth-box a.text-muted:hover,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .v2board-login-i18n-btn {
    color: #c41432 !important;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-child-site-badge {
    background: #fff5f6;
    border-color: #f5ccd3;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-child-site-badge strong {
    color: #20242d;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-child-site-badge small {
    color: #697386;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-registration {
    background: #fafbfc;
    border-color: #e1e4ea;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-registration.is-open {
    background: #fff7f8;
    border-color: #efb8c2;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-toggle {
    color: #20242d;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-toggle-copy strong {
    color: #252a34;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-toggle-copy small,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-field,
html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-privacy {
    color: #687386;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-toggle em {
    background: #eef0f4;
    color: #606a7a;
}

html[data-mosvpn-theme="light"] body.mosvpn-auth-active .mosvpn-vat-fields {
    border-color: #e6e8ed;
}

@media (max-width: 991.98px) {
    .mosvpn-client-hero {
        min-height: 240px;
        padding: 30px;
    }

    .mosvpn-client-orbit {
        opacity: .58;
        right: -170px;
    }

    .mosvpn-auth-active .v2board-auth-box {
        display: block !important;
        padding: 0 !important;
    }

    .mosvpn-auth-active .v2board-auth-box > div:first-child {
        border-radius: 0;
        min-height: 100vh;
        padding: 28px 32px 36px;
    }

    .mosvpn-auth-active .v2board-auth-box > div:first-child > .mx-2 {
        min-height: calc(100vh - 64px);
    }

    .mosvpn-auth-hero {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .mosvpn-client-hero {
        border-radius: 18px;
        margin-bottom: 16px;
        min-height: 310px;
        padding: 25px 22px;
    }

    .mosvpn-client-hero h1 {
        font-size: 2rem;
    }

    .mosvpn-client-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mosvpn-client-hero-actions a {
        width: 100%;
    }

    .mosvpn-client-hero-badges {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .mosvpn-client-orbit {
        bottom: -170px;
        right: -250px;
    }

    .mosvpn-auth-active .v2board-auth-box {
        padding: 0 !important;
    }

    .mosvpn-auth-active .v2board-auth-box > div:first-child {
        border: 0;
        border-radius: 0;
        min-height: 100vh;
        padding: 20px 18px 28px;
    }

    .mosvpn-auth-active .v2board-auth-box > div:first-child > .mx-2 {
        min-height: calc(100vh - 48px);
    }

    .mosvpn-auth-top {
        margin-bottom: 28px;
    }

    .mosvpn-auth-brand {
        font-size: 1.05rem;
    }

    .mosvpn-auth-mark {
        height: 28px;
        width: 28px;
    }

    .mosvpn-auth-mark img {
        height: 19px;
    }

    .mosvpn-auth-active .v2board-auth-box .text-left.bg-gray-lighter {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px 0;
    }

    .mosvpn-vat-toggle { grid-template-columns: 36px minmax(0, 1fr) 16px; padding: 10px; }
    .mosvpn-vat-toggle em { display: none; }
    .mosvpn-vat-name-grid { grid-template-columns: 1fr; }
    .mosvpn-vat-fields { padding: 12px; }
}


/* Checkout: period notice + folded benefits + phone layout. */
.mosvpn-plan-checkout__notice {
    background: var(--mos-color-warning-50);
    border: 1px solid var(--mos-color-warning-border);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-warning-700);
    font-size: var(--mos-font-size-small);
    margin: 12px 12px 0;
    padding: 10px 12px;
}

.mosvpn-plan-checkout__toggle {
    background: none;
    border: 0;
    color: var(--mos-red);
    cursor: pointer;
    display: none;
    font: inherit;
    font-size: var(--mos-font-size-small);
    font-weight: 600;
    margin-top: 10px;
    min-height: 44px;
    padding: 0;
    text-align: left;
    width: 100%;
}

@media (max-width: 767.98px) {
    /* Plan name → periods → coupon → total → order button, one column. The
       two React wrappers become transparent so the four blocks lay out in
       document order without moving any node. */
    #cashier[data-mosvpn-checkout="true"] {
        align-items: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .mosvpn-plan-checkout__main,
    .mosvpn-plan-checkout__sidebar {
        display: contents;
    }

    /* With the wrappers transparent the blocks are the flex items; the
       Bootstrap column widths they inherited no longer apply, so say so. */
    .mosvpn-plan-checkout__main > .block,
    .mosvpn-plan-checkout__sidebar > .block {
        flex: 0 0 auto;
        max-width: none !important;
        width: 100% !important;
    }

    .mosvpn-plan-checkout__toggle {
        display: block;
    }

    .mosvpn-plan-checkout__hero:not(.is-open) .v2board-plan-content {
        display: none;
    }
}

/* Ticket chat (#/ticket/{id}). XiaoBoard ships it as a bare page: a title
   block, an absolutely positioned message list and a fixed input. The
   decorator adds a back link and a send button; this makes them a header
   and a composer that survive a two-line subject and the phone safe area. */
body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__header {
    align-items: center;
    background: var(--mos-card, #fff) !important;
    border-bottom: 1px solid var(--mos-color-border, #e6e0e3);
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    left: 0;
    min-height: 60px;
    padding: 8px 12px 8px 4px !important;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 30;
}

body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__header > span {
    -webkit-box-orient: vertical;
    color: var(--mos-navy, #17233d) !important;
    display: -webkit-box;
    font-size: 16px !important;
    font-weight: 600;
    -webkit-line-clamp: 2;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    padding: 0 !important;
}

body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__back,
body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__send {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--mos-red, #d7193f);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__back svg,
body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__send svg {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 22px;
}

body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__back:hover,
body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__send:hover {
    background: var(--mos-color-red-50, #fff1f4);
}

body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__back:focus-visible,
body.mosvpn-client.mosvpn-ticket-chat .mosvpn-ticket-chat__send:focus-visible {
    box-shadow: var(--mos-focus-ring, 0 0 0 3px rgba(215, 25, 63, .35));
    outline: 2px solid transparent;
}

body.mosvpn-client.mosvpn-ticket-chat .js-chat-messages {
    margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 60px !important;
}

body.mosvpn-client.mosvpn-ticket-chat .js-chat-form {
    align-items: center;
    background: var(--mos-card, #fff) !important;
    border-top: 1px solid var(--mos-color-border, #e6e0e3);
    box-sizing: border-box;
    display: flex;
    gap: 6px;
    left: 0;
    min-height: 64px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)) 12px !important;
    right: 0;
}

body.mosvpn-client.mosvpn-ticket-chat .js-chat-input {
    background: var(--mos-color-surface-muted, #f4f1f2) !important;
    border-radius: 22px;
    flex: 1 1 auto;
    /* 16px keeps iOS Safari from zooming into the field. */
    font-size: 16px;
    min-height: 44px;
    min-width: 0;
    padding: 0 16px;
}

/* Sign-in footer: the "Đăng ký" / "Quên mật khẩu" links are 21px text and
   the language switch drew its globe under the label. Finger-sized rows,
   icon and label on one line. */
.v2board-auth-box .bg-gray-lighter a.font-size-sm {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}

.v2board-auth-box .v2board-login-i18n-btn {
    align-items: center;
    cursor: pointer;
    display: inline-flex !important;
    gap: 6px;
    min-height: 44px;
}

.v2board-auth-box .v2board-login-i18n-btn > span {
    vertical-align: baseline !important;
}

.v2board-auth-box .btn-primary > span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

/* Dark theme: XiaoBoard's chat bubbles keep their light backgrounds while
   the theme flips the text colour, so the staff reply became unreadable. */
html.mosvpn-dark body.mosvpn-client.mosvpn-ticket-chat .bg-success-lighter {
    background: #1f3a26 !important;
    color: #dcebdd !important;
}

html.mosvpn-dark body.mosvpn-client.mosvpn-ticket-chat .bg-gray-lighter {
    background: #26262b !important;
    color: #e7e5e9 !important;
}