@charset "UTF-8";

@font-face {
    font-family: "Averta-Bold";
    font-display: swap;
    src: url("../webfonts/Averta-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Averta-Regular";
    font-display: swap;
    src: url("../webfonts/Averta-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Averta-Semibold";
    font-display: swap;
    src: url("../webfonts/Averta-Semibold.woff2") format("woff2");
}

@font-face {
    font-family: "Averta-ExtraBold";
    font-display: swap;
    src: url("../webfonts/Averta-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "NotoSerif_ExtraCondensed-Bold";
    font-display: swap;
    src: url("../webfonts/NotoSerif_ExtraCondensed-Bold.ttf") format("truetype");
}

:root {
    --color-blue: #005788;
    --color-blue-deep: #0a293a;
    --color-blue-soft: #0d354b;
    --color-blue-300: #6495b0;
    --color-blue-50: #e8eff3;
    --color-blue-100: #f4f8fc;
    --color-white: #ffffff;
    --color-black: #020d12;
    --color-ink: #010709;
    --color-gray-7: #3d4a51;
    --color-gray-6: #6f767c;
    --color-gray-4: #e7ecf4;
    --color-stroke: #dce5ee;
    --color-border: #e7e7e7;
    --color-surface: #fafbfd;
    --color-soft: #edeae9;
    --color-red: #b33a1b;
    --color-facebook: #1877f2;
    --gradient-hero: linear-gradient(0deg, rgba(4, 26, 52, 0) 33.37%, rgba(0, 14, 28, 0.55) 64.11%, rgba(0, 14, 28, 0.7) 71.33%, #000e1c 100%), #004b88;
    --font-averta-regular: "Averta-Regular", sans-serif;
    --font-averta-semibold: "Averta-Semibold", sans-serif;
    --font-averta-bold: "Averta-Bold", sans-serif;
    --font-averta-extrabold: "Averta-ExtraBold", sans-serif;
    --font-NotoSerif_ExtraCondensed-Bold: "NotoSerif_ExtraCondensed-Bold", sans-serif;
}

.color-blue {
    color: var(--color-blue) !important;
}

.choices[data-type*=select-one] .choices__inner {
    padding-bottom: 0 !important;
}

.container-home {
    margin-left: auto;
    margin-right: auto;
    width: 85.89744vw;
}

.container {
    max-width: 1350px;
}

a,
a:hover {
    color: var(--color-blue);
    color: #000;
    text-decoration: none;
}

.btn-pill,
.btn-component-white,
.btn-component {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 52px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-pill img,
.btn-component-white img,
.btn-component img {
    width: 24px !important;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.btn-pill--primary,
.btn-component-white {
    background: #005788;
    color: #fff;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

.btn-pill--primary:hover,
.btn-component-white:hover {
    background: #0a293a;
    color: #fff;
    transform: translateY(-1px);
}

.btn-pill--light {
    background: #fff;
    color: #005788;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

.btn-pill--light:hover {
    color: #005788;
}

.btn-pill--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: none;
}

.btn-pill--ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-pill--outline {
    background: #fff;
    color: #005788;
    border: 1px solid #005788;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

.btn-pill--outline:hover {
    background: #e8eff3;
    color: #005788;
}

.btn-pill--sm,
.btn-component-white,
.btn-component {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 40px;
    gap: 8px;
}

.btn-pill--md {
    min-height: 48px;
    padding: 10px 24px;
    font-size: 18px;
    line-height: 26px;
    border-radius: 40px;
}

.btn-pill--lg {
    min-height: 56px;
    padding: 15px 24px;
}

.btn-pill--xl {
    min-height: 56px;
    padding: 15px 48px;
}

.btn-pill--soft {
    background: #edeae9;
    color: #005788;
    border-radius: 8px;
    box-shadow: none;
    gap: 8px;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
}

.btn-pill--soft:hover {
    color: #005788;
}

.btn-pill--grow {
    flex: 1;
    min-width: 0;
}

.btn-pill--block {
    width: 100%;
}

.btn-chip {
    padding: 8px 16px;
    border: 1px solid #dce5ee;
    border-radius: 28px;
    background: transparent;
    color: #0d354b;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

.btn-chip.is-active {
    border-color: #0d354b;
}

.btn-icon {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #edeae9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-icon img {
    width: 20px !important;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.section-head-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-title-main {
    margin: 0 0 40px;
    text-align: center;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
}

.panel-white {
    border: 1px solid #dce5ee;
    border-radius: 20px;
    background: #ffffff;
}

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

.row-gap-0 {
    row-gap: 0 !important;
}

.row-gap-1 {
    row-gap: 0.25rem !important;
}

.row-gap-2 {
    row-gap: 0.5rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

.row-gap-4 {
    row-gap: 1.5rem !important;
}

.row-gap-5 {
    row-gap: 3rem !important;
}

.column-gap-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
}

.column-gap-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
}

.column-gap-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
}

.column-gap-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
}

.column-gap-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
}

.column-gap-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
}

.page-crumb {
    background: #ffffff;
}

.page-crumb .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: transparent;
    margin: 0;
    padding: 8px 0;
    font-size: 14px;
    line-height: 22px;
    border-radius: 0;
    min-width: 0;
    overflow: hidden;
}

.page-crumb .breadcrumb-item {
    font-family: var(--font-averta-regular);
    color: #0d354b;
    flex-shrink: 0;
    white-space: nowrap;
}

.page-crumb .breadcrumb-item a {
    color: #0d354b;
}

.page-crumb .breadcrumb-item a:hover {
    color: #005788;
}

.page-crumb .breadcrumb-item.active {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-averta-regular);
    color: #0d354b;
}

.page-crumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 8px;
}

.page-crumb .breadcrumb-item+.breadcrumb-item::before {
    font-family: var(--font-averta-semibold);
    color: #dce5ee;
    content: "/";
    padding-right: 8px;
}

.login-modal .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

.login-modal .modal-content {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

.login-modal img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    flex-shrink: 0;
}

.login-modal .btn-pill {
    box-shadow: none;
}

.login-modal .btn-pill:hover,
.login-modal .btn-pill:focus,
.login-modal .btn-pill:active {
    box-shadow: none;
}

.login-modal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    border-bottom: 1px solid var(--color-stroke);
}

.login-modal-head span {
    flex: 1;
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: var(--color-ink);
}

.login-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.login-modal-close img {
    width: 18px;
    height: 18px;
}

.login-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
}

.login-modal-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-modal-welcome {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: var(--color-blue);
}

.login-modal-desc {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-gray-7);
}

.login-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 56px;
    background: var(--color-blue-100);
    margin: 0;
    cursor: text;
}

.login-field>img,
.login-field>i,
.login-field>.auth-field-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-blue);
    font-size: 18px;
    line-height: 20px;
    text-align: center;
}

.login-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-ink);
}

.login-field input::-moz-placeholder {
    color: var(--color-gray-7);
}

.login-field input::placeholder {
    color: var(--color-gray-7);
}

.login-field-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.9;
}

.login-field-toggle img,
.login-field-toggle .login-field-toggle-icon {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 15px;
    max-width: none;
    max-height: none;
    margin: auto;
}

.login-field-toggle .login-field-toggle-icon--show {
    display: none;
}

.login-field-toggle.is-visible .login-field-toggle-icon--hide {
    display: none;
}

.login-field-toggle.is-visible .login-field-toggle-icon--show {
    display: block;
}

.login-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-7);
}

.login-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-remember input:not(:checked)+.login-remember-box img {
    opacity: 0.35;
    filter: grayscale(1);
}

.login-remember-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.login-remember-box img {
    width: 18px;
    height: 18px;
}

.login-forgot {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-blue);
    text-decoration: none;
    white-space: nowrap;
}

.login-forgot:hover {
    color: var(--color-blue);
    text-decoration: underline;
}

.login-modal-social {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.login-modal-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 24px;
}

.login-modal-divider span {
    flex: 1;
    height: 1px;
    background: var(--color-gray-4);
}

.login-modal-divider p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-gray-6);
    white-space: nowrap;
}

.login-social-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.login-social-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-4);
    border-radius: 10px;
    background: var(--color-surface);
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-blue-soft);
    cursor: pointer;
}

.login-social-btn>img {
    width: 24px;
    height: 24px;
}

.login-modal-switch {
    margin: 0;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-6);
}

.login-modal-switch a {
    font-family: var(--font-averta-semibold);
    color: var(--color-blue);
    text-decoration: underline;
}

.register-modal-body {
    gap: 24px;
}

.register-modal-body .login-modal-intro:not(.register-otp-intro) {
    gap: 4px;
}

.register-type-grid {
    display: flex;
    gap: 16px;
    width: 100%;
}

.register-type {
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.register-type-check {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.register-type-input {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.register-type-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    height: 100px;
    padding: 16px 24px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: var(--color-white);
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.register-type-card:has(.register-type-input:checked) {
    border-color: #007fda;
    background: rgba(0, 127, 218, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 127, 218, 0.1);
}

.register-type-checkbox {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
}

.register-type-checkbox img {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    max-width: none;
    max-height: none;
}

.register-type-checkbox .register-type-checkbox-off {
    display: block;
}

.register-type-checkbox .register-type-checkbox-on {
    display: none;
}

.register-type-input:checked+.register-type-checkbox .register-type-checkbox-off {
    display: none;
}

.register-type-input:checked+.register-type-checkbox .register-type-checkbox-on {
    display: block;
}

.register-type-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 32px;
}

.register-type-icon {
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--color-blue);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.register-type-icon--agent {
    mask-image: url("/assets/login/register-agent.png");
    -webkit-mask-image: url("/assets/login/register-agent.png");
}

.register-type-icon--person {
    mask-image: url("/assets/login/register-person.png");
    -webkit-mask-image: url("/assets/login/register-person.png");
}

.register-type-label {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a1f4d;
}

.register-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    cursor: text;
}

.register-label {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-ink);
}

.register-label i {
    font-style: normal;
    color: var(--color-blue);
}

.register-input {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 56px;
    background: var(--color-blue-100);
    transition: border-color 0.15s ease;
}

.register-input>img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.register-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-ink);
}

.register-input input::-moz-placeholder {
    color: var(--color-gray-7);
}

.register-input input::placeholder {
    color: var(--color-gray-7);
}

.register-input:focus-within {
    border-color: var(--color-blue);
}

.register-hint {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-gray-7);
}

.register-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.register-submit img {
    width: 16px;
    height: 16px;
}

.register-otp-intro {
    gap: 10px;
}

.register-otp-desc {
    font-size: 16px;
    line-height: 24px;
}

.register-otp-desc strong {
    font-family: var(--font-averta-semibold);
    font-weight: 600;
}

.register-otp-timer {
    color: #e63a46;
}

.register-otp-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: var(--color-blue);
    text-decoration: underline;
}

.register-otp-change img {
    width: 16px;
    height: 16px;
    max-width: none;
    max-height: none;
}

.register-otp-grid {
    display: flex;
    gap: 12px;
    width: 100%;
}

.register-otp-cell {
    flex: 1 1 0;
    min-width: 0;
    max-width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--color-stroke);
    border-radius: 10px;
    background: var(--color-white);
    font-family: var(--font-averta-semibold);
    font-size: 28px;
    line-height: 36px;
    color: var(--color-ink);
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.register-otp-cell:focus {
    outline: none;
    border: 2px solid rgba(0, 87, 136, 0.15);
    box-shadow: inset 0 0 0 1px var(--color-blue);
}

.register-account-modal .register-label {
    color: var(--color-blue-deep);
}

.register-account-modal .register-label i {
    color: #e63a46;
}

.register-account-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.register-input--account {
    min-height: 48px;
    padding: 8px 16px;
    gap: 8px;
    border: 1px solid var(--color-stroke);
    border-radius: 48px;
    background: var(--color-white);
}

.register-input--account .auth-field-icon {
    width: 20px;
    height: 20px;
}

.register-input--account input::-moz-placeholder {
    opacity: 0.7;
}

.register-input--account input::placeholder {
    opacity: 0.7;
}

.register-input--account select {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-ink);
    cursor: pointer;
}

.register-input--account select:invalid {
    color: var(--color-gray-7);
    opacity: 0.7;
}

.register-input--account select option {
    color: var(--color-ink);
}

.register-input--select {
    position: relative;
    padding-right: 40px;
}

.register-input--select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url("../assets/checkout/icon-select.svg") center/16px 16px no-repeat;
    pointer-events: none;
}

.register-agent-notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(184, 226, 236, 0.4);
}

.register-agent-notice i {
    flex-shrink: 0;
    width: 16px;
    margin-top: 2px;
    color: var(--color-blue);
    font-size: 16px;
    line-height: 16px;
    text-align: center;
}

.register-agent-notice p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 20px;
    color: #0c0c0c;
}

.register-agent-notice p strong {
    font-family: var(--font-averta-semibold);
    font-weight: 600;
}

.register-agent-checks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.auth-field-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-blue);
    font-size: 18px;
    line-height: 20px;
}

.auth-field-icon i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.auth-field-icon .auth-field-icon-unlock {
    display: none;
}

.login-field.is-visible .auth-field-icon-lock,
.register-input.is-visible .auth-field-icon-lock {
    display: none;
}

.login-field.is-visible .auth-field-icon-unlock,
.register-input.is-visible .auth-field-icon-unlock {
    display: flex;
}

.register-field-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.9;
}

.register-field-toggle img,
.register-field-toggle .register-field-toggle-icon {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 15px;
    max-width: none;
    max-height: none;
    margin: auto;
}

.register-field-toggle .register-field-toggle-icon--show {
    display: none;
}

.register-field-toggle.is-visible .register-field-toggle-icon--hide {
    display: none;
}

.register-field-toggle.is-visible .register-field-toggle-icon--show {
    display: block;
}

.register-field-hint {
    padding-top: 4px;
    font-size: 12px;
    line-height: 18px;
    font-style: italic;
    color: var(--color-blue);
}

.register-input--plain input {
    padding-left: 0;
}

.register-account-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.register-account-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-color: #e5e7eb;
    color: var(--color-blue);
}

.register-account-back .register-account-back-icon {
    width: 12px;
    height: 12px;
    transform: rotate(180deg);
}

.register-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.register-terms input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.register-terms input:not(:checked)+.login-remember-box img {
    opacity: 0.35;
    filter: grayscale(1);
}

.register-terms-copy {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-ink);
}

.register-terms-copy a {
    font-family: var(--font-averta-semibold);
    color: var(--color-blue);
    text-decoration: underline;
}

.has-megamenu {
    position: relative;
}

.has-megamenu.products-menu {
    position: static !important;
}

.has-megamenu>a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-top: 18px;
    padding-bottom: 18px;
}

.has-megamenu>a .nav-caret {
    font-size: 10px;
    transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
    opacity: 0.7;
    margin-left: 2px;
}

.has-megamenu:hover>a,
.has-megamenu:focus-within>a {
    color: #005788 !important;
}

.has-megamenu:hover>a .nav-caret,
.has-megamenu:focus-within>a .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.has-megamenu:hover .megamenu--products,
.has-megamenu:focus-within .megamenu--products {
    transform: translateX(-50%) translateY(0);
}

.has-megamenu:hover .megamenu--columns,
.has-megamenu:focus-within .megamenu--columns {
    transform: translateY(0);
}

header.absolute:not(.header-white) .has-megamenu>a .nav-caret {
    color: inherit;
}

header.absolute:not(.header-white) .has-megamenu:hover>a {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.megamenu {
    position: absolute;
    top: calc(100% - 24px);
    padding: 24px 0 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
    transition-delay: 0.15s;
}

.megamenu--products {
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: calc(100% - 64px);
    max-width: 1260px;
}

.megamenu--columns {
    left: 0;
    right: auto;
    transform: translateY(6px);
    width: max-content;
    min-width: 220px;
    max-width: 320px;
}

.megamenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: transparent;
}

.megamenu-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 50px -12px rgba(1, 14, 28, 0.12), 0 4px 16px -2px rgba(1, 14, 28, 0.04), 0 0 0 1px rgba(220, 229, 238, 0.7);
    padding: 36px 44px 22px;
    position: relative;
}

.megamenu--columns .megamenu-card {
    padding: 16px 18px;
    border-radius: 14px;
}

.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px;
    align-items: flex-start;
}

.megamenu--columns .megamenu-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

.megamenu-col {
    display: flex;
    flex-direction: column;
}

.megamenu--columns .megamenu-col+.megamenu-col {
    margin-top: 4px;
}

.megamenu-title {
    margin-bottom: 10px;
    font-size: 18px !important;
    font-family: var(--font-averta-semibold);
    line-height: 24px;
}

.megamenu-title a {
    color: #4A2E2B !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-family: var(--font-averta-bold) !important;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.megamenu--columns .megamenu-title {
    font-size: 14px;
    line-height: 20px;
    margin: 8px 0 8px;
    white-space: normal;
}

.megamenu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu--columns .megamenu-list {
    gap: 2px;
}

.megamenu-list li {
    line-height: 1;
}

.megamenu-list a {
    color: #36788B !important;
    font-size: 14.5px;
    line-height: 20px;
    font-family: var(--font-averta-regular);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    transition: all 0.18s ease;
    position: relative;
}

.megamenu--columns .megamenu-list a {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #0d354b !important;
}

.megamenu-list a:hover {
    color: #005788 !important;
    font-family: var(--font-averta-semibold);
    transform: translateX(4px);
}

.megamenu--columns .megamenu-list a:hover {
    background: #f3f8fb;
    transform: none;
}

.megamenu-footer {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid #EEF3F8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.megamenu-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: #6C7A84;
    font-family: var(--font-averta-regular);
}

.megamenu-footer-left .badge-pill {
    font-size: 11.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-family: var(--font-averta-bold);
    background: #EAF4FA;
    color: #005788;
    padding: 3px 10px;
    border-radius: 999px;
}

.megamenu-footer-left span {
    color: #556672;
}

.megamenu-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-family: var(--font-averta-semibold);
    color: #005788 !important;
    transition: all 0.2s ease;
    text-decoration: none;
}

.megamenu-footer-link i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.megamenu-footer-link:hover {
    color: #0A293A !important;
}

.megamenu-footer-link:hover i {
    transform: translateX(4px);
}

.drawer-item-expandable {
    border-bottom: 0;
}

.drawer-item-expandable .drawer-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.drawer-item-expandable .drawer-item-head>a {
    flex: 1;
    padding: 16px 0;
    font-family: var(--font-averta-semibold);
    font-size: 17px;
    line-height: 24px;
    color: #010709;
    text-decoration: none;
}

.drawer-item-expandable .drawer-item-head .drawer-sub-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f3f6f9;
    color: #005788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.2s ease;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.cta-fixed {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 999;
}

.cta-fixed li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cta-fixed li a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    overflow: hidden;
    position: relative;
}

.cta-fixed li a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

/* Phone (Green) */
.cta-fixed .cta-phone a,
.cta-fixed a.cta-phone,
.cta-fixed a[href^="tel:"] {
    background: #2cb742;
}

.cta-fixed .cta-phone img,
.cta-fixed a.cta-phone img,
.cta-fixed a[href^="tel:"] img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Zalo (Blue) */
.cta-fixed .cta-zalo a,
.cta-fixed a.cta-zalo,
.cta-fixed a[href*="zalo.me"] {
    background: #0068ff;
}

.cta-fixed .cta-zalo img,
.cta-fixed a.cta-zalo img,
.cta-fixed a[href*="zalo.me"] img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

/* Messenger / Facebook (Blue) */
.cta-fixed .cta-messenger a,
.cta-fixed a.cta-messenger,
.cta-fixed .cta-facebook a,
.cta-fixed a.cta-facebook,
.cta-fixed a[href*="m.me"],
.cta-fixed a[href*="facebook.com"] {
    background: #0084ff;
}

.cta-fixed .cta-messenger img,
.cta-fixed a.cta-messenger img,
.cta-fixed .cta-facebook img,
.cta-fixed a.cta-facebook img,
.cta-fixed a[href*="m.me"] img,
.cta-fixed a[href*="facebook.com"] img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.cta-fixed li img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

@keyframes ctaPhoneShake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    15%,
    45% {
        transform: rotate(-14deg);
    }

    30%,
    60% {
        transform: rotate(14deg);
    }

    75% {
        transform: rotate(0deg);
    }
}

.cta-fixed .cta-phone:hover img,
.cta-fixed a[href^="tel:"]:hover img {
    animation: ctaPhoneShake 0.6s ease;
}


.drawer-item-expandable .drawer-item-head .drawer-sub-toggle i {
    display: none;
}

.drawer-item-expandable .drawer-item-head .drawer-sub-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
}

.drawer-item-expandable .drawer-item-head .drawer-sub-toggle[aria-expanded="true"] {
    transform: none;
    background: #e8eef3;
    color: #005788;
}

.drawer-item-expandable .drawer-item-head .drawer-sub-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.drawer-item-expandable .drawer-sub-menu {
    padding: 0 0 12px;
}

.drawer-item-expandable .drawer-sub-menu[hidden] {
    display: none;
}

/* products-menu: compact groups */
.drawer-sub-menu--products {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 12px;
}

.drawer-sub-menu--products .drawer-sub-group {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.drawer-sub-menu--products .drawer-sub-group-title {
    font-size: 12px;
    line-height: 16px;
    font-family: var(--font-averta-bold);
    color: #4a2e2b;
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: 0;
}

.drawer-sub-menu--products .drawer-sub-group-title a {
    color: inherit !important;
    text-decoration: none;
    font: inherit;
    padding: 0;
}

.drawer-sub-menu--products .drawer-sub-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid #e8eef3;
    margin-left: 2px;
}

.drawer-sub-menu--products .drawer-sub-group ul a {
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-averta-regular);
    color: #36788b !important;
    padding: 6px 0 6px 12px;
    display: block;
    text-decoration: none;
}

.drawer-sub-menu--products .drawer-sub-group ul a:hover {
    color: #005788 !important;
}

/* non-products: flat column list */
.drawer-sub-menu--columns {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 12px;
    border-left: 1px solid #e8eef3;
    margin-left: 2px;
}

.drawer-sub-menu--columns .drawer-sub-group {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.drawer-sub-menu--columns .drawer-sub-group-title {
    font-size: 12px;
    line-height: 16px;
    font-family: var(--font-averta-bold);
    color: #4a2e2b;
    margin: 8px 0 4px;
    text-transform: none;
    letter-spacing: 0;
    padding: 0 0 0 12px;
}

.drawer-sub-menu--columns .drawer-sub-group-title:first-child {
    margin-top: 0;
}

.drawer-sub-menu--columns .drawer-sub-group-title a {
    color: inherit !important;
    text-decoration: none;
    font: inherit;
    padding: 0;
}

.drawer-sub-menu--columns .drawer-sub-group ul,
.drawer-sub-menu--columns .drawer-sub-flat {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.drawer-sub-menu--columns .drawer-sub-group ul a,
.drawer-sub-menu--columns .drawer-sub-flat a {
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-averta-regular);
    color: #0d354b !important;
    padding: 8px 0 8px 12px;
    display: block;
    border-radius: 0;
    text-decoration: none;
    background: transparent;
}

.drawer-sub-menu--columns .drawer-sub-group ul a:hover,
.drawer-sub-menu--columns .drawer-sub-flat a:hover {
    background: transparent;
    color: #005788 !important;
}

.logo {
    width: 206.096px;
    height: 42.082px;
    aspect-ratio: 191/39;
}

header {
    padding: 15px 0;
}

header.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

header.absolute .logo {
    filter: brightness(0) invert(1);
}

header.header-white {
    background: #ffffff;
    position: relative;
}

header.header-white .logo {
    filter: unset;
}

header.header-white .header-nav a {
    color: #020d12;
}

header.header-white .header-nav li img {
    filter: brightness(0);
}

header.header-white .header-user-avatar img,
header.header-white .header-user-caret {
    filter: none !important;
}

header.header-white .login-header-btn,
header.header-white .btn-component-white {
    background: #005788;
    color: #ffffff !important;
}

header.header-white .login-header-btn:hover,
header.header-white .btn-component-white:hover {
    background: #0a293a;
    color: #ffffff !important;
}

body:has(.hero) header.absolute .btn-component-white {
    background: #fff;
    color: #005788;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

body:has(.hero) header.absolute .btn-component-white:hover {
    background: #fff;
    color: #005788;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
}

.header-nav a {
    color: #ffffff;
    font-size: 16px;
    font-family: var(--font-averta-semibold);
    line-height: 24px;
}

.header-nav a:hover {
    color: #005788 !important;
}

.header-auth {
    list-style: none;
}

.header-auth-user {
    display: none;
    align-items: center;
    gap: 4px;
    color: #005788;
    text-decoration: none;
}

.header-auth-user:hover {
    color: #005788;
    text-decoration: none;
}

.header-auth-guest {
    display: inline-flex;
}

.header-auth-guest-icon {
    display: none !important;
}

header.is-logged-in .header-auth-guest {
    display: none !important;
}

header.is-logged-in .header-auth-user {
    display: inline-flex;
}

.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background: #005788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-user-avatar img {
    width: 20px;
    height: 20px;
    display: block;
    filter: none !important;
}

.header-user-name {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: inherit;
    white-space: nowrap;
}

.header-user-caret {
    width: 10px;
    height: 6px;
    display: block;
    flex-shrink: 0;
    filter: none !important;
}

body:has(.hero) header.absolute.is-logged-in .header-auth-user {
    color: #fff;
}

body:has(.hero) header.absolute.is-logged-in .header-user-avatar {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

body:has(.hero) header.absolute.is-logged-in .header-user-caret {
    filter: brightness(0) invert(1) !important;
}

.hero {
    position: relative;
    height: 100vh;
    overflow: visible;
    z-index: 2;
}

.hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 14, 28, 0) 0%, rgba(0, 14, 28, 0.15) 35%, rgba(0, 14, 28, 0.55) 65%, rgba(0, 14, 28, 0.85) 85%, #000E1C 100%);
    pointer-events: none;
}

.bg-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
}

.bg-video-fallback {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

#product {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    transform: none;
}

.product-fallback {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 26;
    width: 9.4744vw;
    height: auto;
    aspect-ratio: 136.432 / 435;
    -o-object-fit: contain;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.product-fallback.is-ready {
    opacity: 0;
    visibility: hidden;
}

.content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.header-search {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.header-search img {
    display: block;
}

.header-card {
    position: relative;
}

.header-card .card-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #b33a1b;
    color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.header-brand {
    display: flex;
    justify-content: center;
    grid-column: 2;
}

.header-nav--start {
    justify-self: start;
}

.header-nav--end {
    justify-self: end;
}

.header-toggle {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.header-toggle-bars,
.header-toggle-bars::before,
.header-toggle-bars::after {
    display: block;
    width: 22px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, top 0.2s ease, background-color 0.2s ease;
}

.header-toggle-bars {
    position: relative;
    height: 1.5px;
}

.header-toggle-bars::before,
.header-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.header-toggle-bars::before {
    top: -7px;
}

.header-toggle-bars::after {
    top: 7px;
}

.header-toggle[aria-expanded="true"] .header-toggle-bars {
    background: transparent;
}

.header-toggle[aria-expanded="true"] .header-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.header-toggle[aria-expanded="true"] .header-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

.header-white .header-toggle,
.terms-header .header-toggle {
    color: #010709;
}

.header-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.38s;
}

.header-drawer[hidden] {
    display: block !important;
}

.header-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.header-drawer.is-open .header-drawer-backdrop {
    opacity: 1;
}

.header-drawer.is-open .header-drawer-panel {
    transform: translate3d(0, 0, 0);
}

.header-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 26, 52, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: min(400px, 86vw);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    box-shadow: 12px 0 40px rgba(4, 26, 52, 0.18);
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.header-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 16px;
    border-bottom: 1px solid #e8eef3;
}

.header-drawer-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.header-drawer-brand .logo {
    width: 148px;
    height: auto;
    filter: none;
}

header.absolute .header-drawer-brand .logo,
body:has(.hero) header.absolute .header-drawer-brand .logo {
    width: 148px;
    height: auto;
    filter: none;
}

.header-drawer-close {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.header-drawer-close img {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
}

.header-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 0 8px;
}

.header-drawer-list>li {
    border-bottom: 1px solid #f0f4f8;
}

.header-drawer-list>li>a,
.header-drawer-list .drawer-item-head>a {
    display: block;
    padding: 16px 0;
    font-family: var(--font-averta-semibold);
    font-size: 17px;
    line-height: 24px;
    color: #010709;
    text-decoration: none;
}

.header-drawer-list>li.current>a,
.header-drawer-list>li.current .drawer-item-head>a,
.header-drawer-list>li>a:hover,
.header-drawer-list .drawer-item-head>a:hover {
    color: #005788;
}

.header-drawer-auth {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 16px;
    border-top: 1px solid #e8eef3;
}

.header-drawer-auth .header-auth-guest {
    width: 100%;
    justify-content: center;
    min-height: 48px;
}

.header-drawer-auth .header-auth-user {
    color: #005788;
}

body.is-nav-open {
    overflow: hidden;
}

.text-hero {
    position: absolute;
    z-index: 9;
    bottom: 0;
    color: #ffffff;
    bottom: 30%;
    opacity: 0;
}

.text-hero p {
    color: #FFF;
    font-family: var(--font-NotoSerif_ExtraCondensed-Bold);
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0.8px;
    font-style: italic;
}

.text-hero span {
    display: block;
    color: #FFF;
    font-family: var(--font-NotoSerif_ExtraCondensed-Bold);
    font-size: 50px;
    line-height: 58px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 470px;
}

.text-hero.text-hero-left {
    left: 19%;
    text-align: right;
    transform: translateX(-48px);
}

.text-hero.text-hero-right {
    right: 16%;
    text-align: left;
    bottom: 23%;
    transform: translateX(48px);
}

.text-hero.text-hero-right span {
    font-size: 36px;
    width: 517px;
}

.text-hero.text-hero-right span p {
    font-size: 36px;
    margin: 0;
}

.decor {
    position: absolute;
    z-index: 2;
    transition: all 0.5s ease-in-out;
    animation: decor 8s ease-in-out infinite;
    will-change: transform;
}

.decor-1 {
    bottom: 20%;
    left: 10%;
}

.decor-2 {
    bottom: 8%;
    right: 30%;
    width: 50px;
}

.decor-3 {
    left: 40%;
    top: 20%;
    animation: none;
}

@keyframes decor {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    20% {
        transform: translate3d(6px, -4px, 0) rotate(2deg);
    }

    40% {
        transform: translate3d(10px, -8px, 0) rotate(4deg);
    }

    60% {
        transform: translate3d(6px, -12px, 0) rotate(2deg);
    }

    80% {
        transform: translate3d(2px, -8px, 0) rotate(-1deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

.about {
    position: relative;
    margin-top: -1px;
}

.about::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 14, 28, 0) 0%, rgba(0, 75, 136, 0.25) 28%, rgba(0, 75, 136, 0.55) 55%, #004B88 100%);
    pointer-events: none;
}

.about .title {
    margin-bottom: 80px;
}

.about-video {
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    position: sticky;
    z-index: 0;
    top: 0;
    display: block;
}

.about-video--poster {
    background: #000e1c;
}

.essence__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #000E1C 0%, rgba(0, 14, 28, 0.92) 12%, rgba(0, 14, 28, 0.7) 28%, rgba(0, 14, 28, 0.35) 48%, rgba(4, 26, 52, 0) 72%);
    pointer-events: none;
}

.scroll-down {
    width: 157px;
    height: 157px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #ffffff;
    position: fixed;
    bottom: 10%;
    left: 50%;
    translate: -50% 0;
    z-index: 30;
    cursor: pointer;
}

.scroll-down i {
    font-size: 24px;
    color: #ffffff;
}

.scroll-down::before {
    content: "";
    position: absolute;
    width: 137.596px;
    height: 137.596px;
    border-radius: 137.596px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.about-content {
    position: relative;
    z-index: 27;
    width: 85.89744vw;
    margin: -100vh auto 0;
    padding: 100px 0 200px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.title {
    color: #ffffff;
    text-align: center;
    font-family: var(--font-averta-bold);
    font-size: 48px;
    line-height: 56px;
}

.about-content-item {
    display: flex;
    width: 411px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.about-content-item h3 {
    color: #ffffff;
    font-family: var(--font-averta-semibold);
    font-size: 22px;
    line-height: 37px;
    margin: 0;
    opacity: 0;
}

.about-content-item div {
    color: #FFF;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 26px;
    align-self: stretch;
    opacity: 0;
}

.about-content-item-flex {
    display: flex;
    justify-content: flex-start;
    will-change: transform, opacity;
    margin-bottom: 200px;
}

.about-content-item-flex:nth-of-type(even) {
    justify-content: flex-end;
}

.about-center {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 10%;
    margin-left: auto;
    margin-right: auto;
    translate: none;
    z-index: 1;
    pointer-events: none;
    display: none;
    opacity: 0;
    width: 11.6667vw;
    height: 11.6667vw;
}

.about-center img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.products {
    position: relative;
    background: #004B88;
    overflow: hidden;
    padding: 80px 0 100px;
    width: 100%;
}

.products-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.products-stage .owl-stage-outer {
    overflow: visible;
}

.products-stage .owl-stage {
    display: flex;
    align-items: center;
}

.products-stage .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.products-stage .owl-item .product-card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 26.12vw;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 1;
    margin: 0 auto;
}

.products-stage .owl-item:not(.center) {
    filter: brightness(0.65);
}

.products-stage .owl-item.center {
    filter: brightness(1);
    z-index: 3;
}

.products-stage .owl-nav {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.products-stage .owl-nav.is-show,
.products-stage .owl-nav.is-visible {
    opacity: 1;
    visibility: visible;
}

.products-stage .owl-nav button {
    position: absolute;
    top: 44%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #ffffff !important;
    cursor: pointer;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.products-stage .owl-nav button:hover,
.products-stage .owl-nav button:focus,
.products-stage .owl-nav button:active {
    background: #ffffff !important;
    outline: none;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.products-stage .owl-nav button img {
    width: 24px;
    height: 24px;
    display: block;
}

.products-stage .owl-nav button.owl-prev {
    left: 30.28%;
}

.products-stage .owl-nav button.owl-next {
    right: 30.28%;
}

.product-card {
    position: relative;
    width: 26.12vw;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
}

.product-card-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 376/441;
}

.product-card-circle {
    position: absolute;
    inset: 10.71% 0 3.99%;
}

.product-card-circle img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.product-card-ring {
    position: absolute;
    inset: 10.71% 0 3.99%;
}

.product-card-ring img {
    width: 100%;
    height: 100%;
    display: block;
}

.product-card-image {
    position: absolute;
    inset: 0 31.65% -0.05% 31.91%;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1;
}

.product-card-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto !important;
    height: 100%;
    max-width: none;
    display: block;
    /* mix-blend-mode: screen; */
    left: 50%;
    transform: translateX(-50%);
    opacity: 1 !important;
    visibility: visible !important;
}

.product-card-image-fit {
    inset: 0 33.89% 0 33.72%;
    overflow: visible;
}

.product-card-image-fit img {
    position: static;
    left: auto;
    top: auto;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: contain;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: drop-shadow(0 5px 37.4px rgba(0, 0, 0, 0.25));
}

.product-card-image-wide {
    inset: 0 25.8%;
}

.product-card-image-wide img {
    left: -105.49%;
    top: -14.86%;
    width: 312.2% !important;
    height: 128.97% !important;
}

.product-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    text-align: center;
}

.product-card-info h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 28px;
    line-height: 1.2;
}

.product-card-info h3 a {
    color: #ffffff;
}

.product-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
}

.products-nav {
    position: absolute;
    top: 44%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 40px;
    background: #ffffff;
    cursor: pointer;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.products-nav img {
    width: 24px;
    height: 24px;
    display: block;
}

.products-nav-prev {
    left: 30.28%;
}

.products-nav-next {
    right: 30.28%;
}

.combo {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.combo-head {
    position: relative;
    padding: 72px 0 40px;
}

.combo-head .container-home {
    position: relative;
    z-index: 2;
}

.combo-head .title {
    font-family: var(--font-averta-semibold);
    color: #005788;
    margin: 0 auto 16px;
    max-width: 576px;
}

.combo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.85);
}

.combo-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.6;
    display: block;
}

.combo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50.06%);
    pointer-events: none;
}

.sub-title {
    margin: 0 auto;
    max-width: 652px;
    color: #0D354B;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
}

.combo-slider {
    position: relative;
    text-align: left;
}

.combo-slider .owl-carousel,
.combo-slider .owl-stage-outer,
.combo-slider .owl-stage,
.combo-slider .owl-item,
.combo-slider .combo-slide {
    height: 38.889vw;
    min-height: 420px;
}

.combo-slider .owl-nav {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

.combo-slider .owl-nav button {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 40px;
    background: #ffffff !important;
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: none;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
}

.combo-slider .owl-nav button:hover,
.combo-slider .owl-nav button:focus,
.combo-slider .owl-nav button:active {
    background: #ffffff !important;
    outline: none;
}

.combo-slider .owl-nav button img {
    width: 24px;
    height: 24px;
    display: block;
}

.combo-slider .owl-nav button.owl-prev {
    left: 90px;
}

.combo-slider .owl-nav button.owl-next {
    right: 90px;
}

.combo-slider .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
}

.combo-slider .owl-dots .owl-dot {
    width: 32px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6) !important;
}

.combo-slider .owl-dots .owl-dot span {
    display: none;
}

.combo-slider .owl-dots .owl-dot.active {
    background: #005788 !important;
}

.combo-slide {
    position: relative;
}

.combo-slide-media {
    width: 100%;
    display: block;
}

.combo-slide-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 14, 28, 0) 34.14%, rgba(0, 14, 28, 0.9) 89.39%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.combo-slide-copy {
    position: absolute;
    left: 90px;
    bottom: 48px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #ffffff;
    max-width: 652px;
}

.combo-slide-copy h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
}

.combo-slide-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 18px;
    line-height: 26px;
}

.combo-slide-copy span {
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
}

.combo-slide-buy {
    position: absolute;
    right: 90px;
    bottom: 101.5px;
    z-index: 2;
}

.bestsellers {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #ffffff;
}

.bestsellers-dna {
    position: absolute;
    top: 0;
    right: -0.03%;
    left: 53.26%;
    height: 51.92%;
    pointer-events: none;
    transform: scaleX(-1) translateZ(0);
    z-index: 1;
    backface-visibility: hidden;
}

.bestsellers-dna img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    mask-image: url("../assets/bestsellers/dna-mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("../assets/bestsellers/dna-mask.svg");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mix-blend-mode: screen;
}

.bestsellers-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5.556vw;
    height: 47.778vw;
    padding: 0 6.25vw;
}

.bestsellers-count {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.bestsellers-count-current {
    display: inline-block;
    overflow: hidden;
    min-width: 1.35em;
    font-family: var(--font-averta-semibold);
    font-style: italic;
    font-size: 44px;
    line-height: 52px;
    color: #4e2921;
    white-space: nowrap;
}

.bestsellers-count-total {
    font-family: var(--font-averta-regular);
    font-style: italic;
    font-size: 16px;
    line-height: 24px;
    color: #6f767c;
    padding-bottom: 4px;
}

.bestsellers-media {
    display: grid;
    width: 30.139vw;
    height: 33.889vw;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.bestsellers-media img {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    pointer-events: none;
    -o-object-fit: cover;
    object-fit: cover;
}

.bestsellers-media img.is-show {
    opacity: 1;
}

.bestsellers-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 100%;
    height: 28.333vw;
    overflow: hidden;
}

.bestsellers-panel h2 {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #dce5ee;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
    flex-shrink: 0;
}

.bestsellers-list {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: none;
}

.bestsellers-list::-webkit-scrollbar {
    display: none;
}

.bestsellers-spacer {
    pointer-events: none;
}

.bestsellers-item {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 0 48px;
    border-bottom: 1px solid #dce5ee;
    background: none;
    cursor: pointer;
    transition: opacity 0.35s ease;
}

.bestsellers-item.is-passed {
    opacity: 0;
    pointer-events: none;
}

.bestsellers-item p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 30px;
    line-height: 38px;
    color: rgba(1, 7, 9, 0.4);
    white-space: nowrap;
    transition: color 0.45s ease;
}

.bestsellers-item .bestsellers-explore {
    color: #005788 !important;
    border-bottom-color: #4e2921;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.bestsellers-item.is-active p {
    color: #010709;
}

.bestsellers-item.is-active .bestsellers-explore {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.bestsellers-explore {
    flex-shrink: 0;
    padding: 4px 0;
    border-bottom: 1px solid #4e2921;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788 !important;
    white-space: nowrap;
}

.bestsellers-explore:hover {
    color: #005788 !important;
}

.science {
    display: grid;
    overflow: hidden;
    height: 41.667vw;
    background: #d9d9d9;
}

.science-bg,
.science-inner {
    grid-area: 1/1;
}

.science-bg {
    position: relative;
    min-height: 0;
}

.science-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.science-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 59.722vw;
    margin: 0 auto;
    padding-top: 4.167vw;
}

.science-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.science-copy h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
}

.science-copy p {
    margin: 0;
    width: 56.875vw;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.science-video {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 32px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.science-video img {
    width: 40px;
    height: 40px;
    display: block;
    flex-shrink: 0;
}

.science-video-modal .modal-dialog {
    max-width: 960px;
    margin: 1.75rem auto;
}

.science-video-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 16px;
    background: #000;
    overflow: hidden;
}

.science-video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.science-video-modal-body {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.science-video-modal-body video {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.experts {
    padding: 4.444vw 6.25vw;
    background: linear-gradient(153.58deg, #004b88 3.42%, #041a34 64.94%);
}

.experts-shell {
    display: flex;
    align-items: stretch;
    border: 1px solid #ffffff;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(-74.65deg, rgba(4, 26, 52, 0.95) 29.35%, rgba(4, 26, 52, 0.285) 99.53%);
}

.experts-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35.22%;
    flex-shrink: 0;
}

.experts-copy-inner {
    width: 23.889vw;
}

.experts-copy-inner h2 {
    margin: 0 0 48px;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
}

.experts-copy-inner>p {
    margin: 0 0 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.experts-nav {
    display: flex;
    gap: 24px;
}

.experts-prev,
.experts-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #ffffff;
    border-radius: 40px;
    background: transparent;
    cursor: pointer;
}

.experts-prev img,
.experts-next img {
    width: 24px;
    height: 24px;
    display: block;
}

.experts-prev img {
    transform: rotate(180deg);
}

.experts-slider {
    flex: 1;
    min-width: 0;
    padding: 3.333vw 4.444vw;
    overflow: hidden;
}

.experts-track {
    width: 100%;
    height: 28.194vw;
}

.experts-track .owl-stage-outer,
.experts-track .owl-stage,
.experts-track .owl-item {
    height: 100%;
}

.expert {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #002e70 0%, #98c6f9 100%);
}

.expert::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 12, 26, 0) 51.94%, rgba(0, 12, 26, 0.6) 100%);
    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert:hover::before {
    background: linear-gradient(180deg, rgba(0, 12, 26, 0.35) 10%, rgba(0, 12, 26, 0.88) 100%);
}

.expert:hover .expert-photo {
    transform: scale(1.05);
}

.expert-photo {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border-radius: 16px;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-info {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 32px;
    text-align: center;
    pointer-events: none;
}

.expert-id {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-id h3 {
    margin: 0 0 5px;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}

.expert-id p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 13px;
    line-height: 22px;
    color: #ffffff;
    opacity: 0.85;
}

.expert-extra {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    max-height: calc(100% - 64px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.expert-extra-inner {
    min-height: 0;
}

.expert-bio {
    margin: 0 0 16px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: justify;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 10px 24px;
    border: 1px solid #ffffff;
    border-radius: 40px;
    background: #ffffff;
    font-family: var(--font-averta-bold);
    font-size: 18px;
    line-height: 26px;
    color: #005788 !important;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: background 0.25s ease, opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-more:hover {
    background: #e6f0fa;
    transform: translateY(-2px) !important;
}

.expert:hover .expert-id {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition-duration: 0.25s;
}

.expert:hover .expert-extra {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.05s;
}

.expert:hover .expert-bio {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

.expert:hover .expert-more {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.14s;
}

.footer {
    position: relative;
    overflow: hidden;
    padding: 4.444vw 6.25vw;
    background: #004b88;
    box-shadow: inset 0 14px 28.4px rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

.footer a {
    color: #ffffff;
}

.footer a:hover {
    color: #ffffff;
}

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.footer-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #4dbfd9;
    text-transform: uppercase;
}

.footer-label::before {
    content: "";
    width: 14px;
    height: 1.5px;
    background: #4dbfd9;
    flex-shrink: 0;
}

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 33.194vw;
    max-width: 478px;
}

.footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-block>p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.footer-contact-block .footer-muted {
    opacity: 0.7;
}

.footer-email {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline;
}

.footer-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.footer-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    flex-shrink: 0;
}

.footer-ico img {
    display: block;
    max-width: none;
}

.footer-ico-mail {
    height: 20px;
    overflow: hidden;
}

.footer-ico-mail img {
    position: absolute;
    left: 0;
    width: 20px;
}

.footer-ico-mail img:first-child {
    top: 13%;
}

.footer-ico-mail img:last-child {
    bottom: 13%;
}

.footer-form-wrap {
    width: 46.111vw;
    max-width: 664px;
}

.footer-form-wrap span {
    margin: 0 0 8px;
    font-family: var(--font-averta-semibold);
    font-size: 30px;
    line-height: 48px;
    color: #ffffff;
}

.footer-form-wrap h2 span {
    display: block;
    color: #4dbfd9;
}

.footer-form-wrap>p {
    margin: 0 0 24px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.footer-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
    align-items: stretch;
    gap: 16px;
}

.footer-field {
    flex: 1;
    min-width: 0;
    padding: 12px 24px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 52px;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    outline: none;
}

.footer-field::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.footer-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.footer-select {
    position: relative;
    flex: 1;
    min-width: 0;
}

.footer-select select {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.footer-select.is-open .footer-select-btn i {
    transform: rotate(180deg);
}

.footer-select-btn span {
    font-size: 14px !important;
    margin: 0 !important;
}

.footer-select.is-open .footer-select-list {
    display: block;
}

.footer-select.is-picked .footer-select-btn {
    color: #ffffff;
}

.footer-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 12px 20px 12px 24px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 52px;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
    cursor: pointer;
}

.footer-select-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-select-btn i {
    font-size: 14px;
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.footer-select-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 5;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 14, 28, 0.22);
}

.footer-select-list li {
    padding: 10px 20px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #004b88;
    cursor: pointer;
}

.footer-select-list li:hover,
.footer-select-list li.is-active {
    background: #005788;
    color: #ffffff;
}

.footer-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fafcfd;
    flex-shrink: 0;
    cursor: pointer;
}

.footer-submit img {
    width: 20px;
    height: 20px;
    display: block;
}

.footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 20.417vw;
    max-width: 294px;
}

.footer-logo {
    display: block;
    width: 294px;
    max-width: 100%;
    height: 60px;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social a {
    display: flex;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.footer-social a img {
    width: 56px;
    height: 56px;
    display: block;
}

.footer-social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 56px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.footer-zalo-word {
    display: block;
    width: 40px;
    height: 14px;
    background: #ffffff;
    -webkit-mask: url("/assets/footer/zalo-word.png") center/contain no-repeat;
    mask: url("/assets/footer/zalo-word.png") center/contain no-repeat;
}

.footer-copy {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.footer-nav,
.footer-policy {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-nav-cols {
    display: flex;
    gap: 64px;
}

.footer-nav ul,
.footer-policy ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav ul a,
.footer-policy ul a {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
}

.footer-policy {
    width: 16.042vw;
    max-width: 231px;
}

.footer-marquee {
    margin: 48px -6.25vw -4.444vw;
    overflow: hidden;
    pointer-events: none;
}

.footer-marquee-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: -moz-max-content;
    width: max-content;
    animation: footer-marquee 40s linear infinite;
}

.footer-marquee-track span {
    font-family: var(--font-averta-extrabold);
    font-size: 88px;
    line-height: 100px;
    letter-spacing: 1.76px;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.2);
    opacity: 0.5;
    white-space: nowrap;
}

.footer-marquee-track img {
    width: 28px;
    height: 32px;
    flex-shrink: 0;
    display: block;
}

@keyframes footer-marquee {
    to {
        transform: translateX(-50%);
    }
}

.about-title {
    margin: 0 0 40px;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
}

.about-title.text-center {
    text-align: center;
}

.about-title.is-constrained {
    max-width: 1006px;
    margin-left: auto;
    margin-right: auto;
}

.about-intro {
    padding-bottom: 64px;
    text-align: left;
}

.about-intro .breadcrumb {
    background: transparent;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
}

.about-intro .breadcrumb-item {
    font-family: var(--font-averta-regular);
    color: #4DBFD9;
}

.about-intro .breadcrumb-item a {
    color: #4DBFD9;
    text-decoration: none;
}

.about-intro .breadcrumb-item a:hover {
    color: #fff;
}

.about-intro .breadcrumb-item.active {
    color: #4DBFD9;
}

.about-intro .breadcrumb-item+.breadcrumb-item::before {
    font-family: var(--font-averta-semibold);
    color: rgba(255, 255, 255, 0.4);
    content: "/";
    padding: 0 8px;
}

.about-intro .about-intro-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #fff;
}

.about-intro .about-intro-desc {
    margin: 0 0 32px;
    font-family: var(--font-averta-regular);
    font-size: 18px;
    line-height: 26px;
    color: #fff;
}

.about-intro .about-intro-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.trusted {
    padding: 5.556vw 0 0;
    background: linear-gradient(0deg, rgba(4, 26, 52, 0) 33.37%, rgba(0, 14, 28, 0.55) 64.11%, rgba(0, 14, 28, 0.7) 71.33%, #000e1c 100%), #004b88;
    text-align: center;
}

.trusted .container {
    max-width: 1290px;
}

.trusted .row-trusted-items {
    padding-bottom: 40px;
    border-bottom: 1px solid #005788;
}

.trusted .row-trusted-items>[class*="col-"]:nth-child(-n+4) {
    margin-bottom: 40px;
}

.trusted .col-3:nth-child(-n+4) {
    margin-bottom: 40px;
}

.trusted-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.trusted-item img {
    width: 212px;
    height: 212px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.trusted-item p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.journey {
    background: #004b88;
}

.journey-head {
    display: grid;
    padding: 80px 90px;
    overflow: hidden;
    text-align: center;
}

.journey-head .about-title {
    grid-area: 1/1;
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
}

.journey-dna {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 17%, #fff 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #fff 17%, #fff 100%);
}

.journey-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px 140px 80px;
    background: #ffffff;
    border-bottom: 1px solid #b7ceda;
}

.journey-copy {
    max-width: 723px;
    min-width: 0;
}

.journey-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    text-transform: uppercase;
}

.journey-label::before {
    content: "";
    width: 40px;
    height: 1px;
    background: #005788;
    flex-shrink: 0;
}

.journey-copy h3 {
    margin: 0 0 24px;
    font-family: var(--font-averta-semibold);
    font-size: 32px;
    line-height: 40px;
    color: #005788;
}

.journey-person {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 0 0 24px;
}

.journey-photo {
    width: 218px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(180deg, #001e4a 0%, #98c6f9 100%);
}

.journey-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.journey-name {
    margin: 0 0 5px;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
}

.journey-role {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
}

.journey-body {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
    text-align: justify;
}

.journey-body strong {
    font-family: var(--font-averta-semibold);
    font-weight: 600;
}

.journey-num {
    flex-shrink: 0;
    font-family: var(--font-averta-semibold);
    font-size: clamp(140px, 15vw, 220px);
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 2px #6495b0;
    paint-order: stroke fill;
}

.hybrid {
    background: #ffffff;
    padding-bottom: 80px;
}

.hybrid .container {
    max-width: 1290px;
}

.hybrid-top {
    display: grid;
}

.hybrid-dna,
.hybrid-intro {
    grid-area: 1/1;
}

.hybrid-dna {
    width: 100%;
    height: 350px;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.hybrid-intro {
    align-self: start;
    padding-top: 64px;
    color: #ffffff;
}

.hybrid-intro .about-title {
    margin: 0;
}

.hybrid-intro p {
    margin: 0 0 0 auto;
    max-width: 408px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.hybrid-card {
    position: relative;
    z-index: 1;
    margin-top: -134px;
    padding: 32px 25px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(12, 96, 143, 0.15);
}

.hybrid-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 17px;
    text-align: center;
}

.hybrid-point img {
    width: 64px;
    height: 64px;
    display: block;
}

.hybrid-point h3 {
    margin: 0 0 8px;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #010709;
}

.hybrid-point p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.hybrid-quote {
    display: flex;
    align-items: center;
    max-width: 1000px;
    min-height: 370px;
    margin: 40px auto 0;
}

.hybrid-quote-copy {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.hybrid-quote-copy p {
    margin: 16px auto 0;
    max-width: 522px;
    font-family: var(--font-averta-semibold);
    font-size: 28px;
    line-height: 36px;
    color: #005788;
}

.hybrid-mark {
    display: block;
    width: 72px;
    height: 57px;
    margin: 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.hybrid-portrait {
    position: relative;
    width: 428px;
    flex-shrink: 0;
}

.hybrid-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 12px;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.hybrid-chip {
    position: absolute;
    left: 0;
    bottom: 21px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 72px;
    padding: 8px 16px;
    border-radius: 16px;
    background: #b7d6f3;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateX(-28%);
}

.hybrid-chip img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.hybrid-chip-name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a293a;
    white-space: nowrap;
}

.hybrid-chip-role {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
    white-space: nowrap;
}

.method {
    position: relative;
    padding: 80px 0;
    background: #004b88;
    overflow: hidden;
    width: 100%;
}

.method .container {
    max-width: 1290px;
}

.method .about-title {
    margin: 0 auto 40px;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
    text-align: center;
}

.method-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.method-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.method-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #004b88 0%, rgba(0, 75, 136, 0) 57%);
}

.method-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.method-cols {
    margin-left: 0;
    margin-right: 0;
}

.method-cols>[class*=col-] {
    padding: 0 36px;
}

.method-cols>[class*=col-]:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.method-item {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 60px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.method-item img {
    width: 80px;
    height: 80px;
    display: block;
    flex-shrink: 0;
}

.method-item h3 {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 28px;
    line-height: 36px;
    color: #ffffff;
}

.method-item p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #d1dde6;
    height: 72px;
}

.hybrid-chip-role-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.hybrid-chip-role-badge img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.hybrid-chip-role-badge span {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    height: 72px;
}

.partners {
    margin-top: 80px;
    width: 100%;
    overflow: hidden;
}

.partners .about-title {
    margin: 0 0 56px;
}

.partners-marquee {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: -moz-max-content;
    width: max-content;
    animation: partners-marquee 40s linear infinite;
}

.about-content-bottom {
    background: #fff;
    padding-bottom: 30px;
}

.about-content-bottom .about-title {
    color: #005788;
    text-align: center;
}



.about-content-bottom .partner-logo {
    filter: unset;
}


.partner-logo {
    width: 140px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 8px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

@keyframes partners-marquee {
    to {
        transform: translateX(-50%);
    }
}

.results-slider {
    margin-top: 56px;
}

.results-slider .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
}

.results-slider .owl-dots .owl-dot {
    width: 32px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6) !important;
}

.results-slider .owl-dots .owl-dot span {
    display: none;
}

.results-slider .owl-dots .owl-dot.active {
    background: #005788 !important;
}

.result-card {
    display: grid;
    aspect-ratio: 172/216.23;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.result-card>img,
.result-card .result-quote {
    grid-area: 1/1;
    min-width: 0;
    min-height: 0;
}

.result-card>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.result-card:hover .result-quote {
    opacity: 1;
}

.result-quote {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 32px;
    padding: 24px 16px;
    background: linear-gradient(127.44deg, #004b88 3.42%, #041a34 64.94%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.result-quote>p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: justify;
}

.result-person {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-person img {
    width: 40px !important;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.result-name {
    margin: 0;
    font-family: var(--font-averta-bold);
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    white-space: nowrap;
}

.result-role {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #4581a1;
    white-space: nowrap;
}

.contact-page {
    min-height: 100vh;
    color: #ffffff;
}

.contact-page .container {
    max-width: 1290px;
}

.breadcrumb {
    background: none;
    padding: 0;
}

.breadcrumb * {
    color: #4DBFD9 !important;
    font-size: 12px;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #DCE5EE;
}

.hero-contact {
    background: linear-gradient(0deg, rgba(4, 26, 52, 0) 33.37%, rgba(0, 14, 28, 0.55) 64.11%, rgba(0, 14, 28, 0.7) 71.33%, #000E1C 100%), #004B88;
    padding: 149px 0 60px 0;
}

.contact-hero h1 {
    margin: 0 0 10px;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
}

.contact-hero .title-sub {
    display: block;
    margin-bottom: 30px;
}

.contact-lookup {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 40px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    background: linear-gradient(306deg, rgba(4, 26, 52, 0.95) 29.35%, rgba(4, 26, 52, 0.285) 99.53%);
    box-shadow: 0 20px 40px -16px rgba(12, 68, 118, 0.18), 0 4px 12px 0 rgba(12, 68, 118, 0.08);
}

.contact-lookup-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-lookup-icon {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.contact-lookup-icon-main,
.contact-lookup-icon-detail {
    position: absolute;
    display: block;
}

.contact-lookup-icon-main {
    inset: 0;
    width: 64px;
    height: 64px;
}

.contact-lookup-icon-detail-a {
    left: 6px;
    bottom: 17px;
    width: 10px;
    height: 4px;
}

.contact-lookup-icon-detail-b {
    left: 6px;
    bottom: 20px;
    width: 10px;
    height: 6px;
}

.contact-lookup-copy {
    min-width: 0;
}

.contact-lookup-copy h2 {
    margin: 0 0 8px;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}

.contact-lookup-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.6);
}

.contact-lookup-form {
    display: flex;
    gap: 16px;
}

.contact-lookup-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 56px;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    outline: none;
}

.contact-lookup-form input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.contact-lookup-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.contact-lookup-form button {
    flex-shrink: 0;
    height: 56px;
    padding: 10px 24px;
    border: 0;
    border-radius: 40px;
    background: #ffffff;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
    cursor: pointer;
}

.contact-direct {
    margin-top: 56px;
}

.contact-direct-label {
    margin: 0 0 32px;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #94b6c9;
}

.contact-direct-row {
    margin-left: -8px;
    margin-right: -8px;
    row-gap: 16px;
}

.contact-direct-row>[class*=col-] {
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
}

.contact-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(-37deg, rgba(4, 26, 52, 0.65) 7%, rgba(4, 26, 52, 0.2) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.contact-card-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.contact-card-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.contact-card-icon.contact-card-icon--cyan {
    background: rgba(77, 191, 217, 0.1);
    border: 1px solid rgba(77, 191, 217, 0.5);
}

.contact-card-icon.contact-card-icon--mint {
    background: rgba(93, 233, 181, 0.1);
    border: 1px solid rgba(93, 233, 181, 0.5);
}

.contact-card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-card-copy h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}

.contact-card-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.7);
}

.contact-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 10px 16px;
    border-radius: 56px;
    background: #ffffff;
    color: #005788 !important;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn-pill span {
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
    white-space: nowrap;
}

.contact-btn-pill img {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.contact-btn-pill:hover {
    background: #e6f0fa;
    color: #004b88 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.contact-action-circle {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff;
    border-radius: 56px;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.contact-action-circle img {
    width: 24px;
    height: 24px;
    display: block;
}

.contact-action-circle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.contact-chat-base,
.contact-chat-part,
.contact-mail-base,
.contact-mail-top {
    position: absolute;
    display: block;
}

.contact-chat-base,
.contact-mail-base {
    inset: 0;
    width: 24px;
    height: 24px;
}

.contact-chat-part-a {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 9px;
}

.contact-chat-part-b {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 1px;
}

.contact-chat-part-c {
    top: 8px;
    left: 5px;
    width: 7px;
    height: 1px;
}

.contact-mail-top {
    top: 4px;
    left: 1px;
    width: 22px;
    height: 9px;
}

.contact-support {
    padding: 64px 0;
    margin-top: 64px;
    background: #ffffff;
}

.contact-support-head {
    margin: 0 auto 40px;
    max-width: 1000px;
    text-align: center;
}

.contact-support-head h2 {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 46px;
    line-height: 56px;
    color: #005788;
}

.contact-support-head p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #6f767c;
}

.contact-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.61fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.contact-support-grid>* {
    min-width: 0;
}

.contact-support-form-card {
    padding: 32px;
}

.contact-support-form-card h3 {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
}

.contact-support-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-field span {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.contact-field em {
    font-style: normal;
    color: #b33a1b;
}

.contact-field-full {
    width: 100%;
}

.contact-input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 52px;
    background: #f4f8fc;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #020d12;
    outline: none;
}

.contact-input::-moz-placeholder {
    color: #6f767c;
}

.contact-input::placeholder {
    color: #6f767c;
}

.contact-input:focus {
    border-color: #005788;
}

.contact-select-wrap {
    position: relative;
}

.contact-select-wrap i {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #005788;
    pointer-events: none;
}

.contact-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
}

.contact-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 132px;
    padding: 24px;
    border: 1px dashed #005788;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.contact-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.contact-upload-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 44px;
    background: rgba(179, 58, 27, 0.15);
}

.contact-upload-icon img {
    width: 20px;
    height: 20px;
    display: block;
}

.contact-upload-copy {
    text-align: center;
}

.contact-upload-copy strong,
.contact-upload-copy small {
    display: block;
}

.contact-upload-copy strong {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0a1929;
}

.contact-upload-copy small {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.contact-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.contact-consent input {
    display: none;
}

.contact-consent span:last-child {
    flex: 1 1 auto;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #020d12;
}

.contact-consent-icon {
    flex-shrink: 0;
}

.contact-consent-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.contact-submit {
    width: 100%;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.contact-submit img {
    width: 16px;
    height: 16px;
    display: block;
}

.contact-office-list {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-self: stretch;
}

.contact-office-card {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(12, 68, 118, 0.04), 0 1px 1px rgba(12, 68, 118, 0.05);
}

.contact-office-stack,
.contact-office-image {
    position: absolute;
    inset: 0;
}

.contact-office-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.contact-office-image-overlay {
    inset: -6% -3% auto -3%;
    width: 106%;
    height: 112%;
}

.contact-office-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(124deg, #0a1929 1.09%, rgba(10, 25, 41, 0) 62.73%);
    mix-blend-mode: multiply;
}

.contact-office-copy {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 1;
    color: #ffffff;
}

.contact-office-copy p {
    margin: 0 0 4px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    opacity: 0.7;
}

.contact-office-copy h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}

.contact-office-actions {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-office-actions .contact-pill img {
    width: 24px;
    height: 24px;
}

.contact-office-map img,
.contact-office-actions .btn-pill img {
    width: 24px;
    height: 24px;
}

.contact-office-map img {
    width: 20px !important;
    height: 20px !important;
}

.contact-faq {
    position: relative;
    padding: 80px 0;
    background: #004b88 url("/assets/contact/contact-faq-bg.png") center/cover no-repeat;
    overflow: hidden;
}

.contact-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #004b88 0%, rgba(0, 75, 136, 0) 57%);
    pointer-events: none;
}

.contact-faq .container {
    position: relative;
    z-index: 1;
    max-width: 1290px;
}

.contact-faq .contact-section-title {
    color: #ffffff;
}

.contact-faq-list {
    max-width: 1000px;
    margin: 0 auto;
}

.contact-faq-item {
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.4);
}

.contact-faq-item.is-open {
    border-color: #ffffff;
}

.contact-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.contact-faq-index {
    flex-shrink: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #94b6c9;
}

.contact-faq-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.contact-faq-toggle {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #005788;
}

.contact-faq-toggle::before,
.contact-faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

.contact-faq-toggle::after {
    width: 2px;
    height: 12px;
}

.contact-faq-item.is-open .contact-faq-toggle {
    background: rgba(255, 255, 255, 0.85);
}

.contact-faq-item.is-open .contact-faq-toggle::before {
    background: #005788;
}

.contact-faq-item.is-open .contact-faq-toggle::after {
    opacity: 0;
}

.contact-faq-answer {
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    opacity: 0;
    border-top: 0 solid rgba(255, 255, 255, 0.2);
    transition: max-height 0.38s ease, padding 0.28s ease, opacity 0.22s ease, border-top-width 0.22s ease;
}

.contact-faq-answer p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.contact-faq-item.is-open .contact-faq-answer {
    max-height: 240px;
    padding: 16px 24px;
    opacity: 1;
    border-top-width: 1px;
}

.contact-faq-cta {
    margin-top: 28px;
    text-align: center;
}

.contact-faq-cta p {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.contact-faq-button {
    justify-content: center;
    color: #005788 !important;
}

.contact-faq-button img {
    width: 16px;
    height: 16px;
    display: block;
}

.catalog-page {
    background: #ffffff;
    overflow-x: clip;
}

.catalog-hero img {
    width: 100%;
    display: block;
}

.catalog-listing {
    padding: 32px 0 112px;
    position: relative;
}

.catalog-listing .container {
    max-width: 1290px;
}

.catalog-listing .breadcrumb {
    margin: 0 0 16px;
}

.catalog-listing::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -141px;
    width: 992.874px;
    height: 315.185px;
    transform: rotate(-2.579deg);
    aspect-ratio: 992.87/315.18;
    background: url("/assets/adn-product.svg") no-repeat center center;
    background-size: cover;
    z-index: 1;
}

.catalog-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #005788;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 24px 0;
}

.catalog-results {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #6f767c;
}

.catalog-toolbar-actions,
.catalog-filter,
.catalog-sort,
.catalog-sort select {
    display: flex;
    align-items: center;
}

.catalog-toolbar-actions {
    gap: 16px;
}

.catalog-filter,
.catalog-sort select {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-semibold);
    color: #010709;
    cursor: pointer;
}

.catalog-filter {
    gap: 12px;
}

.catalog-filter img {
    display: block;
    width: 18px;
    height: 18px;
}

.catalog-filter strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #b0523b;
    color: #ffffff;
    font-family: "Mulish-SemiBold";
    font-size: 14px;
    line-height: 20px;
}

.catalog-sort {
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid #dce5ee;
}

.catalog-sort span {
    font-family: var(--font-averta-regular);
    font-size: 18px;
    line-height: 26px;
    color: #6f767c;
}

.catalog-sort select {
    min-width: 0;
    padding-right: 22px;
    font-size: 18px;
    line-height: 26px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23010709' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
    cursor: pointer;
}

.catalog-grid {
    margin: 0 -8px;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 56px;
}

.catalog-card:hover .catalog-card-cta {
    opacity: 1;
    transform: translateY(0);
}

.catalog-card-media {
    position: relative;
    aspect-ratio: 292.5/292;
    width: 100%;
    border-radius: 16px;
    background: #f0f0f0;
    overflow: hidden;
}

.catalog-card-media>img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.catalog-card-media .catalog-card-media-alt {
    opacity: 0;
    pointer-events: none;
}

.catalog-card-media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 16px;
}

.catalog-card--tube .catalog-card-media>img {
    -o-object-fit: contain;
    object-fit: contain;
}

.catalog-card:has(.catalog-card-media-alt):hover .catalog-card-media>img:first-of-type {
    opacity: 0;
}

.catalog-card:hover .catalog-card-media-alt {
    opacity: 1;
}

.catalog-card-cta {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    width: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.catalog-card-copy {
    padding-top: 12px;
    text-align: center;
}

.catalog-card-copy h2,
.catalog-card-copy p {
    margin: 0;
}

.catalog-card-copy h2 {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.catalog-card-copy h2 a {
    color: inherit;
    text-decoration: none;
}

.catalog-card-copy h2 a:hover {
    color: #005788;
}

.catalog-card-copy p {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.catalog-card-copy span {
    margin: 0 8px;
}

.catalog-card-tag {
    font-family: var(--font-averta-semibold);
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 1.71px;
    text-transform: uppercase;
    color: #005788 !important;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    z-index: 2;
    position: relative;
}

.catalog-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dce5ee;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 20px;
    color: #7d8e9c;
    text-decoration: none;
}

.catalog-pagination a.is-active {
    border-color: #005788;
    background: #005788;
    color: #ffffff;
}

.guide-section {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    padding: 200px 0 160px;
    background: linear-gradient(180deg, transparent 0, transparent 120px, #004a86 120px, #004a86 calc(100% - 420px), #041a34 100%);
}

.guide-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1920/900;
    pointer-events: none;
    z-index: 0;
    background: #004a86;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 900' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M536.84 94.78C348.79 94.78 100.59 39.35 0 11.13V900h1920V94.78c-65.86-30.74-258.26-92.72-500.91-94.73C1115.77-2.47 767.8 94.78 536.84 94.78Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 900' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M536.84 94.78C348.79 94.78 100.59 39.35 0 11.13V900h1920V94.78c-65.86-30.74-258.26-92.72-500.91-94.73C1115.77-2.47 767.8 94.78 536.84 94.78Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.guide-section .container {
    position: relative;
    z-index: 1;
    max-width: 1290px;
    overflow: visible;
}

.guide-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
    gap: 30px;
    padding: 80px;
    border-radius: 32px;
    background: #005da9;
    overflow: visible;
}

.guide-article {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #ffffff;
}

.guide-article h2,
.guide-article h3,
.guide-article p {
    margin: 0;
}

.guide-article h2 {
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
}

.guide-article-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.guide-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #ffffff;
}

.guide-block h3 {
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
}

.guide-block p,
.guide-block li {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
}

.guide-block ul {
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guide-faq-title {
    font-size: 32px !important;
    line-height: 40px !important;
}

.guide-toc {
    position: sticky;
    top: 120px;
    width: 270px;
    flex-shrink: 0;
    height: -moz-fit-content;
    height: fit-content;
    padding: 20px 24px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    color: #ffffff;
    align-self: flex-start;
    z-index: 2;
}

.guide-toc-head {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid #4dbfd9;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
}

.guide-toc-links {
    display: block;
    padding: 24px 0 0;
}

.guide-toc-links .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guide-toc-links .toc-list-item {
    margin: 0;
}

.guide-toc-links .toc-link {
    display: block;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.guide-toc-links .toc-link:hover,
.guide-toc-links .toc-link.is-active-link {
    opacity: 1;
}

.guide-toc-links .toc-link.is-active-link {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.guide-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-faq-item {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.1);
}

.guide-faq-item.is-open {
    border-color: #ffffff;
}

.guide-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.guide-faq-index {
    flex-shrink: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #94b6c9;
}

.guide-faq-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.guide-faq-toggle {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #005788;
}

.guide-faq-toggle::before,
.guide-faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

.guide-faq-toggle::after {
    width: 2px;
    height: 12px;
}

.guide-faq-item.is-open .guide-faq-toggle {
    background: rgba(255, 255, 255, 0.85);
}

.guide-faq-item.is-open .guide-faq-toggle::before {
    background: #005788;
}

.guide-faq-item.is-open .guide-faq-toggle::after {
    opacity: 0;
}

.guide-faq-answer {
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    opacity: 0;
    border-top: 0 solid rgba(255, 255, 255, 0.2);
    transition: max-height 0.38s ease, padding 0.28s ease, opacity 0.22s ease, border-top-width 0.22s ease;
}

.guide-faq-answer p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.guide-faq-item.is-open .guide-faq-answer {
    max-height: 240px;
    padding: 16px 24px;
    opacity: 1;
    border-top-width: 1px;
}

.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
}

.filter-modal[hidden] {
    display: flex !important;
}

.filter-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.filter-modal.is-open .filter-modal-backdrop {
    opacity: 1;
}

.filter-modal.is-open .filter-modal-panel {
    transform: translateX(0);
}

.filter-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 7, 9, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-modal-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(580px, 100%);
    height: 100%;
    max-height: 100%;
    background: #ffffff;
    border-left: 1px solid #e7e7e7;
    box-shadow: -8px 0 32px rgba(1, 7, 9, 0.12);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.filter-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.filter-modal-head,
.filter-modal-foot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 16px 24px;
}

.filter-modal-head {
    gap: 16px;
    border-bottom: 1px solid #dce5ee;
}

.filter-modal-head p {
    flex: 1;
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #005788;
}

.filter-modal-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.filter-modal-close img {
    display: block;
    width: 24px;
    height: 24px;
}

.filter-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.filter-active-head,
.filter-group-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.filter-active-head {
    margin-bottom: 16px;
}

.filter-active-head p {
    flex: 1;
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #121212;
}

.filter-link {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    text-decoration: underline;
    cursor: pointer;
}

.filter-modal-foot .filter-link {
    font-size: 16px;
    line-height: 24px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 4px 12px 4px 16px;
    border: 0;
    border-radius: 32px;
    background: #f0f0f0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #010709;
    cursor: pointer;
    animation: filter-chip-in 0.28s ease;
}

.filter-chip img {
    width: 12px;
    height: 12px;
    display: block;
}

.filter-chip:hover {
    background: #e6e6e6;
}

@keyframes filter-chip-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.filter-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-group {
    padding-bottom: 16px;
    border-bottom: 1px solid #dce5ee;
}

.filter-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.filter-group-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.filter-group-toggle span {
    flex: 1;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #121212;
}

.filter-group-toggle img {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.filter-group-icon-plus {
    display: none !important;
}

.filter-group:not(.is-open) .filter-group-icon-minus {
    display: none !important;
}

.filter-group:not(.is-open) .filter-group-icon-plus {
    display: block !important;
}

.filter-group:not(.is-open) .filter-group-body {
    display: none;
}

.filter-group-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.filter-check input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    background: url("/assets/catalog/filter-uncheck.svg") center/18px 18px no-repeat;
    cursor: pointer;
    flex-shrink: 0;
}

.filter-check input:checked {
    background-image: url("/assets/catalog/filter-check.svg");
}

.filter-check span {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0a293a;
}

.filter-price-slider {
    position: relative;
    height: 24px;
    margin-bottom: 8px;
}

.filter-price-slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 8px;
    border-radius: 8px;
    background: #e8eff3;
    transform: translateY(-50%);
}

.filter-price-slider::after {
    content: "";
    position: absolute;
    left: var(--price-min, 10%);
    right: calc(100% - var(--price-max, 50%));
    top: 50%;
    height: 8px;
    border-radius: 8px;
    background: #005788;
    transform: translateY(-50%);
}

.filter-price-slider input[type=range] {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    margin: 0;
    transform: translateY(-50%);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

.filter-price-slider input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
}

.filter-price-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -8px;
    border: 1px solid #15587d;
    border-radius: 50%;
    background: #005788;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.filter-price-slider input[type=range]::-moz-range-track {
    height: 8px;
    background: transparent;
}

.filter-price-slider input[type=range]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 1px solid #15587d;
    border-radius: 50%;
    background: #005788;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: pointer;
}

.filter-price-fields {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
}

.filter-price-fields>img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.filter-price-field {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #dce5ee;
    border-radius: 46px;
    margin: 0;
}

.filter-price-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #121212;
    outline: none;
}

.filter-price-field span {
    flex-shrink: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #7a8896;
}

.filter-modal-foot {
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #dce5ee;
}

body.is-filter-open,
body.is-option-open {
    overflow: hidden;
}

.search-page {
    overflow-x: clip;
}

.search-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 32px 16px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(4, 26, 52, 0) 30.833%, rgba(0, 14, 28, 0.55) 82.352%, rgba(0, 14, 28, 0.7) 94.444%, #000e1c 100%), #004b88;
}

.search-hero-glow {
    position: absolute;
    right: -150px;
    bottom: -150px;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background: #0194f3;
    opacity: 0.4;
    filter: blur(100px);
    pointer-events: none;
}

.search-hero-form {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 540px;
    min-height: 56px;
    padding: 8px 8px 8px 17px;
    border: 1px solid #f0f0f0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 12px 16px rgba(13, 28, 57, 0.1), 0 2px 4px rgba(13, 28, 57, 0.04);
}

.search-hero-form>img {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.search-hero-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.search-hero-form input::-moz-placeholder {
    color: #6f767c;
}

.search-hero-form input::placeholder {
    color: #6f767c;
}

.search-hero-form input:focus {
    outline: none;
}

.search-hero-form .btn-pill {
    flex-shrink: 0;
    min-width: 112px;
    box-shadow: none;
}

.search-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #005788;
}

.search-results {
    font-family: var(--font-averta-regular);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}

.search-results span {
    color: #005788;
}

.search-page .catalog-listing {
    padding-top: 32px;
}

.search-page .catalog-toolbar {
    margin-top: 24px;
}

.search-page .catalog-filter img {
    width: 24px;
    height: 24px;
}

.option-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.38s;
}

.option-drawer[hidden] {
    display: none !important;
}

.option-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.option-drawer.is-open .option-drawer-backdrop {
    opacity: 1;
}

.option-drawer.is-open .option-drawer-panel {
    transform: translateX(0);
}

.option-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 7, 9, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.option-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    overflow: hidden;
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.option-drawer-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.option-drawer-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 16px 24px;
    border-bottom: 1px solid #dce5ee;
}

.option-drawer-head p {
    flex: 1;
    margin: 0;
    min-height: 28px;
}

.option-drawer-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.option-drawer-close img {
    width: 24px;
    height: 24px;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none;
}

.option-drawer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 0 48px 48px;
    overflow: auto;
}

.option-drawer-media {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #f0f0f0;
    overflow: hidden;
}

.option-drawer-media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom;
    object-position: bottom;
}

.option-drawer-copy {
    width: 100%;
}

.option-drawer-copy p {
    margin: 0;
}

.option-drawer-copy .catalog-card-tag {
    margin-bottom: 2px;
}

.option-drawer-name,
.option-drawer-price {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.option-drawer-name {
    font-family: var(--font-averta-semibold);
}

.option-drawer-sizes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-drawer-sizes p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.option-drawer-sizes strong {
    font-family: var(--font-averta-semibold);
}

.option-drawer-body .pdp-actions {
    width: 100%;
}

.option-drawer-detail {
    align-self: stretch;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
    text-decoration: underline;
}

.pdp-page {
    background: #fff;
    color: #020d12;
    overflow-x: clip;
}

/*.pdp-page .container-home {*/
/*    width: 100%;*/
/*    max-width: 1560px;*/
/*}*/

.pdp-buy {
    padding: 32px 0 88px;
}

.pdp-buy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin: 0 auto;
}

.pdp-gallery {
    display: flex;
    gap: 16px;
    position: sticky;
    top: 112px;
}

.pdp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 80px;
}

.pdp-thumb {
    width: 80px;
    height: 79px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.pdp-thumb.is-active {
    border-color: #005788;
}

.pdp-main-media {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 16px;
    background: #f0f0f0;
    overflow: hidden;
}

.pdp-main-media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.pdp-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.pdp-tag {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.pdp-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 32px;
    line-height: 40px;
    color: #020d12;
}

.pdp-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    line-height: 24px;
}

.pdp-stars {
    color: #f8ba16;
    letter-spacing: 1px;
}

.pdp-review-count {
    color: #6f767c;
}

.pdp-meta-sep {
    width: 1px;
    height: 16px;
    background: #dce5ee;
}

.pdp-sold {
    color: #6f767c;
    margin: 0;
}

.pdp-sold strong {
    font-family: var(--font-averta-semibold);
    color: #020d12;
    font-weight: 600;
}

.pdp-benefits {
    margin: 0;
    padding-left: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #020d12;
}

.pdp-benefits li+li {
    margin-top: 0;
}

.pdp-price {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.48px;
    color: #b33a1b;
}

.pdp-price span {
    text-decoration: underline;
}

.pdp-sizes {
    display: flex;
    gap: 8px;
}

.pdp-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.pdp-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #dce5ee;
    border-radius: 52px;
    flex-shrink: 0;
    background: #fff;
}

.pdp-qty-btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #6f767c;
    flex-shrink: 0;
}

.pdp-qty-btn img {
    width: 16px;
    height: 16px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.pdp-qty-btn:hover {
    opacity: 0.7;
}

.pdp-qty-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pdp-qty-value {
    font-family: var(--font-averta-semibold);
    width: 40px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    color: #020d12;
    -webkit-appearance: textfield;
    appearance: textfield;
    -moz-appearance: textfield;
}

.pdp-qty-value::-webkit-outer-spin-button,
.pdp-qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdp-qty-value:focus {
    outline: none;
}

.pdp-pay {
    display: none;
    justify-content: center;
    gap: 16px;
    align-items: center;
}

.pdp-pay img {
    height: 28px;
    width: auto;
    display: block;
}

.pdp-trust {
    display: flex;
    gap: 8px;
}

.pdp-trust-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: 16px;
    background: #cfefff;
    text-align: center;
}

.pdp-trust-card img {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain;
}

.pdp-trust-card strong {
    font-family: var(--font-averta-semibold);
    display: block;
    font-size: 14px;
    line-height: 22px;
    color: #0a293a;
    font-weight: 600;
}

.pdp-trust-card p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #3d4a51;
}

.pdp-journey,
.pdp-fbt {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.pdp-section-label {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #020d12;
}

.pdp-journey-grid {
    display: flex;
    gap: 8px;
}

.pdp-journey-grid>* {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 172/216;
}

.pdp-journey-grid img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.pdp-journey-stack {
    display: flex;
    flex-direction: column;
}

.pdp-journey-stack img {
    height: 50%;
}

.pdp-divider {
    width: 100%;
    height: 1px;
    background: #d9d9d9;
    border: 0;
    margin: 0;
}

.pdp-fbt-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdp-fbt-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pdp-fbt-row+.pdp-fbt-row {
    padding-top: 16px;
    border-top: 1px solid #d9d9d9;
}

.pdp-fbt-check {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.pdp-fbt-check img {
    width: 24px;
    height: 24px;
    display: block;
}

.pdp-fbt-thumb {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    background: #f0f0f0;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-fbt-thumb img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center bottom;
    object-position: center bottom;
    display: block;
}

.pdp-fbt-copy {
    flex: 1;
    min-width: 0;
}

.pdp-fbt-copy strong {
    font-family: var(--font-averta-semibold);
    display: block;
    font-size: 18px;
    line-height: 26px;
    color: #020d12;
    font-weight: 600;
}

.pdp-fbt-copy strong a {
    color: inherit;
    text-decoration: none;
}

.pdp-fbt-copy strong a:hover {
    color: #005788;
}

.pdp-fbt-copy p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a293a;
}

.pdp-fbt-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid #d9d9d9;
}

.pdp-fbt-total p {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 22px;
    color: #005788;
}

.pdp-fbt-total strong {
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #020d12;
    font-weight: 600;
}

.pdp-fbt-total strong span {
    text-decoration: underline;
}

.pdp-fbt-total s {
    margin-left: 8px;
    font-size: 18px;
    line-height: 28px;
    color: #6f767c;
    text-decoration: line-through;
}

.pdp-desc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 688px;
    background: #004b88;
    color: #fff;
}

.pdp-desc-copy {
    padding: 32px 55px 32px 127px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    overflow-y: auto;
}

.pdp-desc-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/pdp/desc-bg.png") center/cover no-repeat;
    opacity: 0.35;
    pointer-events: none;
}

.pdp-desc-copy>* {
    position: relative;
}

.pdp-desc-copy h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
}

.pdp-desc-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdp-desc-block h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
}

.pdp-desc-block p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.pdp-desc-block ul {
    margin: 0;
    padding-left: 24px;
    font-size: 16px;
    line-height: 24px;
}

.pdp-desc-block ul li+li {
    margin-top: 8px;
}

.pdp-desc-media {
    position: relative;
    min-height: 688px;
}

.pdp-desc-media>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.pdp-desc-caption {
    position: absolute;
    left: 40px;
    bottom: 40px;
    color: #fff;
}

.pdp-desc-caption strong {
    font-family: var(--font-averta-semibold);
    display: block;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
}

.pdp-desc-caption span {
    font-size: 14px;
    line-height: 22px;
}

.pdp-desc--howto .pdp-desc-copy {
    padding: 32px 127px 32px 60px;
}

.pdp-desc--howto .pdp-desc-copy::before {
    background-image: url("/assets/pdp/howto-bg.png");
}

.pdp-desc--howto .pdp-desc-block {
    gap: 16px;
}

.pdp-desc--howto .pdp-desc-block ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-desc--howto .pdp-desc-block ul li+li {
    margin-top: 0;
}

.pdp-ingredients {
    padding: 64px 0;
}

.pdp-ingredients img {
    width: 100%;
    height: auto;
}

.pdp-ingredients-banner {
    display: block;
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
}

.pdp-ingredients-mobile {
    display: none;
}

.pdp-ingredients-mobile img {
    display: block;
    width: 100%;
    height: auto;
}

.pdp-ingredients-grid {
    display: grid;
    grid-template-columns: minmax(0, 400px) 400px minmax(0, 400px);
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.pdp-ing-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.pdp-ing-col h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #005788;
    text-align: center;
}

.pdp-ing-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pdp-ing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.pdp-ing-item img {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.pdp-ing-item strong {
    font-family: var(--font-averta-semibold);
    display: block;
    font-size: 18px;
    line-height: 26px;
    color: #0a293a;
    font-weight: 600;
}

.pdp-ing-item p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #0a293a;
    max-width: 400px;
}

.pdp-ing-item--tech img {
    margin-bottom: 8px;
}

.pdp-ing-center {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 400/469;
    margin-inline: auto;
}

.pdp-ing-center>img {
    position: absolute;
    display: block;
}

.pdp-ing-center .pdp-ing-glow {
    width: 75%;
    aspect-ratio: 1;
    left: 12.5%;
    top: 21.4%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 0;
}

.pdp-ing-center .pdp-ing-ring {
    width: 100%;
    height: auto;
    aspect-ratio: 400/469;
    left: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

.pdp-ing-center .pdp-ing-bottle {
    width: 36.5%;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    z-index: 2;
}

.pdp-reviews {
    padding: 64px max(20px, (100% - 1560px) / 2);
}

.pdp-reviews-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pdp-reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.pdp-reviews-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #005788;
}

.pdp-reviews-write {
    flex-shrink: 0;
}

.pdp-reviews-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    background: #004b88;
    color: #fff;
    margin-bottom: 24px;
}

.pdp-reviews-sep {
    align-self: stretch;
    width: 1px;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.pdp-reviews-score {
    text-align: center;
    min-width: 254px;
    flex-shrink: 0;
}

.pdp-reviews-score .pdp-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 88px;
}

.pdp-reviews-score .pdp-score-num {
    font-family: var(--font-averta-bold);
    font-size: 56px;
    line-height: 88px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.pdp-reviews-score .pdp-laurel {
    width: 47px;
    height: 72px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.pdp-reviews-score .pdp-laurel.is-flip {
    transform: scaleX(-1);
}

.pdp-reviews-score>p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.pdp-reviews-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pdp-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
}

.pdp-bar-row .pdp-bar-label {
    width: 32px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: #fff;
}

.pdp-bar-row .pdp-bar-label img {
    width: 16px;
    height: 15px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.pdp-bar-row .pdp-bar-track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}

.pdp-bar-row .pdp-bar-fill {
    height: 100%;
    border-radius: 13px;
    background: #f8ba16;
}

.pdp-bar-row .pdp-bar-count {
    width: 40px;
    flex-shrink: 0;
    color: #fff;
}

.pdp-review {
    display: flex;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid #dce5ee;
}

.pdp-review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    flex-shrink: 0;
}

.pdp-review-body {
    flex: 1;
    min-width: 0;
}

.pdp-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pdp-review-head strong {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    font-weight: 600;
}

.pdp-review-head .pdp-review-stars {
    color: #f8ba16;
    margin-left: 8px;
    letter-spacing: 1px;
}

.pdp-review-head .pdp-review-meta {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.pdp-review-head .pdp-review-score {
    font-family: var(--font-averta-semibold);
    background: #005788;
    color: #fff;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}

.pdp-review-text {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
}

.pdp-review-media {
    display: flex;
    gap: 8px;
}

.pdp-review-media figure {
    position: relative;
    margin: 0;
    width: 160px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
}

.pdp-review-media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.pdp-review-media figcaption {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-family: var(--font-averta-semibold);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pdp-reviews-more {
    margin-top: 24px;
    text-align: center;
}

.pdp-reviews-more p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.pdp-science {
    position: relative;
    height: 457px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.pdp-science video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
}

.pdp-science .pdp-science-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 860px;
    margin-top: 57px;
    padding: 0 24px;
}

.pdp-science h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #fff;
}

.pdp-science p {
    margin: 0;
    max-width: 819px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.pdp-related {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 64px max(20px, (100% - 1560px) / 2);
}

.pdp-related>h2 {
    margin: 0;
    width: 100%;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    text-align: center;
    color: #005788;
}

.pdp-related-slider {
    width: 100%;
}

.pdp-related-slider .catalog-card {
    margin-bottom: 0;
}

.pdp-related-slider .owl-stage {
    display: flex;
}

.pdp-related-slider .owl-item {
    float: none;
}

.pdp-related-slider .owl-nav,
.pdp-related-slider .owl-dots {
    display: none;
}

.pdp-related-progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 16px;
    background: #e8eff3;
    overflow: hidden;
}

.pdp-related-progress-thumb {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 50%;
    height: 100%;
    border-radius: 16px;
    background: #005788;
}

.pdp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: #fff;
    box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.05);
    padding: 12px max(20px, (100% - 1560px) / 2);
    transform: translateY(110%);
    transition: transform 0.35s ease;
    pointer-events: none;
}

.pdp-sticky.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.pdp-sticky-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1560px;
    margin: 0 auto;
}

.pdp-sticky-thumb {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    background: #f0f0f0;
    overflow: hidden;
    flex-shrink: 0;
}

.pdp-sticky-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.pdp-sticky-copy {
    flex: 1;
    min-width: 0;
}

.pdp-sticky-copy strong {
    font-family: var(--font-averta-semibold);
    display: block;
    font-size: 18px;
    line-height: 26px;
    color: #020d12;
    font-weight: 600;
}

.pdp-sticky-copy p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a293a;
}

.pdp-sticky .btn-pill {
    flex: 0 0 auto;
    min-width: 260px;
}

body.is-pdp-sticky .footer {
    padding-bottom: 100px;
}

.checkout-page {
    background: #fff;
    color: #010709;
    overflow-x: clip;
}

.checkout-body {
    background: #edf0f3;
    padding: 32px 0 64px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 376px;
    gap: 24px;
    align-items: start;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.checkout-section-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #010709;
}

.checkout-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.checkout-stack--24 {
    gap: 24px;
}

.checkout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.checkout-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.checkout-label>img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
    margin-right: 4px;
}

.checkout-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 80px;
    background: rgba(184, 226, 236, 0.4);
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #1250dc;
}

.checkout-link {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    text-decoration: underline;
    white-space: nowrap;
}

.checkout-link:hover {
    color: #005788;
}

.checkout-link+.checkout-link {
    margin-left: 16px;
}

.checkout-ship-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.checkout-ship {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: left;
    background: #fff;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    width: 100%;
    min-width: 0;
}

.checkout-ship.is-active {
    background: #fffaeb;
    border-color: #ffc107;
}

.checkout-ship>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkout-ship>div:first-child p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.checkout-ship>div:first-child p:first-child {
    font-family: var(--font-averta-semibold);
    color: #010709;
}

.checkout-ship>div:first-child p:last-child {
    color: #0d354b;
}

.checkout-ship .checkout-row {
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-fee {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

.checkout-fee s {
    color: #6f767c;
    text-decoration: line-through;
}

.checkout-fee strong {
    font-family: var(--font-averta-semibold);
    color: #039855;
}

.checkout-fee strong.is-paid {
    color: #0c608f;
}

.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.checkout-field.is-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.checkout-field.is-row>.checkout-field-content {
    width: auto;
    flex-shrink: 0;
}

.checkout-field.is-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #dce5ee;
    background: #fff;
}

.checkout-field.is-card.is-active {
    border-color: #005788;
    background: #effbfe;
}

.checkout-field.is-card>.checkout-field-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.checkout-field.is-card>.checkout-field-content>div:first-child {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkout-field.is-card>.checkout-field-content>div:first-child p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-field.is-card>.checkout-field-content>div:first-child .name {
    font-family: var(--font-averta-semibold);
    color: #005788;
}

.checkout-field-content {
    min-width: 0;
    width: 100%;
}

.checkout-field-content textarea {
    width: 100%;
    min-height: 88px;
    height: 88px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 12px;
    padding: 12px 16px;
    resize: vertical;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
    background: #fff;
    display: block;
}

.checkout-field-content textarea::-moz-placeholder {
    color: #6f767c;
}

.checkout-field-content textarea::placeholder {
    color: #6f767c;
}

.checkout-field-content textarea:focus {
    outline: none;
    border-color: #005788;
}

.checkout-field-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.checkout-field-actions button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.checkout-field-actions img {
    width: 20px;
    height: 20px;
    display: block;
}

.checkout-field-actions span {
    width: 1px;
    height: 24px;
    background: #dce5ee;
}

.checkout-divider {
    height: 4px;
    width: 100%;
    background: #edf0f3;
    border-radius: 2px;
}

.checkout-vat {
    flex-wrap: nowrap;
    gap: 16px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.checkout-switch {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 43px;
    height: 24px;
    border: 0;
    border-radius: 100px;
    background: #c7c7cc;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
}

.checkout-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.checkout-switch[aria-pressed=true] {
    background: #005788;
}

.checkout-switch[aria-pressed=true]::after {
    transform: translateX(19px);
}

.checkout-pay {
    gap: 16px;
}

.checkout-pay-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-pay-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-pay-row>img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.checkout-pay-row:has(input[value=bank]:checked) {
    background: #eaf8ff;
    border: 2px solid #68aff6;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    margin-bottom: -16px;
}

.checkout-pay-logo {
    width: 48px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-pay-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.checkout-pay-detail {
    display: none;
    gap: 48px;
    padding: 32px 48px;
    background: #fff;
    border: 2px solid #68aff6;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.checkout-pay:has(input[value=bank]:checked) .checkout-pay-detail {
    display: flex;
}

.checkout-bank-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.checkout-bank-qr p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #434343;
    text-align: center;
}

.checkout-bank-qr-frame {
    border: 1px solid #bad7f5;
    border-radius: 16px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.checkout-bank-qr-frame img {
    width: 132px;
    height: 132px;
    display: block;
}

.checkout-bank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.checkout-bank-info-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    text-transform: uppercase;
}

.checkout-bank-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dce5ee;
    font-size: 16px;
    line-height: 24px;
}

.checkout-bank-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.checkout-bank-row>span {
    width: 124px;
    flex-shrink: 0;
    color: #0d354b;
}

.checkout-bank-row>strong {
    flex: 1;
    font-family: var(--font-averta-semibold);
    text-align: right;
    color: #010709;
}

.checkout-bank-copy {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.checkout-bank-copy strong {
    font-family: var(--font-averta-semibold);
    color: #010709;
}

.checkout-bank-copy strong.is-ref {
    color: #4e2921;
}

.checkout-bank-copy button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    cursor: pointer;
}

.checkout-bank-copy button img {
    width: 16px;
    height: 16px;
}

.checkout-aside {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 100px;
}

.checkout-sum,
.checkout-trust {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    width: 100%;
}

.checkout-sum {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.checkout-sum-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
}

.checkout-sum-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkout-sum-products.is-collapsed .checkout-sum-list {
    display: none;
}

.checkout-sum-products.is-collapsed .checkout-sum-toggle img {
    transform: none;
}

.checkout-sum-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-averta-semibold);
    font-size: 12px;
    line-height: 20px;
    color: #005788;
    text-transform: uppercase;
    cursor: pointer;
}

.checkout-sum-toggle img {
    width: 12px;
    height: 7px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.checkout-sum-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkout-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #dce5ee;
}

.checkout-line:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.checkout-line-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

.checkout-line-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.checkout-line-copy {
    min-width: 0;
    flex: 1;
}

.checkout-line-name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-line-price {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #010709;
}

.checkout-line-meta {
    margin: 0;
    display: flex;
    gap: 7px;
    font-size: 14px;
    line-height: 22px;
    color: #005788;
}

.checkout-sum-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid #dce5ee;
}

.checkout-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.checkout-sum-row strong {
    font-family: var(--font-averta-semibold);
    color: #010709;
    white-space: nowrap;
}

.checkout-sum-row em {
    font-family: var(--font-averta-semibold);
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    margin-left: 8px;
}

.checkout-sum-row.is-green,
.checkout-sum-row .is-green {
    color: #039855;
}

.checkout-sum-row.is-green strong,
.checkout-sum-row .is-green strong {
    color: #039855;
}

.checkout-promo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #dce5ee;
}

.checkout-promo-label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
}

.checkout-promo-label img {
    width: 16px;
    height: 16px;
}

.checkout-promo-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 6px 6px 16px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 52px;
    background: #fff;
}

.checkout-promo-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-promo-field input::-moz-placeholder {
    color: #8c8c8c;
}

.checkout-promo-field input::placeholder {
    color: #8c8c8c;
}

.checkout-promo-field input:focus {
    outline: none;
}

.checkout-promo-field .btn-pill {
    flex-shrink: 0;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 22px;
    box-shadow: none;
}

.checkout-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #dce5ee;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a1929;
}

.checkout-total strong {
    display: block;
    font-size: 24px;
    line-height: 28px;
    color: #b33a1b;
    text-align: right;
}

.checkout-total p {
    margin: 4px 0 0;
    font-family: var(--font-averta-regular);
    font-size: 12px;
    line-height: 16px;
    font-style: italic;
    color: #0d354b;
    text-align: right;
}

.checkout-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-terms input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-terms img {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

.checkout-terms a {
    font-family: var(--font-averta-semibold);
    color: #010709;
    text-decoration: underline;
}

.checkout-terms a:hover {
    color: #005788;
}

.checkout-submit {
    width: 100%;
    min-height: 50px;
}

.checkout-trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 22px;
    color: #0a293a;
}

.checkout-trust p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkout-trust img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.checkout-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.checkout-body--success {
    display: flex;
    justify-content: center;
}

.checkout-success {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.checkout-success-illust {
    width: 200px;
    height: 200px;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.checkout-success-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    width: 100%;
}

.checkout-success-copy h1 {
    margin: 0;
    font-family: var(--font-averta-bold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
}

.checkout-success-copy p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-success-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid #dce5ee;
    font-size: 16px;
    line-height: 24px;
}

.checkout-success-row span {
    font-family: var(--font-averta-semibold);
    color: #0a1929;
    flex-shrink: 0;
}

.checkout-success-row p {
    margin: 0;
    color: #0d354b;
    text-align: right;
}

.checkout-success-pay {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.checkout-success-pay p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.checkout-success-pay-logo {
    width: 48px;
    height: 32px;
    border: 1px solid #dce5ee;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-success-pay-logo img {
    width: 33px;
    height: 21px;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.checkout-success-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.checkout-success-actions .btn-pill {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 10px 24px;
    font-size: 18px;
    line-height: 26px;
    border-radius: 52px;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

.checkout-success-actions .btn-pill--outline {
    background: #fff;
    color: #005788;
    border: 1px solid #005788;
}

.checkout-success-actions .btn-pill--outline:hover {
    color: #005788;
    background: #f4f8fc;
}

.address-modal .modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
}

.address-modal .modal-content {
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    overflow: hidden;
}

.address-modal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #dce5ee;
}

.address-modal-head h2 {
    flex: 1;
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #010709;
}

.address-modal-close {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.address-modal-close img {
    width: 18px;
    height: 18px;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.address-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 24px;
    margin: 0;
}

.address-modal-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.address-modal-label {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.address-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.address-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #dce5ee;
    border-radius: 56px;
    background: #fff;
    cursor: text;
}

.address-field>img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.address-field input,
.address-field select,
.address-field textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.address-field input::-moz-placeholder,
.address-field select::-moz-placeholder,
.address-field textarea::-moz-placeholder {
    color: #3d4a51;
}

.address-field input::placeholder,
.address-field select::placeholder,
.address-field textarea::placeholder {
    color: #3d4a51;
}

.address-field input:focus,
.address-field select:focus,
.address-field textarea:focus {
    outline: none;
}

.address-field textarea {
    resize: vertical;
    min-height: 72px;
}

.address-field--area {
    align-items: flex-start;
    min-height: 88px;
    border-radius: 16px;
}

.address-field select {
    color: #010709;
    cursor: pointer;
}

.address-field select:invalid {
    color: #3d4a51;
}

.address-field select option {
    color: #010709;
}

.address-field--select {
    position: relative;
    cursor: pointer;
    padding-right: 20px;
}

.address-field--select select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 12px 44px 12px 16px;
    border-radius: 56px;
    cursor: pointer;
    z-index: 1;
}

.address-field--select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url("../assets/checkout/icon-select.svg") center/16px 16px no-repeat;
    pointer-events: none;
    z-index: 2;
}

.address-modal-line {
    width: 100%;
    height: 1px;
    background: #e7ecf4;
}

.address-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.address-modal-row .checkout-switch {
    width: 44px;
}

.address-modal-row .checkout-switch[aria-pressed=true]::after {
    transform: translateX(20px);
}

.address-modal-submit {
    width: 100%;
    min-height: 50px;
}

.cart-page {
    background: #fff;
    color: #010709;
    overflow-x: clip;
}

.cart-page .btn-pill {
    box-shadow: none;
}

.cart-page .btn-pill:hover,
.cart-page .btn-pill:focus,
.cart-page .btn-pill:active {
    box-shadow: none;
}

.cart-body {
    background: #edf0f3;
    padding: 32px 0 64px;
}

.cart-head {
    margin-bottom: 16px;
}

.cart-head h1 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #010709;
}

.cart-head h1 span {
    color: #b33a1b;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 375px;
    gap: 24px;
    align-items: start;
}

.cart-main {
    min-width: 0;
}

.cart-panel {
    background: #fff;
    border-radius: 16px;
    overflow: visible;
}

.cart-promo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid #fcecd6;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #fdebd1 0%, #fefdf9 100%);
}

.cart-promo-copy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-promo-copy img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.cart-promo-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #4e2921;
}

.cart-promo-copy p strong {
    font-family: var(--font-averta-semibold);
    color: #b33a1b;
}

.cart-promo-bar {
    position: relative;
    height: 10px;
}

.cart-promo-bar::before {
    content: "";
    position: absolute;
    inset: 2px 0;
    border-radius: 10px;
    background: #fff;
}

.cart-promo-bar-fill {
    position: absolute;
    top: 2px;
    left: 0;
    height: 6px;
    border-radius: 10px;
    background: #d48b78;
    z-index: 1;
}

.cart-promo-bar-thumb {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    border: 2.5px solid #b33a1b;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 8px rgba(12, 68, 118, 0.2);
    z-index: 2;
}

.cart-panel-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
}

.cart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.cart-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cart-check--label {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.cart-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid #bfc2c5;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cart-check-box img {
    width: 18px;
    height: 18px;
    display: none;
}

.cart-check input:checked+.cart-check-box {
    border-color: transparent;
    background: transparent;
}

.cart-check input:checked+.cart-check-box img {
    display: block;
}

.cart-check input:focus-visible+.cart-check-box {
    outline: 2px solid rgba(0, 87, 136, 0.25);
    outline-offset: 2px;
}

.cart-clear {
    border: 0;
    padding: 0;
    background: transparent;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #b33a1b;
    cursor: pointer;
}

.cart-item {
    display: grid;
    grid-template-columns: 18px 88px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid #dce5ee;
}

.cart-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cart-item-thumb {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

.cart-item-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.cart-item-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding-left: 8px;
}

.cart-item-name {
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
    text-decoration: none;
}

.cart-item-name:hover {
    color: #005788;
}

.cart-item-scarce {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 8px;
    border-radius: 80px;
    background: rgba(179, 58, 27, 0.2);
    font-family: var(--font-averta-regular);
    font-size: 12px;
    line-height: 20px;
    color: #b33a1b;
}

.cart-item-scarce i {
    font-size: 10px;
}

.cart-item-variant {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: -moz-fit-content;
    width: fit-content;
}

.cart-item-variant.is-open {
    z-index: 5;
}

.cart-item-variant.is-open .cart-item-variant-btn i {
    transform: rotate(180deg);
}

.cart-item-variant.is-open .cart-item-variant-list {
    display: block;
}

.cart-item-variant-label {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    white-space: nowrap;
}

.cart-item-variant-picker {
    position: relative;
}

.cart-item-variant select {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.cart-item-variant-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    cursor: pointer;
}

.cart-item-variant-btn:focus {
    outline: none;
}

.cart-item-variant-btn:focus-visible {
    outline: 2px solid rgba(0, 87, 136, 0.25);
    outline-offset: 2px;
    border-radius: 4px;
}

.cart-item-variant-btn i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.cart-item-variant-list {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 112px;
    z-index: 10;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(183, 206, 218, 0.6);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 14, 28, 0.12);
}

.cart-item-variant-list li {
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cart-item-variant-list li:hover,
.cart-item-variant-list li.is-active {
    background: #005788;
    color: #ffffff;
}

.cart-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.cart-item-price {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
    white-space: nowrap;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-qty {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #dce5ee;
    border-radius: 52px;
    background: #fff;
}

.cart-qty-btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #010709;
    cursor: pointer;
}

.cart-qty-btn i {
    font-size: 12px;
    line-height: 1;
}

.cart-qty-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.cart-qty-value {
    width: 40px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-qty-value::-webkit-outer-spin-button,
.cart-qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item-remove {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cart-item-remove img {
    width: 24px;
    height: 24px;
    display: block;
}

.cart-aside {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 375px;
    max-width: 100%;
    margin-left: auto;
    position: sticky;
    top: 100px;
}

.cart-sum,
.cart-trust {
    background: #fff;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    padding: 24px 20px;
}

.cart-sum {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.cart-sum-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cart-sum-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cart-sum-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #dce5ee;
}

.cart-sum-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
}

.cart-sum-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.cart-sum-row strong {
    font-family: var(--font-averta-semibold);
    color: #010709;
    white-space: nowrap;
}

.cart-sum-row.is-green {
    color: #1c9a66;
}

.cart-sum-row.is-green strong {
    color: #1c9a66;
}

.cart-coupon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    padding: 2px 0;
    background: transparent;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    cursor: pointer;
}

.cart-coupon img {
    width: 16px;
    height: 16px;
}

.cart-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    width: 100%;
}

.cart-total>span {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a1929;
}

.cart-total strong {
    display: block;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 28px;
    color: #b33a1b;
    text-align: right;
}

.cart-total p {
    margin: 4px 0 0;
    font-family: var(--font-averta-regular);
    font-style: italic;
    font-size: 12px;
    line-height: 16px;
    color: #0d354b;
    text-align: right;
}

.cart-sum-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.cart-ship-note {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #0d354b;
}

.cart-ship-note img {
    width: 20px;
    height: 20px;
}

.cart-submit {
    gap: 8px;
    min-height: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 18px;
    line-height: 26px;
    border-radius: 52px;
}

.cart-submit img {
    width: 16px !important;
    height: 16px !important;
}

.cart-pay {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-pay>p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #3d4a51;
}

.cart-pay-logos {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-pay-logos img {
    width: 53px;
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.cart-trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-trust p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #0a293a;
}

.cart-trust p img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cart-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.terms-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #ffffff;
    border-bottom: 1px solid #dce5ee;
}

.terms-header .header-nav a {
    color: #010709;
}

.terms-header .header-nav img {
    display: block;
    filter: brightness(0);
}

.terms-header .header-user-avatar img,
.terms-header .header-user-caret {
    filter: none !important;
}

.terms-header .header-card {
    border-color: rgba(1, 7, 9, 0.14);
}

.terms-header .btn-component-white {
    background: #005788;
    color: #fff !important;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

.terms-header .btn-component-white:hover {
    background: #0a293a;
    color: #fff;
}

.terms-page {
    background: #ffffff;
    color: #010709;
}

.terms-page .container {
    max-width: 1120px;
}

.terms-hero {
    padding: 56px 0 24px;
}

.terms-hero-copy {
    text-align: center;
}

.terms-hero .breadcrumb {
    margin: 0 0 16px;
    justify-content: center;
}

.terms-hero .breadcrumb-item+.breadcrumb-item::before {
    color: #dce5ee;
    content: "/";
    padding: 0 8px;
}

.terms-hero-copy h1 {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #005788;
}

.terms-hero-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    font-style: italic;
    color: #010709;
}

.terms-content {
    padding: 0 0 88px;
}

.terms-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.terms-body p {
    margin: 0;
}

.terms-body a {
    color: #005788;
    text-decoration: none;
}

.terms-body ul {
    margin: 0;
    padding-left: 24px;
}

.terms-body li+li {
    margin-top: 8px;
}

.terms-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.terms-section h2,
.terms-section h3 {
    margin: 0;
    color: #010709;
}

.terms-section h2 {
    font-family: var(--font-averta-bold);
    font-size: 24px;
    line-height: 32px;
}

.terms-section h3 {
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
}

.terms-note strong {
    color: #005788;
}

.terms-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.terms-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
}

.terms-table th,
.terms-table td {
    padding: 12px 24px;
    border: 1px solid #ced7df;
    vertical-align: top;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
}

.terms-table th {
    font-family: var(--font-averta-semibold);
}

.terms-table td:first-child,
.terms-table th:first-child {
    width: 33%;
}

.terms-table strong {
    font-family: var(--font-averta-semibold);
    color: #005788;
}

.treatment-page {
    font-family: "Inter", system-ui, sans-serif;
    color: #1a2b49;
    background-color: #fff;
    overflow-x: hidden;
}

/* Treatment Hero */
.treatment-hero {
    position: relative;
    width: 100%;
}

.treatment-hero .treatment-hero-bg-wrap {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
}

.treatment-hero .treatment-hero-bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 41, 84, 0.4) 0%, rgba(14, 41, 84, 0.75) 100%);
}

.treatment-hero .treatment-hero-bg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.treatment-hero .treatment-hero-tag {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 2;
}

/* Treatment Intro */
.treatment-intro {
    padding: 60px 0 40px;
}

.treatment-intro .treatment-title {
    font-size: 44px;
    font-weight: 700;
    color: #0E2954;
    margin-bottom: 12px;
}

.treatment-intro .treatment-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #006BE0;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.treatment-intro .treatment-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #5A6B85;
    max-width: 840px;
    margin: 0 auto;
}

/* Treatment Pain Point */
.treatment-pain {
    padding: 60px 0;
    background: #F8FAFC;
}

.treatment-pain .treatment-pain-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #006BE0;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.treatment-pain h2 {
    font-size: 30px;
    font-weight: 700;
    color: #0E2954;
    line-height: 1.35;
    margin-bottom: 20px;
}

.treatment-pain p {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
}

.treatment-pain .treatment-pain-media img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(14, 41, 84, 0.12);
}

/* Treatment Section Title Common */
.treatment-section-title {
    font-size: 40px;
    font-weight: 700;
    color: #0E2954;
    margin-bottom: 48px;
}

/* Treatment Benefits */
.treatment-benefits {
    padding: 80px 0;
}

.treatment-benefits .treatment-benefits-box {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 48px;
    background: rgba(255, 255, 255, 0.02);
}

.treatment-benefits .treatment-benefit-card {
    padding: 20px 16px;
    margin-bottom: 24px;
}

.treatment-benefits .treatment-benefit-card .benefit-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}

.treatment-benefits .treatment-benefit-card .benefit-icon-circle img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.treatment-benefits .treatment-benefit-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.treatment-benefits .treatment-benefit-card p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.treatment-process {
    position: relative;
    padding: 80px 0;
}

.treatment-process .treatment-process-grid,
.treatment-process .treatment-process-slider {
    display: block;
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 48px 0;
    margin-bottom: 32px;
}

.treatment-process .treatment-process-grid:not(.owl-loaded) {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.treatment-process .treatment-process-grid:not(.owl-loaded)::-webkit-scrollbar {
    display: none;
}

.treatment-process .treatment-process-grid:not(.owl-loaded) .treatment-step-card {
    min-width: 25%;
    flex: 0 0 25%;
}

.treatment-process .owl-stage {
    display: flex;
}

.treatment-process .owl-item {
    float: none;
    display: flex;
}

.treatment-process .treatment-step-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 32px;
    box-sizing: border-box;
}

.treatment-process .owl-item:last-child .treatment-step-card {
    border-right: none;
}

.treatment-process .treatment-step-card .step-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.treatment-process .treatment-step-card .step-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.treatment-process .treatment-step-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.4;
}

.treatment-process .treatment-step-card p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    flex-grow: 1;
}

.treatment-process .treatment-process-progress {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.treatment-process .treatment-process-progress .progress-bar-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background: #4DBFD9;
    border-radius: 2px;
    transition: left 0.3s ease, width 0.3s ease;
}

.treatment-process .owl-nav,
.treatment-process .owl-dots {
    display: none !important;
}

/* Treatment Clinical Safety & Results */
.treatment-clinical {
    padding: 80px 0;
    background: #fff;
}

.treatment-clinical .treatment-results-slider {
    margin-bottom: 40px;
}

.treatment-clinical .treatment-results-slider .owl-dots {
    margin-top: 24px;
    text-align: center;
}

.treatment-clinical .treatment-results-slider .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #CBD5E1;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    transition: background 0.3s ease;
}

.treatment-clinical .treatment-results-slider .owl-dots .owl-dot.active span {
    background: #006BE0;
    width: 24px;
    border-radius: 5px;
}

.treatment-clinical .treatment-result-card {
    background: #F8FAFC;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
}

.treatment-clinical .treatment-result-card .result-media img {
    width: 100%;
    display: block;
}

.treatment-clinical .treatment-result-card .result-tag {
    padding: 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #0E2954;
    margin: 0;
}

.treatment-clinical .treatment-quote-box {
    background: #F1F5F9;
    border-left: 4px solid #006BE0;
    border-radius: 0 12px 12px 0;
    padding: 32px;
    margin-bottom: 60px;
}

.treatment-clinical .treatment-quote-box .quote-text {
    font-size: 18px;
    font-style: italic;
    color: #1E293B;
    line-height: 1.6;
    margin-bottom: 24px;
}

.treatment-clinical .treatment-partners {
    border-top: 1px solid #E2E8F0;
    padding-top: 40px;
}

.treatment-clinical .treatment-partners .partner-logo {
    max-height: 48px;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.treatment-clinical .treatment-partners .partner-logo:hover {
    opacity: 1;
}

/* Treatment FAQ */
.treatment-faq {
    padding: 80px 0;
    background: #F8FAFC;
}

.treatment-faq .treatment-faq-list {
    max-width: 840px;
    margin: 0 auto 40px;
}

.treatment-faq .treatment-faq-item {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.treatment-faq .treatment-faq-item .faq-question {
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #0E2954;
    cursor: pointer;
}

.treatment-faq .treatment-faq-item .faq-question .faq-num {
    color: #006BE0;
    margin-right: 8px;
}

.treatment-faq .treatment-faq-item .faq-question .faq-icon {
    transition: transform 0.3s ease;
}

.treatment-faq .treatment-faq-item.is-open {
    border-color: #006BE0;
}

.treatment-faq .treatment-faq-item.is-open .faq-question .faq-icon {
    transform: rotate(180deg);
}

.treatment-faq .treatment-faq-item .faq-answer {
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

.treatment-faq .treatment-faq-cta p {
    font-size: 16px;
    color: #64748B;
    margin-bottom: 16px;
}

/* Treatment At-Home Support Products */
.treatment-products {
    padding: 80px 0;
    background: #fff;
}

.treatment-products .treatment-products-note {
    font-size: 14px;
    color: #006BE0;
    padding: 8px 16px;
    border-radius: 20px;
}

.treatment-consult .treatment-consult-card {
    background: linear-gradient(115deg, #002B5B 0%, #001733 100%);
    border-radius: 24px;
    padding: 64px 48px;
}

.treatment-consult .consult-info {
    padding-right: 24px;
}

.treatment-consult .consult-info .consult-title {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 24px;
}

.treatment-consult .consult-info .consult-desc {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

.treatment-consult .consult-info .consult-hotline {
    font-size: 16px;
    font-weight: 600;
    color: #4DBFD9;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.treatment-consult .consult-info .consult-hotline:hover {
    color: #fff;
}

.treatment-consult .consult-form .form-group {
    margin-bottom: 16px;
}

.treatment-consult .consult-form .consult-input {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    padding: 16px 24px;
    font-size: 15px;
    width: 100%;
    transition: border-color 0.3s ease;
}

.treatment-consult .consult-form .consult-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.treatment-consult .consult-form .consult-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.treatment-consult .consult-form .consult-input:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: #4DBFD9;
    outline: none;
    box-shadow: none;
}

.treatment-consult .consult-form .consult-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    color: #fff;
    padding: 16px 24px;
    font-size: 15px;
    width: 100%;
    min-height: 110px;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.treatment-consult .consult-form .consult-textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.treatment-consult .consult-form .consult-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.treatment-consult .consult-form .consult-textarea:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: #4DBFD9;
    outline: none;
    box-shadow: none;
}

.treatment-consult .consult-form .consult-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 24px;
}

.treatment-consult .consult-form .consult-check input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #006BE0;
    cursor: pointer;
}

.treatment-consult .consult-form .consult-check label {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    cursor: pointer;
}

.treatment-consult .consult-form .consult-submit-btn {
    background: #fff;
    color: #004B88;
    border-radius: 999px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.treatment-consult .consult-form .consult-submit-btn i {
    transition: transform 0.3s ease;
}

.treatment-consult .consult-form .consult-submit-btn:hover {
    background: #4DBFD9;
    color: #fff;
}

.treatment-consult .consult-form .consult-submit-btn:hover i {
    transform: translateX(4px);
}

body:has(.cam-nang-hero) header.absolute .header-nav a {
    color: #fff;
}

body:has(.cam-nang-hero) header.absolute .header-nav img {
    filter: brightness(0) invert(1);
}

body:has(.cam-nang-hero) header.absolute .header-user-avatar img,
body:has(.cam-nang-hero) header.absolute .header-user-caret {
    filter: none !important;
}

body:has(.cam-nang-hero) header.absolute .btn-component-white {
    background: #fff;
    color: #176189 !important;
    box-shadow: 0 8px 10px rgba(77, 191, 217, 0.15);
}

body:has(.cam-nang-hero) header.absolute .btn-component-white:hover {
    background: #fff;
    color: #176189 !important;
}

.cam-nang-page {
    background: #fff;
    color: #010709;
    overflow-x: clip;
}

.cam-nang-hero {
    position: relative;
    min-height: 500px;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.cam-nang-hero-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 0;
}

.cam-nang-hero .container-home {
    position: relative;
    z-index: 2;
    width: min(100%, 85.89744vw);
    padding-top: 149px;
    padding-bottom: 64px;
}

.cam-nang-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.cam-nang-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cam-nang-hero .breadcrumb {
    margin: 0;
    justify-content: center;
}

.cam-nang-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
    content: "/";
    padding: 0 8px;
}

.cam-nang-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #c9ebff;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #005788;
}

.cam-nang-badge img {
    width: 16px;
    height: 16px;
    display: block;
}

.cam-nang-hero-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #fff;
    width: auto;
    max-width: min(640px, 100%);
}

.cam-nang-hero-sub {
    margin: 0;
    max-width: 800px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.7);
}

.cam-nang-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 540px;
    padding: 8px 8px 8px 17px;
    border: 1px solid #f0f0f0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 12px 16px rgba(13, 28, 57, 0.1), 0 2px 4px rgba(13, 28, 57, 0.04);
}

.cam-nang-search img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cam-nang-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.cam-nang-search input::-moz-placeholder {
    color: #6f767c;
}

.cam-nang-search input::placeholder {
    color: #6f767c;
}

.cam-nang-search input:focus {
    outline: none;
}

.cam-nang-search button {
    flex-shrink: 0;
    height: 40px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #005788;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    cursor: pointer;
}

.cam-nang-chips {
    border-bottom: 1px solid #e7ebf2;
    background: #fff;
    padding: 16px 0 17px;
}

.cam-nang-chips-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cam-nang-chips-inner::-webkit-scrollbar {
    display: none;
}

.cam-nang-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: #f0f0f0;
    font-family: var(--font-averta-semibold);
    font-size: 12px;
    line-height: 22px;
    text-transform: uppercase;
    color: #0a293a;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.cam-nang-chip img {
    width: 14px;
    height: 14px;
    display: block;
}

.cam-nang-chip.is-active {
    background: #005788;
    color: #fff;
}

.cam-nang-chip.is-active img {
    filter: brightness(0) invert(1);
}

.cam-nang-chip--search {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    background: #005788;
}

.cam-nang-chip--search img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.cam-nang-featured {
    padding: 32px 0 0;
}

.cam-nang-section-title {
    margin: 0 0 32px;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #005788;
}

.cam-nang-featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 17px;
    align-items: stretch;
}

.cam-nang-featured-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cam-nang-card {
    display: flex;
    align-items: stretch;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    min-height: 219px;
    color: inherit;
    transition: all 0.5s ease;
}

.cam-nang-card:hover {
    border: 1px solid #005788;
    transform: translateY(-4px);
}

.cam-nang-card.is-compact {
    border-radius: 8px;
    min-height: 162px;
}

.cam-nang-card.is-compact .cam-nang-card-media {
    width: 40%;
    max-width: 224px;
}

.cam-nang-card.is-compact .cam-nang-card-excerpt,
.cam-nang-card.is-compact hr,
.cam-nang-card.is-compact .cam-nang-card-foot {
    display: none;
}

.cam-nang-card.is-compact h3 {
    font-size: 16px;
    line-height: 24px;
}

.cam-nang-card.is-feature {
    position: relative;
    display: block;
    min-height: 517px;
    border: 0;
    border-radius: 16px;
    color: #fff;
}

.cam-nang-card.is-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 32, 59, 0) 55.26%, rgba(2, 32, 59, 0.8) 84.92%, #02203b 100%);
    pointer-events: none;
    z-index: 1;
}

.cam-nang-card.is-feature .cam-nang-card-media {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
}

.cam-nang-card.is-feature .cam-nang-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.cam-nang-card.is-feature .cam-nang-card-excerpt {
    display: none;
}

.cam-nang-card.is-feature .cam-nang-meta span:first-child,
.cam-nang-card.is-feature .cam-nang-meta span.time,
.cam-nang-card.is-feature h3,
.cam-nang-card.is-feature h3 a,
.cam-nang-card.is-feature .cam-nang-author .name,
.cam-nang-card.is-feature .cam-nang-read {
    color: #fff;
}

.cam-nang-card.is-feature .cam-nang-meta span.dot {
    background: rgba(255, 255, 255, 0.7);
}

.cam-nang-card.is-feature .cam-nang-author .role {
    color: rgba(255, 255, 255, 0.7);
}

.cam-nang-card.is-feature h3 {
    font-size: 24px;
    line-height: 32px;
}

.cam-nang-card.is-feature h3 a:hover {
    color: #fff;
}

.cam-nang-card.is-feature hr {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.cam-nang-card.is-feature .cam-nang-read img {
    filter: brightness(0) invert(1);
}

.cam-nang-card-media {
    display: block;
    flex-shrink: 0;
    width: 302px;
    overflow: hidden;
    background: #f0f0f0;
}

.cam-nang-card-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
}

.cam-nang-card-body {
    flex: 1;
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cam-nang-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cam-nang-meta span:first-child {
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: #0c4476;
}

.cam-nang-meta span.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b7ceda;
    flex-shrink: 0;
}

.cam-nang-meta span.time {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #6f767c;
}

.cam-nang-card-body h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #0a293a;
}

.cam-nang-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.cam-nang-card-body h3 a:hover {
    color: #005788;
}

.cam-nang-card-excerpt {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cam-nang-card-body hr {
    margin: 0;
    border: 0;
    border-top: 1px solid #dce5ee;
}

.cam-nang-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.cam-nang-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cam-nang-author .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #005788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-averta-bold);
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    flex-shrink: 0;
}

.cam-nang-author .name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.cam-nang-author .role {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #6b7785;
}

.cam-nang-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #176189;
    text-decoration: none;
    white-space: nowrap;
}

.cam-nang-read img {
    width: 16px;
    height: 16px;
    display: block;
}

.cam-nang-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 322px;
    gap: 30px;
    padding: 64px 0 80px;
    align-items: start;
    min-width: 0;
}

.cam-nang-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.cam-nang-main-head .cam-nang-section-title {
    margin-bottom: 0;
}

.cam-nang-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cam-nang-sort>span {
    font-family: var(--font-averta-regular);
    font-size: 17px;
    line-height: 24px;
    color: #6f767c;
}

.cam-nang-sort button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--font-averta-semibold);
    font-size: 17px;
    line-height: 24px;
    color: #010709;
    cursor: pointer;
}

.cam-nang-sort button img {
    width: 16px;
    height: 16px;
}

.cam-nang-main,
.cam-nang-posts {
    min-width: 0;
    max-width: 100%;
}

.cam-nang-posts {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cam-nang-promo {
    border-radius: 16px;
    background: #005788;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 24px;
    color: #fff;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.cam-nang-promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.cam-nang-promo-head h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #fff;
}

.cam-nang-promo-nav {
    display: flex;
    gap: 8px;
}

.cam-nang-promo-nav button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.cam-nang-promo-slider.owl-carousel {
    width: 100%;
    max-width: 100%;
}

.cam-nang-promo-slider .owl-stage-outer {
    overflow: hidden;
}

.cam-nang-promo-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

.cam-nang-promo-slider .owl-item {
    display: flex;
}

.cam-nang-promo-slider .cam-nang-promo-card {
    width: 100%;
}

.cam-nang-promo-card {
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.cam-nang-promo-card .media {
    aspect-ratio: 1;
    border-radius: 16px;
    background: #f0f0f0;
    overflow: hidden;
    margin-bottom: 12px;
}

.cam-nang-promo-card .media img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.cam-nang-promo-card .tag {
    margin: 0 0 2px;
    font-family: var(--font-averta-semibold);
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 1.71px;
    text-transform: uppercase;
    color: #6495b0;
}

.cam-nang-promo-card .name {
    margin: 0 0 2px;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
}

.cam-nang-promo-card .price {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
}

.cam-nang-promo-card:hover {
    color: #ffffff;
}

.cam-nang-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.cam-nang-pagination a,
.cam-nang-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    color: #005788;
    background: rgba(184, 226, 236, 0.4);
}

.cam-nang-pagination a.is-nav {
    border: 1px solid #005788;
    background: transparent;
    color: #005788;
}

.cam-nang-pagination .is-active {
    background: #005788;
    color: #fff;
}

.cam-nang-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cam-nang-widget-title {
    margin: 0;
    padding: 8px 0;
    border-bottom: 2px solid #4dbfd9;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #010709;
    display: inline-block;
    margin-bottom: 20px;
}

.cam-nang-product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cam-nang-product-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.cam-nang-product-item img {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    -o-object-fit: contain;
    object-fit: contain;
    background: #f0f0f0;
    flex-shrink: 0;
}

.cam-nang-product-item .name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.cam-nang-product-item .meta {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #0a293a;
}

.cam-nang-product-list hr {
    margin: 0;
    border: 0;
    border-top: 1px solid #dce5ee;
}

.cam-nang-lead {
    border-radius: 16px;
    background: #0a293a;
    padding: 24px 16px;
    color: #fff;
}

.cam-nang-lead-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.cam-nang-lead-label::before {
    content: "";
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.cam-nang-lead-label span {
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4dbfd9;
}

.cam-nang-lead h2 {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 26px;
}

.cam-nang-lead>p {
    margin: 0 0 16px;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.8);
}

.cam-nang-lead-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.cam-nang-lead-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
}

.cam-nang-lead-form input {
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(77, 191, 217, 0.5);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--font-averta-regular);
    font-size: 16px;
}

.cam-nang-lead-form input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.cam-nang-lead-form input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.cam-nang-lead-form input:focus {
    outline: none;
    border-color: #4dbfd9;
}

.cam-nang-lead-note {
    margin: 0 0 16px;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.65);
}

.cam-nang-lead .btn-pill {
    width: 100%;
}

.cam-nang-cats {
    border: 1px solid #dce5ee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.cam-nang-cats-head {
    margin: 0;
    padding: 8px 16px;
    background: #f4f8fc;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #005788;
    border: 0;
    width: 100%;
    text-align: left;
}

.cam-nang-cats-head i {
    display: none;
}

.cam-nang-cats ul {
    list-style: none;
    margin: 0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cam-nang-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
    text-decoration: none;
}

.cam-nang-cats a span {
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #94b6c9;
    flex-shrink: 0;
}

.cam-nang-cats a.is-active,
.cam-nang-cats a:hover {
    color: #005788;
}

.blog-page .container-home {
    width: 100%;
    max-width: 1560px;
}

.blog-page {
    background: #fff;
    color: #010709;
    padding-bottom: 64px;
}

.blog-layout {
    padding-top: 24px;
}

.blog-layout>[class*=col-] {
    min-width: 0;
}

.blog-main {
    min-width: 0;
}

.blog-toc {
    position: sticky;
    top: 120px;
    align-self: start;
}

.blog-toc-head {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid #4dbfd9;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #010709;
}

.blog-toc-links {
    display: block;
    padding: 24px 0 0;
}

.blog-toc-links .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-toc-links .toc-list-item {
    margin: 0;
}

.blog-toc-links .toc-link {
    display: block;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #010709;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-toc-links .toc-link:hover,
.blog-toc-links .toc-link.is-active-link {
    color: #005788;
}

.blog-article {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-header {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.blog-header-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-cat {
    font-family: var(--font-averta-semibold);
    font-size: 12px;
    line-height: 22px;
    text-transform: uppercase;
    color: #0a293a;
}

.blog-article h1 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 32px;
    line-height: 40px;
    color: #005788;
}

.blog-deck {
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid #4dbfd9;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.blog-divider {
    margin: 0;
    border: 0;
    border-top: 1px solid #dce5ee;
}

.blog-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.blog-byline-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.blog-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}

.blog-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.blog-byline-author .name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.blog-byline-author .role {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #6b7785;
}

.blog-byline-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #6f767c;
}

.blog-byline-meta i {
    margin-right: 4px;
    color: #6f767c;
}

.blog-byline-meta .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b7ceda;
    flex-shrink: 0;
}

.blog-hero {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 730/408;
    background: #f0f0f0;
}

.blog-hero img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.blog-body {
    display: flex;
    flex-direction: column;
}

.blog-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-block h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #010709;
}

.blog-block p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.blog-callout {
    padding: 16px;
    border-radius: 12px;
    background: #083761;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-callout p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.85);
}

.blog-callout strong {
    font-family: var(--font-averta-semibold);
    color: #4dbfd9;
}

.blog-callout em {
    font-style: normal;
    color: #4dbfd9;
}

.blog-callout-label {
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #4dbfd9 !important;
}

.blog-list {
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-list li {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.blog-list strong {
    font-family: var(--font-averta-semibold);
    color: #005788;
}

.blog-foot {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-tags-label {
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #6b7785;
}

.blog-tag {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 4px 12px;
    border-radius: 99px;
    border-bottom: 1px solid #4dbfd9;
    background: #e8f0f8;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #005788;
    text-decoration: none;
}

.blog-tag:hover {
    color: #005788;
    background: #dceaf5;
}

.blog-share {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-share-label {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.blog-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    color: #005788;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}

.blog-share-btn:hover {
    color: #005788;
    box-shadow: 0 2px 8px rgba(0, 87, 136, 0.15);
}

.blog-author-card {
    padding: 16px 24px 24px;
    border: 1px solid #005788;
    border-radius: 12px;
    background: #f2f8ff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-author-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-author-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #005788;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-averta-bold);
    font-size: 28px;
    line-height: 1;
    color: #4dbfd9;
    flex-shrink: 0;
}

.blog-author-card-head .label {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #0d354b;
}

.blog-author-card-head .name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
}

.blog-author-card-head .role {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #0d354b;
}

.blog-author-card-bio {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #0d354b;
    text-align: justify;
}

.blog-author-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 8px;
    border-top: 1px solid #e8eff3;
}

.blog-author-card-stats .stat {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
}

.blog-author-card-stats .label {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #0d354b;
}

.blog-author-card-link {
    align-self: flex-start;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    text-decoration: none;
    border-bottom: 1px solid #005788;
    padding-bottom: 2px;
}

.blog-author-card-link:hover {
    color: #005788;
}

.blog-page .cam-nang-lead h3 span {
    color: #4dbfd9;
}

.blog-page .cam-nang-lead-form .req {
    color: #b33a1b;
}

.blog-page .cam-nang-lead>p strong {
    color: #4dbfd9;
}

.blog-page {
    overflow-x: clip;
}

.blog-body h2 {
    margin: 0 0 8px;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #010709;
}

.blog-body h3 {
    margin: 0 0 8px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
}

.blog-body p,
.blog-body li {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.blog-body img,
.blog-body video,
.blog-body figure {
    max-width: 100%;
    height: auto;
}

.blog-body blockquote {
    border-left: 5px solid #ccc;
    font-style: italic;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.blog-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cam-nang-hero.news-hero {
    position: relative;
    overflow: hidden;
    background: none;
}

.cam-nang-hero.news-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4, 26, 52, 0) 33.37%, rgba(0, 14, 28, 0.55) 64.11%, rgba(0, 14, 28, 0.7) 71.33%, #000e1c 100%);
    z-index: 1;
    pointer-events: none;
}

.news-page .cam-nang-layout {
    padding-top: 64px;
}

.news-card .cam-nang-meta span:first-child {
    color: #0c4476;
}

.news-card .cam-nang-meta span.time {
    color: #6f767c;
}

.news-card .cam-nang-card-body {
    gap: 16px;
}

/*
.news-card .cam-nang-card-foot {
  display: none;
}

.news-card hr {
  display: none;
} */

.news-card.is-feature .cam-nang-card-body {
    gap: 12px;
}

.news-card.is-feature .cam-nang-meta span:first-child,
.news-card.is-feature .cam-nang-meta span.time,
.news-card.is-feature h3,
.news-card.is-feature h3 a {
    color: #fff;
}

.news-card.is-feature .cam-nang-meta span.dot {
    background: rgba(255, 255, 255, 0.7);
}

.news-card.is-feature .cam-nang-card-excerpt {
    display: none;
}

.news-card.is-compact .cam-nang-card-excerpt {
    display: none;
}

.news-lead .btn-pill {
    text-transform: none;
}

.news-topics {
    border: 1px solid #dce5ee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.news-topics-head {
    margin: 0;
    padding: 8px 16px;
    background: #f4f8fc;
    font-family: var(--font-averta-bold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
}

.news-topics ul {
    list-style: none;
    margin: 0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-topics a {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
    text-decoration: none;
}

.news-topics a:hover {
    color: #005788;
}

body:has(.error-hero) header.absolute .header-nav a {
    color: #fff;
}

body:has(.error-hero) header.absolute .header-nav img {
    filter: brightness(0) invert(1);
}

body:has(.error-hero) header.absolute .header-user-avatar img,
body:has(.error-hero) header.absolute .header-user-caret {
    filter: none !important;
}

body:has(.error-hero) header.absolute .btn-component-white {
    background: #fff;
    color: #176189 !important;
}

.error-page {
    background: #fff;
    color: #010709;
}

.error-hero {
    position: relative;
    overflow: hidden;
    min-height: 688px;
    background: #004B88;
}

.error-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(359deg, rgba(4, 26, 52, 0) 30.91%, rgba(0, 14, 28, 0.55) 62.26%, rgba(0, 14, 28, 0.7) 69.62%, #000E1C 98.86%);
    z-index: 1;
    pointer-events: none;
}

.error-hero-bg {
    position: relative;
    display: block;
    width: 100%;
    height: 688px;
    -o-object-fit: cover;
    object-fit: cover;
}

.error-hero .container-home {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 16px 72px;
}

.error-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.error-hero-inner h1,
.error-hero-inner p {
    margin: 0;
}

.error-hero-inner h1 {
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #fff;
}

.error-hero-inner p {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.error-hero-object {
    width: 187px;
    height: 116px;
    -o-object-fit: contain;
    object-fit: contain;
}

.error-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 800px;
    height: 56px;
    padding: 8px 8px 8px 16px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 52px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(9px);
}

.error-search i {
    color: rgba(255, 255, 255, 0.7);
}

.error-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 24px;
}

.error-search input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.error-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.error-search input:focus {
    outline: none;
}

.error-search button {
    height: 100%;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #005788;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

.error-solutions {
    padding: 64px 0;
    background: #f4f8fc;
}

.error-solutions h2 {
    margin: 0 0 40px;
    text-align: center;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #005788;
}

.error-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.error-solution-card {
    position: relative;
    display: block;
    aspect-ratio: 324/500;
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.error-solution-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.1%, rgba(0, 0, 0, 0.5) 79.2%);
}

.error-solution-card img {
    width: 100%;
    height: 100%;
    display: block;
}

.error-solution-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 16px;
}

.error-solution-copy h3,
.error-solution-copy span {
    margin: 0;
}

.error-solution-copy h3 {
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    margin-bottom: 12px;
}

.error-solution-copy span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.error-knowledge {
    padding: 32px 0 72px;
}

.error-knowledge h2 {
    margin: 0 0 40px;
    text-align: center;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #005788;
}

.error-knowledge-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.error-knowledge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.error-knowledge-progress {
    position: relative;
    height: 6px;
    border-radius: 16px;
    background: #e8eff3;
    overflow: hidden;
}

.error-knowledge-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 46.4%;
    height: 100%;
    border-radius: 16px;
    background: #005788;
}

.error-knowledge-card {
    display: flex;
    flex-direction: column;
    gap: 19.5px;
}

.error-knowledge-card .media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.error-knowledge-card img {
    width: 100%;
    aspect-ratio: 420/280;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.error-knowledge-card .copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-knowledge-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.error-knowledge-card .meta span:first-child {
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 1.71px;
    color: #005788;
}

.error-knowledge-card .meta span:last-child {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: rgba(38, 38, 38, 0.7);
}

.error-knowledge-card h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
}

.error-knowledge-card h3 a {
    color: inherit;
    text-decoration: none;
}

.error-knowledge-card .read {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #262626;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.error-connect {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: linear-gradient(180deg, #004b88 0%, #0a2e57 100%);
}

.error-connect .container-home {
    position: relative;
    z-index: 1;
    max-width: 1260px;
}

.error-connect-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.error-connect-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.error-connect-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    flex-shrink: 0;
}

.error-connect-card p,
.error-connect-card strong {
    margin: 0;
}

.error-connect-card p {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.7);
}

.error-connect-card strong {
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #eef3f1;
}

.error-connect-card.is-zalo .icon {
    background: rgba(77, 191, 217, 0.2);
}

.error-connect-card.is-hotline .icon {
    background: rgba(255, 157, 157, 0.2);
}

.error-connect-card.is-email .icon {
    background: rgba(30, 217, 147, 0.2);
}

.error-connect-card i {
    font-size: 24px;
}

.error-connect-card .footer-zalo-word {
    background: #76e5ff;
}

.error-connect-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    opacity: 0.3;
}

.error-connect-divider span {
    flex: 1;
    height: 1px;
    background: #fff;
}

.error-connect-divider p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

body:has(.hybrid-detail-hero) header.absolute .header-nav a {
    color: #fff;
}

body:has(.hybrid-detail-hero) header.absolute .header-nav img {
    filter: brightness(0) invert(1);
}

body:has(.hybrid-detail-hero) header.absolute .header-user-avatar img,
body:has(.hybrid-detail-hero) header.absolute .header-user-caret {
    filter: none !important;
}

body:has(.hybrid-detail-hero) header.absolute .btn-component-white {
    background: #fff;
    color: #176189 !important;
}

.hybrid-detail-page {
    background: #fff;
    color: #010709;
}

.hybrid-detail-hero {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    background: #0b3d70;
}

.hybrid-detail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 14, 28, 0) 72.4%, #000e1c 100%);
    pointer-events: none;
}

.hybrid-detail-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.hybrid-detail-intro {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
}

.hybrid-detail-paper {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85) url("/assets/hybrid-detail/paper-bg.png") center/cover no-repeat;
    opacity: 0.72;
    pointer-events: none;
}

.hybrid-detail-paper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #fff 50.06%);
}

.hybrid-detail-intro .container-home {
    position: relative;
    z-index: 1;
}

.treatment-intro-head {
    text-align: center;
    margin-bottom: 48px;
}

.treatment-intro-head .treatment-title {
    font-size: 48px;
    font-weight: 700;
    color: #0E2954;
    margin-bottom: 12px;
}

.treatment-intro-head .treatment-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #006BE0;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.treatment-intro-head .treatment-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #5A6B85;
    max-width: 840px;
    margin: 0 auto;
}

.treatment-pain-badge {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #006BE0;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.hybrid-detail-intro h1,
.hybrid-detail-story-head h2,
.hybrid-detail-pillars h2,
.hybrid-detail-diff-title,
.hybrid-detail-faq .contact-section-title {
    margin: 0 0 40px;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 1.3;
}

.hybrid-detail-intro h1,
.hybrid-detail-diff-title {
    text-align: center;
    color: #005788;
}

.hybrid-detail-split {
    margin-bottom: 0;
    row-gap: 32px;
}

.hybrid-detail-split.is-reverse {
    margin-top: 64px;
}

.hybrid-detail-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.hybrid-detail-copy h2,
.hybrid-detail-copy h3,
.hybrid-detail-copy p {
    margin: 0;
}

.hybrid-detail-copy h2,
.hybrid-detail-copy h3 {
    font-family: var(--font-averta-semibold);
    font-size: 32px;
    line-height: 40px;
    color: #005788;
}

.hybrid-detail-copy p {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
    text-align: justify;
}

.hybrid-detail-copy.is-light h3,
.hybrid-detail-copy.is-light p {
    color: #fff;
}

.hybrid-detail-media {
    border-radius: 16px;
    overflow: hidden;
    min-height: 422px;
}

.hybrid-detail-media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.hybrid-detail-story {
    padding: 80px 0;
    background: linear-gradient(180deg, rgba(4, 26, 52, 0) 26.56%, rgba(0, 14, 28, 0.55) 60.44%, rgba(0, 14, 28, 0.7) 68.4%, #000e1c 100%), #004b88;
}

.hybrid-detail-story-head {
    margin-bottom: 40px;
    text-align: center;
    color: #fff;
}

.hybrid-detail-story-head h2 {
    margin-bottom: 10px;
    color: #fff;
}

.hybrid-detail-story-head p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
}

.hybrid-detail-pillars {
    position: relative;
    padding: 64px 0;
    overflow: hidden;
}

.hybrid-detail-pillars-texture,
.hybrid-detail-pillars-dna {
    position: absolute;
    pointer-events: none;
}

.hybrid-detail-pillars-texture {
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.6;
}

.hybrid-detail-pillars::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(175.5deg, rgba(255, 255, 255, 0) 46%, #fff 95.5%);
    pointer-events: none;
    z-index: 1;
}

.hybrid-detail-pillars-dna {
    left: 50%;
    bottom: -206px;
    width: 2178px;
    max-width: none;
    height: 1089px;
    transform: translateX(-50%);
    -o-object-fit: cover;
    object-fit: cover;
}

.hybrid-detail-pillars .container-home {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.hybrid-detail-pillars h2 {
    margin: 0;
    text-align: right;
    color: #005788;
}

.hybrid-detail-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1066px;
    margin-left: auto;
}

.hybrid-detail-pillar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 224px;
    padding: 28px 24px 24px;
    border-radius: 16px;
    background: linear-gradient(283deg, rgba(0, 14, 28, 0.6) 0%, #004182 100%), #004B88;
    color: #fff;
}

.hybrid-detail-pillar>img {
    width: 56px;
    height: 56px;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.hybrid-detail-pillar-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hybrid-detail-pillar-copy h3,
.hybrid-detail-pillar-copy p {
    margin: 0;
}

.hybrid-detail-pillar-copy h3 {
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #fff;
}

.hybrid-detail-pillar-copy p {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.hybrid-detail-diff {
    padding: 80px 0;
}

.hybrid-detail-diff .container-home {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.hybrid-detail-diff-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.hybrid-detail-diff-block h2 {
    margin: 0;
}

.hybrid-detail-table-wrap {
    overflow-x: auto;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 30px;
}

.hybrid-detail-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.hybrid-detail-table th,
.hybrid-detail-table td {
    vertical-align: middle;
    border-right: 1px solid #dce5ee;
    border-bottom: 1px solid #dce5ee;
}

.hybrid-detail-table thead th {
    padding: 0;
    background: #fafcfd;
}

.hybrid-detail-table thead th:first-child {
    width: 300px;
    padding: 16px 24px;
    height: 80px;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #3d4a51;
    text-align: left;
}

.hybrid-detail-table tbody th {
    width: 300px;
    height: 88px;
    padding: 30px 24px;
    background: #fff;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #0a1929;
    text-align: left;
}

.hybrid-detail-table td {
    height: 88px;
    padding: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.hybrid-detail-table tr:last-child th,
.hybrid-detail-table tr:last-child td {
    border-bottom: 0;
}

.hybrid-detail-table th:last-child,
.hybrid-detail-table td:last-child {
    border-right: 0;
}

.hybrid-detail-head-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    padding: 16px 24px;
    overflow: hidden;
}

.hybrid-detail-head-card>img:first-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.hybrid-detail-head-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
}

.hybrid-detail-head-icon img {
    width: 16px;
    height: 16px;
    display: block;
}

.hybrid-detail-table .is-old .hybrid-detail-head-icon {
    background: #b33a1b;
}

.hybrid-detail-table .is-new .hybrid-detail-head-icon {
    background: linear-gradient(180deg, #0c608f 0%, #5ec6c9 100%);
}

.hybrid-detail-head-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 32px;
}

.hybrid-detail-table .is-old .hybrid-detail-head-label {
    color: #4e2921;
}

.hybrid-detail-table .is-new .hybrid-detail-head-label {
    color: #005788;
}

.hybrid-detail-table td.is-old,
.hybrid-detail-table td.is-new {
    position: relative;
    padding: 24px 24px 24px 27px;
}

.hybrid-detail-table td.is-old {
    background: #fdf8f6;
}

.hybrid-detail-table td.is-old::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(243, 204, 193, 0.35);
}

.hybrid-detail-table td.is-new {
    background: #fdf8f6;
}

.hybrid-detail-table td.is-new::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 3px;
    background: rgba(127, 212, 168, 0.35);
}

.hybrid-detail-table td.is-new::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/hybrid-detail/table-cell-new.png") center/cover no-repeat;
    opacity: 0.35;
    pointer-events: none;
}

.hybrid-detail-table td.is-new span {
    position: relative;
    z-index: 1;
}

.hybrid-detail-proof-slider .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
}

.hybrid-detail-proof-slider .owl-dots .owl-dot {
    width: 32px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: #f4f8fc !important;
}

.hybrid-detail-proof-slider .owl-dots .owl-dot span {
    display: none;
}

.hybrid-detail-proof-slider .owl-dots .owl-dot.active {
    background: #005788 !important;
}

.hybrid-detail-proof-card h3 {
    margin: 16px 0 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
}

.hybrid-detail-proof-media {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.hybrid-detail-proof-media img {
    width: 100%;
    aspect-ratio: 301/378;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.hybrid-detail-logos {
    width: 100%;
    margin-top: 30px;
}

.hybrid-detail-logo {
    width: 140px;
    height: 75px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.hybrid-detail-logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.hybrid-detail-faq {
    background-image: url("/assets/hybrid-detail/faq-bg.png");
}

.hybrid-detail-faq .contact-faq-button img {
    display: none;
}

.treatment-box {
    background: linear-gradient(0deg, rgba(4, 26, 52, 0) 26.56%, rgba(0, 14, 28, 0.55) 60.44%, rgba(0, 14, 28, 0.7) 68.4%, #000E1C 100%), #004B88;
}

/* Treatment Home Support Products (Figma 3736:10605) */
.treatment-products {
    padding: 80px 0;
    background: #fff;
}

.treatment-products .treatment-products-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
}

.treatment-products .treatment-products-head .treatment-products-note {
    font-size: 16px;
    color: #475569;
    text-align: right;
    line-height: 1.5;
}

.treatment-products .treatment-products-head .treatment-products-note strong {
    color: #006BE0;
    font-weight: 700;
}

.treatment-products .catalog-grid {
    margin-bottom: 40px;
}

.treatment-products .treatment-products-progress {
    width: 100%;
    height: 4px;
    background: rgba(0, 107, 224, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.treatment-products .treatment-products-progress .progress-bar-active {
    width: 35%;
    height: 100%;
    background: #004B88;
    border-radius: 2px;
}

.account-page {
    background: #f4f8fc;
    color: #010709;
}

.account-body {
    padding: 32px 0 64px;
}

.account-layout {
    margin: 0 -8px;
}

.account-sidebar {
    width: 100%;
    max-width: 316px;
    padding: 0 8px;
    margin-bottom: 16px;
}

.account-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    color: #fff;
    text-align: center;
}

.account-profile-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
}

.account-profile-avatar {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
}

.account-profile-avatar>img {
    display: block;
    width: 88px;
    height: 88px;
    border: 3px solid #fff;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    background: linear-gradient(180deg, #4dbfd9 0%, #005788 100%);
}

.account-profile-camera {
    position: absolute;
    right: 0;
    bottom: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #e7ecf4;
    cursor: pointer;
}

.account-profile-camera input {
    display: none;
}

.account-profile-name,
.account-profile-phone {
    position: relative;
    z-index: 1;
    margin: 0;
}

.account-profile-name {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
}

.account-profile-phone {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
}

.account-nav {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.account-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-left: 2px solid transparent;
    background: #fff;
    color: #3d4a51;
    text-decoration: none;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
}

.account-nav-item:hover {
    color: #005788;
    text-decoration: none;
}

.account-nav-item.is-active {
    border-left-color: #005788;
    background: linear-gradient(90deg, rgba(184, 226, 236, 0.4), rgba(184, 226, 236, 0.4)), #fff;
    color: #005788;
}

.account-nav-item>img:last-child {
    flex-shrink: 0;
    opacity: 0.7;
}

.account-nav-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.account-nav-left>img,
.account-nav-left .account-icon-stack,
.account-nav-left>i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
}

.account-icon-stack {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.account-icon-stack>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.account-icon-stack-lens {
    inset: auto !important;
    left: 50% !important;
    top: 52% !important;
    width: 6px !important;
    height: 5px !important;
    transform: translate(-50%, -50%);
}

.account-icon-stack-body {
    inset: auto !important;
    left: 50% !important;
    bottom: 12% !important;
    width: 14px !important;
    height: 8px !important;
    transform: translateX(-50%);
}

.account-icon-stack-dot {
    inset: auto !important;
    left: 50% !important;
    top: 28% !important;
    width: 6px !important;
    height: 6px !important;
    transform: translateX(-50%);
}

.account-icon-stack-mail {
    inset: auto !important;
    left: 50% !important;
    top: 38% !important;
    width: 17px !important;
    height: 5px !important;
    transform: translateX(-50%);
}

.account-main {
    min-width: 0;
}

.account-panel {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}

.account-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #dce5ee;
}

.account-panel-head h1 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #010709;
}

.account-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    text-decoration: underline;
    cursor: pointer;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 24px 24px 32px;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    border: 0;
    padding: 0;
    min-width: 0;
}

.account-label {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.account-label i {
    font-style: normal;
    color: #b33a1b;
}

.account-input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid rgba(183, 206, 218, 0.5);
    border-radius: 52px;
    background: #f4f8fc;
}

.account-input.is-focus,
.account-input:focus-within {
    border-color: #005788;
}

.account-input>img,
.account-input .account-icon-stack {
    flex-shrink: 0;
    opacity: 0.6;
}

.account-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.account-input input::-moz-placeholder {
    color: #6f767c;
}

.account-input input::placeholder {
    color: #6f767c;
}

.account-input input:focus {
    outline: none;
}

.account-gender .account-label {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 2px;
}

.account-radios {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 48px;
}

.account-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.account-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #262626;
    cursor: pointer;
}

.account-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.account-radio .account-radio-on {
    display: none;
}

.account-radio input:checked~.account-radio-off {
    display: none;
}

.account-radio input:checked~.account-radio-on {
    display: block;
}

.account-radio img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.orders-head h1 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #010709;
}

.orders-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 432px;
    height: 40px;
    padding: 0 4px 0 16px;
    border: 1px solid #dce5ee;
    border-radius: 40px;
    background: #fff;
}

.orders-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #010709;
}

.orders-search input::-moz-placeholder {
    color: rgba(12, 68, 118, 0.6);
}

.orders-search input::placeholder {
    color: rgba(12, 68, 118, 0.6);
}

.orders-search input:focus {
    outline: none;
}

.orders-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 32px;
    background: #005788;
    cursor: pointer;
}

.orders-search-icon {
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
}

.orders-search-lens {
    position: absolute;
    top: 12.5%;
    left: 12.5%;
    width: 14px;
    height: 14px;
}

.orders-search-handle {
    position: absolute;
    right: 12.5%;
    bottom: 12.5%;
    width: 6px;
    height: 6px;
}

.orders-tabs.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 6px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
}

.orders-tabs.nav-tabs .nav-item {
    flex: 1 0 auto;
    margin-bottom: 0;
}

.orders-tabs.nav-tabs .nav-link {
    padding: 8px 32px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: #fff;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #6f767c;
    white-space: nowrap;
    text-align: center;
}

.orders-tabs.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: #005788;
}

.orders-tabs.nav-tabs .nav-link.active {
    border-bottom-color: #005788;
    background: #fff;
    color: #005788;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-card {
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.order-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #dce5ee;
}

.order-card-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.order-card-title {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.order-card-code {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
}

.order-card-copy {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.order-card-copy img {
    display: block;
    width: 20px;
    height: 20px;
}

.order-card-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
}

.order-card-status.is-delivered {
    color: #039855;
}

.order-card-status.is-processing {
    color: #f79009;
}

.order-card-status.is-shipping {
    color: #006fdf;
}

.order-card-status.is-cancelled {
    color: #b33a1b;
}

.order-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.order-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #dce5ee;
}

.order-card-items {
    display: flex;
    flex-direction: column;
}

.order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.order-item+.order-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dce5ee;
}

.order-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.order-item-thumb {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.order-item-name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.order-item-right {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
}

.order-item-price {
    color: #010709;
    white-space: nowrap;
}

.order-item-meta {
    display: inline-flex;
    gap: 7px;
    font-family: var(--font-averta-regular);
    color: #005788;
    white-space: nowrap;
}

.order-card-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.order-card-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #005788;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    text-decoration: none;
}

.order-card-detail:hover {
    color: #005788;
    text-decoration: none;
}

.order-card-detail img {
    display: block;
    width: 16px;
    height: 16px;
}

.order-card-total {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
}

.order-card-total span {
    color: #6f767c;
}

.order-card-total strong {
    font-family: var(--font-averta-semibold);
    color: #b33a1b;
}

.order-card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    gap: 10px;
}

.order-card-actions .btn-pill--sm {
    min-width: 0;
    padding-left: 24px;
    padding-right: 24px;
}

.order-detail-layout {
    margin: 0 -8px;
}

.order-detail-main,
.order-detail-aside {
    padding: 0 8px;
}

.order-detail-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.order-detail-aside {
    width: 100%;
    max-width: 440px;
}

.order-detail-card {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}

.order-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #dce5ee;
}

.order-detail-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.order-detail-back {
    display: inline-flex;
    flex-shrink: 0;
}

.order-detail-back img {
    display: block;
    width: 24px;
    height: 24px;
    transform: scaleX(-1);
}

.order-detail-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #bfc2c5;
}

.order-eta-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.order-eta-label img {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.order-eta-date {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
}

.order-stepper {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-step {
    flex: 1;
    min-width: 0;
}

.order-step-track {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
}

.order-step-line {
    flex: 1;
    height: 2px;
    background: #dce5ee;
}

.order-step-line.is-done {
    background: #039855;
}

.order-step-line.is-empty {
    background: transparent;
}

.order-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1.5px solid #dce5ee;
    border-radius: 50%;
    background: #fff;
}

.order-step-dot img {
    display: block;
    width: 15px;
    height: 15px;
}

.order-step.is-done .order-step-dot {
    border-color: #039855;
    background: #039855;
}

.order-step-copy {
    text-align: center;
}

.order-step-name {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.order-step.is-done .order-step-name {
    color: #3d4a51;
}

.order-step-time {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.order-detail-note {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid #dce5ee;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.order-detail-contacts {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.order-detail-contact {
    flex: 1;
    min-width: 0;
    padding-right: 16px;
    border-right: 1px solid #dce5ee;
}

.order-detail-contact:last-child {
    padding-right: 0;
    border-right: 0;
}

.order-detail-contact-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.order-detail-contact-label img {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.order-detail-contact-name {
    margin: 0 0 4px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
}

.order-detail-contact-phone {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
}

.order-detail-contact-address {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.order-detail-products-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.order-detail-products {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
}

.order-item-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.order-item-link {
    border-bottom: 1px solid #005788;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
    text-decoration: none;
}

.order-item-link:hover {
    color: #005788;
    text-decoration: none;
}

.order-pay-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
    border-radius: 16px;
    background: #fff;
}

.order-pay-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #010709;
}

.order-pay-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-pay-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0d354b;
}

.order-pay-row>span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.order-pay-row strong {
    font-family: var(--font-averta-semibold);
    color: #010709;
    white-space: nowrap;
}

.order-pay-row strong.is-green {
    color: #039855;
}

.order-pay-row em {
    font-family: var(--font-averta-semibold);
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    color: #005788;
}

.order-pay-row--discount>span {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.order-pay-coupon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #039855;
}

.order-pay-coupon img {
    display: block;
    width: 16px;
    height: 16px;
}

.order-pay-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #dce5ee;
    border-bottom: 1px solid #dce5ee;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a1929;
}

.order-pay-total strong {
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 28px;
    color: #b33a1b;
    white-space: nowrap;
}

.order-pay-method-label {
    margin: 0 0 8px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #0a1929;
}

.order-pay-method-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.order-pay-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    border: 1px solid #dce5ee;
    border-radius: 4px;
    background: #fff;
}

.order-pay-method-icon img {
    display: block;
    width: 33px;
    height: 21px;
    -o-object-fit: contain;
    object-fit: contain;
}

.order-pay-buy {
    width: 100%;
}

.address-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.address-head h1 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #010709;
}

.address-list {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.address-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}

.address-item+.address-item {
    border-top: 1px solid #dce5ee;
}

.address-item-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.address-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.address-item-name {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
}

.address-item-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
}

.address-item-phone::before {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background: #dce5ee;
}

.address-item-text {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.address-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0 8px;
    border-radius: 80px;
    background: rgba(184, 226, 236, 0.4);
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #1250dc;
}

.address-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.address-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.address-action+.address-action {
    padding-left: 8px;
    border-left: 1px solid #dce5ee;
}

.address-action img {
    display: block;
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.logout-modal .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

.logout-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 32px 40px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.logout-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

.logout-modal-close img {
    display: block;
    width: 18px;
    height: 18px;
}

.logout-modal-art {
    display: block;
    width: 231px;
    max-width: 100%;
    height: auto;
}

.logout-modal-intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.logout-modal-intro h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #010709;
}

.logout-modal-intro p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #6f767c;
}

.logout-modal-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.logout-modal-actions .btn-pill {
    flex: 1;
    min-width: 0;
}

/* Review Modal */
.review-modal .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

.review-modal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.review-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f4f8;
}

.review-modal-title {
    margin: 0;
    font-family: var(--font-averta-bold);
    font-size: 20px;
    line-height: 32px;
    color: #020d12;
}

.review-modal-close {
    border: none;
    background: transparent;
    color: #020d12;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.review-modal-close:hover {
    opacity: 0.7;
}

.review-modal-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #f4f8fc;
}

.review-modal .review-product-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    -o-object-fit: cover;
    object-fit: cover;
    background: #fff;
}

.review-modal .review-product-info {
    flex: 1;
    min-width: 0;
}

.review-modal .review-product-name {
    margin: 0 0 4px;
    font-family: var(--font-averta-semibold);
    font-size: 15px;
    line-height: 22px;
    color: #020d12;
}

.review-modal .review-product-meta {
    margin: 0;
    display: flex;
    gap: 8px;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 20px;
    color: #005788;
}

.review-modal-body {
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-modal .review-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-modal .review-form-label {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 15px;
    line-height: 22px;
    color: #020d12;
}

.review-modal .review-stars-select {
    display: flex;
    gap: 8px;
}

.review-modal .review-stars-select .star-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #bfc2c5;
    transition: color 0.15s, transform 0.15s;
}

.review-modal .review-stars-select .star-btn:hover,
.review-modal .review-stars-select .star-btn.is-active {
    color: #ffc107;
}

.review-modal .review-stars-select .star-btn:active {
    transform: scale(1.15);
}

.review-modal .review-media-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.review-modal .review-media-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.review-modal .review-media-item {
    position: relative;
    width: 100px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.review-modal .review-media-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.review-modal .review-media-item .review-media-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f44336;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    padding: 0;
}

.review-modal .review-media-item .review-media-tag {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}

.review-modal .review-upload-box {
    width: 100px;
    height: 80px;
    border-radius: 8px;
    border: 1px dashed #bfc2c5;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s, background 0.2s;
}

.review-modal .review-upload-box:hover {
    border-color: #005788;
    background: #f4f8fc;
}

.review-modal .review-upload-box img {
    opacity: 0.8;
}

.review-modal .review-upload-box span {
    font-family: var(--font-averta-regular);
    font-size: 12px;
    line-height: 16px;
    color: #020d12;
}

.review-modal .review-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #dce5ee;
    background: #fff;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #020d12;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.review-modal .review-textarea::-moz-placeholder {
    color: #6f767c;
}

.review-modal .review-textarea::placeholder {
    color: #6f767c;
}

.review-modal .review-textarea:focus {
    border-color: #005788;
}

.review-modal .review-submit-btn {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 15px;
}

.team-page {
    background: #fff;
    overflow-x: hidden;
}

.team-hero {
    padding-top: 400px;
    position: relative;
    width: 100%;
    padding-bottom: 80px;
    background: linear-gradient(180deg, rgba(4, 26, 52, 0) 44.49%, rgba(0, 14, 28, 0.8) 78.44%, #000E1C 100%), linear-gradient(0deg, rgba(4, 26, 52, 0) 46.91%, rgba(0, 14, 28, 0.55) 71.4%, rgba(0, 14, 28, 0.7) 77.15%, #000E1C 100%), #004B88;
    overflow: hidden;
}

.team-hero-title {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 100px;
    width: 90%;
    text-align: center;
    font-family: var(--font-averta-extrabold);
    background: linear-gradient(180deg, #5C80A4 0%, #315775 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.team-hero-banner-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.team-hero-banner-wrapper img {
    width: 100%;
}

.team-hero-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 64px;
    align-items: flex-start;
    padding-top: 48px;
}

.team-intro-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.team-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
}

.team-breadcrumb a {
    color: #4dbfd9;
    text-decoration: none;
}

.team-breadcrumb a:hover {
    text-decoration: underline;
}

.team-breadcrumb .divider {
    color: rgba(220, 229, 238, 0.4);
}

.team-breadcrumb .active {
    color: #4dbfd9;
}

.team-intro-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #ffffff;
}

.team-intro-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
}

.team-intro-desc {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.team-intro-btn img {
    width: 16px !important;
    height: 16px !important;
}

.team-section-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #005788;
    text-align: center;
}

.team-section-title.is-light {
    color: #ffffff;
}

.team-process {
    padding: 80px 0;
    background: linear-gradient(180deg, #001730 0%, #004b88 50%, #001730 100%);
}

.team-process-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 40px 0;
}

.team-process-tab {
    position: relative;
    min-height: 48px;
    padding: 12px 28px;
    border: 0;
    border-radius: 99px;
    background: rgba(245, 248, 253, 0.1);
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-process-tab.is-active {
    background: #ffffff;
    color: #005788;
    box-shadow: 0 2px 10px rgba(30, 115, 190, 0.5);
}

.team-process-tab-caret {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 20px;
    height: 10px;
    transform: translateX(-50%);
    pointer-events: none;
}

.team-process-tab.is-active .team-process-tab-caret {
    display: block;
}

.team-process-panel[hidden] {
    display: none;
}

.team-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.team-process-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 376px;
    overflow: hidden;
    border: 1px solid rgba(220, 229, 238, 0.2);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.team-process-card-media {
    flex-shrink: 0;
    height: 200px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.team-process-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.team-process-card-body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 24px 24px 20px;
    color: #ffffff;
}

.team-process-card-body h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

.team-process-card-copy {
    flex: 1;
    min-height: 0;
    max-height: 96px;
    overflow: hidden;
}

.team-process-card-copy.is-scroll {
    overflow-y: auto;
    padding-right: 8px;
}

.team-process-card-copy.is-scroll::-webkit-scrollbar {
    width: 5px;
}

.team-process-card-copy.is-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
}

.team-process-card-copy.is-scroll::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 16px;
}

.team-process-card-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
}

.team-process-card-badge {
    position: absolute;
    top: -32px;
    right: 24px;
    width: 56px;
    height: 64px;
    pointer-events: none;
    z-index: 2;
}

.team-roster {
    padding: 64px 0;
    background: #ffffff;
}

.team-roster .team-section-title {
    margin-bottom: 48px;
}

.team-member {
    display: grid;
    grid-template-columns: 443px minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid #dce5ee;
}

.team-member:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.team-member-photo {
    position: relative;
    width: 100%;
    max-width: 443px;
    height: 520px;
    overflow: hidden;
    border-radius: 0;
}

.team-member-photo img {
    display: block;
    width: 100%;
    height: auto;
    /*-o-object-fit: cover;*/
    /*object-fit: cover;*/
    /*-o-object-position: center top;*/
    /*object-position: center top;*/
}

.team-member-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    padding: 12px 0;
}

.team-member-quote {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-member-quote img {
    display: block;
    width: 40px;
    height: 32px;
}

.team-member-quote p {
    margin: 0;
    font-family: var(--font-averta-bold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
}

.team-member-proofs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-member-proofs li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #010709;
}

.team-member-proofs li img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.team-member-proofs li strong {
    font-family: var(--font-averta-semibold);
    color: #010709;
}

.team-member-foot {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid #dce5ee;
}

.team-member-id {
    flex: 1;
    min-width: 0;
}

.team-member-id h3 {
    margin: 0 0 4px;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #005788;
}

.team-member-id p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #3d4a51;
}

.team-member-social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.team-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #005788;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.team-social img {
    display: block;
    width: 40px;
    height: 40px;
}

.team-social:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.team-member-body .btn-pill {
    width: -moz-fit-content;
    width: fit-content;
}

.team-member-body .btn-pill img {
    display: block;
    width: 16px !important;
    height: 16px !important;
}

.team-consult {
    padding: 64px 0 80px;

    background: linear-gradient(134deg, #004B88 3.42%, #041A34 64.94%);
}

.team-consult-card {
    display: grid;
    grid-template-columns: minmax(0, 488px) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    padding: 64px 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 32px;
    background: linear-gradient(175deg, rgb(0, 75, 136) 0%, rgb(4, 26, 52) 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.team-consult-copy {
    color: #ffffff;
}

.team-consult-copy h2 {
    margin: 0 0 16px;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
}

.team-consult-copy p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    opacity: 0.85;
}

.team-consult-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.team-consult-input,
.team-consult-textarea,
.team-consult-select select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    transition: border-color 0.2s ease;
}

.team-consult-input::-moz-placeholder,
.team-consult-textarea::-moz-placeholder,
.team-consult-select select::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.team-consult-input::placeholder,
.team-consult-textarea::placeholder,
.team-consult-select select::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.team-consult-input:focus,
.team-consult-textarea:focus,
.team-consult-select select:focus {
    outline: none;
    border-color: #4dbfd9;
}

.team-consult-input {
    height: 56px;
    padding: 12px 24px;
    border-radius: 52px;
}

.team-consult-textarea {
    min-height: 88px;
    padding: 12px 20px;
    border-radius: 16px;
    resize: vertical;
}

.team-consult-select {
    position: relative;
    display: block;
    margin: 0;
}

.team-consult-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 56px;
    padding: 12px 44px 12px 24px;
    border-radius: 52px;
    cursor: pointer;
}

.team-consult-select select option {
    background: #041a34;
    color: #ffffff;
}

.team-consult-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url("../assets/team/arrow-white.svg") center/12px 12px no-repeat;
    transform-origin: center;
    rotate: 90deg;
    pointer-events: none;
}

.team-consult-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 0;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    cursor: pointer;
}

.team-consult-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.team-consult-check strong {
    font-family: var(--font-averta-semibold);
}

.team-consult-check-box {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: transparent;
    transition: all 0.2s ease;
}

.team-consult-check-box img {
    display: none;
    width: 14px;
    height: 14px;
}

.team-consult-check input:checked+.team-consult-check-box {
    background: #4dbfd9;
    border-color: #4dbfd9;
}

.team-consult-check input:checked+.team-consult-check-box img {
    display: block;
}

.team-consult-submit {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 8px;
    padding: 10px 24px;
    border: 0;
    border-radius: 40px;
    background: #ffffff;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-consult-submit img {
    display: block;
    width: 16px;
    height: 16px;
}

.team-consult-submit:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.ep-page {
    background: #fff;
    overflow-x: clip;
}

.ep-box {
    margin-top: 60px;
}

.ep-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #005788;
    text-align: center;
}

.ep-title.is-light {
    color: #ffffff;
}

.ep-hero {
    position: relative;
    width: 100%;
    min-height: 688px;
    padding: 100px 0 0;
    background: linear-gradient(0deg, rgba(4, 26, 52, 0) 33%, rgba(0, 14, 28, 0.55) 64%, rgba(0, 14, 28, 0.7) 71%, #000e1c 100%), #004b88;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.ep-hero:has(.ep-hero-bg) {
    padding: 0;
    min-height: 0;
    align-items: stretch;
}

.ep-hero-bg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
}

.ep-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 740px) minmax(0, 1fr);
    gap: 20px;
    align-items: flex-end;
    position: relative;
}

.ep-hero-content {
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding-bottom: 56px;
}

.ep-hero-headings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ep-hero-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
}

.ep-hero-subtitle {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 28px;
    line-height: 36px;
    color: rgba(255, 255, 255, 0.7);
}

.ep-hero-stats {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    max-width: 720px;
}

.ep-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ep-hero-stat-num {
    font-family: var(--font-averta-bold);
    font-size: 24px;
    line-height: 32px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #fff1c4 0%, #ffffff 51%, #fff1c4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.ep-hero-stat-label {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.8);
    word-break: keep-all;
}

.ep-hero-divider {
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
}

.ep-breadcrumb {
    padding: 20px 0 0;
    background: #fff;
}

.ep-breadcrumb a {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 20px;
    color: #718096;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ep-breadcrumb a:hover {
    color: #005788;
}

.ep-breadcrumb .divider {
    margin: 0 8px;
    color: #a0aec0;
}

.ep-breadcrumb .active {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 20px;
    color: #1a202c;
}

.ep-hero-btn {
    width: -moz-fit-content;
    width: fit-content;
}

.ep-hero-btn img {
    width: 16px !important;
    height: 16px !important;
}

.ep-hero-visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-right: -40px;
}

.ep-hero-photo {
    display: block;
    width: 100%;
    max-width: 492px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 15px 30px rgba(0, 14, 28, 0.4));
}

.ep-hero-badge {
    position: absolute;
    left: -70px;
    bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}

.ep-hero-badge-prefix {
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.07em;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ep-hero-badge-name {
    margin: 0;
    font-family: Inter, sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 34px;
    line-height: 42px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.ep-hero-badge-title {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(94, 225, 255, 0.7) 0%, rgba(94, 225, 255, 0) 100%);
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ep-story {
    padding: 64px 0 80px;
    background: #fff;
}

.ep-story .ep-title {
    text-align: left;
    margin-bottom: 40px;
}

.ep-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.ep-story-visual {
    position: relative;
    min-height: 480px;
    padding-bottom: 48px;
}

.ep-story-photo {
    overflow: hidden;
    border-radius: 16px;
    height: 432px;
    background: linear-gradient(180deg, #002e70 0%, #98c6f9 100%);
}

.ep-story-photo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-story-quote {
    position: absolute;
    right: -30px;
    bottom: 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 396px;
    max-width: 90%;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border: 6px solid #ffffff;
    border-radius: 16px;
    background: linear-gradient(180deg, #061c37 0%, #1e73be 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.ep-story-quote img {
    flex-shrink: 0;
    width: 25px;
    height: 20px;
    opacity: 0.5;
    margin-top: 2px;
}

.ep-story-quote p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: left;
}

.ep-story-copy {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    padding-left: 32px;
}

.ep-story-years {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.ep-story-years-num {
    margin: 0;
    font-family: var(--font-averta-extrabold);
    font-size: 164px;
    line-height: 132px;
    background: url("../assets/expert-linh/twenty-bg.jpg") center 45%/cover no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.ep-story-years-label {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #005788;
}

.ep-story-text {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.ep-fields {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.ep-fields .container {
    position: relative;
    z-index: 1;
}

.ep-fields-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ep-fields-bg img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-fields-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #004b88 0%, rgba(0, 75, 136, 0) 57%);
}

.ep-fields .ep-title {
    margin-bottom: 40px;
}

.ep-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 24px;
    width: 100%;
}

.ep-field-card {
    position: relative;
    overflow: hidden;
    height: 296px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.ep-field-card:hover .ep-field-card-bg {
    transform: scale(1.05);
}

.ep-field-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ep-field-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-end;
    padding: 32px 24px;
    background: linear-gradient(75deg, rgb(1, 32, 95) 13%, rgba(1, 32, 95, 0.2) 77%, rgba(1, 32, 95, 0) 94%);
}

.ep-field-card-body h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.ep-field-num {
    font-family: var(--font-averta-extrabold);
    font-size: 40px;
    line-height: 42px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #45ddff;
}

.ep-achieve {
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}

.ep-achieve-head {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.ep-achieve-head img {
    width: 64px;
    height: 64px;
}

.ep-achieve-head .ep-title {
    margin: 0;
}

.ep-achieve-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.ep-achieve-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ep-achieve-media {
    overflow: hidden;
    border-radius: 12px;
}

.ep-achieve-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 370 / 232;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-achieve-item p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.ep-achieve-track {
    display: none;
}

.ep-press {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    overflow: hidden;
    max-width: 100%;
    border: 1px solid #ffffff;
    border-radius: 32px;
    background: linear-gradient(-74deg, rgba(4, 26, 52, 0.95) 29%, rgba(4, 26, 52, 0.285) 100%);
}

.ep-award {
    position: relative;
    min-height: 532px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.ep-award-bg,
.ep-award-trophy {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-award-trophy {
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center bottom;
    object-position: center bottom;
}

.ep-award-logo {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 79px;
    height: 79px;
    transform: translateX(-50%);
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-award-foot {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.ep-award-foot p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 14px;
    line-height: 22px;
    color: #0a293a;
    text-align: center;
    text-transform: uppercase;
}

.ep-award-stars {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ep-press-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    min-height: 532px;
    min-width: 0;
    width: 100%;
    padding: 32px 80px;
}

.ep-press-body h2 {
    margin: 0;
    width: 100%;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}

.ep-press-slider {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ep-press-slider .owl-stage-outer {
    width: 100%;
}

.ep-press-slider .owl-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.ep-press-slider .owl-dots .owl-dot {
    width: 32px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6) !important;
}

.ep-press-slider .owl-dots .owl-dot span {
    display: none;
}

.ep-press-slider .owl-dots .owl-dot.active {
    background: #005788 !important;
}

.ep-press-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ep-press-card p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.ep-press-media {
    overflow: hidden;
    height: 324px;
    border: 1px solid #dce5ee;
    border-radius: 12px;
}

.ep-press-media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-testimonials {
    padding: 64px 0;
}

.ep-testimonials .ep-title {
    margin-bottom: 40px;
}

.ep-test-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ep-test-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    background: #fafcfd;
}

.ep-test-card p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #0a293a;
}

.ep-test-card hr {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid #dce5ee;
}

.ep-test-stars {
    display: block;
    width: 103px;
    height: 16px;
}

.ep-test-author {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ep-test-author img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-test-author strong {
    display: block;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #005788;
}

.ep-test-author span {
    display: block;
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 22px;
    color: #6f767c;
}

.ep-gallery {
    padding: 0 0 64px;
}

.ep-gallery .ep-title {
    margin-bottom: 40px;
}

.ep-gallery-grid {
    display: grid;
    grid-template-columns: minmax(0, 580px) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    height: 446px;
}

.ep-gallery-main,
.ep-gallery-item,
.ep-gallery-more {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(12, 68, 118, 0.25);
    cursor: pointer;
}

.ep-gallery-main img,
.ep-gallery-item img,
.ep-gallery-more img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ep-gallery-main {
    height: 100%;
}

.ep-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.ep-gallery-item,
.ep-gallery-more {
    flex: 1;
    min-height: 0;
}

.ep-gallery-more {
    position: relative;
    display: block;
    text-decoration: none;
}

.ep-gallery-more-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(29, 42, 92, 0.5);
    backdrop-filter: blur(1px);
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.ep-consult {
    padding: 64px 0;
    background: linear-gradient(154deg, #004b88 3.4%, #041a34 65%);
}

.ep-consult-card {
    display: flex;
    gap: 64px;
    padding: 48px;
    overflow: hidden;
    border: 1px solid #ffffff;
    border-radius: 32px;
    background: linear-gradient(-75deg, rgba(4, 26, 52, 0.95) 29%, rgba(4, 26, 52, 0.285) 100%), linear-gradient(155deg, #004b88 3.4%, #041a34 65%);
}

.ep-consult-aside {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    width: 544px;
    max-width: 100%;
}

.ep-consult-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    color: #ffffff;
}

.ep-consult-copy h2 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 32px;
    line-height: 40px;
}

.ep-consult-copy>p {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
}

.ep-consult-connect {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.ep-consult-label {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ep-consult-label span {
    width: 14px;
    height: 1.5px;
    background: #ffffff;
}

.ep-consult-label strong {
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-transform: uppercase;
}

.ep-consult-social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ep-social {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-decoration: none;
}

.ep-social:hover {
    opacity: 0.9;
}

.ep-social-ring {
    position: absolute;
    inset: 0;
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.ep-social-fb {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 20px;
}

.ep-social-li {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
}

.ep-social-zalo {
    position: relative;
    z-index: 1;
    display: block;
    width: 32px;
    height: 12px;
    background: #ffffff;
    -webkit-mask: url("/assets/team/zalo-mask.png") center/contain no-repeat;
    mask: url("/assets/team/zalo-mask.png") center/contain no-repeat;
}

.ep-consult-photo {
    position: relative;
    flex: 1 0 0;
    width: 100%;
    max-width: 294px;
    min-height: 0;
    overflow: hidden;
    aspect-ratio: 294/362;
    border-radius: 16px;
}

.ep-consult-photo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
}

.ep-consult-form {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    min-width: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 20px 20px rgba(12, 68, 118, 0.18)) drop-shadow(0 4px 6px rgba(12, 68, 118, 0.08));
}

.ep-consult-form h3 {
    margin: 0;
    width: 100%;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
}

.ep-consult-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ep-process {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    margin-top: 80px;
}

.ep-process .ep-title {
    margin: 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.ep-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}

.ep-process-step {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    padding: 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-top: 60px;
    padding-bottom: 60px;
}

.ep-process-step:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.ep-process-step h3 {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}

.ep-process-icon {
    display: block;
    width: 56px;
    height: 56px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.ep-results {
    padding: 80px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50%);
}

.ep-results .ep-title {
    margin-bottom: 40px;
}

.ep-results-slider .owl-stage {
    display: flex;
}

.ep-results-slider .owl-item {
    display: flex;
}

.ep-results-slider .owl-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.ep-results-slider .owl-dots .owl-dot {
    width: 32px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: rgba(0, 87, 136, 0.25) !important;
}

.ep-results-slider .owl-dots .owl-dot span {
    display: none;
}

.ep-results-slider .owl-dots .owl-dot.active {
    background: #005788 !important;
}

.ep-results-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ep-results-card p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #005788;
}

.ep-results-media {
    overflow: hidden;
    height: 378px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

.ep-results-media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
}

.ep-hero-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 622px;
    width: 100%;
}

.ep-hero-stats-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}

.ep-hero-stat-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ep-hero-stat-col .ep-hero-stat-num {
    font-family: var(--font-averta-bold);
    font-size: 18px;
    line-height: 26px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FFF1C4 0%, #FFFFFF 51%, #FFF1C4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    white-space: nowrap;
}

.ep-hero-stat-col .ep-hero-stat-label {
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.ep-hero-stat-divider {
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
}

.ep-hero-photo--beth {
    max-width: 537px;
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 30%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        #000 30%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        transparent 100%
    );
}

.cta-backtotop a{
    background: #005788;
    color:#fff;
}

.cta-backtotop{
    transform: rotate(180deg);
   display: none;
    transition: all 0.5s;
}
.cta-backtotop.is-show {
    display: flex;
}

.ep-philosophy {
    padding: 64px 0;
}

.ep-philosophy .ep-title {
    text-align: center;
    color: #005788;
    margin-bottom: 0;
}

.ep-philosophy-card {
    position: relative;
    max-width: 1260px;
    margin: 40px auto 0;
    padding: 56px 64px;
    border: 6px solid #ffffff;
    border-radius: 400px;
    overflow: hidden;
    background: #061c37;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

.ep-philosophy-card-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.ep-philosophy-card-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.ep-philosophy-card-shade {
    position: absolute;
    inset: 0;
    background: rgba(6, 28, 55, 0.5);
    border-radius: inherit;
}

.ep-philosophy-quote-icon {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 48px;
    display: block;
}

.ep-philosophy-text {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    font-family: var(--font-averta-semibold);
    font-style: italic;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    text-align: center;
    overflow-wrap: break-word;
}

.ep-philosophy-author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

.ep-philosophy-author .line {
    display: inline-block;
    width: 14px;
    height: 2px;
    background: #d9d9d9;
    flex-shrink: 0;
}

.ep-philosophy-author .name {
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    white-space: nowrap;
}

.ep-achieve-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #004B88 0%, #001730 100%);
}

.ep-achieve-section .ep-title {
    text-align: center;
    margin-bottom: 0;
}

.ep-achieve-section .ep-title.is-light {
    color: #ffffff;
}

.ep-achieve-row {
    margin-top: 48px;
    margin-bottom: 80px;
    align-items: stretch;
}

.ep-achieve-col-wrap {
    display: flex;
    flex-direction: column;
}

.ep-achieve-col {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    height: 100%;
    position: relative;
}

.ep-achieve-col::before,
.ep-achieve-col::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(178, 203, 231, 0.2);
}

.ep-achieve-col img {
    width: 72px;
    height: 72px;
    -o-object-fit: contain;
    object-fit: contain;
}

.ep-achieve-col p {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
}

.ep-consult-card {
    max-width: 1260px;
    margin: 0 auto;
    padding: 64px 48px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(-37deg, rgba(4, 26, 52, 0.95) 7%, rgba(4, 26, 52, 0.35) 100%), linear-gradient(175deg, rgb(0, 75, 136) 0%, rgb(4, 26, 52) 100%);
    display: grid;
    grid-template-columns: minmax(0, 544px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    box-shadow: 0px 20px 40px -16px rgba(12, 68, 118, 0.18);
}

.ep-consult-card-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ep-consult-card-headings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ep-consult-card-headings .ep-consult-card-title {
    margin: 0;
    font-family: var(--font-averta-semibold);
    font-size: 40px;
    line-height: 48px;
    color: #ffffff;
}

.ep-consult-card-headings .ep-consult-card-quote {
    margin: 0;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.ep-consult-card-connect {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ep-consult-card-connect .ep-consult-card-connect-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-averta-semibold);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
}

.ep-consult-card-connect .ep-consult-card-connect-label .divider-line {
    display: inline-block;
    width: 14px;
    height: 1.5px;
    background: #ffffff;
}

.ep-consult-card-connect .ep-consult-card-socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ep-consult-card-connect .ep-consult-card-socials .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.ep-consult-card-connect .ep-consult-card-socials .social-link:hover {
    transform: scale(1.1);
}

.ep-consult-card-connect .ep-consult-card-socials .social-link img {
    width: 40px;
    height: 40px;
}

.ep-consult-card-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ep-consult-card-form .form-group {
    margin-bottom: 0;
}

.ep-consult-card-form .pill-input {
    height: 56px;
    border-radius: 52px;
    border: 1px solid #ffffff;
    background: transparent;
    padding: 0 24px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    color: #ffffff;
}

.ep-consult-card-form .pill-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ep-consult-card-form .pill-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ep-consult-card-form .pill-input:focus {
    outline: none;
    border-color: #4DBFD9;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    color: #ffffff;
}

.ep-consult-card-form .rounded-textarea {
    border-radius: 16px;
    border: 1px solid #ffffff;
    background: transparent;
    padding: 12px 20px;
    font-family: var(--font-averta-regular);
    font-size: 16px;
    color: #ffffff;
    resize: none;
}

.ep-consult-card-form .rounded-textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ep-consult-card-form .rounded-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ep-consult-card-form .rounded-textarea:focus {
    outline: none;
    border-color: #4DBFD9;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    color: #ffffff;
}

.ep-consult-card-form .custom-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin-bottom: 8px;
}

.ep-consult-card-form .custom-checkbox-label input {
    display: none;
}

.ep-consult-card-form .custom-checkbox-label .custom-checkbox-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ffffff;
    background: transparent;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.ep-consult-card-form .custom-checkbox-label input:checked+.custom-checkbox-box {
    background: #4DBFD9;
    border-color: #4DBFD9;
}

.ep-consult-card-form .custom-checkbox-label input:checked+.custom-checkbox-box::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.ep-consult-card-form .custom-checkbox-label .custom-checkbox-text {
    font-family: var(--font-averta-regular);
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
}

.ep-consult-card-form .submit-btn {
    height: 48px;
    background: #ffffff;
    color: #005788;
    font-family: var(--font-averta-semibold);
    font-size: 18px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ep-consult-card-form .submit-btn:hover {
    background: #E6F4FF;
    transform: translateY(-2px);
}

.b2b-auth-body {
    background-color: #faf8f3;
    min-height: 100vh;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0c0c0c;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.b2b-auth-container {
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.b2b-auth-container>.row {
    min-height: 100vh;
    margin: 0;
}

.field-toggle-btn {
    border: 0;
    background: none;
    color: #007fda;
}

.b2b-remember {
    gap: 5px;
}

.b2b-hero {
    min-height: 100vh;
    background: linear-gradient(170deg, #001e40 0%, #002f65 45%, #004287 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 64px 40px 64px !important;
    color: #ffffff;
    overflow: hidden;
}

.b2b-hero__pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 15% 20%, rgba(77, 191, 217, 0.15) 0%, transparent 40%), radial-gradient(circle at 85% 75%, rgba(0, 127, 218, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.b2b-hero__grid-bg {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-size: 32px 32px;
    background-image: linear-gradient(to right, #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px);
    pointer-events: none;
    z-index: 1;
}

.b2b-hero__top {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.b2b-hero__top .hero-logo {
    display: inline-block;
}

.b2b-hero__top .hero-logo img {
    height: 48px;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.b2b-hero__center {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: auto 0;
    padding: 24px 0;
}

.b2b-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    margin-bottom: 24px;
}

.b2b-hero__badge .badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4dbfd9;
    font-size: 16px;
}

.b2b-hero__badge .badge-text {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.b2b-hero__title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: -1.5px;
}

.b2b-hero__title span {
    display: block;
    font-style: italic;
    color: #4DBFD9;
}

.b2b-hero__subtitle {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 620px;
    white-space: pre-line;
}

.b2b-hero__bottom {
    position: relative;
    z-index: 2;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 24px;
    flex-shrink: 0;
}

.b2b-hero .b2b-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 15px;
}

.b2b-hero .b2b-stat__value {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.b2b-hero .b2b-stat__label {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.75);
}

.b2b-hero .b2b-benefits-title {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin-bottom: 16px;
}

.b2b-hero .b2b-benefits-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.b2b-hero .b2b-benefit-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 130px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.b2b-hero .b2b-benefit-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 32px;
    background-color: #4dbfd9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    flex-shrink: 0;
}

.b2b-hero .b2b-benefit-card__icon img {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
}

.b2b-hero .b2b-benefit-card__text {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
    color: #fff;
    margin: 0;
}

.b2b-panel {
    min-height: 100vh;
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 64px !important;
}

.b2b-panel__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.b2b-panel .b2b-lang {
    position: relative;
}

.b2b-panel .b2b-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0c0c0c;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.b2b-panel .b2b-lang__btn:hover {
    border-color: #005788;
    background-color: #f8fafc;
}

.b2b-panel .b2b-lang__btn .lang-globe {
    display: flex;
    align-items: center;
    color: #005788;
    font-size: 15px;
}

.b2b-panel .b2b-lang__btn .lang-chevron {
    display: flex;
    align-items: center;
    color: #595959;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.b2b-panel .b2b-lang.show .lang-chevron {
    transform: rotate(180deg);
}

.b2b-panel .b2b-lang__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    min-width: 150px;
    padding: 6px;
    z-index: 100;
    display: none;
}

.b2b-panel .b2b-lang__menu.show {
    display: block;
    animation: dropdownFade 0.2s ease;
}

.b2b-panel .b2b-lang__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.b2b-panel .b2b-lang__item:hover {
    background: #f1f5f9;
    color: #005788;
}

.b2b-panel .b2b-lang__item.active {
    background: #e8eff3;
    color: #005788;
    font-weight: 600;
}

.b2b-panel__content {
    max-width: 480px;
    width: 100%;
    margin: auto;
    padding: 16px 0;
}

.b2b-panel .b2b-step-bars {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.b2b-panel .b2b-step-bars .step-bar-item {
    flex: 1;
    height: 5px;
    border-radius: 16px;
    background-color: #dbdfe7;
}

.b2b-panel .b2b-step-bars .step-bar-item.active {
    background-color: #005788;
}

.b2b-panel .b2b-step-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #8c8c8c;
    margin-bottom: 24px;
}

.b2b-panel__intro {
    margin-bottom: 24px;
}

.b2b-panel__intro .intro-title {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: #0d354b;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.b2b-panel__intro .intro-subtitle {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #3d4a51;
    margin: 0;
}

.b2b-panel .b2b-register-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.b2b-panel .b2b-register-cards .register-card-option {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 98px;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: #ffffff;
    margin: 0;
}

.b2b-panel .b2b-register-cards .register-card-option input[type=radio] {
    display: none;
}

.b2b-panel .b2b-register-cards .register-card-option .card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.b2b-panel .b2b-register-cards .register-card-option .card-top-row .card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #005788;
}

.b2b-panel .b2b-register-cards .register-card-option .card-top-row .card-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #dce5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: all 0.2s ease;
}

.b2b-panel .b2b-register-cards .register-card-option .card-title {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #0a1f4d;
    margin: 8px 0 0 0;
}

.b2b-panel .b2b-register-cards .register-card-option.active,
.b2b-panel .b2b-register-cards .register-card-option:has(input[type=radio]:checked) {
    border-color: #007fda;
    background-color: #f4f9fd;
}

.b2b-panel .b2b-register-cards .register-card-option.active .card-top-row .card-check,
.b2b-panel .b2b-register-cards .register-card-option:has(input[type=radio]:checked) .card-top-row .card-check {
    background-color: #005788;
    border-color: #005788;
    color: #ffffff;
}

.b2b-panel__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.b2b-panel .b2b-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}

.b2b-panel .b2b-field__label {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #0a293a;
    margin: 0;
}

.b2b-panel .b2b-field__label span {
    color: #e53e3e;
}

.b2b-panel .b2b-field__input-wrap {
    display: flex;
    align-items: center;
    height: 48px;
    background: #ffffff;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    padding: 0 14px;
    gap: 10px;
    transition: all 0.2s ease;
}

.b2b-panel .b2b-field__input-wrap:focus-within {
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.12);
}

.b2b-panel .b2b-field__input-wrap .field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6495b0;
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
}

.b2b-panel .b2b-field__input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #0c0c0c;
    outline: none;
    height: 100%;
    width: 100%;
}

.b2b-panel .b2b-field__input-wrap input::-moz-placeholder {
    color: #6f767c;
    font-weight: 400;
}

.b2b-panel .b2b-field__input-wrap input::placeholder {
    color: #6f767c;
    font-weight: 400;
}

.b2b-panel .b2b-field__hint {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #4581a1;
    margin: 4px 0 0 0;
}

.b2b-panel .b2b-submit-btn {
    height: 48px;
    width: 100%;
    background-color: #005788;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 87, 136, 0.2);
    margin-top: 6px;
}

.b2b-panel .b2b-submit-btn i {
    font-size: 13px;
}

.b2b-panel .b2b-submit-btn:hover {
    background-color: #0a293a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(10, 41, 58, 0.25);
}

.b2b-panel .b2b-submit-btn:active {
    transform: translateY(0);
}

.b2b-panel .b2b-change-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #007fda;
    text-decoration: none;
    margin-top: 8px;
    transition: color 0.15s ease;
}

.b2b-panel .b2b-change-phone:hover {
    color: #005788;
    text-decoration: underline;
}

.b2b-panel .b2b-otp-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0;
}

.b2b-panel .b2b-otp-box {
    flex: 1;
    max-width: 64px;
    height: 64px;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    background: #ffffff;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #0a293a;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.b2b-panel .b2b-otp-box:focus {
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.15);
}

.b2b-panel .b2b-otp-box.filled {
    border-color: #005788;
}

.b2b-panel .b2b-role-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.b2b-panel .b2b-role-group__label {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #0a293a;
    margin: 0;
}

.b2b-panel .b2b-role-group__label span {
    color: #e53e3e;
}

.b2b-panel .b2b-role-group__options {
    display: flex;
    align-items: center;
    gap: 24px;
}

.b2b-panel .b2b-role-group__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin: 0;
}

.b2b-panel .b2b-role-group__option input[type=radio] {
    display: none;
}

.b2b-panel .b2b-role-group__option .custom-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #dce5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.b2b-panel .b2b-role-group__option .custom-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #005788;
    display: none;
}

.b2b-panel .b2b-role-group__option input[type=radio]:checked+.custom-radio {
    border-color: #005788;
}

.b2b-panel .b2b-role-group__option input[type=radio]:checked+.custom-radio::after {
    display: block;
}

.b2b-panel .b2b-role-group__option .option-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b2b-panel .b2b-role-group__option .option-content .option-icon {
    color: #007fda;
    font-size: 16px;
}

.b2b-panel .b2b-role-group__option .option-content .option-text {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #0a293a;
}

.b2b-panel .b2b-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.b2b-panel .b2b-btn-row .b2b-btn-prev {
    height: 48px;
    flex: 1;
    background: #ffffff;
    border: 1px solid #dce5ee;
    border-radius: 8px;
    color: #0a293a;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.b2b-panel .b2b-btn-row .b2b-btn-prev:hover {
    background-color: #f8fafc;
    border-color: #005788;
    color: #005788;
}

.b2b-panel .b2b-btn-row .b2b-submit-btn {
    flex: 1;
    margin-top: 0;
}

.b2b-panel .b2b-notice-box {
    background: #f0f7fb;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0;
}

.b2b-panel .b2b-notice-box__icon {
    color: #005788;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.b2b-panel .b2b-notice-box__text {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #1e293b;
    margin: 0;
}

.b2b-panel .b2b-notice-box__text strong {
    font-weight: 600;
    color: #0a293a;
}

.b2b-panel .b2b-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin: 0;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item input[type=checkbox] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item .custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #dce5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: transparent;
    font-size: 11px;
    transition: all 0.15s ease;
    margin-top: 2px;
    flex-shrink: 0;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item input[type=checkbox]:checked+.custom-checkbox {
    background-color: #005788;
    border-color: #005788;
    color: #ffffff;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item .checkbox-label {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #3d4a51;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item .checkbox-label a {
    color: #005788;
    font-weight: 600;
    text-decoration: none;
}

.b2b-panel .b2b-checkbox-group .b2b-checkbox-item .checkbox-label a:hover {
    text-decoration: underline;
}

.b2b-panel .b2b-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 24px 0 20px 0;
}

.b2b-panel .b2b-resend-prompt {
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #0c0c0c;
    margin: 0;
}

.b2b-panel .b2b-resend-prompt span {
    display: block;
}

.b2b-panel .b2b-resend-prompt a {
    font-weight: 600;
    color: #005788;
    text-decoration: none;
}

.b2b-panel .b2b-resend-prompt a:hover {
    text-decoration: underline;
    color: #0a293a;
}

.b2b-panel .b2b-register-prompt {
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #0c0c0c;
    margin: 0;
}

.b2b-panel .b2b-register-prompt a {
    font-weight: 600;
    color: #005788;
    text-decoration: none;
    margin-left: 4px;
}

.b2b-panel .b2b-register-prompt a:hover {
    text-decoration: underline;
    color: #0a293a;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.b2b-dashboard-body {
    background-color: #f4f6f9;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0c0c0c;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.b2b-dashboard-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.b2b-sidebar {
    width: 264px;
    min-width: 264px;
    background: var(--linear, linear-gradient(0deg, rgba(0, 29, 60, 0) 60.54%, rgba(0, 29, 60, 0.55) 78.74%, rgba(0, 29, 60, 0.7) 83.02%, #001D3C 100%), #002F65);
    box-shadow: 2px 0 40px 0 rgba(39, 71, 146, 0.1);
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 16px 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease;
}

.b2b-sidebar::-webkit-scrollbar {
    width: 4px;
}

.b2b-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.b2b-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.b2b-sidebar__top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.b2b-sidebar__brand {
    padding: 4px 8px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.b2b-sidebar__brand img {
    height: 38px;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.b2b-sidebar__balance-box {
    gap: 12px;
    padding: 4px 6px;
}

.b2b-sidebar__balance-box .balance-icon {
    width: 32px;
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.b2b-sidebar__balance {
    border-radius: 14px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.b2b-sidebar__balance .balance-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.3;
}

.b2b-sidebar__balance .balance-amount {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.b2b-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.b2b-sidebar__nav .sidebar-section-title {
    margin-top: 8px;
}

.b2b-sidebar__nav .sidebar-section-title:first-child {
    margin-top: 0;
}

.b2b-sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: all 0.15s ease;
    opacity: 0.85;
    border-left: 2px solid transparent;
}

.b2b-sidebar__link .nav-icon {
    font-size: 16px;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.b2b-sidebar__link .nav-icon img {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.b2b-sidebar__link .sidebar-nav__name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.b2b-sidebar__link .nav-arrow {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.b2b-sidebar__link[aria-expanded=true] .nav-arrow {
    transform: rotate(180deg);
}

.b2b-sidebar__link .sidebar-badge {
    background-color: #FF0000;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.b2b-sidebar__link:hover {
    border-radius: 8px;
    border-left: 2px solid #2F7FD1;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

.b2b-sidebar__link.active {
    border-radius: 8px;
    border-left: 2px solid #2F7FD1;
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    color: #fff;
}

.b2b-sidebar__submenu .submenu-list {
    list-style: none;
    padding: 4px 0 4px 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.b2b-sidebar__submenu .submenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 22px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.b2b-sidebar__submenu .submenu-link .submenu-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.b2b-sidebar__submenu .submenu-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.b2b-sidebar__submenu .submenu-link:hover .submenu-dot {
    background-color: #2F7FD1;
}

.b2b-sidebar__submenu .submenu-link.active {
    color: #ffffff;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
}

.b2b-sidebar__submenu .submenu-link.active .submenu-dot {
    background-color: #2F7FD1;
}

.b2b-sidebar__footer-cta {
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #FF0000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), rgba(255, 0, 0, 0.7);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.b2b-sidebar__footer-cta:hover {
    filter: brightness(1.1);
    text-decoration: none;
    color: #fff;
    transform: translateY(-1px);
}

.b2b-sidebar__footer-cta .cta-icon-img {
    width: 34px;
    height: 34px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.b2b-sidebar__footer-cta .cta-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.b2b-sidebar__footer-cta .cta-content {
    flex: 1;
    min-width: 0;
}

.b2b-sidebar__footer-cta .cta-content .cta-title {
    font-weight: 700;
    font-size: 13px;
    margin: 0;
    color: #fff;
    line-height: 1.2;
}

.b2b-sidebar__footer-cta .cta-content .cta-sub {
    font-size: 10.5px;
    color: #f3c5c5;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b2b-sidebar__footer-cta .cta-arrow {
    font-size: 11px;
    color: #fff;
    margin-left: 2px;
    flex-shrink: 0;
}

.sidebar-group {
    color: #4581A1;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 12px 4px 12px;
    display: block;
    margin: 0;
}

.sidebar-nav__name {
    width: 100%;
}

.total-number {
    font-size: 16px;
    font-weight: 700;
    color: #006394;
}

.growth {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 10px;
    background: #e4f7ec;
    color: #16a34a;
    font-size: 8px;
    font-weight: 600;
}

.chart-filters {
    display: flex;
    gap: 6px;
}

.chart-filters select {
    height: 26px;
    padding: 0 25px 0 8px;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    background-color: #fff;
    color: #374151;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.chart-filters select:hover {
    border-color: #b9c2cc;
}

.chart-filters select:focus {
    border-color: #006394;
}

/* Legend */
.chart-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2px;
    margin-bottom: 2px;
    font-size: 9px;
    color: #555;
}

.legend-dot {
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    background: #05618d;
}

/* Chart */
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.b2b-main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.b2b-topbar {
    height: 64px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.b2b-topbar__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.b2b-topbar__left .b2b-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #1e293b;
    cursor: pointer;
    padding: 0;
}

.b2b-topbar__left .topbar-welcome {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #0a293a;
    margin: 0;
}

.b2b-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.b2b-topbar .btn-b2b-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #005788;
    background: transparent;
    color: #005788;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.b2b-topbar .btn-b2b-outline:hover {
    background-color: rgba(0, 87, 136, 0.08);
    color: #005788;
    text-decoration: none;
}

.b2b-topbar .btn-b2b-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background: #005788;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.b2b-topbar .btn-b2b-primary:hover {
    background-color: #0a293a;
    color: #ffffff;
    text-decoration: none;
}

.b2b-topbar .topbar-bell {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.b2b-topbar .topbar-bell:hover,
.b2b-topbar .topbar-notifications.show .topbar-bell {
    background: #f8fafc;
    border-color: #d0d5dd;
    color: #005788;
}

.b2b-topbar .topbar-bell .bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.b2b-topbar .topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.b2b-topbar .topbar-user .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #005788;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.b2b-topbar .topbar-user .user-info {
    display: flex;
    flex-direction: column;
}

.b2b-topbar .topbar-user .user-info .user-name {
    font-size: 13px;
    font-weight: 600;
    color: #0a293a;
    line-height: 16px;
}

.b2b-topbar .topbar-user .user-info .user-role {
    font-size: 11px;
    color: #64748b;
    border-radius: 99px;
    background: #EEE5FB;
    display: flex;
    height: 18px;
    padding: 3px 8px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: -moz-max-content;
    width: max-content;
    margin-top: 5px;
}

.b2b-content,
.b2b-history-page,
.b2b-history-main,
.b2b-dashboard-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 24px 32px;
}

.b2b-page-header {
    margin-bottom: 24px;
}

.b2b-page-header .b2b-page-title {
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.33;
    color: #1D2A5C;
    margin: 0;
}

.b2b-page-header .b2b-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.b2b-page-header .b2b-date-filter {
    gap: 12px;
}

.b2b-page-header .b2b-date-filter .date-filter-label {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D2A5C;
    white-space: nowrap;
}

.b2b-page-header .b2b-date-filter .date-range-picker {
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap {
    position: relative;
    width: 219px;
    height: 100%;
    display: flex;
    align-items: center;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap:first-child {
    border-right: 1px solid #E7EBF2;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap .date-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 8px 36px 8px 16px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: #1D2A5C;
    outline: none;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap .date-input::-moz-placeholder {
    color: #8C8C8C;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap .date-input::placeholder {
    color: #8C8C8C;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap .date-input:focus {
    background: #F8FAFC;
}

.b2b-page-header .b2b-date-filter .date-range-picker .date-input-wrap .date-icon {
    position: absolute;
    right: 14px;
    pointer-events: none;
    color: #005788;
    font-size: 16px;
}

.b2b-affiliate-hero-wrap {
    background: linear-gradient(90deg, #0182C3 0%, #004267 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.hero-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    height: 100%;
}

.hero-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    width: -moz-fit-content;
    width: fit-content;
}

.hero-banner__badge i {
    font-size: 14px;
    color: #ffffff;
}

.hero-banner__title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
}

.hero-banner__sub {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.hero-commission {
    background: linear-gradient(135deg, #BCF0F2 0%, #EEFDFD 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

.hero-commission__label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #0D354B;
    margin: 0;
}

.hero-commission__value {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: #057E8F;
    margin: 0;
}

.hero-commission__growth {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #3D4A51;
    margin: 0;
}

.hero-commission__growth .growth-pct {
    color: #038B5C;
    font-weight: 600;
}

.hero-commission__payout {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #3D4A51;
    margin: 0;
}

.metric-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.metric-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-card__info .metric-title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #0D354B;
    margin: 0;
}

.metric-card__info .metric-value {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    color: #020D12;
    margin: 0;
}

.metric-card__info .metric-sub {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #6F767C;
    margin: 0;
}

.metric-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.metric-card__icon--blue {
    background-color: #E6EEF8;
    color: #005788;
}

.metric-card__icon--amber {
    background-color: #FFF1CC;
    color: #D97706;
}

.metric-card__icon--green {
    background-color: #DEF6EC;
    color: #059669;
}

.metric-card--ruby {
    background: linear-gradient(135deg, #B8202D 0%, #E53945 100%);
    color: #ffffff;
}

.metric-card--ruby .metric-card__info .metric-title {
    color: #ffffff;
}

.metric-card--ruby .metric-card__info .metric-value {
    color: #F9D177;
}

.metric-card--ruby .metric-card__info .metric-sub {
    color: #ffffff;
}

.metric-card--ruby .metric-card__icon {
    background-color: #FFF1CC;
    color: #D97706;
}

.b2b-referral-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.b2b-referral-card .card-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-referral-card .card-title-wrap .card-icon-title {
    color: #005788;
    font-size: 18px;
}

.b2b-referral-card .card-title-wrap .card-title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1D2A5C;
    margin: 0;
}

.b2b-referral-card .ref-badge-gold {
    padding: 4px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #F8BA16 0%, #D97706 100%);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.b2b-referral-card .ref-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.b2b-referral-card .ref-field__label {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #020D12;
    margin: 0;
}

.b2b-referral-card .ref-field__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b2b-referral-card .ref-field__input-box {
    flex: 1;
    height: 48px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
}

.b2b-referral-card .ref-field__input-box input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    outline: none;
    color: #0A293A;
}

.b2b-referral-card .ref-field__input-box input.ref-code-val {
    font-weight: 600;
    font-size: 16px;
}

.b2b-referral-card .ref-field__input-box input.ref-link-val {
    font-weight: 500;
    font-size: 14px;
}

.b2b-referral-card .ref-field__btn-action {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #005788;
    border: none;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.b2b-referral-card .ref-field__btn-action:hover {
    background: #004267;
}

.b2b-referral-card .step-item {
    background: #F5F6F8;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
}

.b2b-referral-card .step-item .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E53945;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b2b-referral-card .step-item .step-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.b2b-referral-card .step-item .step-content .step-title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    margin: 0;
}

.b2b-referral-card .step-item .step-content .step-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #2A3B5B;
    margin: 0;
}

.b2b-referral-card .step-item .step-content .step-desc--muted {
    color: #595959;
}

.b2b-bank-wallet-card {
    background: #FFFDF8;
    background: linear-gradient(145deg, #FFFDF8 0%, #FFF8E7 100%);
    border: 1px solid #F6E6C2;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.b2b-bank-wallet-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(248, 186, 22, 0.15) 0%, rgba(248, 186, 22, 0) 70%);
    bottom: -40px;
    right: -40px;
    pointer-events: none;
}

.b2b-bank-wallet-card .bank-wallet-label {
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #785600;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.b2b-bank-wallet-card .bank-wallet-bank-name {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0A293A;
    margin: 0;
}

.b2b-bank-wallet-card .btn-bank-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1D2A5C;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.b2b-bank-wallet-card .btn-bank-edit:hover {
    background: #0D1636;
    color: #FFFFFF;
}

.b2b-bank-wallet-card .bank-wallet-val {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A293A;
    line-height: 1.3;
}

.b2b-bank-wallet-card .btn-copy-stk-badge {
    background: #FFF3D6;
    border: 1px solid #EED8A1;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #785600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
}

.b2b-bank-wallet-card .btn-copy-stk-badge:hover {
    background: #F8BA16;
    color: #FFFFFF;
    border-color: #F8BA16;
}

.b2b-bank-wallet-card .bank-wallet-divider {
    height: 1px;
    background: #F0E2C0;
    margin: 12px 0;
}

.b2b-bank-wallet-card .bank-wallet-balance {
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0A293A;
    margin: 0;
}

.b2b-referral-link-card {
    background: linear-gradient(135deg, #02234e 0%, #003777 50%, #0a4f9d 100%), #02234e;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: 100%;*/
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 47, 101, 0.15);
}

.b2b-referral-link-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 127, 209, 0.25) 0%, rgba(47, 127, 209, 0) 70%);
    top: -60px;
    right: -60px;
    pointer-events: none;
}

.b2b-referral-link-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 79, 157, 0.3) 0%, rgba(10, 79, 157, 0) 70%);
    bottom: -60px;
    left: -60px;
    pointer-events: none;
}

.b2b-referral-link-card .ref-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.b2b-referral-link-card .ref-head .ref-head-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    flex-shrink: 0;
}

.b2b-referral-link-card .ref-head .ref-head-txt .ref-title {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.b2b-referral-link-card .ref-head .ref-head-txt .ref-sub {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 2px 0 0;
    line-height: 1.3;
}

.b2b-referral-link-card .ref-code-row {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.b2b-referral-link-card .ref-code-row .ref-code-lbl {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.b2b-referral-link-card .ref-code-row .ref-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b2b-referral-link-card .ref-code-row .ref-input-group .ref-input-val {
    flex: 1;
    height: 46px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 0 14px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b2b-referral-link-card .ref-code-row .ref-input-group .ref-input-val.ref-code-bold {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.b2b-referral-link-card .ref-code-row .ref-input-group .ref-action-btn {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.b2b-referral-link-card .ref-code-row .ref-input-group .ref-action-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.b2b-referral-link-card .ref-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    margin: 4px 0 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    z-index: 1;
}

.b2b-referral-link-card .ref-stats .ref-stat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.b2b-referral-link-card .ref-stats .ref-stat-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.b2b-referral-link-card .ref-stats .ref-stat-col .ref-stat-v {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.b2b-referral-link-card .ref-stats .ref-stat-col .ref-stat-v--green {
    color: #7FD4A8;
}

.b2b-referral-link-card .ref-stats .ref-stat-col .ref-stat-v--gold {
    color: #F2C94C;
}

.b2b-referral-link-card .ref-stats .ref-stat-col .ref-stat-l {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.3px;
}

.b2b-referral-link-card .ref-btn-share {
    background: #ffffff;
    color: #005788;
    border: none;
    border-radius: 8px;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.b2b-referral-link-card .ref-btn-share:hover {
    background: #f0f6fc;
    color: #00426b;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.b2b-bank-gold-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF5CD 100%);
    border: 1px solid #F8BA16;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.b2b-bank-gold-card .bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(104, 78, 9, 0.15);
}

.b2b-bank-gold-card .bank-header .bank-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #684E09;
    margin: 0 0 4px 0;
}

.b2b-bank-gold-card .bank-header .bank-name {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #121212;
    margin: 0;
}

.b2b-bank-gold-card .bank-header .btn-edit-bank {
    background: #1D2A5C;
    color: #F8BA16;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.b2b-bank-gold-card .bank-header .btn-edit-bank:hover {
    opacity: 0.9;
    color: #F8BA16;
    text-decoration: none;
}

.b2b-bank-gold-card .bank-account-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgba(104, 78, 9, 0.15);
    gap: 16px;
}

.b2b-bank-gold-card .bank-account-info .info-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b2b-bank-gold-card .bank-account-info .info-col .col-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #684E09;
    text-transform: uppercase;
    margin: 0;
}

.b2b-bank-gold-card .bank-account-info .info-col .acc-num-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.b2b-bank-gold-card .bank-account-info .info-col .acc-num-wrap .acc-num {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #121212;
    margin: 0;
}

.b2b-bank-gold-card .bank-account-info .info-col .acc-num-wrap .btn-copy-gold {
    background: #FFF1CC;
    border: 1px solid #F8BA16;
    border-radius: 6px;
    padding: 3px 8px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #684E09;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.b2b-bank-gold-card .bank-account-info .info-col .acc-num-wrap .btn-copy-gold:hover {
    background: #ffe399;
}

.b2b-bank-gold-card .bank-account-info .info-col .acc-name {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #121212;
    margin: 0;
}

.b2b-bank-gold-card .bank-balance-row {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b2b-bank-gold-card .bank-balance-row .balance-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #684E09;
    margin: 0;
}

.b2b-bank-gold-card .bank-balance-row .balance-amount {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #121212;
    margin: 0;
}

.b2b-table-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.b2b-table-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.b2b-table-card__top .table-title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #121212;
    margin: 0;
}

.b2b-table-card__filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.b2b-table-card__filters .search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    background: #F5F6F8;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 14px;
    gap: 10px;
    transition: border-color 0.15s ease;
}

.b2b-table-card__filters .search-wrap input {
    border: none;
    background: transparent;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    outline: none;
    width: 170px;
    color: #1F2937;
}

.b2b-table-card__filters .search-wrap input::-moz-placeholder {
    color: #4B5563;
}

.b2b-table-card__filters .search-wrap input::placeholder {
    color: #4B5563;
}

.b2b-table-card__filters .search-wrap i {
    color: #6B7280;
    font-size: 13px;
}

.b2b-table-card__filters .search-wrap:focus-within {
    border-color: #2F7FD1;
}

.b2b-table-card__filters .filter-select {
    height: 40px;
    background-color: #F5F6F8;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 32px 0 14px;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: #1F2937;
    outline: none;
    cursor: pointer;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.15s ease;
}

.b2b-table-card__filters .filter-select:focus {
    border-color: #2F7FD1;
}

.b2b-table-card__filters .btn-view-all {
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #005788;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.b2b-table-card__filters .btn-view-all:hover {
    background: #004369;
    color: #ffffff;
    text-decoration: none;
}

.b2b-table-card .table-responsive {
    margin: 0;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.b2b-table-card .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar-track {
    background: #F1F4F9;
    border-radius: 4px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.b2b-table-card .b2b-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.b2b-table-card .b2b-table thead th {
    background-color: #EBF2F7;
    color: #1D2A5C;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 13px;
    border: none;
    padding: 14px 16px;
    white-space: nowrap;
    letter-spacing: 0.2px;
    vertical-align: middle;
}

.b2b-table-card .b2b-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-top: 1px solid #F1F5F9;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #111827;
}

.b2b-table-card .b2b-table .stt-cell {
    color: #111827;
    font-size: 14px;
    font-weight: 500;
}

.b2b-table-card .b2b-table .order-code {
    font-weight: 600;
    color: #111827;
}

.b2b-table-card .b2b-table .product-cell .product-name {
    font-weight: 500;
    color: #111827;
    display: block;
    line-height: 1.4;
    width: max-content;
}

.b2b-table-card .b2b-table .product-cell .product-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #005788;
    text-decoration: none;
    margin-top: 4px;
    font-weight: 500;
}

.b2b-table-card .b2b-table .product-cell .product-toggle-btn i {
    font-size: 11px;
}

.b2b-table-card .b2b-table .product-cell .product-toggle-btn:hover {
    text-decoration: underline;
}

.b2b-table-card .b2b-table .customer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 0;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge--orange {
    background-color: #FA8C16;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge--green {
    background-color: #52C41A;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge--red {
    background-color: #F5222D;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge--blue {
    background-color: #1890FF;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge--purple {
    background-color: #722ED1;
}

.b2b-table-card .b2b-table .customer-cell .avatar-badge--dark {
    background-color: #1F2937;
}

.b2b-table-card .b2b-table .customer-cell .customer-meta .cust-name {
    font-weight: 500;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

.b2b-table-card .b2b-table .customer-cell .customer-meta .cust-phone {
    font-size: 13px;
    color: #4B5563;
    margin: 2px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.b2b-table-card .b2b-table .customer-cell .customer-meta .cust-phone i {
    font-size: 11px;
    color: #111827;
}

.b2b-table-card .b2b-table .order-amount {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: #111827;
}

.b2b-table-card .b2b-table .order-commission {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    color: #16A34A;
}

.b2b-table-card .b2b-table .order-commission--muted {
    color: #6B7280;
}

.b2b-table-card .b2b-table .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.b2b-table-card .b2b-table .status-pill i {
    font-size: 12px;
}

.b2b-table-card .b2b-table .status-pill--processing {
    background-color: #FFF7E6;
    color: #D46B08;
}

.b2b-table-card .b2b-table .status-pill--completed {
    background-color: #F6FFED;
    color: #389E0D;
}

.b2b-table-card .b2b-table .status-pill--shipping {
    background-color: #E6F7FF;
    color: #096DD9;
}

.b2b-table-card .b2b-table .status-pill--cancelled {
    background-color: #FFF1F0;
    color: #CF1322;
}

.b2b-table-card .b2b-table .status-pill--rejected {
    background-color: #FFF1F0;
    color: #CF1322;
}

.b2b-table-card .b2b-table .btn-action-eye {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #EBF6FF;
    border: none;
    color: #005788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.b2b-table-card .b2b-table .btn-action-eye:hover {
    background: #005788;
    color: #ffffff;
}

.b2b-report-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.b2b-report-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.b2b-report-card__header .card-title {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0C1E28;
    margin: 0;
}

.b2b-report-card__header .card-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-report-card__header .card-select-filter {
    background-color: #F5F6F8;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 6px 28px 6px 12px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1F2937;
    outline: none;
    cursor: pointer;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s ease;
}

.b2b-report-card__header .card-select-filter:focus {
    border-color: #2F7FD1;
}

.b2b-report-card__donut-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 10px auto 20px auto;
}

.b2b-report-card__donut-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.b2b-report-card__donut-wrap .donut-center-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    width: 133px;
    height: 133px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.b2b-report-card__donut-wrap .donut-center-info .center-val {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #005788;
    line-height: 1.1;
}

.b2b-report-card__donut-wrap .donut-center-info .center-lbl {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6F767C;
    margin-top: 2px;
}

.b2b-report-card__legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-top: auto;
}

.b2b-report-card__legend-grid .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
}

.b2b-report-card__legend-grid .legend-item .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.b2b-report-card__legend-grid .legend-item .legend-dot--blue {
    background-color: #0066FF;
}

.b2b-report-card__legend-grid .legend-item .legend-dot--orange {
    background-color: #FF7A00;
}

.b2b-report-card__legend-grid .legend-item .legend-dot--green {
    background-color: #66CC99;
}

.b2b-report-card__legend-grid .legend-item .legend-dot--grey {
    background-color: #E2E6EC;
}

.b2b-report-card__legend-grid .legend-item .legend-label {
    color: #4B5563;
    font-weight: 400;
}

.b2b-report-card__legend-grid .legend-item .legend-val {
    color: #111827;
    font-weight: 600;
    margin-left: auto;
}

.b2b-report-card__bars-wrap {
    display: flex;
    flex-direction: column;
    height: 290px;
    overflow-y: auto;
    padding-right: 6px;
}

.b2b-report-card__bars-wrap::-webkit-scrollbar {
    width: 4px;
}

.b2b-report-card__bars-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.b2b-report-card__bars-wrap::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}

.b2b-report-card__bars-wrap .bar-item {
    margin-bottom: 12px;
}

.b2b-report-card__bars-wrap .bar-item .bar-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0C1E28;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b2b-report-card__bars-wrap .bar-item .bar-track-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-report-card__bars-wrap .bar-item .bar-track-wrap .bar-fill {
    height: 18px;
    background-color: #005788;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.b2b-report-card__bars-wrap .bar-item .bar-track-wrap .bar-num {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #005788;
    width: 120px;
}

.chart-total {
    display: flex;
    gap: 30px;
}

.b2b-report-card__axis-scale {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #E5E7EB;
    margin-top: auto;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: #9CA3AF;
}

.b2b-report-card__products-list {
    display: flex;
    flex-direction: column;
    height: 320px;
    overflow-y: auto;
    padding-right: 6px;
}

.b2b-report-card__products-list::-webkit-scrollbar {
    width: 4px;
}

.b2b-report-card__products-list::-webkit-scrollbar-track {
    background: transparent;
}

.b2b-report-card__products-list::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}

.b2b-report-card__products-list .rank-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
}

.b2b-report-card__products-list .rank-product-item:last-child {
    border-bottom: none;
}

.b2b-report-card__products-list .rank-product-item .rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1D2A5C;
    flex-shrink: 0;
}

.b2b-report-card__products-list .rank-product-item .rank-badge--1 {
    background-color: #F8BA16;
}

.b2b-report-card__products-list .rank-product-item .rank-badge--2 {
    background-color: #FCDF94;
}

.b2b-report-card__products-list .rank-product-item .rank-badge--3 {
    background-color: #FFF1CC;
}

.b2b-report-card__products-list .rank-product-item .rank-badge--default {
    background-color: #E7EBF2;
    font-weight: 600;
}

.b2b-report-card__products-list .rank-product-item .prod-details {
    flex: 1;
    min-width: 0;
}

.b2b-report-card__products-list .rank-product-item .prod-details .prod-title {
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b2b-report-card__products-list .rank-product-item .prod-details .prod-price {
    font-family: "Roboto", sans-serif;
    font-size: 12.5px;
    color: #6B7280;
    margin: 0;
}

.b2b-report-card__products-list .rank-product-item .prod-sales {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    margin-left: 8px;
}

.b2b-profile-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.b2b-profile-sidebar {
    width: 360px;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.b2b-profile-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.b2b-profile-user-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E7EBF2;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.b2b-profile-user-card .user-card-banner {
    height: 84px;
    background: linear-gradient(135deg, #005788 0%, #002845 100%);
    position: relative;
}

.b2b-profile-user-card .user-card-banner .rank-ribbon-badge {
    position: absolute;
    top: 0;
    right: 16px;
    width: 34px;
    height: 46px;
    background: url("../assets/dai-ly/Badge-1.png") no-repeat center/contain;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #005788;
    line-height: 1;
    padding-top: 6px;
    padding-right: 3px;
    padding-left: 0;
    z-index: 2;
}

.b2b-profile-user-card .user-card-avatar-wrap {
    margin-top: -50px;
    position: relative;
    display: inline-block;
}

.b2b-profile-user-card .user-card-avatar-wrap .user-card-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
    border: 4px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
}

.b2b-profile-user-card .user-card-avatar-wrap .avatar-online-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #22C55E;
    border: 3px solid #FFFFFF;
}

.b2b-profile-user-card .user-card-info {
    padding: 12px 20px 20px 20px;
}

.b2b-profile-user-card .user-card-info .user-name {
    font-size: 20px;
    font-weight: 700;
    color: #1D2A5C;
    margin: 0 0 4px 0;
}

.b2b-profile-user-card .user-card-info .user-meta {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 12px 0;
}

.b2b-profile-user-card .user-card-info .user-meta .meta-id {
    font-weight: 600;
    color: #4B5563;
}

.b2b-profile-user-card .user-card-info .user-commission-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 20px;
    background: #CF1322;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
}

.b2b-profile-user-card .user-card-info .user-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #E7EBF2;
    padding-top: 16px;
}

.b2b-profile-user-card .user-card-info .user-stats-row .stat-col {
    flex: 1;
    text-align: center;
}

.b2b-profile-user-card .user-card-info .user-stats-row .stat-col:not(:last-child) {
    border-right: 1px solid #E7EBF2;
}

.b2b-profile-user-card .user-card-info .user-stats-row .stat-col .stat-num {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1D2A5C;
    line-height: 1.2;
}

.b2b-profile-user-card .user-card-info .user-stats-row .stat-col .stat-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #8C8C8C;
    text-transform: uppercase;
    margin-top: 4px;
}

.b2b-profile-mini-card {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E7EBF2;
    padding: 18px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.b2b-profile-mini-card .mini-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1D2A5C;
    margin: 0 0 14px 0;
}

.b2b-profile-mini-card .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #1D2A5C;
    margin-bottom: 12px;
}

.b2b-profile-mini-card .contact-item i {
    width: 16px;
    color: #005788;
    font-size: 15px;
}

.b2b-profile-mini-card .contact-item:last-child {
    margin-bottom: 0;
}

.b2b-profile-mini-card .contact-divider {
    height: 1px;
    background: #E7EBF2;
    margin: 14px 0;
}

.b2b-profile-mini-card .btn-change-password {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #D92D20;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.b2b-profile-mini-card .btn-change-password:hover {
    opacity: 0.8;
    text-decoration: none;
}

.b2b-profile-mini-card .staff-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.b2b-profile-mini-card .staff-row .staff-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FA8C16;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b2b-profile-mini-card .staff-row .staff-meta .staff-name {
    font-size: 14px;
    font-weight: 600;
    color: #1D2A5C;
    margin: 0 0 2px 0;
}

.b2b-profile-mini-card .staff-row .staff-meta .staff-phone {
    font-size: 13px;
    color: #005788;
    font-weight: 500;
    margin: 0;
    text-decoration: none;
}

.b2b-profile-mini-card .staff-row .staff-meta .staff-phone i {
    margin-right: 4px;
}

.b2b-profile-mini-card .purchase-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.b2b-profile-mini-card .purchase-info-row:last-child {
    margin-bottom: 0;
}

.b2b-profile-mini-card .purchase-info-row .info-lbl {
    color: #6B7280;
}

.b2b-profile-mini-card .purchase-info-row .info-val {
    font-weight: 600;
    color: #1D2A5C;
}

.b2b-profile-mini-card .purchase-info-row .info-val--highlight {
    color: #005788;
    font-weight: 700;
}

.b2b-profile-form-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E7EBF2;
    padding: 24px 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.b2b-profile-form-card .form-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #E7EBF2;
    padding-bottom: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.b2b-profile-form-card .form-card-head .card-head-title {
    font-size: 18px;
    font-weight: 700;
    color: #1D2A5C;
    margin: 0 0 4px 0;
}

.b2b-profile-form-card .form-card-head .card-head-sub {
    font-size: 13px;
    color: #8C8C8C;
    margin: 0;
}

.b2b-profile-form-card .form-card-head .btn-update-profile {
    background: #005788;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    cursor: pointer;
}

.b2b-profile-form-card .form-card-head .btn-update-profile:hover {
    background: #004267;
}

.b2b-profile-form-card .form-group-custom {
    margin-bottom: 20px;
}

.b2b-profile-form-card .form-group-custom .custom-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1D2A5C;
    margin-bottom: 8px;
}

.b2b-profile-form-card .form-group-custom .custom-label .req {
    color: #CF1322;
    margin-left: 2px;
}

.b2b-profile-form-card .form-group-custom .custom-input {
    width: 100%;
    height: 44px;
    background: #F4F6F9;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #1D2A5C;
    font-weight: 500;
    outline: none;
    transition: all 0.2s;
}

.b2b-profile-form-card .form-group-custom .custom-input:focus {
    background: #FFFFFF;
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.b2b-profile-form-card .form-group-custom .custom-hint {
    display: block;
    font-size: 12px;
    color: #8C8C8C;
    margin-top: 6px;
}

.btn-export-excel {
    background: #005788;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    text-decoration: none;
}

.btn-export-excel:hover {
    background: #004267;
    color: #FFFFFF;
    text-decoration: none;
}

.btn-export-excel i {
    font-size: 15px;
}

.b2b-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.b2b-filter-toolbar .filter-input-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 380px;
}

.b2b-filter-toolbar .filter-input-search .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8C8C8C;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.b2b-filter-toolbar .filter-input-search input {
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px 8px 38px;
    font-size: 14px;
    color: #1D2A5C;
    outline: none;
    transition: border-color 0.2s;
}

.b2b-filter-toolbar .filter-input-search input::-moz-placeholder {
    color: #8C8C8C;
}

.b2b-filter-toolbar .filter-input-search input::placeholder {
    color: #8C8C8C;
}

.b2b-filter-toolbar .filter-input-search input:focus {
    border-color: #005788;
}

.b2b-filter-toolbar .filter-input-search--has-icon input,
.b2b-filter-toolbar .filter-input-search--wide input {
    padding-left: 38px;
}

.b2b-filter-toolbar .filter-input-search--wide {
    flex: 1;
    min-width: 240px;
    max-width: 440px;
    width: auto;
}

.b2b-filter-toolbar .filter-select,
.b2b-filter-toolbar select.filter-select {
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px 8px 14px;
    font-size: 14px;
    color: #1D2A5C;
    outline: none;
    cursor: pointer;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%231D2A5C' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 11px;
    min-width: 130px;
    transition: border-color 0.2s;
}

.b2b-filter-toolbar .filter-select:focus,
.b2b-filter-toolbar select.filter-select:focus {
    border-color: #005788;
}

.b2b-filter-toolbar .btn-filter-submit {
    background: #005788;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.b2b-filter-toolbar .btn-filter-submit:hover {
    background: #004267;
}

.b2b-filter-toolbar .filter-select-wrap {
    position: relative;
    min-width: 140px;
}

.b2b-filter-toolbar .filter-select-wrap select {
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px 8px 14px;
    font-size: 14px;
    color: #1D2A5C;
    outline: none;
    cursor: pointer;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
}

.b2b-filter-toolbar .filter-select-wrap select:focus {
    border-color: #005788;
}

.b2b-filter-toolbar .filter-select-wrap .select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #1D2A5C;
    pointer-events: none;
    font-size: 12px;
}

.b2b-filter-toolbar .filter-date-wrap {
    position: relative;
    width: 140px;
}

.b2b-filter-toolbar .filter-date-wrap .filter-date-input,
.b2b-filter-toolbar .filter-date-wrap input {
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px 8px 14px;
    font-size: 13.5px;
    color: #1D2A5C;
    outline: none;
    transition: border-color 0.2s;
}

.b2b-filter-toolbar .filter-date-wrap .filter-date-input::-moz-placeholder,
.b2b-filter-toolbar .filter-date-wrap input::-moz-placeholder {
    color: #8C8C8C;
}

.b2b-filter-toolbar .filter-date-wrap .filter-date-input::placeholder,
.b2b-filter-toolbar .filter-date-wrap input::placeholder {
    color: #8C8C8C;
}

.b2b-filter-toolbar .filter-date-wrap .filter-date-input:focus,
.b2b-filter-toolbar .filter-date-wrap input:focus {
    border-color: #005788;
}

.b2b-filter-toolbar .filter-date-wrap .date-icon,
.b2b-filter-toolbar .filter-date-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #8C8C8C;
    font-size: 14px;
}

.b2b-filter-toolbar .filter-date-group {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    height: 40px;
    overflow: hidden;
}

.b2b-filter-toolbar .filter-date-group .date-input-field {
    position: relative;
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
}

.b2b-filter-toolbar .filter-date-group .date-input-field:first-child {
    border-right: 1px solid #E7EBF2;
}

.b2b-filter-toolbar .filter-date-group .date-input-field input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 8px 14px 8px 14px;
    font-size: 13.5px;
    color: #1D2A5C;
    outline: none;
}

.b2b-filter-toolbar .filter-date-group .date-input-field input::-moz-placeholder {
    color: #8C8C8C;
}

.b2b-filter-toolbar .filter-date-group .date-input-field input::placeholder {
    color: #8C8C8C;
}

.b2b-filter-toolbar .filter-date-group .date-input-field i {
    position: absolute;
    right: 12px;
    pointer-events: none;
    color: #8C8C8C;
    font-size: 14px;
}

.b2b-filter-toolbar .btn-filter-reset {
    background: transparent;
    border: none;
    color: #D92D20;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.b2b-filter-toolbar .btn-filter-reset:hover {
    opacity: 0.8;
}

.b2b-table-card,
.b2b-history-table-card {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E7EBF2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 24px;
    margin-bottom: 24px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.b2b-table-card .table-card-title,
.b2b-table-card .history-table-title,
.b2b-history-table-card .table-card-title,
.b2b-history-table-card .history-table-title {
    font-size: 16px;
    font-weight: 700;
    color: #1D2A5C;
    margin: 0 0 16px 0;
}

.b2b-table-card .table-responsive,
.b2b-history-table-card .table-responsive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar,
.b2b-history-table-card .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar-track,
.b2b-history-table-card .table-responsive::-webkit-scrollbar-track {
    background: #F1F4F9;
    border-radius: 4px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar-thumb,
.b2b-history-table-card .table-responsive::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.b2b-table-card .table-responsive::-webkit-scrollbar-thumb:hover,
.b2b-history-table-card .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.b2b-table-card .b2b-custom-table,
.b2b-table-card .b2b-history-table,
.b2b-history-table-card .b2b-custom-table,
.b2b-history-table-card .b2b-history-table {
    margin-bottom: 0;
    width: 100%;
    min-width: 1050px;
}

.b2b-table-card .b2b-custom-table thead th,
.b2b-table-card .b2b-history-table thead th,
.b2b-history-table-card .b2b-custom-table thead th,
.b2b-history-table-card .b2b-history-table thead th {
    background: #EAF0F8;
    color: #1D2A5C;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    padding: 12px 16px;
    vertical-align: middle;
    white-space: nowrap;
}

.b2b-table-card .b2b-custom-table thead th:first-child,
.b2b-table-card .b2b-history-table thead th:first-child,
.b2b-history-table-card .b2b-custom-table thead th:first-child,
.b2b-history-table-card .b2b-history-table thead th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.b2b-table-card .b2b-custom-table thead th:last-child,
.b2b-table-card .b2b-history-table thead th:last-child,
.b2b-history-table-card .b2b-custom-table thead th:last-child,
.b2b-history-table-card .b2b-history-table thead th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.b2b-table-card .b2b-custom-table tbody td,
.b2b-table-card .b2b-history-table tbody td,
.b2b-history-table-card .b2b-custom-table tbody td,
.b2b-history-table-card .b2b-history-table tbody td {
    padding: 16px;
    vertical-align: middle;
    font-size: 13.5px;
    color: #1D2A5C;
    border-top: 1px solid #F1F4F9;
    border-bottom: none;
    white-space: nowrap;
}

.b2b-table-card .b2b-custom-table tbody td.stt-col,
.b2b-table-card .b2b-history-table tbody td.stt-col,
.b2b-history-table-card .b2b-custom-table tbody td.stt-col,
.b2b-history-table-card .b2b-history-table tbody td.stt-col {
    color: #6B7280;
    font-weight: 500;
}

.b2b-table-card .b2b-custom-table tbody td .tx-code,
.b2b-table-card .b2b-history-table tbody td .tx-code,
.b2b-history-table-card .b2b-custom-table tbody td .tx-code,
.b2b-history-table-card .b2b-history-table tbody td .tx-code {
    font-weight: 700;
    color: #1D2A5C;
}

.b2b-table-card .b2b-custom-table tbody td .table-datetime .tx-date,
.b2b-table-card .b2b-custom-table tbody td .table-datetime span:first-child,
.b2b-table-card .b2b-custom-table tbody td .tx-date-wrap .tx-date,
.b2b-table-card .b2b-custom-table tbody td .tx-date-wrap span:first-child,
.b2b-table-card .b2b-history-table tbody td .table-datetime .tx-date,
.b2b-table-card .b2b-history-table tbody td .table-datetime span:first-child,
.b2b-table-card .b2b-history-table tbody td .tx-date-wrap .tx-date,
.b2b-table-card .b2b-history-table tbody td .tx-date-wrap span:first-child,
.b2b-history-table-card .b2b-custom-table tbody td .table-datetime .tx-date,
.b2b-history-table-card .b2b-custom-table tbody td .table-datetime span:first-child,
.b2b-history-table-card .b2b-custom-table tbody td .tx-date-wrap .tx-date,
.b2b-history-table-card .b2b-custom-table tbody td .tx-date-wrap span:first-child,
.b2b-history-table-card .b2b-history-table tbody td .table-datetime .tx-date,
.b2b-history-table-card .b2b-history-table tbody td .table-datetime span:first-child,
.b2b-history-table-card .b2b-history-table tbody td .tx-date-wrap .tx-date,
.b2b-history-table-card .b2b-history-table tbody td .tx-date-wrap span:first-child {
    font-weight: 500;
    color: #1D2A5C;
    display: block;
}

.b2b-table-card .b2b-custom-table tbody td .table-datetime .tx-time,
.b2b-table-card .b2b-custom-table tbody td .table-datetime span:last-child,
.b2b-table-card .b2b-custom-table tbody td .tx-date-wrap .tx-time,
.b2b-table-card .b2b-custom-table tbody td .tx-date-wrap span:last-child,
.b2b-table-card .b2b-history-table tbody td .table-datetime .tx-time,
.b2b-table-card .b2b-history-table tbody td .table-datetime span:last-child,
.b2b-table-card .b2b-history-table tbody td .tx-date-wrap .tx-time,
.b2b-table-card .b2b-history-table tbody td .tx-date-wrap span:last-child,
.b2b-history-table-card .b2b-custom-table tbody td .table-datetime .tx-time,
.b2b-history-table-card .b2b-custom-table tbody td .table-datetime span:last-child,
.b2b-history-table-card .b2b-custom-table tbody td .tx-date-wrap .tx-time,
.b2b-history-table-card .b2b-custom-table tbody td .tx-date-wrap span:last-child,
.b2b-history-table-card .b2b-history-table tbody td .table-datetime .tx-time,
.b2b-history-table-card .b2b-history-table tbody td .table-datetime span:last-child,
.b2b-history-table-card .b2b-history-table tbody td .tx-date-wrap .tx-time,
.b2b-history-table-card .b2b-history-table tbody td .tx-date-wrap span:last-child {
    font-size: 12px;
    color: #8C8C8C;
    display: block;
    margin-top: 2px;
}

.b2b-table-card .b2b-custom-table tbody td .tx-amount,
.b2b-table-card .b2b-history-table tbody td .tx-amount,
.b2b-history-table-card .b2b-custom-table tbody td .tx-amount,
.b2b-history-table-card .b2b-history-table tbody td .tx-amount {
    font-weight: 700;
}

.b2b-table-card .b2b-custom-table tbody td .tx-amount--green,
.b2b-table-card .b2b-history-table tbody td .tx-amount--green,
.b2b-history-table-card .b2b-custom-table tbody td .tx-amount--green,
.b2b-history-table-card .b2b-history-table tbody td .tx-amount--green {
    color: #16A34A;
}

.b2b-table-card .b2b-custom-table tbody td .tx-amount--red,
.b2b-table-card .b2b-history-table tbody td .tx-amount--red,
.b2b-history-table-card .b2b-custom-table tbody td .tx-amount--red,
.b2b-history-table-card .b2b-history-table tbody td .tx-amount--red {
    color: #D92D20;
}

.b2b-table-card .b2b-custom-table tbody td .tx-amount--default,
.b2b-table-card .b2b-history-table tbody td .tx-amount--default,
.b2b-history-table-card .b2b-custom-table tbody td .tx-amount--default,
.b2b-history-table-card .b2b-history-table tbody td .tx-amount--default {
    color: #4B5563;
}

.b2b-table-card .b2b-custom-table tbody td .tx-balance,
.b2b-table-card .b2b-history-table tbody td .tx-balance,
.b2b-history-table-card .b2b-custom-table tbody td .tx-balance,
.b2b-history-table-card .b2b-history-table tbody td .tx-balance {
    font-weight: 700;
    color: #005788;
}

.b2b-table-card .b2b-custom-table tbody td .order-ref-link,
.b2b-table-card .b2b-history-table tbody td .order-ref-link,
.b2b-history-table-card .b2b-custom-table tbody td .order-ref-link,
.b2b-history-table-card .b2b-history-table tbody td .order-ref-link {
    color: #005788;
    font-weight: 600;
    text-decoration: underline;
}

.b2b-table-card .b2b-custom-table tbody td .order-ref-link:hover,
.b2b-table-card .b2b-history-table tbody td .order-ref-link:hover,
.b2b-history-table-card .b2b-custom-table tbody td .order-ref-link:hover,
.b2b-history-table-card .b2b-history-table tbody td .order-ref-link:hover {
    color: #003B5C;
    text-decoration: underline;
}

.b2b-table-card .b2b-custom-table tbody td .tx-approver-wrap .approver-name,
.b2b-table-card .b2b-history-table tbody td .tx-approver-wrap .approver-name,
.b2b-history-table-card .b2b-custom-table tbody td .tx-approver-wrap .approver-name,
.b2b-history-table-card .b2b-history-table tbody td .tx-approver-wrap .approver-name {
    font-weight: 500;
    color: #1D2A5C;
    display: block;
}

.b2b-table-card .b2b-custom-table tbody td .tx-approver-wrap .approver-name--unconfirmed,
.b2b-table-card .b2b-history-table tbody td .tx-approver-wrap .approver-name--unconfirmed,
.b2b-history-table-card .b2b-custom-table tbody td .tx-approver-wrap .approver-name--unconfirmed,
.b2b-history-table-card .b2b-history-table tbody td .tx-approver-wrap .approver-name--unconfirmed {
    color: #8C8C8C;
}

.b2b-table-card .b2b-custom-table tbody td .tx-approver-wrap .approver-time,
.b2b-table-card .b2b-history-table tbody td .tx-approver-wrap .approver-time,
.b2b-history-table-card .b2b-custom-table tbody td .tx-approver-wrap .approver-time,
.b2b-history-table-card .b2b-history-table tbody td .tx-approver-wrap .approver-time {
    font-size: 12px;
    color: #8C8C8C;
    display: block;
    margin-top: 2px;
}

.b2b-table-card .status-pill,
.b2b-history-table-card .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.b2b-table-card .status-pill--pending,
.b2b-history-table-card .status-pill--pending {
    background: #FEF3C7;
    color: #D97706;
    border: 1px solid #FDE68A;
}

.b2b-table-card .status-pill--rejected,
.b2b-history-table-card .status-pill--rejected {
    background: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.b2b-table-card .status-pill--approved,
.b2b-history-table-card .status-pill--approved {
    background: #DCFCE7;
    color: #16A34A;
    border: 1px solid #BBF7D0;
}

.b2b-table-card .table-pagination-footer,
.b2b-history-table-card .table-pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    margin-top: 4px;
}

.b2b-table-card .table-pagination-footer .pagination-info,
.b2b-history-table-card .table-pagination-footer .pagination-info {
    font-size: 13.5px;
    color: #6B7280;
}

.b2b-table-card .table-pagination-footer .pagination-info strong,
.b2b-history-table-card .table-pagination-footer .pagination-info strong {
    color: #1D2A5C;
    font-weight: 600;
}

.b2b-table-card .table-pagination-footer .pagination-controls,
.b2b-history-table-card .table-pagination-footer .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-btn,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: #FFFFFF;
    color: #1D2A5C;
    border: 1px solid #E7EBF2;
    transition: all 0.2s ease;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-btn:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-btn:hover {
    background: #F4F6F9;
    border-color: #CBD5E1;
    color: #1D2A5C;
    text-decoration: none;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-btn--active,
.b2b-table-card .table-pagination-footer .pagination-controls .page-btn.active,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-btn--active,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-btn.active {
    background: #1D2A5C;
    color: #FFFFFF;
    border-color: #1D2A5C;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-btn--active:hover,
.b2b-table-card .table-pagination-footer .pagination-controls .page-btn.active:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-btn--active:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-btn.active:hover {
    background: #1D2A5C;
    color: #FFFFFF;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap {
    position: relative;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select.page-size-select,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap select,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap select.page-size-select,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select.page-size-select,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap select,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap select.page-size-select {
    height: 34px;
    line-height: 32px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 0 28px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1D2A5C;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select:hover,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select.page-size-select:hover,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap select:hover,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap select.page-size-select:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select.page-size-select:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap select:hover,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap select.page-size-select:hover {
    border-color: #CBD5E1;
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select:focus,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select.page-size-select:focus,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap select:focus,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap select.page-size-select:focus,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select:focus,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap select.page-size-select:focus,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap select:focus,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap select.page-size-select:focus {
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.12);
}

.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap i,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap .select-arrow,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap i,
.b2b-table-card .table-pagination-footer .pagination-controls .page-size-wrap .select-arrow,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap i,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap .select-arrow,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap i,
.b2b-history-table-card .table-pagination-footer .pagination-controls .page-size-wrap .select-arrow {
    display: none;
}

.btn-add-staff {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #005788;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-staff:hover {
    background: #004267;
    color: #FFFFFF;
    text-decoration: none;
}

.btn-add-staff i {
    font-size: 14px;
}

.staff-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-user-cell .staff-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    flex-shrink: 0;
}

.staff-user-cell .staff-avatar-circle--orange {
    background: #F79009;
}

.staff-user-cell .staff-avatar-circle--green {
    background: #12B76A;
}

.staff-user-cell .staff-avatar-circle--red {
    background: #F04438;
}

.staff-user-cell .staff-avatar-circle--blue {
    background: #0BA5EC;
}

.staff-user-cell .staff-avatar-circle--purple {
    background: #7A5AF8;
}

.staff-user-cell .staff-avatar-circle--dark {
    background: #344054;
}

.staff-user-cell .staff-name {
    font-weight: 600;
    color: #1D2A5C;
    font-size: 13.5px;
}

.staff-action-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.staff-action-btns .btn-action-view {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #EAF0F8;
    border: none;
    color: #005788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.staff-action-btns .btn-action-view:hover {
    background: #D5E4F5;
    color: #004267;
}

.staff-action-btns .btn-action-view i {
    font-size: 14px;
}

.staff-action-btns .btn-action-edit {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #E6F8EF;
    border: none;
    color: #12B76A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.staff-action-btns .btn-action-edit:hover {
    background: #CEF3DF;
    color: #0E9355;
}

.staff-action-btns .btn-action-edit i {
    font-size: 14px;
}

.badge-status--active {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    background: #ECFDF3;
    color: #027A48;
    font-size: 12.5px;
    font-weight: 500;
}

.badge-status--locked {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    background: #FEF3F2;
    color: #B42318;
    font-size: 12.5px;
    font-weight: 500;
}

/* ==========================================================================
   B2B Topup Modal
   ========================================================================== */
.b2b-topup-modal .modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
}

.b2b-topup-modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.b2b-topup-modal .modal-header {
    padding: 24px 28px 12px 28px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.b2b-topup-modal .modal-header .modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #1D2A5C;
    letter-spacing: -0.2px;
    margin: 0;
}

.b2b-topup-modal .modal-header .btn-close-circle {
    background: transparent;
    border: none;
    padding: 0;
    color: #005788;
    font-size: 24px;
    opacity: 1;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}

.b2b-topup-modal .modal-header .btn-close-circle:hover {
    color: #003B5C;
    transform: scale(1.08);
}

.b2b-topup-modal .modal-body {
    padding: 12px 28px 20px 28px;
}

.b2b-topup-modal .modal-body .topup-label {
    font-size: 14px;
    font-weight: 600;
    color: #1D2A5C;
    margin-bottom: 8px;
    display: block;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap {
    position: relative;
    width: 100%;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 6px 36px 6px 10px;
    min-height: 48px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box:hover {
    border-color: #CBD5E1;
    background: #FFFFFF;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box.is-focused {
    border-color: #005788;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-tags-container {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-tag {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 8px 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1D2A5C;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    animation: tagIn 0.15s ease;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-tag .btn-remove-tag {
    border: none;
    background: transparent;
    padding: 0;
    color: #005788;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    transition: color 0.15s, transform 0.15s;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-tag .btn-remove-tag:hover {
    color: #D92D20;
    transform: scale(1.15);
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    color: #1D2A5C;
    min-width: 110px;
    flex: 1;
    height: 32px;
    padding: 0 4px;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-search-input::-moz-placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-search-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .topup-agent-select-box .agent-select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #64748B;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap.is-open .topup-agent-select-box {
    border-color: #005788;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.b2b-topup-modal .modal-body .agent-search-select-wrap.is-open .topup-agent-select-box .agent-select-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: #005788;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap.is-open .agent-select-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown {
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    z-index: 1060;
    overflow: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .dropdown-agent-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 0;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .dropdown-agent-list::-webkit-scrollbar {
    width: 6px;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .dropdown-agent-list::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item:hover {
    background: #F8FAFC;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item.selected {
    background: #F0F7FB;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item.selected .agent-option-check {
    opacity: 1;
    color: #005788;
    transform: scale(1);
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item.selected .agent-option-name {
    color: #005788;
    font-weight: 700;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #005788;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-info {
    flex: 1;
    min-width: 0;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-info .agent-option-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1D2A5C;
    line-height: 1.3;
    margin-bottom: 2px;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-info .agent-option-meta {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-info .agent-option-meta .agent-id {
    font-weight: 600;
    color: #005788;
    background: #EBF5FA;
    padding: 1px 5px;
    border-radius: 4px;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-info .agent-option-meta .agent-tier {
    color: #475467;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-item .agent-option-check {
    font-size: 13px;
    color: #005788;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94A3B8;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-empty i {
    font-size: 24px;
    margin-bottom: 6px;
    display: block;
}

.b2b-topup-modal .modal-body .agent-search-select-wrap .agent-select-dropdown .agent-option-empty p {
    font-size: 13px;
    margin: 0;
}

.b2b-topup-modal .modal-body .topup-method-card {
    background: #EBF5FA;
    border: 1.5px solid #005788;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.b2b-topup-modal .modal-body .topup-method-card .method-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005788;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 87, 136, 0.12);
    flex-shrink: 0;
}

.b2b-topup-modal .modal-body .topup-method-card .method-info .method-title {
    font-size: 15px;
    font-weight: 700;
    color: #1D2A5C;
    margin: 0 0 2px 0;
}

.b2b-topup-modal .modal-body .topup-method-card .method-info .method-desc {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

.b2b-topup-modal .modal-body .topup-amount-input-wrap {
    position: relative;
}

.b2b-topup-modal .modal-body .topup-amount-input-wrap input {
    width: 100%;
    height: 48px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 42px 10px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #1D2A5C;
    outline: none;
    transition: all 0.2s ease;
}

.b2b-topup-modal .modal-body .topup-amount-input-wrap input::-moz-placeholder {
    color: #94A3B8;
}

.b2b-topup-modal .modal-body .topup-amount-input-wrap input::placeholder {
    color: #94A3B8;
}

.b2b-topup-modal .modal-body .topup-amount-input-wrap input:focus {
    border-color: #005788;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.b2b-topup-modal .modal-body .topup-amount-input-wrap .currency-suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 600;
    color: #64748B;
    pointer-events: none;
}

.b2b-topup-modal .modal-body .topup-amount-hint {
    font-size: 13px;
    color: #475467;
    gap: 6px;
    margin-top: 8px;
}

.b2b-topup-modal .modal-body .topup-amount-hint .hint-icon {
    color: #F79009;
    font-size: 15px;
}

.b2b-topup-modal .modal-footer {
    border-top: none;
    padding: 12px 28px 28px 28px;
    display: flex;
    gap: 12px;
}

.b2b-topup-modal .modal-footer .btn-topup-cancel {
    height: 46px;
    min-width: 100px;
    border: 1.5px solid #005788;
    border-radius: 8px;
    background: #FFFFFF;
    color: #005788;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.b2b-topup-modal .modal-footer .btn-topup-cancel:hover {
    background: #F0F7FB;
}

.b2b-topup-modal .modal-footer .btn-topup-submit {
    height: 46px;
    flex: 1;
    border: none;
    border-radius: 8px;
    background: #005788;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.b2b-topup-modal .modal-footer .btn-topup-submit:hover {
    background: #004267;
    color: #FFFFFF;
}

/* ==========================================================================
   B2B Topup QR Result Modal
   ========================================================================== */
.b2b-topup-qr-modal .modal-body {
    padding: 16px 28px 24px 28px;
}

.b2b-topup-qr-modal .topup-qr-status {
    font-size: 16px;
    line-height: 1.5;
}

.b2b-topup-qr-modal .topup-qr-status .status-label {
    font-weight: 600;
    color: #1D2A5C;
}

.b2b-topup-qr-modal .topup-qr-status .status-value {
    font-weight: 700;
    color: #F79009;
}

.b2b-topup-qr-modal .topup-qr-card {
    width: 100%;
    max-width: 329px;
    height: 329px;
    background: #FFFFFF;
    border: 1.5px solid #BAE6FD;
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 87, 136, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.b2b-topup-qr-modal .topup-qr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 87, 136, 0.12);
}

.b2b-topup-qr-modal .topup-qr-card .topup-qr-img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 8px;
}

.b2b-topup-qr-modal .topup-qr-instruction {
    font-size: 15px;
    color: #475467;
    font-weight: 400;
}

.b2b-topup-qr-modal .topup-qr-bank-info {
    font-size: 16px;
    font-weight: 700;
    color: #1D2A5C;
    margin-bottom: 8px;
}

.b2b-topup-qr-modal .topup-qr-bank-info .bank-name {
    color: #1D2A5C;
}

.b2b-topup-qr-modal .topup-qr-bank-info .bank-dot {
    color: #CBD5E1;
    font-size: 14px;
    margin: 0 6px;
}

.b2b-topup-qr-modal .topup-qr-bank-info .bank-acc {
    color: #1D2A5C;
    letter-spacing: 0.5px;
}

.b2b-topup-qr-modal .btn-topup-qr-action {
    background: #005788;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    padding-left: 20px;
    padding-right: 20px;
}

.b2b-topup-qr-modal .btn-topup-qr-action:hover {
    background: #004267;
}

/* ==========================================================================
   B2B Standard Button System
   ========================================================================== */
.btn-b2b {
    height: 40px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

.btn-b2b i {
    font-size: 14px;
}

.btn-b2b--primary,
.btn-invite-agent,
.btn-b2b-primary,
.btn-b2b.btn-b2b-primary {
    background: #005788;
    border-color: #005788;
    color: #FFFFFF;
}

.btn-b2b--primary:hover,
.btn-invite-agent:hover,
.btn-b2b-primary:hover,
.btn-b2b--primary:focus,
.btn-invite-agent:focus,
.btn-b2b-primary:focus,
.btn-b2b.btn-b2b-primary:hover,
.btn-b2b.btn-b2b-primary:focus {
    background: #00466e;
    border-color: #00466e;
    color: #FFFFFF;
    text-decoration: none;
}

.btn-b2b--outline,
.btn-b2b-export,
.btn-b2b-outline,
.btn-b2b.btn-b2b-outline,
.btn-b2b.btn-b2b-outline-cancel {
    background: #FFFFFF;
    border-color: #005788;
    color: #005788;
}

.btn-b2b--outline:hover,
.btn-b2b-export:hover,
.btn-b2b-outline:hover,
.btn-b2b--outline:focus,
.btn-b2b-export:focus,
.btn-b2b-outline:focus,
.btn-b2b.btn-b2b-outline:hover,
.btn-b2b.btn-b2b-outline:focus,
.btn-b2b.btn-b2b-outline-cancel:hover,
.btn-b2b.btn-b2b-outline-cancel:focus {
    background: #F0F7FB;
    color: #005788;
    text-decoration: none;
}

.btn-b2b--secondary {
    background: #F1F4F9;
    border-color: #E7EBF2;
    color: #1D2A5C;
}

.btn-b2b--secondary:hover,
.btn-b2b--secondary:focus {
    background: #E2E8F0;
    color: #1D2A5C;
    text-decoration: none;
}

.btn-b2b--danger,
.btn-b2b--cancel {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #DC2626;
}

.btn-b2b--danger:hover,
.btn-b2b--danger:focus,
.btn-b2b--cancel:hover,
.btn-b2b--cancel:focus {
    background: #FCA5A5;
    color: #B91C1C;
    text-decoration: none;
}

.metric-card .metric-unit {
    font-size: 14px;
    font-weight: 400;
    color: #64748B;
    margin-left: 2px;
}

.metric-card .metric-trend {
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.metric-card .metric-trend--up {
    color: #12B76A;
}

.metric-card .metric-trend--down {
    color: #F04438;
}

.metric-card .metric-trend-label {
    font-size: 13px;
    color: #64748B;
    margin-left: 4px;
}

.metric-card .metric-card__icon--lilac {
    background-color: #EEF4FF;
    color: #4E5BA6;
}

.agent-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-cell .agent-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.agent-cell .agent-info {
    min-width: 0;
}

.agent-cell .agent-info .agent-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1D2A5C;
    line-height: 1.3;
}

.agent-cell .agent-info .agent-phone {
    font-size: 12px;
    color: #64748B;
    line-height: 1.3;
    margin-top: 2px;
}

.agent-cell .agent-info .agent-phone i {
    font-size: 10px;
    margin-right: 3px;
    color: #94A3B8;
}

.badge-tier {
    background: #E6F9F5;
    color: #0E9384;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.badge-tier i {
    font-size: 7px;
}

.amount-green {
    color: #12B76A;
    font-weight: 700;
}

/* ==========================================================================
   B2B Customer List Page x
   ========================================================================== */
.btn-b2b-primary {
    background: #005788;
    border: 1px solid #005788;
    color: #FFFFFF;
    border-radius: 8px;
    height: 40px;
    padding: 0 18px;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-b2b-primary:hover {
    background: #004267;
    border-color: #004267;
    color: #FFFFFF;
    text-decoration: none;
}

.b2b-customer-table tbody td {
    vertical-align: middle;
}

.b2b-customer-table tbody td .customer-spending {
    font-weight: 700;
    color: #1D2A5C;
    font-size: 14px;
}

.b2b-customer-table tbody td .customer-address {
    color: #475467;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.b2b-customer-table tbody td .customer-address i {
    color: #94A3B8;
    font-size: 14px;
}

/* ==========================================================================
   B2B Admin Danh Sách Đại Lý / CTV (Figma Node 2895:70042)
   ========================================================================== */
.btn-b2b-outline-excel {
    background: #FFFFFF;
    border: 1px solid #005788;
    color: #005788;
    border-radius: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-b2b-outline-excel i.fa-file-excel {
    color: #005788;
    font-size: 16px;
}

.btn-b2b-outline-excel i.fa-chevron-down {
    font-size: 11px;
    margin-left: 2px;
}

.btn-b2b-outline-excel:hover {
    background: #F0F6FA;
    color: #004267;
    border-color: #004267;
    text-decoration: none;
}

.b2b-admin-filter-bar {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}

.b2b-admin-filter-bar .filter-search-wrap {
    flex: 1 1 200px;
    position: relative;
    min-width: 180px;
}

.b2b-admin-filter-bar .filter-search-wrap .filter-search-input {
    width: 100%;
    height: 40px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: #1D2433;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.b2b-admin-filter-bar .filter-search-wrap .filter-search-input::-moz-placeholder {
    color: #595959;
}

.b2b-admin-filter-bar .filter-search-wrap .filter-search-input::placeholder {
    color: #595959;
}

.b2b-admin-filter-bar .filter-search-wrap .filter-search-input:focus {
    border-color: #0069A4;
    background: #FFFFFF;
}

.b2b-admin-filter-bar .filter-select-item {
    position: relative;
    flex: 0 1 auto;
    min-width: 150px;
}

.b2b-admin-filter-bar .filter-select-item .custom-select-control {
    width: 100%;
    height: 40px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 30px 8px 12px;
    font-size: 14px;
    font-weight: 400;
    color: #121212;
    outline: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.b2b-admin-filter-bar .filter-select-item .custom-select-control:focus {
    border-color: #0069A4;
    background: #FFFFFF;
}

.b2b-admin-filter-bar .filter-select-item .select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 11px;
    color: #6F767C;
}

.b2b-admin-filter-bar .filter-date-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-admin-filter-bar .filter-date-range-combined {
    display: flex;
    align-items: center;
    background: #F8F9FA;
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    height: 40px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.b2b-admin-filter-bar .filter-date-range-combined:focus-within {
    border-color: #0069A4;
    background: #FFFFFF;
}

.b2b-admin-filter-bar .filter-date-range-combined .filter-date-item {
    position: relative;
    width: 140px;
    height: 100%;
}

.b2b-admin-filter-bar .filter-date-range-combined .filter-date-item .filter-date-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0 32px 0 12px;
    font-size: 14px;
    font-weight: 400;
    color: #121212;
    outline: none;
}

.b2b-admin-filter-bar .filter-date-range-combined .filter-date-item .filter-date-input::-moz-placeholder {
    color: #6F767C;
}

.b2b-admin-filter-bar .filter-date-range-combined .filter-date-item .filter-date-input::placeholder {
    color: #6F767C;
}

.b2b-admin-filter-bar .filter-date-range-combined .filter-date-item .filter-date-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 13px;
    color: #6F767C;
}

.b2b-admin-filter-bar .filter-date-range-combined .filter-date-divider {
    width: 1px;
    height: 24px;
    background: #DBDFE7;
}

.b2b-admin-filter-bar .filter-date-item {
    position: relative;
    min-width: 140px;
}

.b2b-admin-filter-bar .filter-date-item .filter-date-input {
    width: 100%;
    height: 40px;
    background: #F8F9FA;
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    font-size: 14px;
    font-weight: 400;
    color: #121212;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.b2b-admin-filter-bar .filter-date-item .filter-date-input::-moz-placeholder {
    color: #6F767C;
}

.b2b-admin-filter-bar .filter-date-item .filter-date-input::placeholder {
    color: #6F767C;
}

.b2b-admin-filter-bar .filter-date-item .filter-date-input:focus {
    border-color: #0069A4;
    background: #FFFFFF;
}

.b2b-admin-filter-bar .filter-date-item .filter-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: #6F767C;
}

.b2b-admin-filter-bar .btn-admin-filter-submit {
    background: #0069A4;
    border: 1px solid #0069A4;
    color: #FFFFFF;
    height: 40px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.b2b-admin-filter-bar .btn-admin-filter-submit:hover {
    background: #005788;
    border-color: #005788;
    color: #FFFFFF;
}

/* ==========================================================================
   Input with Icon Wrapper (Forms, Date & Time Pickers)
   ========================================================================== */
.input-icon-wrap {
    position: relative;
    width: 100%;
}

.input-icon-wrap .form-control-custom,
.input-icon-wrap .filter-date-input,
.input-icon-wrap .form-control-icon {
    width: 100%;
    height: 44px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 38px 8px 14px;
    font-size: 14px;
    font-weight: 400;
    color: #0C0C0C;
    outline: none;
    transition: all 0.2s ease;
}

.input-icon-wrap .form-control-custom::-moz-placeholder,
.input-icon-wrap .filter-date-input::-moz-placeholder,
.input-icon-wrap .form-control-icon::-moz-placeholder {
    color: #6F767C;
}

.input-icon-wrap .form-control-custom::placeholder,
.input-icon-wrap .filter-date-input::placeholder,
.input-icon-wrap .form-control-icon::placeholder {
    color: #6F767C;
}

.input-icon-wrap .form-control-custom:focus,
.input-icon-wrap .filter-date-input:focus,
.input-icon-wrap .form-control-icon:focus {
    background: #FFFFFF;
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.input-icon-wrap .input-icon,
.input-icon-wrap .filter-date-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 15px;
    color: #6F767C;
    z-index: 2;
}

/* ==========================================================================
   Flatpickr Custom Theme
   ========================================================================== */
.flatpickr-calendar {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #E2E8F0;
    font-family: inherit;
}

.flatpickr-calendar .flatpickr-day {
    border-radius: 8px;
    font-size: 13.5px;
    color: #1D2A5C;
}

.flatpickr-calendar .flatpickr-day:hover {
    background: #F0F6FF;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: #005788;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: #005788;
    border-color: #005788;
    color: #FFFFFF;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    background: #005788;
    color: #FFFFFF;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    height: 38px;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: #FFFFFF;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #DCE7FA;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
}

.flatpickr-calendar span.flatpickr-weekday {
    color: #6F767C;
    font-weight: 600;
    font-size: 12px;
}

/* ==========================================================================
   Admin Switch & Action Buttons
   ========================================================================== */
.b2b-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

.b2b-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.b2b-switch input:checked+.b2b-switch-slider {
    background-color: #005788;
}

.b2b-switch input:checked+.b2b-switch-slider::before {
    transform: translateX(16px);
}

.b2b-switch .b2b-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #DBDFE7;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
}

.b2b-switch .b2b-switch-slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.table-action-btns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-table-action {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.btn-table-action--view {
    background: #E0F2FE;
    color: #0284C7;
}

.btn-table-action--view:hover {
    background: #BAE6FD;
    color: #0369A1;
}

.btn-table-action--edit {
    background: #D1FAE5;
    color: #059669;
}

.btn-table-action--edit:hover {
    background: #A7F3D0;
    color: #047857;
}

.btn-table-action--delete {
    background: #FEE2E2;
    color: #DC2626;
}

.btn-table-action--delete:hover {
    background: #FECACA;
    color: #B91C1C;
}

.noti-content-cell {
    max-width: 480px;
    min-width: 280px;
}

.noti-content-cell .noti-title {
    font-size: 14px;
    font-weight: 700;
    color: #010709;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 4px;
}

.noti-content-cell .noti-desc {
    font-size: 13.5px;
    color: #475467;
    line-height: 1.45;
    margin: 0;
    white-space: break-spaces;
}

/* ==========================================================================
   Rich Editor, Agent Tags & Radio Controls
   ========================================================================== */
.rich-editor-wrap {
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    background: #FFFFFF;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.rich-editor-wrap:focus-within {
    border-color: #0069A4;
}

.rich-editor-wrap .rich-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EAECF0;
    flex-wrap: wrap;
}

.rich-editor-wrap .rich-editor-toolbar .toolbar-divider {
    width: 1px;
    height: 18px;
    background: #E2E8F0;
    margin: 0 6px;
}

.rich-editor-wrap .rich-editor-toolbar .toolbar-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475467;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rich-editor-wrap .rich-editor-toolbar .toolbar-btn:hover {
    background: #F2F4F7;
    color: #005788;
}

.rich-editor-wrap .rich-editor-toolbar .toolbar-btn.active {
    background: #E0F2FE;
    color: #005788;
}

.rich-editor-wrap .rich-editor-body {
    padding: 14px 16px;
    min-height: 200px;
    font-size: 14px;
    color: #121212;
    line-height: 1.6;
    outline: none;
    width: 100%;
    border: none;
    resize: vertical;
}

/* CKEditor 5 Custom Theme */
.ck.ck-editor {
    width: 100%;
}

.ck.ck-editor .ck.ck-toolbar {
    background: #FFFFFF !important;
    border: 1px solid #DBDFE7 !important;
    border-bottom: 1px solid #EAECF0 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    padding: 6px 10px !important;
}

.ck.ck-editor .ck.ck-toolbar .ck-toolbar__items {
    gap: 2px;
}

.ck.ck-editor .ck.ck-toolbar .ck-button {
    border-radius: 4px !important;
    cursor: pointer !important;
    min-height: 28px;
    padding: 4px 6px !important;
}

.ck.ck-editor .ck.ck-toolbar .ck-button:hover {
    background: #F2F4F7 !important;
}

.ck.ck-editor .ck.ck-toolbar .ck-button.ck-on {
    background: #E0F2FE !important;
    color: #005788 !important;
}

.ck.ck-editor .ck.ck-editor__main>.ck-editor__editable {
    background: #FFFFFF !important;
    border: 1px solid #DBDFE7 !important;
    border-top: none !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    min-height: 200px;
    padding: 14px 16px !important;
    font-size: 14px;
    color: #121212;
    line-height: 1.6;
    box-shadow: none !important;
}

.ck.ck-editor .ck.ck-editor__main>.ck-editor__editable:focus {
    border-color: #0069A4 !important;
    box-shadow: 0 0 0 2px rgba(0, 105, 164, 0.1) !important;
}

.b2b-multi-select-wrap {
    position: relative;
    width: 100%;
}

.b2b-multi-select-wrap .agent-tags-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 6px 36px 6px 12px;
    background: #F8F9FA;
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.b2b-multi-select-wrap .agent-tags-box:hover,
.b2b-multi-select-wrap .agent-tags-box.is-open {
    border-color: #0069A4;
    background: #FFFFFF;
}

.b2b-multi-select-wrap .agent-tags-box .tags-placeholder {
    color: #6F767C;
    font-size: 14px;
}

.b2b-multi-select-wrap .agent-tags-box .select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: #6F767C;
    transition: transform 0.2s ease;
}

.b2b-multi-select-wrap .agent-tags-box.is-open .select-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.b2b-multi-select-wrap .agent-tags-box .agent-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #DBDFE7;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1D2A5C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.b2b-multi-select-wrap .agent-tags-box .agent-tag i {
    font-size: 11px;
    color: #94A3B8;
    cursor: pointer;
    transition: color 0.15s ease;
}

.b2b-multi-select-wrap .agent-tags-box .agent-tag i:hover {
    color: #EF4444;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 12px 6px 12px 12px;
    display: none;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown.show {
    display: block;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-search-wrap {
    padding-right: 6px;
    margin-bottom: 10px;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-search-wrap .dropdown-search-input {
    width: 100%;
    height: 38px;
    background: #FFFFFF;
    border: 1px solid #38BDF8;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #1D2A5C;
    outline: none;
    transition: border-color 0.2s ease;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-search-wrap .dropdown-search-input::-moz-placeholder {
    color: #9CA3AF;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-search-wrap .dropdown-search-input::placeholder {
    color: #9CA3AF;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-search-wrap .dropdown-search-input:focus {
    border-color: #0069A4;
    box-shadow: 0 0 0 2px rgba(0, 105, 164, 0.15);
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 6px;
    margin: 0;
    list-style: none;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list::-webkit-scrollbar {
    width: 6px;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 4px;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list::-webkit-scrollbar-thumb {
    background: #84A9E8;
    border-radius: 4px;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #1D2A5C;
    transition: background 0.15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin-bottom: 2px;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item:hover {
    background: #F8FAFC;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item.selected {
    background: #EBF2FC;
    font-weight: 600;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item .custom-checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid #CBD5E1;
    border-radius: 4px;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item .custom-checkbox i {
    display: none;
    font-size: 10px;
    color: #FFFFFF;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item.selected .custom-checkbox {
    background: #005788;
    border-color: #005788;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item.selected .custom-checkbox i {
    display: block;
}

.b2b-multi-select-wrap .b2b-multi-select-dropdown .dropdown-options-list .dropdown-option-item input[type=checkbox] {
    display: none;
}

.b2b-radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.b2b-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #1D2A5C;
    margin: 0;
}

.b2b-radio-label input[type=radio] {
    display: none;
}

.b2b-radio-label input[type=radio]:checked+.b2b-radio-custom {
    border-color: #005788;
}

.b2b-radio-label input[type=radio]:checked+.b2b-radio-custom::after {
    transform: scale(1);
}

.b2b-radio-label .b2b-radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #DBDFE7;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.b2b-radio-label .b2b-radio-custom::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #005788;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease;
}

/* ==========================================================================
   Topup Modal Styles (Tạo lệnh nạp tiền)
   ========================================================================== */
.modal-topup .modal-dialog {
    max-width: 580px;
    margin: 1.75rem auto;
}

.modal-topup .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    padding: 28px 24px;
    background: #FFFFFF;
}

.modal-topup .modal-header {
    padding: 0 0 20px 0;
    border-bottom: none;
    align-items: center;
}

.modal-topup .modal-header .modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #010709;
}

.modal-topup .modal-header .close {
    padding: 0;
    margin: 0;
    opacity: 1;
    outline: none;
    color: #005788;
    font-size: 24px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.modal-topup .modal-header .close:hover {
    color: #004268;
    transform: rotate(90deg);
}

.modal-topup .modal-body {
    padding: 0;
}

.modal-topup .payment-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
    border: none;
    padding: 0;
}

.modal-topup .payment-method-grid .nav-item {
    list-style: none;
    margin: 0;
    display: flex;
}

.modal-topup .payment-method-grid .payment-method-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px solid #E7EBF2 !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-decoration: none !important;
    width: 100%;
    color: inherit !important;
}

.modal-topup .payment-method-grid .payment-method-card:hover {
    border-color: #005788 !important;
}

.modal-topup .payment-method-grid .payment-method-card.active {
    background: #EBF5FA !important;
    border-color: #005788 !important;
    color: inherit !important;
}

.modal-topup .payment-method-grid .payment-method-card .method-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F0F6FA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #005788;
    flex-shrink: 0;
}

.modal-topup .payment-method-grid .payment-method-card.active .method-icon {
    background: #FFFFFF;
    border: 1px solid #CDE2F0;
}

.modal-topup .payment-method-grid .payment-method-card .method-info .method-name {
    font-size: 15px;
    font-weight: 700;
    color: #010709;
    line-height: 1.3;
    margin-bottom: 2px;
}

.modal-topup .payment-method-grid .payment-method-card .method-info .method-desc {
    font-size: 12px;
    color: #6F767C;
    line-height: 1.3;
    margin: 0;
}

.modal-topup .bank-info-dark-card {
    background: #0C2340;
    border-radius: 12px;
    padding: 18px 20px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.modal-topup .bank-info-dark-card .bank-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modal-topup .bank-info-dark-card .bank-field-label {
    font-size: 11px;
    font-weight: 600;
    color: #8DA4BE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.modal-topup .bank-info-dark-card .bank-field-value {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.modal-topup .bank-info-dark-card .bank-info-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 14px 0;
}

.modal-topup .bank-info-dark-card .btn-copy-stk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #D97706;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #FBBF24;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.2s ease;
}

.modal-topup .bank-info-dark-card .btn-copy-stk:hover {
    background: #D97706;
    color: #FFFFFF;
}

.modal-topup .amount-input-wrap {
    position: relative;
    width: 100%;
}

.modal-topup .amount-input-wrap .form-control-amount {
    width: 100%;
    height: 46px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    color: #0C0C0C;
    outline: none;
    transition: all 0.2s ease;
}

.modal-topup .amount-input-wrap .form-control-amount::-moz-placeholder {
    color: #6F767C;
}

.modal-topup .amount-input-wrap .form-control-amount::placeholder {
    color: #6F767C;
}

.modal-topup .amount-input-wrap .form-control-amount:focus {
    background: #FFFFFF;
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.modal-topup .amount-input-wrap .amount-currency {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 500;
    color: #6F767C;
    pointer-events: none;
}

.modal-topup .amount-helper-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1D2A5C;
    margin-top: 8px;
}

.modal-topup .amount-helper-note i {
    color: #D97706;
    font-size: 14px;
}

.modal-topup .modal-footer {
    padding: 24px 0 0 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-topup .modal-footer .btn-b2b--outline,
.modal-topup .modal-footer .btn-b2b-outline,
.modal-topup .modal-footer .btn-b2b-export {
    min-width: 100px;
}

.modal-topup .modal-footer .btn-b2b--primary,
.modal-topup .modal-footer .btn-b2b-primary,
.modal-topup .modal-footer .btn-invite-agent {
    flex: 1;
}

.b2b-admin-table-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.b2b-admin-table-card .b2b-table-card-head {
    padding: 0 0 16px 0;
    background: #FFFFFF;
}

.b2b-admin-table-card .b2b-table-card-head .b2b-table-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #010709;
    margin: 0;
    line-height: 1.4;
}

.b2b-admin-table-card .table-responsive {
    margin-bottom: 0;
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.b2b-admin-table-card .b2b-table,
.b2b-admin-table-card .b2b-agent-table,
.b2b-admin-table-card .table,
.b2b-admin-table-card table {
    width: 100%;
    min-width: 1200px;
    margin-bottom: 0;
    border-collapse: collapse;
}

.b2b-admin-table-card .b2b-table thead,
.b2b-admin-table-card .b2b-agent-table thead,
.b2b-admin-table-card .table thead,
.b2b-admin-table-card table thead {
    background: #DCE7FA;
    border-bottom: 1px solid #DBDFE7;
}

.b2b-admin-table-card .b2b-table thead th,
.b2b-admin-table-card .b2b-agent-table thead th,
.b2b-admin-table-card .table thead th,
.b2b-admin-table-card table thead th {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #2A3B5B;
    text-transform: uppercase;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: -0.01em;
}

.b2b-admin-table-card .b2b-table tbody tr,
.b2b-admin-table-card .b2b-agent-table tbody tr,
.b2b-admin-table-card .table tbody tr,
.b2b-admin-table-card table tbody tr {
    border-bottom: 1px solid #DBDFE7;
    transition: background 0.15s ease;
}

.b2b-admin-table-card .b2b-table tbody tr:nth-child(even),
.b2b-admin-table-card .b2b-agent-table tbody tr:nth-child(even),
.b2b-admin-table-card .table tbody tr:nth-child(even),
.b2b-admin-table-card table tbody tr:nth-child(even) {
    background-color: #FAFBFC;
}

.b2b-admin-table-card .b2b-table tbody tr:hover,
.b2b-admin-table-card .b2b-agent-table tbody tr:hover,
.b2b-admin-table-card .table tbody tr:hover,
.b2b-admin-table-card table tbody tr:hover {
    background-color: #F0F6FF;
}

.b2b-admin-table-card .b2b-table tbody td,
.b2b-admin-table-card .b2b-agent-table tbody td,
.b2b-admin-table-card .table tbody td,
.b2b-admin-table-card table tbody td {
    padding: 10px 16px;
    font-size: 14px;
    color: #121212;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
}

.b2b-admin-table-card .b2b-table .stt-num,
.b2b-admin-table-card .b2b-agent-table .stt-num,
.b2b-admin-table-card .table .stt-num,
.b2b-admin-table-card table .stt-num {
    font-size: 14px;
    color: #121212;
    font-weight: 400;
}

.b2b-admin-table-card .b2b-table .agent-code,
.b2b-admin-table-card .b2b-agent-table .agent-code,
.b2b-admin-table-card .table .agent-code,
.b2b-admin-table-card table .agent-code {
    font-weight: 600;
    color: #121212;
    font-size: 14px;
}

.b2b-admin-table-card .b2b-table .agent-profile-cell,
.b2b-admin-table-card .b2b-agent-table .agent-profile-cell,
.b2b-admin-table-card .table .agent-profile-cell,
.b2b-admin-table-card table .agent-profile-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.b2b-admin-table-card .b2b-table .agent-profile-cell .agent-avatar-badge,
.b2b-admin-table-card .b2b-agent-table .agent-profile-cell .agent-avatar-badge,
.b2b-admin-table-card .table .agent-profile-cell .agent-avatar-badge,
.b2b-admin-table-card table .agent-profile-cell .agent-avatar-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ccc;
}

.b2b-admin-table-card .b2b-table .agent-profile-cell .agent-info-meta .agent-title,
.b2b-admin-table-card .b2b-agent-table .agent-profile-cell .agent-info-meta .agent-title,
.b2b-admin-table-card .table .agent-profile-cell .agent-info-meta .agent-title,
.b2b-admin-table-card table .agent-profile-cell .agent-info-meta .agent-title {
    font-size: 14px;
    font-weight: 500;
    color: #121212;
    line-height: 1.3;
}

.b2b-admin-table-card .b2b-table .agent-profile-cell .agent-info-meta .agent-contact-phone,
.b2b-admin-table-card .b2b-agent-table .agent-profile-cell .agent-info-meta .agent-contact-phone,
.b2b-admin-table-card .table .agent-profile-cell .agent-info-meta .agent-contact-phone,
.b2b-admin-table-card table .agent-profile-cell .agent-info-meta .agent-contact-phone {
    font-size: 14px;
    color: #6F767C;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.b2b-admin-table-card .b2b-table .agent-profile-cell .agent-info-meta .agent-contact-phone i,
.b2b-admin-table-card .b2b-agent-table .agent-profile-cell .agent-info-meta .agent-contact-phone i,
.b2b-admin-table-card .table .agent-profile-cell .agent-info-meta .agent-contact-phone i,
.b2b-admin-table-card table .agent-profile-cell .agent-info-meta .agent-contact-phone i {
    font-size: 11px;
    color: #6F767C;
}

.b2b-admin-table-card .b2b-table .tier-pill,
.b2b-admin-table-card .b2b-agent-table .tier-pill,
.b2b-admin-table-card .table .tier-pill,
.b2b-admin-table-card table .tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #D5F1ED;
    color: #0E9F8E;
    font-size: 12px;
    font-weight: 600;
    border-radius: 99px;
    line-height: 1.25;
}

.b2b-admin-table-card .b2b-table .tier-pill i,
.b2b-admin-table-card .b2b-agent-table .tier-pill i,
.b2b-admin-table-card .table .tier-pill i,
.b2b-admin-table-card table .tier-pill i {
    font-size: 8px;
}

.b2b-admin-table-card .b2b-table .order-count,
.b2b-admin-table-card .b2b-agent-table .order-count,
.b2b-admin-table-card .table .order-count,
.b2b-admin-table-card table .order-count {
    font-weight: 400;
    color: #121212;
    font-size: 14px;
}

.b2b-admin-table-card .b2b-table .sales-amount,
.b2b-admin-table-card .b2b-agent-table .sales-amount,
.b2b-admin-table-card .table .sales-amount,
.b2b-admin-table-card table .sales-amount {
    font-weight: 600;
    color: #038B5C;
    font-size: 14px;
}

.b2b-admin-table-card .b2b-table .balance-amount,
.b2b-admin-table-card .b2b-agent-table .balance-amount,
.b2b-admin-table-card .table .balance-amount,
.b2b-admin-table-card table .balance-amount {
    font-weight: 600;
    color: #005788;
    font-size: 14px;
}

.b2b-admin-table-card .b2b-table .joined-datetime .joined-date,
.b2b-admin-table-card .b2b-agent-table .joined-datetime .joined-date,
.b2b-admin-table-card .table .joined-datetime .joined-date,
.b2b-admin-table-card table .joined-datetime .joined-date {
    font-size: 14px;
    color: #121212;
    display: block;
}

.b2b-admin-table-card .b2b-table .joined-datetime .joined-time,
.b2b-admin-table-card .b2b-agent-table .joined-datetime .joined-time,
.b2b-admin-table-card .table .joined-datetime .joined-time,
.b2b-admin-table-card table .joined-datetime .joined-time {
    font-size: 12px;
    color: #8C8C8C;
    display: block;
    margin-top: 2px;
}

.b2b-admin-table-card .b2b-table .staff-name,
.b2b-admin-table-card .b2b-agent-table .staff-name,
.b2b-admin-table-card .table .staff-name,
.b2b-admin-table-card table .staff-name {
    font-size: 14px;
    color: #121212;
}

.b2b-admin-table-card .b2b-table .status-badge,
.b2b-admin-table-card .b2b-agent-table .status-badge,
.b2b-admin-table-card .table .status-badge,
.b2b-admin-table-card table .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--locked,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--locked,
.b2b-admin-table-card .table .status-badge.status-badge--locked,
.b2b-admin-table-card table .status-badge.status-badge--locked {
    background: #FFE4E0;
    color: #E63A46;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--new,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--new,
.b2b-admin-table-card .table .status-badge.status-badge--new,
.b2b-admin-table-card table .status-badge.status-badge--new {
    background: rgba(184, 226, 236, 0.4);
    color: #005788;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--active,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--active,
.b2b-admin-table-card .table .status-badge.status-badge--active,
.b2b-admin-table-card table .status-badge.status-badge--active {
    background: #DFF6EC;
    color: #038B5C;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--processing,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--processing,
.b2b-admin-table-card .table .status-badge.status-badge--processing,
.b2b-admin-table-card table .status-badge.status-badge--processing {
    background: #FFF1CC;
    color: #684E09;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--delivering,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--delivering,
.b2b-admin-table-card .table .status-badge.status-badge--delivering,
.b2b-admin-table-card table .status-badge.status-badge--delivering {
    background: rgba(184, 226, 236, 0.4);
    color: #005788;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--completed,
.b2b-admin-table-card .b2b-table .status-badge.status-badge--delivered,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--completed,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--delivered,
.b2b-admin-table-card .table .status-badge.status-badge--completed,
.b2b-admin-table-card .table .status-badge.status-badge--delivered,
.b2b-admin-table-card table .status-badge.status-badge--completed,
.b2b-admin-table-card table .status-badge.status-badge--delivered {
    background: #DFF6EC;
    color: #038B5C;
}

.b2b-admin-table-card .b2b-table .status-badge.status-badge--cancelled,
.b2b-admin-table-card .b2b-table .status-badge.status-badge--rejected,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--cancelled,
.b2b-admin-table-card .b2b-agent-table .status-badge.status-badge--rejected,
.b2b-admin-table-card .table .status-badge.status-badge--cancelled,
.b2b-admin-table-card .table .status-badge.status-badge--rejected,
.b2b-admin-table-card table .status-badge.status-badge--cancelled,
.b2b-admin-table-card table .status-badge.status-badge--rejected {
    background: #FFE4E0;
    color: #E63A46;
}

.b2b-admin-table-card .b2b-table .action-btn-group,
.b2b-admin-table-card .b2b-agent-table .action-btn-group,
.b2b-admin-table-card .table .action-btn-group,
.b2b-admin-table-card table .action-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.b2b-admin-table-card .b2b-table .action-btn-group .action-btn,
.b2b-admin-table-card .b2b-agent-table .action-btn-group .action-btn,
.b2b-admin-table-card .table .action-btn-group .action-btn,
.b2b-admin-table-card table .action-btn-group .action-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.b2b-admin-table-card .b2b-table .action-btn-group .action-btn:hover,
.b2b-admin-table-card .b2b-agent-table .action-btn-group .action-btn:hover,
.b2b-admin-table-card .table .action-btn-group .action-btn:hover,
.b2b-admin-table-card table .action-btn-group .action-btn:hover {
    transform: translateY(-1px);
    opacity: 0.85;
}

.b2b-admin-table-card .b2b-table .action-btn-group .action-btn.action-btn--view,
.b2b-admin-table-card .b2b-agent-table .action-btn-group .action-btn.action-btn--view,
.b2b-admin-table-card .table .action-btn-group .action-btn.action-btn--view,
.b2b-admin-table-card table .action-btn-group .action-btn.action-btn--view {
    background: rgba(184, 226, 236, 0.4);
    color: #0069A4;
    font-size: 13px;
}

.b2b-admin-table-card .b2b-table .action-btn-group .action-btn.action-btn--edit,
.b2b-admin-table-card .b2b-agent-table .action-btn-group .action-btn.action-btn--edit,
.b2b-admin-table-card .table .action-btn-group .action-btn.action-btn--edit,
.b2b-admin-table-card table .action-btn-group .action-btn.action-btn--edit {
    background: #DFF6EC;
    color: #038B5C;
    font-size: 12px;
}

.b2b-admin-table-card .b2b-table tfoot .summary-tr,
.b2b-admin-table-card .b2b-agent-table tfoot .summary-tr,
.b2b-admin-table-card .table tfoot .summary-tr,
.b2b-admin-table-card table tfoot .summary-tr {
    background: #F1F4F8;
    border-top: 1px solid #DBDFE7;
    border-bottom: 1px solid #DBDFE7;
}

.b2b-admin-table-card .b2b-table tfoot .summary-tr td,
.b2b-admin-table-card .b2b-agent-table tfoot .summary-tr td,
.b2b-admin-table-card .table tfoot .summary-tr td,
.b2b-admin-table-card table tfoot .summary-tr td {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 14px;
}

.b2b-admin-table-card .b2b-table tfoot .summary-tr .summary-title,
.b2b-admin-table-card .b2b-agent-table tfoot .summary-tr .summary-title,
.b2b-admin-table-card .table tfoot .summary-tr .summary-title,
.b2b-admin-table-card table tfoot .summary-tr .summary-title {
    color: #010709;
    font-weight: 600;
}

.b2b-admin-table-card .b2b-table tfoot .summary-tr .summary-orders,
.b2b-admin-table-card .b2b-agent-table tfoot .summary-tr .summary-orders,
.b2b-admin-table-card .table tfoot .summary-tr .summary-orders,
.b2b-admin-table-card table tfoot .summary-tr .summary-orders {
    color: #0C0C0C;
    font-weight: 600;
}

.b2b-admin-table-card .b2b-table tfoot .summary-tr .summary-sales,
.b2b-admin-table-card .b2b-agent-table tfoot .summary-tr .summary-sales,
.b2b-admin-table-card .table tfoot .summary-tr .summary-sales,
.b2b-admin-table-card table tfoot .summary-tr .summary-sales {
    color: #038B5C;
    font-weight: 600;
}

.b2b-admin-table-card .b2b-table tfoot .summary-tr .summary-balance,
.b2b-admin-table-card .b2b-agent-table tfoot .summary-tr .summary-balance,
.b2b-admin-table-card .table tfoot .summary-tr .summary-balance,
.b2b-admin-table-card table tfoot .summary-tr .summary-balance {
    color: #005788;
    font-weight: 600;
}

.b2b-admin-table-card .table-pagination-footer {
    background: transparent;
    padding: 20px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-top: none;
}

.b2b-admin-table-card .table-pagination-footer .pagination-info {
    font-size: 14px;
    color: #121212;
}

.b2b-admin-table-card .table-pagination-footer .pagination-info strong {
    font-weight: 600;
    color: #121212;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #0C0C0C;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    text-decoration: none;
    transition: all 0.15s ease;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-btn:hover {
    border-color: #1D2A5C;
    color: #1D2A5C;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-btn.page-btn--active {
    background: #1D2A5C;
    border-color: #1D2A5C;
    color: #FFFFFF;
    font-weight: 600;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-wrap,
.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap {
    position: relative;
    margin-left: 4px;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-wrap .page-size-select,
.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap .page-size-select {
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    border-radius: 4px;
    padding: 4px 28px 4px 10px;
    font-size: 14px;
    color: #0C0C0C;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-wrap .page-size-select:focus,
.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap .page-size-select:focus {
    border-color: #1D2A5C;
}

.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-wrap .select-arrow,
.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-wrap .select-chevron,
.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap .select-arrow,
.b2b-admin-table-card .table-pagination-footer .pagination-controls .page-size-select-wrap .select-chevron {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #6F767C;
    pointer-events: none;
}

/* ==========================================================================
   B2B Orders List (Figma Node 2795:19608)
   ========================================================================== */
.b2b-kpi-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.b2b-kpi-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.b2b-kpi-card.b2b-kpi-card--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    background: #005788;
    border-radius: 0 4px 4px 0;
}

.b2b-kpi-card .kpi-title {
    font-size: 16px;
    font-weight: 600;
    color: #2A3B5B;
    margin-bottom: 8px;
}

.b2b-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #010709;
    line-height: 1.2;
    margin-bottom: 8px;
}

.b2b-kpi-card .kpi-value.kpi-value--danger {
    color: #E63A46;
}

.b2b-kpi-card .kpi-meta {
    font-size: 14px;
    color: #595959;
    margin: 0;
}

.b2b-kpi-card .kpi-meta .meta-amount {
    font-weight: 600;
    color: #038B5C;
}

.b2b-kpi-card .kpi-meta .meta-amount.meta-amount--danger {
    color: #E63A46;
}

.filter-input-icon-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
}

.filter-input-icon-wrap .filter-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6F767C;
    font-size: 13px;
    pointer-events: none;
}

.filter-input-icon-wrap .filter-input-with-icon {
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    padding: 8px 14px 8px 36px;
    font-size: 14px;
    color: #1D2433;
    outline: none;
    transition: all 0.2s ease;
}

.filter-input-icon-wrap .filter-input-with-icon::-moz-placeholder {
    color: #6F767C;
}

.filter-input-icon-wrap .filter-input-with-icon::placeholder {
    color: #6F767C;
}

.filter-input-icon-wrap .filter-input-with-icon:focus {
    border-color: #005788;
    background: #FFFFFF;
}

.filter-input-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
}

.filter-input-wrap .filter-input-plain {
    width: 100%;
    height: 40px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: #121212;
    outline: none;
    transition: border-color 0.2s;
}

.filter-input-wrap .filter-input-plain::-moz-placeholder {
    color: #6F767C;
}

.filter-input-wrap .filter-input-plain::placeholder {
    color: #6F767C;
}

.filter-input-wrap .filter-input-plain:focus {
    border-color: #005788;
    background: #FFFFFF;
}

.filter-select-item {
    position: relative;
    flex: 0 1 180px;
    min-width: 150px;
}

.filter-select-item .custom-select-control {
    width: 100%;
    height: 40px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    font-size: 14px;
    color: #121212;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.filter-select-item .custom-select-control:focus {
    border-color: #005788;
    background: #FFFFFF;
}

.filter-select-item .select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6F767C;
    font-size: 12px;
    pointer-events: none;
}

.btn-filter-submit {
    height: 40px;
    padding: 8px 24px;
    background: #005788;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-filter-submit:hover {
    background: #004267;
}

.filter-date-item {
    position: relative;
    flex: 0 1 140px;
    min-width: 130px;
}

.filter-date-item .filter-date-input {
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #DBDFE7;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    font-size: 14px;
    color: #1D2433;
    outline: none;
    cursor: pointer;
}

.filter-date-item .filter-date-input::-moz-placeholder {
    color: #6F767C;
}

.filter-date-item .filter-date-input::placeholder {
    color: #6F767C;
}

.filter-date-item .filter-date-input:focus {
    border-color: #005788;
    background: #FFFFFF;
}

.filter-date-item .date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6F767C;
    font-size: 13px;
    pointer-events: none;
}

.btn-filter-reset {
    background: transparent;
    border: none;
    color: #E63A46;
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-filter-reset:hover {
    text-decoration: underline;
    color: #d32f2f;
}

.b2b-agent-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.b2b-agent-table thead {
    background: #DCE7FA;
    border-bottom: 1px solid #DBDFE7;
}

.b2b-agent-table thead th {
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #2A3B5B;
    text-transform: uppercase;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: -0.01em;
}

.b2b-agent-table tbody tr {
    border-bottom: 1px solid #DBDFE7;
    transition: background 0.15s ease;
}

.b2b-agent-table tbody tr:nth-child(even) {
    background-color: #FAFBFC;
}

.b2b-agent-table tbody tr:hover {
    background-color: #F0F6FF;
}

.b2b-agent-table tbody td {
    padding: 10px 10px;
    font-size: 13px;
    color: #121212;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
}

.b2b-agent-table .stt-num {
    font-size: 14px;
    color: #121212;
    font-weight: 400;
}

.b2b-agent-table .agent-code {
    font-weight: 600;
    color: #121212;
    font-size: 14px;
}

.b2b-agent-table .agent-profile-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.b2b-agent-table .agent-profile-cell .agent-avatar-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b2b-agent-table .agent-profile-cell .agent-info-meta .agent-title {
    font-size: 14px;
    font-weight: 500;
    color: #121212;
    line-height: 1.3;
}

.b2b-agent-table .agent-profile-cell .agent-info-meta .agent-contact-phone {
    font-size: 14px;
    color: #6F767C;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.b2b-agent-table .agent-profile-cell .agent-info-meta .agent-contact-phone i {
    font-size: 11px;
    color: #6F767C;
}

.b2b-agent-table .tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #D5F1ED;
    color: #0E9F8E;
    font-size: 12px;
    font-weight: 600;
    border-radius: 99px;
    line-height: 1.25;
}

.b2b-agent-table .tier-pill i {
    font-size: 8px;
}

.b2b-agent-table .order-count {
    font-weight: 400;
    color: #121212;
    font-size: 14px;
}

.b2b-agent-table .sales-amount {
    font-weight: 600;
    color: #038B5C;
    font-size: 14px;
}

.b2b-agent-table .balance-amount {
    font-weight: 600;
    color: #005788;
    font-size: 14px;
}

.b2b-agent-table .joined-datetime .joined-date {
    font-size: 14px;
    color: #121212;
    display: block;
}

.b2b-agent-table .joined-datetime .joined-time {
    font-size: 12px;
    color: #8C8C8C;
    display: block;
    margin-top: 2px;
}

.b2b-agent-table .staff-name {
    font-size: 14px;
    color: #121212;
}

.b2b-agent-table .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.b2b-agent-table .status-badge.status-badge--locked {
    background: #FFE4E0;
    color: #E63A46;
}

.b2b-agent-table .status-badge.status-badge--new {
    background: rgba(184, 226, 236, 0.4);
    color: #005788;
}

.b2b-agent-table .status-badge.status-badge--active {
    background: #DFF6EC;
    color: #038B5C;
}

.b2b-agent-table .status-badge.status-badge--processing {
    background: #FFF1CC;
    color: #684E09;
}

.b2b-agent-table .status-badge.status-badge--delivering {
    background: rgba(184, 226, 236, 0.4);
    color: #005788;
}

.b2b-agent-table .status-badge.status-badge--completed,
.b2b-agent-table .status-badge.status-badge--delivered {
    background: #DFF6EC;
    color: #038B5C;
}

.b2b-agent-table .status-badge.status-badge--cancelled,
.b2b-agent-table .status-badge.status-badge--rejected {
    background: #FFE4E0;
    color: #E63A46;
}

.b2b-agent-table .action-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.b2b-agent-table .action-btn-group .action-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.b2b-agent-table .action-btn-group .action-btn:hover {
    transform: translateY(-1px);
    opacity: 0.85;
}

.b2b-agent-table .action-btn-group .action-btn.action-btn--view {
    background: rgba(184, 226, 236, 0.4);
    color: #0069A4;
    font-size: 13px;
}

.b2b-agent-table .action-btn-group .action-btn.action-btn--edit {
    background: #DFF6EC;
    color: #038B5C;
    font-size: 12px;
}

.b2b-admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.b2b-pagination-wrap .pagination-controls .page-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #DBDFE7;
    background: #FFFFFF;
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.b2b-pagination-wrap .pagination-controls .page-btn:hover {
    background: #F0F6FF;
    border-color: #005788;
    color: #005788;
}

.b2b-pagination-wrap .pagination-controls .page-btn--active {
    background: #1D2A5C;
    border-color: #1D2A5C;
    color: #FFFFFF;
}

.b2b-pagination-wrap .pagination-controls .page-btn--active:hover {
    background: #1D2A5C;
    color: #FFFFFF;
}

.product-cell-wrap .product-name-main {
    font-size: 14px;
    color: #121212;
    font-weight: 400;
    line-height: 1.3;
}

.product-cell-wrap .product-sub-list {
    margin-top: 4px;
    padding-left: 0;
}

.product-cell-wrap .product-sub-list .product-sub-item {
    font-size: 13px;
    color: #6F767C;
    margin-bottom: 2px;
    line-height: 1.3;
}

.product-cell-wrap .product-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #005788;
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 4px;
    text-decoration: underline;
    cursor: pointer;
}

.product-cell-wrap .product-expand-toggle:hover {
    color: #004267;
}

.status-badge.status-badge--processing {
    background: #FFF1CC;
    color: #8C6207;
}

.status-badge.status-badge--shipping {
    background: #DCE7FA;
    color: #005788;
}

.status-badge.status-badge--delivered {
    background: #DFF6EC;
    color: #038B5C;
}

.status-badge.status-badge--cancelled {
    background: #FFE4E0;
    color: #E63A46;
}

.status-badge.status-badge--rejected {
    background: #FFE4E0;
    color: #E63A46;
}

/* ==========================================================================
   B2B Add Agent Form (Figma Node 2904:47840)
   ========================================================================== */
.b2b-form-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.b2b-form-card .form-card-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F2F4;
}

.b2b-form-card .form-card-header .form-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #010709;
    margin-bottom: 4px;
}

.b2b-form-card .form-card-header .form-card-subtitle {
    font-size: 14px;
    color: #6F767C;
    margin: 0;
}

.b2b-form-card .form-label {
    font-size: 14px;
    font-weight: 500;
    color: #0D354B;
    margin-bottom: 6px;
    display: block;
}

.b2b-form-card .form-label .required {
    color: #DA100B;
    margin-left: 2px;
}

.b2b-form-card .form-control-custom {
    width: 100%;
    height: 44px;
    background: #F5F6F8;
    border: 1px solid #E7EBF2;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: #0C0C0C;
    outline: none;
    transition: all 0.2s ease;
}

.b2b-form-card .form-control-custom::-moz-placeholder {
    color: #6F767C;
}

.b2b-form-card .form-control-custom::placeholder {
    color: #6F767C;
}

.b2b-form-card .form-control-custom:focus {
    background: #FFFFFF;
    border-color: #005788;
    box-shadow: 0 0 0 3px rgba(0, 87, 136, 0.1);
}

.b2b-form-card .select-custom-wrap {
    position: relative;
}

.b2b-form-card .select-custom-wrap select.form-control-custom {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.b2b-form-card .select-custom-wrap .select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6F767C;
    font-size: 12px;
    pointer-events: none;
}

.b2b-form-card .input-password-wrap {
    position: relative;
}

.b2b-form-card .input-password-wrap .form-control-custom {
    padding-right: 40px;
}

.b2b-form-card .input-password-wrap .toggle-password-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #8C8C8C;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}

.b2b-form-card .input-password-wrap .toggle-password-btn:hover {
    color: #595959;
}

.b2b-form-card .password-match-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #EDFDF5;
    color: #038B5C;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}

.b2b-form-card .password-match-badge--mismatch {
    background: #FFE4E0;
    color: #E63A46;
}

.b2b-form-card .password-match-badge i {
    font-size: 13px;
}

.b2b-form-card .input-helper-text {
    font-size: 11px;
    color: #888888;
    margin-top: 4px;
    margin-bottom: 0;
}

.b2b-header-back-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #E7EBF2;
    color: #010709;
    text-decoration: none;
    margin-right: 12px;
    transition: all 0.2s ease;
}

.b2b-header-back-btn:hover {
    background: #F5F6F8;
    color: #005788;
    text-decoration: none;
}

/* ==========================================================================
   Admin Agent Profile
   ========================================================================== */
.b2b-profile-tabs-header {
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #DBDFE7;
    margin-bottom: 24px;
    padding: 0 16px;
}

.b2b-profile-tabs-header .b2b-profile-nav-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    border-bottom: none;
    padding: 0;
}

.b2b-profile-tabs-header .b2b-profile-nav-tabs .nav-tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #121212;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}

.b2b-profile-tabs-header .b2b-profile-nav-tabs .nav-tab-item:hover {
    color: #005788;
    text-decoration: none;
}

.b2b-profile-tabs-header .b2b-profile-nav-tabs .nav-tab-item.active {
    color: #005788;
    border-bottom: 2px solid #005788;
}

html {
    scroll-behavior: auto;
    scroll-padding-top: 6rem;
}

body {
    font-family: var(--font-averta-regular);
    top: 0 !important;
}

.ul-reset {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-body a{
    color: #4DBFD9;
}
/*# sourceMappingURL=style.css.map */