@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap";
.retro-auth {
    font-family: Be Vietnam Pro, Arial, sans-serif;
    background: linear-gradient(135deg, #0a0a2e, #16213e, #0f3460, #533483, #e94560);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    line-height: 1.4;
    position: relative;
    overflow: hidden
}

.retro-auth:before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 25% 25%, rgba(255, 0, 255, .12) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 255, 255, .12) 0%, transparent 50%)
}

.retro-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

.y2k-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 25% 25%, rgba(255, 0, 255, .1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 255, 255, .1) 0%, transparent 50%)
}

.grid-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 0, .3) 1px, transparent 0);
    background-size: 40px 40px;
    animation: gridMove 20s linear infinite
}

@keyframes gridMove {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(40px, 40px)
    }
}

.scanner-lines {
    position: absolute;
    width: 100%;
    height: 100%
}

.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, .8), transparent);
    animation: scanMove 8s linear infinite
}

.scan-1 {
    top: 20%;
    animation-delay: 0s
}

.scan-2 {
    top: 50%;
    animation-delay: -3s;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, .8), transparent)
}

.scan-3 {
    top: 80%;
    animation-delay: -6s;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 0, .8), transparent)
}

@keyframes scanMove {
    0% {
        left: -100%;
        opacity: 0
    }
    10% {
        opacity: 1
    }
    90% {
        opacity: 1
    }
    to {
        left: 100%;
        opacity: 0
    }
}

.floating-orbs {
    position: absolute;
    width: 100%;
    height: 100%
}

.retro-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .3), transparent 70%);
    filter: blur(2px);
    animation: orbFloat 15s ease-in-out infinite
}

.orb-1 {
    top: 10%;
    left: 10%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 0, 255, .2), transparent 70%);
    animation-delay: 0s
}

.orb-2 {
    top: 70%;
    right: 15%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, .2), transparent 70%);
    animation-delay: -5s
}

.orb-3 {
    bottom: 20%;
    left: 20%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 0, .2), transparent 70%);
    animation-delay: -10s
}

@keyframes orbFloat {
    0%,
    to {
        transform: translate(0) scale(1)
    }
    25% {
        transform: translate(50px, -30px) scale(1.1)
    }
    50% {
        transform: translate(-30px, -50px) scale(.9)
    }
    75% {
        transform: translate(-50px, 30px) scale(1.05)
    }
}

.login-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 1
}

.future-card {
    background: linear-gradient(145deg, #ffffff1a, #ffffff0d);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px #0000004d, 0 10px 30px #ff00ff1a, inset 0 1px #fff3;
    position: relative;
    overflow: hidden
}

.future-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #f0f, #0ff, #ff0, #f0f);
    background-size: 400% 400%;
    animation: chromeShift 6s ease-in-out infinite;
    border-radius: 24px;
    z-index: -2
}

@keyframes chromeShift {
    0%,
    to {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}

.future-card:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(145deg, #101028f2, #202040e6);
    border-radius: 22px;
    z-index: -1
}

.chrome-header {
    text-align: center;
    margin-bottom: 40px
}

.retro-logo {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.logo-chrome {
    position: relative;
    width: 64px;
    height: 64px;
    background: linear-gradient(145deg, #e6e6fa, #c0c0ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px #0000004d, inset 0 2px 4px #ffffff4d;
    animation: logoRotate 8s linear infinite
}

@keyframes logoRotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.chrome-inner {
    position: relative;
    z-index: 2;
    animation: logoRotate 8s linear infinite reverse
}

.chrome-glow {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: conic-gradient(from 0deg, #f0f, #0ff, #ff0, #f0f);
    border-radius: 50%;
    animation: glowRotate 4s linear infinite;
    z-index: 0;
    filter: blur(8px)
}

@keyframes glowRotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.retro-logo-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 50%
}

.retro-logo-fallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0f172ae6;
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: .85rem
}

.y2k-title {
    font-size: 2.1rem;
    font-weight: 900;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    gap: 8px
}

.title-chrome {
    background: linear-gradient(45deg, #e6e6fa, #c0c0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 255, 255, .5)
}

.title-neon {
    background: linear-gradient(45deg, #f0f, #0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 0, 255, .8);
    animation: neonPulse 2s ease-in-out infinite alternate
}

@keyframes neonPulse {
    0% {
        filter: brightness(1)
    }
    to {
        filter: brightness(1.3)
    }
}

.retro-subtitle {
    color: #fffc;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .4px
}

.retro-field {
    position: relative;
    margin-bottom: 28px
}

.field-chrome {
    position: relative;
    background: linear-gradient(145deg, #ffffff1a, #ffffff0d);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease
}

.field-chrome:focus-within {
    box-shadow: 0 0 12px #00ffff2e;
    border-color: #00ffff59
}

.chrome-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #f0f, #0ff, #ff0, #f0f);
    background-size: 400% 400%;
    animation: borderShift 4s ease-in-out infinite;
    border-radius: 12px;
    opacity: 0;
    transition: opacity .3s ease
}

.field-chrome:focus-within .chrome-border {
    opacity: .35
}

@keyframes borderShift {
    0%,
    to {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}

.retro-field input {
    width: 100%;
    background: #080c1a59;
    border: none;
    padding: 24px 16px 12px;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    position: relative;
    z-index: 2;
    font-family: inherit;
    letter-spacing: .4px;
    text-shadow: 0 0 8px rgba(15, 23, 42, .8)
}

.retro-field input::placeholder {
    color: transparent
}

.retro-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff9;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    transition: all .3s ease;
    z-index: 3;
    letter-spacing: .4px
}

.retro-field input:focus+label,
.retro-field input:not(:placeholder-shown)+label {
    top: 8px;
    font-size: 11px;
    color: #e0f2fe;
    transform: translateY(0);
    text-shadow: 0 0 8px rgba(14, 116, 144, .6)
}

.field-hologram {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #f0f, #0ff);
    transition: width .3s ease;
    z-index: 2
}

.field-chrome:focus-within .field-hologram {
    width: 100%
}

.retro-field.has-toggle input {
    padding-right: 56px
}

.retro-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 4;
    padding: 8px;
    border-radius: 8px;
    transition: all .2s ease
}

.toggle-chrome {
    width: 20px;
    height: 20px;
    transition: all .2s ease
}

.retro-toggle:hover {
    background: #00ffff1a;
    box-shadow: 0 0 10px #00ffff4d
}

.eye-hidden,
.retro-toggle.toggle-active .eye-future {
    display: none
}

.retro-toggle.toggle-active .eye-hidden {
    display: block
}

.future-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px
}

.retro-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: #fffc;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.retro-checkbox input[type=checkbox] {
    display: none
}

.checkbox-chrome {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.check-frame {
    width: 100%;
    height: 100%;
    border: 1.5px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    background: linear-gradient(145deg, #ffffff1a, #ffffff0d);
    transition: all .3s ease;
    position: absolute
}

.check-hologram {
    opacity: 0;
    transition: opacity .3s ease;
    position: relative;
    z-index: 1
}

.retro-checkbox input[type=checkbox]:checked+.checkbox-chrome .check-frame {
    background: linear-gradient(45deg, #0ff3, #f0f3);
    border-color: #0ff;
    box-shadow: 0 0 10px #00ffff80
}

.retro-checkbox input[type=checkbox]:checked+.checkbox-chrome .check-hologram {
    opacity: 1
}

.future-link {
    color: #f0f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .4px;
    transition: all .2s ease;
    position: relative
}

.future-link:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #f0f, #0ff);
    transition: width .3s ease
}

.future-link:hover:after {
    width: 100%
}

.future-link:hover {
    color: #0ff;
    text-shadow: 0 0 10px rgba(0, 255, 255, .8)
}

.retro-button {
    width: 100%;
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    position: relative;
    margin-bottom: 32px;
    overflow: hidden;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    transition: all .3s ease
}

.button-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #7a2cd9, #1fb6ff, #4ddf9f, #7a2cd9);
    background-size: 400% 400%;
    animation: buttonShift 3s ease-in-out infinite;
    border-radius: 12px;
    z-index: 1;
    filter: brightness(.92)
}

@keyframes buttonShift {
    0%,
    to {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}

.retro-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px #ff00ff4d
}

.retro-button:active {
    transform: translateY(0)
}

.button-text {
    position: relative;
    z-index: 2;
    transition: opacity .3s ease;
    text-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.button-loader {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: opacity .3s ease
}

.y2k-spinner {
    width: 32px;
    height: 32px;
    position: relative
}

.spinner-ring {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: spinRing 2s linear infinite
}

.ring-1 {
    width: 32px;
    height: 32px;
    border-top-color: #f0f;
    animation-delay: 0s
}

.ring-2 {
    width: 24px;
    height: 24px;
    top: 4px;
    left: 4px;
    border-top-color: #0ff;
    animation-delay: -.3s
}

.ring-3 {
    width: 16px;
    height: 16px;
    top: 8px;
    left: 8px;
    border-top-color: #ff0;
    animation-delay: -.6s
}

@keyframes spinRing {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.retro-button.loading .button-text {
    opacity: 0
}

.retro-button.loading .button-loader {
    opacity: 1
}

.button-hologram {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #f0f, #0ff);
    border-radius: 14px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity .3s ease;
    z-index: 0
}

.retro-button:hover .button-hologram {
    opacity: .5
}

.retro-divider {
    display: flex;
    align-items: center;
    margin: 32px 0;
    gap: 16px
}

.divider-chrome {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    position: relative;
    overflow: hidden
}

.divider-chrome:after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    animation: dividerScan 4s linear infinite
}

@keyframes dividerScan {
    0% {
        left: -100%
    }
    to {
        left: 100%
    }
}

.divider-text {
    color: #fff9;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px
}

.future-social {
    display: flex;
    gap: 12px;
    margin-bottom: 32px
}

.social-retro {
    flex: 1;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .3s ease;
    min-height: 48px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px
}

.social-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, #ffffff0d, #ffffff05);
    transition: all .3s ease
}

.social-retro:hover {
    border-color: #00ffff80;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px #0ff3
}

.social-retro:hover .social-chrome {
    background: linear-gradient(145deg, #00ffff1a, #ff00ff1a)
}

.social-retro span,
.social-retro svg {
    position: relative;
    z-index: 2
}

.social-hologram {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: #00ffff4d;
    border-radius: 9px;
    opacity: 0;
    filter: blur(6px);
    transition: opacity .3s ease;
    z-index: 0
}

.social-retro:hover .social-hologram {
    opacity: 1
}

.future-signup {
    text-align: center;
    font-size: 13px;
    color: #ffffffb3;
    letter-spacing: .4px
}

.signup-text {
    margin-right: 6px
}

.signup-link {
    font-weight: 600
}

.retro-error {
    color: #ff4da6;
    font-size: 12px;
    font-weight: 600;
    margin-top: -8px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .3s ease;
    position: relative;
    z-index: 5;
    letter-spacing: .4px;
    text-shadow: 0 0 10px rgba(255, 77, 166, .5)
}

.retro-error.show {
    opacity: 1;
    transform: translateY(0)
}

.retro-error-toast {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1c0c16eb;
    border: 1px solid rgba(255, 77, 166, .45);
    box-shadow: 0 10px 24px #00000059, 0 0 16px #ff4da640;
    z-index: 10
}

.retro-error-toast:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, .2), transparent);
    opacity: .7;
    animation: toast-scan 1.8s linear infinite;
    pointer-events: none
}

@keyframes toast-scan {
    0% {
        transform: translate(-100%)
    }
    to {
        transform: translate(100%)
    }
}

.retro-error-shake {
    animation: glitchShake .35s ease-in-out 2, glitchFlicker .9s ease-in-out 1;
    text-shadow: 0 0 10px rgba(255, 77, 166, .7), 1px 0 0 rgba(0, 255, 255, .6), -1px 0 0 rgba(255, 0, 255, .6)
}

@keyframes glitchShake {
    0%,
    to {
        transform: translateY(0) translate(0)
    }
    10% {
        transform: translateY(-1px) translate(-2px)
    }
    20% {
        transform: translateY(1px) translate(2px)
    }
    30% {
        transform: translateY(-1px) translate(1px)
    }
    40% {
        transform: translateY(1px) translate(-2px)
    }
    50% {
        transform: translateY(0) translate(2px)
    }
    60% {
        transform: translateY(-1px) translate(-1px)
    }
    70% {
        transform: translateY(1px) translate(1px)
    }
    80% {
        transform: translateY(-1px) translate(2px)
    }
    90% {
        transform: translateY(1px) translate(-2px)
    }
}

@keyframes glitchFlicker {
    0%,
    to {
        opacity: 1
    }
    25% {
        opacity: .75
    }
    50% {
        opacity: .9
    }
    75% {
        opacity: .6
    }
}

.retro-field.error .field-chrome {
    border-color: #ff4da6;
    box-shadow: 0 0 15px #ff4da64d
}

.retro-field.error label {
    color: #ff4da6
}

.retro-field-error-msg {
    display: block;
    margin-top: 8px;
    padding-left: 4px;
    font-size: .78rem;
    font-weight: 600;
    color: #ff7eb3;
    line-height: 1.4;
    letter-spacing: .02em;
    text-shadow: 0 0 12px rgba(255, 77, 166, .35)
}

.retro-form-summary {
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 77, 166, .45);
    background: #ff4da614;
    color: #ff9ec8;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45
}

.retro-success-inline {
    display: block;
    margin-top: -8px;
    margin-bottom: 18px;
    color: #0ff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px
}

@media (max-width: 480px) {
    .retro-auth {
        padding: 16px
    }
    .future-card {
        padding: 36px 28px;
        border-radius: 20px
    }
    .y2k-title {
        font-size: 1.75rem;
        flex-direction: column;
        gap: 4px
    }
    .retro-logo {
        width: 64px;
        height: 64px
    }
    .logo-chrome {
        width: 52px;
        height: 52px
    }
    .future-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
    .future-social {
        flex-direction: column
    }
    .floating-orbs {
        opacity: .5
    }
    .grid-dots {
        opacity: .3
    }
    .scan-line {
        opacity: .6
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none
}

.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain
}

.logo-lg .logo-img {
    height: 56px
}

.footer-logo .logo-img {
    height: 40px
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 110;
    background: #050a1a;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.main-header--hero {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(180deg, #0308169e, #03081661 70%, #0308162e);
    border-bottom-color: #ffffff14;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease
}

.main-header--hero.main-header--hero-solid {
    background: #050a1aeb;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px)
}

.main-header--hero .header-logo .logo-img {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45))
}

.main-header--hero .header-nav {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 14px;
    gap: 20px
}

.main-header--hero .header-container {
    max-width: 1680px;
    height: 64px;
    padding: 0 18px 0 12px
}

.main-header--hero .nav-item,
.main-header--hero .nav-item-btn {
    color: #f8fbff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: #060c1c42;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .62)
}

.main-header--hero .nav-item:hover,
.main-header--hero .nav-item-btn:hover {
    background: #ffffff24;
    border-color: #ffffff3d;
    color: #fff
}

.main-header--hero .nav-item.active,
.main-header--hero .nav-item-btn.active {
    background: linear-gradient(180deg, #ffffff29, #ffffff0f);
    border-color: #f5a62399;
    color: #fff;
    box-shadow: inset 0 -2px #f5a623, 0 6px 16px #f5a62329;
    border-radius: 8px
}

.main-header--hero .nav-icon {
    display: none
}

.main-header--hero .nav-caret {
    opacity: .85
}

.main-header--hero .header-icon-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    background: #00000026;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease
}

.header-search {
    position: relative;
    display: flex;
    align-items: center
}

.header-search-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    transform: none;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: #060a18eb;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    min-width: 340px;
    box-shadow: 0 14px 30px #00000059;
    z-index: 250;
    overflow: hidden
}

.header-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px
}

.header-search-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #ffffff14;
    color: #fff;
    font-size: .88rem;
    padding: 0 12px;
    outline: none
}

.header-search-input::placeholder {
    color: #fff9
}

.header-search-input:focus {
    border-color: #f5a623e6;
    box-shadow: 0 0 0 3px #f5a62338
}

.header-search-submit {
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid rgba(245, 166, 35, .7);
    background: #f5a6232e;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap
}

.header-search-submit:hover {
    background: #f5a6234d
}

.header-search-suggestions {
    border-top: 1px solid rgba(255, 255, 255, .12);
    max-height: 320px;
    overflow-y: auto
}

.header-search-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    text-align: left;
    cursor: pointer
}

.header-search-item:hover {
    background: #ffffff14
}

.header-search-item-thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #ffffff14
}

.header-search-item-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.header-search-item-name {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.header-search-item-category {
    font-size: .72rem;
    color: #ffffffa6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.header-search-empty {
    padding: 12px 10px;
    font-size: .8rem;
    color: #ffffffb8
}

.main-header--hero .header-icon-link:hover {
    background: #ffffff1f;
    border-color: #ffffff8c;
    color: #fff;
    text-decoration: none
}

.main-header:not(.main-header--hero) .header-icon-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, .2);
    background: #ffffff12;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease
}

.main-header:not(.main-header--hero) .header-icon-link:hover {
    background: #ffffff1f;
    border-color: #ffffff52;
    color: #fff
}

.main-header--hero .btn-user-account {
    border-color: #ffffff6b;
    background: #00000047;
    color: #fff
}

.main-header--hero .user-icon-box {
    color: #fff;
    background: #ffffff1f
}

.main-header--hero .user-account-name {
    color: #fff
}

.main-header--hero .user-account-balance {
    color: #ffffffbf
}

.main-header--hero .btn-auth-register {
    color: #fff;
    border-color: #ffffff70;
    background: #0000003d
}

.main-header--hero .btn-auth-login {
    border-color: #ffffff80;
    background: #fff3;
    color: #fff
}

.main-header .header-container {
    max-width: 1580px;
    margin: 0 auto;
    height: 62px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.main-header--hero .header-container {
    max-width: 100%;
    padding: 0 16px
}

.main-header .header-logo .logo-img {
    height: 54px;
    border-radius: 8px;
    filter: drop-shadow(0 4px 12px rgba(79, 70, 229, .25))
}

.main-header .header-nav {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 8px
}

.main-header .nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b8c5d6;
    font-size: .88rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: .2s ease;
    letter-spacing: .01em
}

.main-header .nav-item:hover {
    background: #ffffff0f;
    border-color: #ffffff1a;
    color: #e2e8f0;
    text-decoration: none
}

.main-header .nav-item.active {
    background: #ffffff14;
    border-color: #ffffff26;
    color: #fff
}

.main-header .nav-icon {
    display: inline-flex;
    opacity: .95
}

.nav-dropdown {
    position: relative
}

.nav-item-btn {
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer
}

.nav-caret {
    transition: transform .2s ease
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 18px 32px #00000073;
    z-index: 200
}

.nav-submenu-item {
    display: block;
    color: #cbd5e1;
    padding: 10px;
    border-radius: 9px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600
}

.nav-submenu-item:hover {
    background: #6366f133;
    color: #fff;
    text-decoration: none
}

.main-header .header-actions,
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 8px
}

.btn-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none
}

.btn-auth-register {
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #ffffff0a
}

.btn-auth-login {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #ffffff14
}

.btn-auth:hover {
    text-decoration: none;
    transform: translateY(-1px)
}

.user-account-wrapper {
    position: relative
}

.btn-user-account {
    border: 1px solid rgba(255, 255, 255, .1);
    background: #ffffff0d;
    border-radius: 8px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1
}

.user-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: #ffffff0f
}

.user-account-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2
}

.user-account-name {
    font-size: .82rem;
    font-weight: 700
}

.user-account-balance {
    font-size: .72rem;
    color: #93c5fd;
    margin-top: 2px
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    background: #0f172a;
    padding: 8px;
    box-shadow: 0 18px 32px #00000073
}

.dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 9px;
    text-decoration: none
}

.dropdown-item-btn {
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    justify-content: flex-start
}

.dropdown-submenu-caret {
    margin-left: auto;
    transition: transform .2s ease
}

.dropdown-submenu-caret.open {
    transform: rotate(180deg)
}

.dropdown-submenu-list {
    margin: 4px 0 6px 30px;
    border-left: 1px solid rgba(148, 163, 184, .25);
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.dropdown-submenu-item {
    color: #b7c3d9;
    text-decoration: none;
    font-size: .9rem;
    padding: 7px 8px;
    border-radius: 8px
}

.dropdown-submenu-item:hover,
.dropdown-item:hover {
    background: #6366f133;
    color: #fff;
    text-decoration: none
}

.dropdown-divider {
    height: 1px;
    margin: 6px 0;
    background: #94a3b838
}

@media (max-width: 1080px) {
    .main-header .header-nav {
        display: none
    }
}

@media (max-width: 768px) {
    .header-search-popover {
        position: fixed;
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        top: calc(64px + env(safe-area-inset-top, 0px));
        width: auto;
        min-width: 0;
        max-width: none;
        transform: none;
        z-index: 300
    }
}

@media (max-width: 600px) {
    .main-header .header-container {
        height: 60px;
        padding: 0 12px
    }
    .main-header .header-logo .logo-img {
        height: 46px
    }
    .btn-auth {
        min-width: 88px;
        padding: 8px 10px;
        font-size: .78rem
    }
    .header-search-popover {
        top: calc(60px + env(safe-area-inset-top, 0px))
    }
    .btn-user-account {
        padding: 5px 8px;
        gap: 6px
    }
    .user-account-info {
        display: flex;
        max-width: 110px
    }
    .user-account-name {
        font-size: .76rem;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .user-account-balance {
        font-size: .66rem;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .dropdown-arrow {
        display: none
    }
}

.footer {
    position: relative;
    z-index: 3;
    background: var(--bg-primary);
    color: #e2e8f0;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.footer-inner {
    padding: 64px 24px 28px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 48px 60px;
    margin-bottom: 48px;
    margin-top: 48px
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0
}

.footer-brand-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px
}

.footer-logo-box {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px #6366f159;
    flex-shrink: 0
}

.footer-logo-box svg {
    color: #fff
}

.footer-logo-text {
    display: flex;
    align-items: baseline;
    gap: 5px
}

.footer-logo-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.5px
}

.footer-logo-sub {
    font-size: 22px;
    font-weight: 300;
    color: #a78bfa;
    letter-spacing: -.5px
}

.footer-desc {
    color: #64748b;
    font-size: .875rem;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 320px
}

.social-btn {
    width: 38px;
    height: 38px;
    background: #ffffff0f;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    transition: all .25s ease
}

.social-btn:hover {
    background: #6366f133;
    border-color: #6366f180;
    color: #a5b4fc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #6366f133
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    grid-column: 2
}

.footer-col-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 18px
}

.footer-col-title svg {
    color: #818cf8;
    flex-shrink: 0
}

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

.footer-col ul li a {
    color: #64748b;
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s ease, padding-left .2s ease;
    display: flex;
    align-items: center;
    gap: 6px
}

.footer-col ul li a:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #334155;
    flex-shrink: 0;
    transition: background .2s ease
}

.footer-col ul li a:hover {
    color: #cbd5e1;
    padding-left: 6px
}

.footer-col ul li a:hover:before {
    background: #818cf8
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.footer-copy {
    font-size: .8rem;
    color: #475569;
    margin: 0
}

.footer-badges {
    display: flex;
    align-items: center;
    gap: 8px
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #ffffff08;
    text-transform: uppercase;
    letter-spacing: .6px
}

.badge svg {
    color: #818cf8
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }
    .footer-brand {
        grid-row: auto
    }
    .footer-nav {
        grid-column: 1;
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 640px) {
    .footer-inner {
        padding: 48px 20px 24px
    }
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

.chatbot {
    position: fixed;
    bottom: 24px;
    right: 5px;
    z-index: 9999;
    font-family: Inter, Nunito, system-ui, sans-serif
}

.chatbot-zalo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    bottom: 158px;
    right: 8px;
    background: #0068ff;
    color: #fff;
    border-radius: 50px;
    padding: 8px 16px 8px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px #0068ff73;
    transition: background .2s, transform .2s cubic-bezier(.34, 1.3, .64, 1), box-shadow .2s;
    z-index: 9998;
    white-space: nowrap
}

.chatbot-zalo-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0
}

.chatbot-zalo-btn:hover {
    background: #0052d6;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 22px #0068ff8c;
    color: #fff
}

.chatbot-zalo-btn:active {
    transform: scale(.97)
}

.chatbot-toggle-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: block;
    line-height: 0;
    position: relative;
    transition: transform .3s cubic-bezier(.34, 1.3, .64, 1);
    outline: none
}

.chatbot-toggle-btn:hover {
    transform: scale(1.06)
}

.chatbot-toggle-btn:focus-visible {
    outline: 3px solid rgba(99, 102, 241, .7);
    outline-offset: 6px;
    border-radius: 8px
}

.chatbot-toggle-img {
    width: 240px;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35))
}

.chatbot-toggle-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef4444;
    display: grid;
    place-items: center;
    color: #fff;
    border: 2px solid rgba(15, 23, 42, .9);
    animation: chatbot-badge-in .25s cubic-bezier(.34, 1.3, .64, 1)
}

@keyframes chatbot-badge-in {
    0% {
        transform: scale(0);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.chatbot-panel {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: min(380px, calc(100vw - 48px));
    max-height: min(560px, calc(100dvh - 120px));
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border-radius: 20px;
    overflow: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 0 0 1px #6366f12e, 0 24px 80px #0000008c, 0 8px 24px #0000004d;
    transform-origin: bottom right;
    transform: scale(.85) translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(.34, 1.28, .64, 1), opacity .22s ease;
    will-change: transform, opacity
}

.chatbot-panel--open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all
}

.chatbot-header {
    flex-shrink: 0;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative
}

.chatbot-header:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, transparent 60%);
    pointer-events: none
}

.chatbot-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff2e;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0
}

.chatbot-header-text {
    flex: 1;
    min-width: 0
}

.chatbot-header-title {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.01em
}

.chatbot-header-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    color: #ffffffc7;
    margin-top: 2px
}

.chatbot-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80b3;
    animation: chatbot-dot-blink 1.8s ease-in-out infinite
}

@keyframes chatbot-dot-blink {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

.chatbot-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #ffffff26;
    color: #ffffffd9;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .2s ease;
    outline: none
}

.chatbot-close-btn:hover {
    background: #ffffff40
}

.chatbot-close-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7)
}

.chatbot-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, .4) transparent
}

.chatbot-body::-webkit-scrollbar {
    width: 5px
}

.chatbot-body::-webkit-scrollbar-thumb {
    background: #6366f166;
    border-radius: 10px
}

.chatbot-body::-webkit-scrollbar-track {
    background: transparent
}

.chatbot-intro {
    padding: 18px 18px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.chatbot-avatar {
    width: 72px;
    margin: 0 auto 10px;
    line-height: 0
}

.chatbot-avatar img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25))
}

.chatbot-greeting {
    font-size: .9rem;
    color: #e2e8f0;
    line-height: 1.5;
    margin: 0 0 6px
}

.chatbot-prompt {
    font-size: .82rem;
    color: #64748b;
    margin: 0
}

.chatbot-questions {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.chatbot-question-item {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: background .2s ease, border-color .2s ease
}

.chatbot-question-item:has(.chatbot-question-btn--active) {
    background: #6366f114;
    border-color: #6366f138
}

.chatbot-question-btn {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    outline: none;
    transition: background .2s ease
}

.chatbot-question-btn:hover {
    background: #ffffff0d
}

.chatbot-question-btn:focus-visible {
    background: #6366f11f;
    outline: none
}

.chatbot-question-number {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #6366f133;
    color: #818cf8;
    font-size: .72rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.chatbot-question-text {
    flex: 1;
    font-size: .84rem;
    color: #cbd5e1;
    line-height: 1.4
}

.chatbot-question-arrow {
    color: #475569;
    flex-shrink: 0;
    transition: transform .25s ease, color .2s ease
}

.chatbot-question-btn:hover .chatbot-question-arrow,
.chatbot-question-btn--active .chatbot-question-arrow {
    color: #818cf8
}

.chatbot-question-arrow--open {
    transform: rotate(180deg)
}

.chatbot-answer {
    padding: 4px 14px 14px 46px;
    animation: chatbot-answer-in .22s ease
}

@keyframes chatbot-answer-in {
    0% {
        opacity: 0;
        transform: translateY(-6px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.chatbot-answer p {
    font-size: .82rem;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 5px
}

.chatbot-answer-line--icon {
    color: #cbd5e1
}

.chatbot-answer-step {
    display: inline;
    color: #818cf8
}

.chatbot-answer--contact {
    padding-left: 12px;
    padding-right: 12px
}

.chatbot-contact-intro {
    font-size: .8rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0 0 12px
}

.chatbot-contact-stack {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.chatbot-contact-section {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.chatbot-contact-heading {
    margin: 4px 0 2px;
    text-align: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #4ade80;
    text-transform: uppercase
}

.chatbot-contact-pills {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.chatbot-contact-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: #f1f5f9;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: linear-gradient(135deg, #6366f124, #1e293b8c);
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: inset 0 1px #ffffff0f, 0 4px 16px #0003;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease
}

.chatbot-contact-pill:hover {
    transform: translateY(-1px);
    border-color: #818cf873;
    box-shadow: inset 0 1px #ffffff14, 0 6px 22px #6366f12e
}

.chatbot-contact-pill:focus-visible {
    outline: 2px solid rgba(129, 140, 248, .7);
    outline-offset: 2px
}

.chatbot-contact-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff
}

.chatbot-contact-pill-icon--zalo {
    background: linear-gradient(145deg, #0068ff, #0047b3);
    box-shadow: 0 2px 10px #0068ff59
}

.chatbot-contact-pill-icon--telegram {
    background: linear-gradient(145deg, #229ed9, #08c);
    box-shadow: 0 2px 10px #229ed959
}

.chatbot-contact-svg {
    width: 20px;
    height: 20px;
    display: block
}

.chatbot-contact-pill-label {
    flex: 1;
    text-align: center;
    line-height: 1.3
}

.chatbot-footer {
    flex-shrink: 0;
    padding: 10px 18px 14px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.chatbot-footer p {
    font-size: .78rem;
    color: #475569;
    margin: 0
}

.chatbot-footer a {
    color: #818cf8;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease
}

.chatbot-footer a:hover {
    color: #a5b4fc;
    text-decoration: underline
}

@media (max-width: 480px) {
    .chatbot {
        bottom: 16px;
        right: 16px
    }
    .chatbot-toggle-img {
        width: 126px;
        max-height: 112px
    }
    .chatbot-panel {
        bottom: calc(100% + 10px);
        right: 0;
        width: calc(100vw - 32px);
        max-height: min(520px, calc(100dvh - 100px))
    }
    .chatbot-zalo-btn {
        bottom: 108px;
        right: 3px
    }
}

.layout {
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    isolation: isolate
}

.layout-main--with-header {
    padding-top: 64px
}

@media (max-width: 600px) {
    .layout-main--with-header {
        padding-top: 60px
    }
}

.layout-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    background: var(--bg-primary)
}

.reveal-ready {
    will-change: transform, opacity
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        animation: none !important;
        transition: none !important
    }
}

.home-page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0
}

.main-content {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0
}

.home-page>.main-content {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%
}

.home-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background-color: #060810
}

.home-hero-fallback {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: stretch
}

.home-hero-bg-stack {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    z-index: 0;
    pointer-events: none
}

.home-hero-bg-stack>div {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.home-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}

.home-hero-fallback .home-hero-bg {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    animation: homeHeroBgIn .85s ease both
}

@keyframes homeHeroBgIn {
    0% {
        opacity: .88;
        transform: scale(1.03)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

.home-hero-scrim {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, #02040cfa, #02040cd9 40%, #02040ce6)
}

.home-hero-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: min(100%, 1500px);
    margin: 0 auto;
    padding: calc(108px + env(safe-area-inset-top, 0px)) 28px 88px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr);
    gap: 36px;
    align-items: end;
    overflow-x: hidden;
    overflow-x: clip
}

.home-hero-inner--showbill {
    grid-template-columns: minmax(300px, 520px) minmax(360px, 720px);
    justify-content: space-between;
    align-items: end;
    min-height: 100vh;
    min-height: 100dvh;
    gap: clamp(24px, 4vw, 54px);
    overflow-x: visible;
    overflow-y: visible
}

.home-hero-inner--showbill .home-hero-showcase {
    --hero-strip-bleed: calc(28px + max(0px, (100vw - 1500px) / 2));
    width: calc(100% + var(--hero-strip-bleed));
    max-width: none;
    margin-right: calc(-1 * var(--hero-strip-bleed));
    box-sizing: border-box
}

.home-hero-inner--showbill .home-hero-mini-strip {
    padding-right: env(safe-area-inset-right, 0px)
}

.home-hero-inner--showbill .home-hero-controls--showbill {
    max-width: none;
    padding-right: max(2px, env(safe-area-inset-right, 0px))
}

.home-hero-left {
    max-width: 540px;
    align-self: center
}

.home-hero-left--center {
    max-width: 520px;
    width: 100%;
    align-self: center
}

.home-hero-showcase {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    align-self: end;
    padding-bottom: clamp(8px, 1.4vw, 20px)
}

.home-hero-showcase-heading {
    margin: 0 0 14px;
    padding-left: 2px;
    font-size: clamp(.88rem, 1.35vw, 1.05rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffffe6;
    line-height: 1.3;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45)
}

.home-hero-kicker,
.home-hero-title,
.home-hero-price,
.home-hero-desc {
    transition: opacity var(--hero-bg-dur, .4s) cubic-bezier(.25, .1, .25, 1), transform var(--hero-bg-dur, .4s) cubic-bezier(.25, .1, .25, 1);
    will-change: opacity
}

.home-hero-kicker.is-swapping,
.home-hero-title.is-swapping,
.home-hero-price.is-swapping,
.home-hero-desc.is-swapping {
    opacity: 0;
    transform: translate3d(0, -6px, 0)
}

.home-hero-accent-line {
    display: block;
    width: 44px;
    height: 2px;
    background: #ffffffe6;
    margin-bottom: 18px
}

.home-hero-kicker {
    margin: 0 0 8px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: #ffffffeb
}

.home-hero-title {
    margin: 0 0 12px;
    font-family: Oswald, Be Vietnam Pro, sans-serif;
    font-size: clamp(3rem, 7.2vw, 5.8rem);
    font-weight: 700;
    line-height: .94;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff
}

.home-hero-price {
    margin: 0 0 14px;
    font-size: 1.22rem;
    font-weight: 700;
    color: #f5a623
}

.home-hero-desc {
    margin: 0 0 26px;
    font-size: .98rem;
    line-height: 1.58;
    color: #ffffffd1;
    max-width: 460px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.home-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 8px
}

.home-hero-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease
}

.home-hero-pill--outline {
    background: #ffffff14;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.home-hero-pill:hover {
    background: #ffffff29;
    border-color: #ffffffe6;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px)
}

.home-hero-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-left: 2px
}

.home-hero-controls--showbill {
    margin-top: 18px;
    gap: 16px;
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    align-items: center
}

.home-hero-mini-strip {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: clamp(14px, 2.2vw, 22px);
    margin-top: 0;
    overflow: visible;
    padding: 20px 14px 12px;
    box-sizing: border-box;
    perspective: 920px;
    perspective-origin: 42% 88%
}

.home-hero-mini-card {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    background: transparent;
    padding: 0;
    border-radius: 16px;
    width: clamp(132px, 15.2vw, 184px);
    height: clamp(194px, 23.5vw, 260px);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
    border: 2px solid rgba(255, 255, 255, .28);
    transition: box-shadow .4s cubic-bezier(.25, .1, .25, 1), border-color .35s ease;
    box-shadow: 0 10px 26px #0000003d
}

.home-hero-mini-card:hover:not(:disabled):not(.is-shuffle-exit) {
    border-color: #ffffff6b;
    box-shadow: 0 14px 32px #00000052
}

.home-hero-mini-card.is-active:hover:not(:disabled):not(.is-shuffle-exit) {
    border-color: #fcd34d
}

.home-hero-mini-card.is-active {
    z-index: 3;
    border-color: #f5a623
}

.home-hero-mini-card.is-shuffle-exit {
    z-index: 0;
    pointer-events: none
}

.home-hero-mini-card:disabled {
    opacity: .6;
    cursor: wait
}

.home-hero-mini-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-size: cover;
    background-position: center
}

.home-hero-next-pill {
    border: 1px solid rgba(255, 255, 255, .56);
    background: #ffffff29;
    color: #fff;
    border-radius: 999px;
    min-width: 126px;
    height: 46px;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .12em;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease
}

.home-hero-next-pill:hover {
    background: #ffffff3d;
    border-color: #ffffffbd;
    transform: translateY(-1px)
}

.home-hero-next-pill:disabled {
    opacity: .5;
    cursor: not-allowed
}

.home-hero-progress {
    flex: 1;
    min-width: 160px;
    height: 3px;
    border-radius: 999px;
    background: #ffffff57;
    overflow: hidden
}

.home-hero-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #f5a623;
    transition: width .4s cubic-bezier(.25, .1, .25, 1)
}

.home-hero-index {
    font-family: Oswald, sans-serif;
    font-size: clamp(2.3rem, 3.2vw, 3.1rem);
    font-weight: 600;
    color: #fffffffa;
    line-height: 1;
    min-width: 2.2ch;
    text-align: right;
    transition: opacity .4s ease, transform .4s cubic-bezier(.25, .1, .25, 1);
    font-variant-numeric: tabular-nums
}

.home-hero-skeleton {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(125deg, #0c0f18, #151a2a, #0c0f18)
}

.home-hero-skeleton-shimmer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .04) 45%, transparent 90%);
    animation: homeHeroShimmer 1.4s ease infinite
}

@keyframes homeHeroShimmer {
    0% {
        transform: translate(-40%)
    }
    to {
        transform: translate(40%)
    }
}

.benefits-section {
    position: relative;
    z-index: 3;
    padding: 20px 0 48px;
    background: var(--bg-primary)
}

.benefits-section:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 100%);
    height: 140px;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(99, 102, 241, .09), rgba(56, 189, 248, .03) 45%, transparent 72%);
    pointer-events: none;
    z-index: 0
}

.benefits-section .benefits-marquee {
    position: relative;
    z-index: 1
}

.benefits-marquee {
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%)
}

.benefits-marquee:hover .benefits-marquee-track {
    animation-play-state: paused
}

.benefits-marquee-track {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
    animation-name: benefits-marquee-scroll;
    animation-duration: 45s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    will-change: transform;
    backface-visibility: hidden
}

.benefits-marquee-set {
    margin-top: 18px;
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding-right: 18px;
    flex-shrink: 0
}

.benefits-marquee-set .benefit-card {
    flex: 0 0 auto;
    width: min(100vw - 48px, 308px);
    min-width: 248px
}

@keyframes benefits-marquee-scroll {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(calc(-100% / 3), 0, 0)
    }
}

@media (prefers-reduced-motion: reduce) {
    .benefits-section:before {
        opacity: .6
    }
    .benefits-marquee {
        mask-image: none;
        -webkit-mask-image: none;
        overflow: visible;
        padding: 0 16px;
        max-width: 1200px;
        margin: 0 auto
    }
    .benefits-marquee-track {
        animation-name: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 100%
    }
    .benefits-marquee-set {
        flex-wrap: wrap;
        justify-content: center;
        padding-right: 0;
        width: 100%
    }
    .benefits-marquee-set:not(:first-child) {
        display: none
    }
    .benefits-marquee-set .benefit-card {
        width: min(100%, 280px);
        min-width: 0
    }
    .benefit-card:hover,
    .benefit-card:hover .benefit-icon {
        transform: none
    }
}

.benefit-card {
    position: relative;
    isolation: isolate;
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    background: linear-gradient(155deg, #3341556b, #1e293b8c 48%, #0f172ab8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 0 0 1px #6366f10d, 0 4px 28px #00000061, inset 0 1px #ffffff0f;
    transition: transform .35s cubic-bezier(.34, 1.2, .64, 1), border-color .3s ease, box-shadow .35s ease
}

.benefit-card:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #818cf859, #38bdf814 50%, #a78bfa1f);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    opacity: .75;
    transition: opacity .3s ease
}

.benefit-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #818cf86b;
    box-shadow: 0 0 0 1px #6366f133, 0 0 40px #6366f124, 0 16px 48px #0000006b;
    z-index: 2
}

.benefit-card:hover:before {
    opacity: 1
}

.benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #a5b4fc;
    background: linear-gradient(145deg, #6366f152, #4f46e524);
    flex-shrink: 0;
    box-shadow: inset 0 1px #ffffff14, 0 4px 16px #0003;
    transition: transform .35s cubic-bezier(.34, 1.2, .64, 1), box-shadow .3s ease
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.06);
    box-shadow: inset 0 1px #ffffff1f, 0 0 24px #6366f140
}

.benefits-marquee-set .benefit-card:nth-child(4n+1) .benefit-icon {
    color: #c4b5fd;
    background: linear-gradient(145deg, #6366f166, #4338ca2e)
}

.benefits-marquee-set .benefit-card:nth-child(4n+2) .benefit-icon {
    color: #7dd3fc;
    background: linear-gradient(145deg, #0ea5e959, #38bdf81f)
}

.benefits-marquee-set .benefit-card:nth-child(4n+3) .benefit-icon {
    color: #6ee7b7;
    background: linear-gradient(145deg, #10b98152, #34d3991a)
}

.benefits-marquee-set .benefit-card:nth-child(4n+4) .benefit-icon {
    color: #fcd34d;
    background: linear-gradient(145deg, #f59e0b61, #fbbf241f)
}

.benefit-title {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 5px;
    color: #f8fafc;
    line-height: 1.25
}

.benefit-desc {
    font-size: .875rem;
    line-height: 1.45;
    color: #cbd5e1e0;
    margin: 0
}

.categories-section {
    position: relative;
    z-index: 3;
    padding: 8px 0 52px;
    background: var(--bg-primary);
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 24px
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    margin-bottom: 6px
}

.section-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    border-radius: 11px
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: .95rem
}

.view-all-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(99, 102, 241, .45);
    color: #b2bbff;
    background: #4f46e524;
    border-radius: 12px;
    padding: 11px 16px;
    font-weight: 600;
    text-decoration: none
}

.view-all-link:hover {
    background: #4f46e542;
    text-decoration: none
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.category-card {
    position: relative;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    height: auto;
    min-height: 0;
    border-radius: 20px;
    background: linear-gradient(145deg, #11141bf0, #010816e6);
    border: 1px dashed rgba(148, 163, 184, .4);
    transform-origin: center;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease
}

.category-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background: var(--gradient);
    transition: .22s ease
}

.category-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #60a5facc;
    box-shadow: 0 18px 36px #1e3a8a42;
    text-decoration: none
}

.category-card:hover .category-bg {
    opacity: .14
}

.category-card:hover .category-name,
.category-card:hover .category-type {
    text-decoration: none
}

.category-icon {
    position: relative;
    z-index: 1;
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: 0;
    display: grid;
    place-items: center;
    color: #9aa8ff;
    background: linear-gradient(145deg, #1e293bbf, #0f172acc);
    border-bottom: 1px solid rgba(148, 163, 184, .2);
    overflow: hidden
}

.category-icon svg {
    width: clamp(40px, 22%, 72px);
    height: auto;
    max-height: 45%
}

.category-icon img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
    display: block
}

.category-info {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 12px 16px 8px;
    flex: 0 0 auto
}

.category-name {
    font-size: 1.22rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: #7cb0ff;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.category-tagline {
    color: #cbd5e1d9;
    font-size: .92rem;
    margin-bottom: 10px
}

.category-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.category-meta span {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, .45);
    background: #4f46e51f;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #bfc8ff
}

.category-arrow {
    position: relative;
    z-index: 1;
    width: calc(100% - 28px);
    margin: 0 14px 16px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #0f172af2, #0f172ab3);
    border: 1px solid rgba(96, 165, 250, .4);
    color: #67c7ff;
    font-size: 1.02rem;
    font-weight: 700
}

.category-skeleton {
    border-radius: 18px;
    background: #1e293b6b;
    border: 1px solid rgba(148, 163, 184, .14);
    padding: 18px
}

.skeleton-icon,
.skeleton-text {
    background: #47556959;
    animation: pulse 1.35s ease infinite
}

.skeleton-icon {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin-bottom: 14px
}

.skeleton-text {
    height: 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 70%
}

.skeleton-text.short {
    width: 40%
}

.error-state,
.empty-state {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: #0f172a80;
    text-align: center;
    padding: 44px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

.error-state svg,
.empty-state svg {
    color: #64748b
}

.btn-retry {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 700;
    padding: 11px 16px
}

.cta-section {
    position: relative;
    z-index: 3;
    padding: 8px 0 56px;
    background: var(--bg-primary);
    overflow: hidden
}

.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, .24);
    padding: 42px 24px;
    background: linear-gradient(125deg, #1e293bb8, #0f172ab3)
}

.cta-glow {
    position: absolute;
    inset: -140px -100px auto auto;
    width: 430px;
    height: 430px;
    background: radial-gradient(circle, rgba(99, 102, 241, .24), transparent 65%)
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center
}

.cta-title {
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
    margin-bottom: 10px
}

.cta-desc {
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 24px
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700
}

.btn-cta-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff
}

.btn-cta-secondary {
    border: 1px solid rgba(148, 163, 184, .45);
    color: #e2e8f0;
    background: #0f172a59
}

.home-footer {
    background: linear-gradient(180deg, #070b18, #05070f);
    border-top: 1px solid rgba(148, 163, 184, .2);
    padding: 52px 0 18px
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 52px;
    margin-bottom: 28px
}

.footer-logo-box {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    margin-bottom: 14px
}

.footer-brand-name {
    font-size: 1.4rem;
    margin-bottom: 8px
}

.footer-brand p {
    color: var(--text-secondary);
    margin-bottom: 16px
}

.footer-social {
    display: flex;
    gap: 10px
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #1e293b80
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px
}

.footer-column h4 {
    margin-bottom: 12px;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .05em
}

.footer-column a {
    display: block;
    color: var(--text-secondary);
    padding: 6px 0;
    text-decoration: none
}

.footer-column a:hover {
    color: #a5b4fc;
    text-decoration: none
}

.footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, .2);
    margin-top: 16px;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font-size: .86rem
}

.heart {
    color: #f87171
}

@media (max-width: 1100px) {
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .footer-content {
        grid-template-columns: 1fr
    }
    .home-hero-inner {
        grid-template-columns: 1fr;
        align-items: start;
        padding-bottom: 72px
    }
    .home-hero-inner--showbill {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 18px
    }
    .home-hero-left {
        max-width: none;
        top: 20px
    }
    .home-hero-showcase {
        padding-bottom: 0
    }
}

@media (max-width: 768px) {
    .benefits-section {
        display: none
    }
    .home-hero {
        min-height: auto;
        padding-top: 0;
        padding-bottom: 24px
    }
    .home-hero-inner {
        padding: calc(56px + env(safe-area-inset-top, 0px)) 18px 56px;
        gap: 28px
    }
    .home-hero-inner.home-hero-inner--showbill {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px))
    }
    .home-hero-inner--showbill .home-hero-showcase {
        --hero-strip-bleed: calc(18px + max(0px, (100vw - 1500px) / 2));
        transform: translateY(-10px)
    }
    .home-hero-inner--showbill .home-hero-controls--showbill {
        margin-top: 10px
    }
    .home-hero-desc {
        -webkit-line-clamp: 3
    }
    .home-hero-kicker {
        font-size: 1.1rem
    }
    .home-hero-title {
        font-size: clamp(2.2rem, 9vw, 3.6rem);
        line-height: 1
    }
    .home-hero-index {
        font-size: 2rem
    }
    .home-hero-controls--showbill {
        gap: 10px;
        width: 100%
    }
    .home-hero-progress {
        min-width: 110px
    }
    .home-hero-next-pill {
        min-width: 98px;
        height: 40px
    }
    .home-hero-showcase-heading {
        margin-bottom: 10px;
        letter-spacing: .06em
    }
    .home-hero-mini-strip {
        gap: 10px;
        margin-top: 0;
        padding: 14px 12px 10px
    }
    .home-hero-mini-card {
        flex-shrink: 0;
        width: clamp(96px, 22vw, 136px);
        height: clamp(140px, 32vw, 194px)
    }
    .section-header {
        flex-direction: column;
        align-items: flex-start
    }
    .categories-grid {
        grid-template-columns: 1fr
    }
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center
    }
}

@media (max-width: 600px) {
    .home-hero-inner {
        padding-top: calc(72px + env(safe-area-inset-top, 0px))
    }
}

@media (max-width: 520px) {
    .footer-links {
        grid-template-columns: 1fr
    }
    .home-hero-cta {
        width: 100%
    }
    .home-hero-pill {
        flex: 1;
        justify-content: center;
        min-width: 0
    }
}

.products-page {
    min-height: 100vh;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: transparent
}

.main-content.products-page {
    width: 100%;
    flex: 1 0 auto;
    min-width: 0;
    box-sizing: border-box
}

.products-page .products-page__inner {
    max-width: 1580px;
    width: 100%
}

.main-content {
    padding: 70px 0 0
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .92rem
}

.breadcrumb a {
    color: #cbd5e1;
    text-decoration: none
}

.breadcrumb-separator {
    color: #64748b
}

.breadcrumb-current {
    color: #f1f5f9
}

.category-header {
    margin-bottom: 22px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: linear-gradient(135deg, #0f172adb, #0a0c1ec2)
}

.category-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px
}

.category-title h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    letter-spacing: -.02em
}

.category-badge {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, .55);
    background: #2563eb2e;
    color: #bfdbfe;
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase
}

.category-desc {
    color: #94a3b8;
    font-size: .95rem
}

.products-section {
    width: 100%;
    max-width: none;
    min-width: 0
}

.loading-grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: start
}

.products-section .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media (max-width: 1100px) {
    .loading-grid,
    .products-grid,
    .products-section .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 768px) {
    .loading-grid,
    .products-grid,
    .products-section .products-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.product-skeleton,
.product-card {
    border-radius: 20px;
    border: 1px dashed rgba(148, 163, 184, .4);
    background: linear-gradient(145deg, #11141bf0, #010816e6);
    overflow: hidden;
    box-shadow: 0 12px 30px #02061759
}

.product-skeleton {
    padding: 14px
}

.skeleton-image,
.skeleton-text {
    background: #47556959;
    animation: pulse 1.3s ease infinite
}

.skeleton-image {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 140px;
    border-radius: 14px
}

.skeleton-text {
    height: 15px;
    border-radius: 8px;
    margin-top: 11px
}

.skeleton-text.short {
    width: 60%;
    height: 12px
}

.error-message,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .2);
    background: #0f172a8c;
    padding: 42px 20px
}

.error-message svg,
.empty-state svg {
    color: #64748b
}

.btn-retry {
    margin-top: 4px;
    border: 0;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border-radius: 11px;
    padding: 10px 16px;
    font-weight: 700
}

.product-card {
    transition: .24s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.product-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #60a5facc;
    box-shadow: 0 18px 36px #1e3a8a42
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: linear-gradient(145deg, #1e293bbf, #0f172acc);
    border-bottom: 1px solid rgba(148, 163, 184, .2);
    overflow: hidden
}

.product-image img,
.product-placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.product-image img {
    object-fit: contain;
    object-position: center
}

.product-placeholder {
    display: grid;
    place-items: center;
    color: #64748b
}

.product-info {
    padding: 12px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.product-name {
    margin: 0 0 10px;
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    font-weight: 800;
    letter-spacing: .02em;
    color: #7cb0ff;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.product-package-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #e2e8f0
}

.product-package-select {
    width: 100%;
    border: 1px solid rgba(45, 212, 191, .45);
    background: #18183ae6;
    color: #e2e8f0;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 1.05rem;
    font-weight: 600;
    outline: none;
    margin-bottom: 12px
}

.product-agreement {
    margin: 0 0 12px;
    text-align: center;
    font-size: .95rem;
    color: #9ca3af;
    font-weight: 700
}

.product-agreement a {
    color: #21d4c7;
    text-decoration: none
}

.btn-buy {
    width: 100%;
    border-radius: 14px;
    padding: 13px 14px;
    font-weight: 800;
    font-size: 1.05rem;
    border: 0;
    cursor: pointer
}

.btn-buy {
    border: 1px solid rgba(96, 165, 250, .4);
    background: linear-gradient(180deg, #0f172af2, #0f172ab3);
    color: #67c7ff;
    margin-bottom: 0;
    min-height: 52px
}

.btn-buy:disabled {
    background: #47556973;
    color: #94a3b8
}

.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 12px
}

.product-info .btn-buy {
    margin-top: auto
}

.pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

.btn-page {
    min-width: 38px;
    height: 38px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px;
    background: #1e293b8c;
    color: #d1d5db;
    display: grid;
    place-items: center;
    font-weight: 600
}

.btn-page.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff
}

.btn-page:disabled {
    opacity: .45
}

@media (max-width: 620px) {
    .product-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 500px;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px #00000026;
    z-index: 9999;
    animation: slideIn .3s ease
}

@keyframes slideIn {
    0% {
        transform: translate(400px);
        opacity: 0
    }
    to {
        transform: translate(0);
        opacity: 1
    }
}

.toast-success {
    background: #10b981;
    color: #fff
}

.toast-error {
    background: #ef4444;
    color: #fff
}

.toast-warning {
    background: #f59e0b;
    color: #fff
}

.toast-info {
    background: #3b82f6;
    color: #fff
}

.toast-icon {
    flex-shrink: 0
}

.toast-message {
    flex: 1;
    font-size: .875rem;
    font-weight: 500
}

.toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background .2s
}

.toast-close:hover {
    background: #fff3
}

.reveal {
    opacity: 0;
    transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .55s cubic-bezier(.4, 0, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform
}

.reveal.revealed {
    opacity: 1;
    transform: none !important
}

.reveal.fade-up {
    transform: translateY(32px)
}

.reveal.fade-up.revealed {
    transform: translateY(0)
}

.reveal.fade-in,
.reveal.fade-in.revealed {
    transform: none
}

.reveal.slide-left {
    transform: translate(-40px)
}

.reveal.slide-left.revealed {
    transform: translate(0)
}

.reveal.slide-right {
    transform: translate(40px)
}

.reveal.slide-right.revealed {
    transform: translate(0)
}

.reveal.scale-up {
    transform: scale(.88)
}

.reveal.scale-up.revealed {
    transform: scale(1)
}

.reveal-group {
    --reveal-stagger: .07s
}

.reveal-group>.reveal {
    --reveal-delay: var(--reveal-stagger, 0s)
}

.reveal-group>.reveal:nth-child(1) {
    --reveal-delay: calc(0 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(2) {
    --reveal-delay: calc(1 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(3) {
    --reveal-delay: calc(2 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(4) {
    --reveal-delay: calc(3 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(5) {
    --reveal-delay: calc(4 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(6) {
    --reveal-delay: calc(5 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(7) {
    --reveal-delay: calc(6 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(8) {
    --reveal-delay: calc(7 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(9) {
    --reveal-delay: calc(8 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(10) {
    --reveal-delay: calc(9 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(11) {
    --reveal-delay: calc(10 * var(--reveal-stagger, .07s))
}

.reveal-group>.reveal:nth-child(12) {
    --reveal-delay: calc(11 * var(--reveal-stagger, .07s))
}

.product-detail-page {
    min-height: 100vh;
    background: transparent;
    padding: 68px 0 56px;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .88rem;
    color: #94a3b8;
    margin-bottom: 20px
}

.breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .2s ease
}

.breadcrumb a:hover {
    color: #a5b4fc
}

.breadcrumb span:last-child {
    color: #e2e8f0;
    font-weight: 600
}

.product-detail-loading,
.product-detail-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: #fff;
    gap: 1rem
}

.product-detail-error .btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #0f172a;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 8px 22px #6366f159;
    transition: transform .15s ease, box-shadow .15s ease
}

.product-detail-error .btn-back:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px #6366f173
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 255, 136, .1);
    border-top-color: #0f8;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
    align-items: start;
    min-width: 0;
    width: 100%
}

.product-detail-left,
.product-detail-right,
.product-detail-description {
    min-width: 0
}

.product-detail-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.product-image-card {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 300px;
    position: relative;
    overflow: hidden
}

.product-image-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    text-align: center
}

.product-image-title .product-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.3
}

.image-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center
}

.slider-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .55s ease, transform .55s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    visibility: hidden
}

.slider-image.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    visibility: visible
}

.slider-image img,
.slider-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px
}

.slider-image video {
    cursor: pointer
}

.video-play-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000004d;
    border-radius: 12px;
    cursor: pointer;
    transition: background .3s ease
}

.video-play-overlay:hover {
    background: #00000080
}

.video-play-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #00ff88f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0e27;
    padding-left: 4px;
    box-shadow: 0 4px 20px #0f86;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer
}

.video-play-overlay:hover .video-play-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 28px #0f89
}

.video-play-icon svg {
    width: 28px;
    height: 28px
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .35);
    background: #0f172a85;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 30
}

.slider-nav:hover {
    background: #0f83;
    border-color: #0f8
}

.slider-prev {
    left: 18px
}

.slider-next {
    right: 18px
}

.slider-dots {
    position: absolute;
    z-index: 28;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%);
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #02081759;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none
}

.slider-dot {
    pointer-events: auto
}

.slider-dot {
    border: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ffffff59;
    cursor: pointer;
    transition: all .3s ease
}

.slider-dot.active {
    width: 30px;
    background: #0f8
}

@media (max-width: 640px) {
    .product-image-card {
        padding: 1.1rem 1rem 1.6rem
    }
    .product-image-title {
        margin-bottom: 1rem
    }
    .product-image-title .product-title {
        font-size: 1.25rem
    }
    .image-slider {
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 260px
    }
    .slider-image img,
    .slider-image video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 16px
    }
    .slider-nav {
        width: 38px;
        height: 38px;
        background: #02061799
    }
    .slider-prev {
        left: 12px
    }
    .slider-next {
        right: 12px
    }
    .slider-dots {
        bottom: 14px;
        gap: 6px;
        padding: 6px 8px
    }
    .slider-dot {
        width: 7px;
        height: 7px
    }
    .slider-dot.active {
        width: 22px
    }
}

.product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff4d
}

.product-header {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 2rem
}

.product-badges {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap
}

.badge {
    padding: .4rem 1rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase
}

.badge-primary {
    background: #6366f133;
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, .3)
}

.badge-warning {
    background: #fb923c33;
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, .3)
}

.badge-success {
    background: #22c55e33;
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, .3)
}

.product-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem
}

.product-meta {
    display: flex;
    gap: 1.5rem;
    color: #fff9;
    font-size: .875rem
}

.meta-item {
    display: flex;
    align-items: center;
    gap: .5rem
}

.meta-item svg {
    color: #0f8
}

.package-section {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 2rem
}

.section-title {
    font-size: .875rem;
    font-weight: 700;
    color: #ffffffb3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem
}

.package-list {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.package-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: #ffffff05;
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    cursor: pointer;
    transition: all .3s ease;
    min-width: 0
}

.package-info {
    min-width: 0
}

.package-item:hover {
    background: #ffffff0d;
    border-color: #00ff884d
}

.package-item.active {
    background: #00ff881a;
    border-color: #0f8
}

.package-item.out-of-stock {
    opacity: .72;
    border-color: #f8717159
}

.package-item.out-of-stock .package-duration {
    color: #ffffff8c
}

.package-item.out-of-stock .package-price {
    color: #fbbf24d9
}

.package-out-of-stock {
    display: inline-block;
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #f87171
}

.package-empty {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #02061773;
    border: 1px dashed rgba(148, 163, 184, .35);
    color: #e2e8f0d9;
    font-size: .92rem;
    line-height: 1.5
}

.selected-package-warn {
    margin-top: 10px;
    font-size: .82rem;
    font-weight: 600;
    color: #fbbf24
}

.selected-package-info--empty {
    border-color: #94a3b859;
    background: #02061759
}

.selected-package-info--empty .selected-package-name {
    color: #e2e8f0bf
}

.package-duration {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .2rem
}

.package-desc {
    font-size: .8rem;
    color: #ffffff80
}

.package-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f8
}

.product-detail-description {
    margin-top: .5rem
}

.product-description {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 2rem;
    min-height: 120px
}

.description-content {
    color: #fffc;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word
}

.description-content p {
    margin-bottom: 1rem
}

.description-content ul,
.description-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0
}

.description-content li,
.description-list li {
    padding-left: 1.5rem;
    margin-bottom: .75rem;
    position: relative
}

.description-content li:before,
.description-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0f8;
    font-weight: 700
}

.description-text {
    white-space: pre-line
}

.description-links {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.description-links h4 {
    color: #fff;
    font-size: .875rem;
    margin-bottom: .75rem;
    margin-top: 1.5rem
}

.description-links h4:first-child {
    margin-top: 0
}

.download-link,
.guide-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    background: #00ff881a;
    border: 1px solid rgba(0, 255, 136, .3);
    border-radius: 8px;
    color: #0f8;
    text-decoration: none;
    font-weight: 500;
    transition: all .3s ease
}

.download-link:hover,
.guide-link:hover {
    background: #0f83;
    transform: translateY(-2px)
}

.product-detail-right {
    position: sticky;
    top: 2rem;
    height: fit-content
}

.purchase-card {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 2rem
}

.purchase-header h3 {
    font-size: .875rem;
    font-weight: 700;
    color: #ffffffb3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem
}

.selected-package-info {
    background: #00ff881a;
    border: 1px solid rgba(0, 255, 136, .3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem
}

.selected-package-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .25rem
}

.selected-package-desc {
    font-size: .875rem;
    color: #fff9
}

.purchase-quantity {
    margin-bottom: 1.5rem
}

.purchase-quantity label {
    display: block;
    font-size: .875rem;
    color: #ffffffb3;
    margin-bottom: .75rem
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: .5rem
}

.qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all .3s ease
}

.qty-btn:hover:not(:disabled) {
    background: #00ff881a;
    border-color: #0f8
}

.qty-btn:disabled {
    opacity: .3;
    cursor: not-allowed
}

.qty-input {
    flex: 1;
    height: 40px;
    text-align: center;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600
}

.purchase-coupon {
    margin-bottom: 1rem
}

.purchase-coupon label {
    display: block;
    font-size: .875rem;
    color: #ffffffb3;
    margin-bottom: .5rem
}

.coupon-row {
    display: flex;
    gap: 8px
}

.coupon-input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    color: #fff;
    font-size: .95rem;
    text-transform: uppercase
}

.btn-apply-coupon {
    height: 42px;
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    color: #08131c;
    font-weight: 700;
    background: linear-gradient(135deg, #22d3ee, #22c55e);
    cursor: pointer;
    white-space: nowrap
}

.btn-apply-coupon:disabled {
    opacity: .5;
    cursor: not-allowed
}

.coupon-result {
    margin: 8px 0 0;
    color: #86efac;
    font-size: .9rem
}

.coupon-input:focus {
    outline: none;
    border-color: #0f8;
    box-shadow: 0 0 0 2px #00ff8826
}

.purchase-summary {
    background: #ffffff05;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    color: #ffffffb3;
    font-size: .875rem
}

.summary-row:last-child {
    margin-bottom: 0
}

.summary-divider {
    height: 1px;
    background: #ffffff1a;
    margin: 1rem 0
}

.summary-discount {
    color: #86efac;
    font-weight: 600
}

.summary-total {
    font-size: 1rem;
    font-weight: 600;
    color: #fff
}

.total-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f8
}

.btn-purchase {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #0f8, #00cc6a);
    border: none;
    border-radius: 12px;
    color: #0a0e27;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: all .3s ease;
    margin-bottom: 1rem
}

.btn-purchase:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px #0f86
}

.btn-purchase:disabled {
    opacity: .5;
    cursor: not-allowed
}

.purchase-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    background: #00ff880d;
    border: 1px solid rgba(0, 255, 136, .2);
    border-radius: 8px;
    color: #0f8;
    font-size: .875rem
}

.purchase-note svg {
    flex-shrink: 0
}

@media (max-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr
    }
    .product-detail-right {
        position: static;
        order: 2
    }
    .product-detail-description {
        order: 3
    }
}

@media (max-width: 768px) {
    .product-detail-page {
        padding: 40px 0 calc(140px + env(safe-area-inset-bottom, 0px))
    }
    .product-detail-page .container {
        width: 100%;
        max-width: 100%;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        box-sizing: border-box
    }
    .product-title {
        font-size: 1.5rem
    }
    .product-meta {
        flex-direction: column;
        gap: .5rem
    }
    .coupon-row {
        flex-wrap: wrap
    }
    .coupon-input {
        flex: 1 1 140px;
        min-width: 0
    }
    .btn-apply-coupon {
        flex: 0 0 auto
    }
    .product-detail-right {
        margin-bottom: 8px
    }
    .purchase-card {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px))
    }
    body:has(.product-detail-page) .chatbot {
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        right: max(8px, env(safe-area-inset-right, 0px))
    }
    body:has(.product-detail-page) .chatbot-zalo-btn {
        bottom: 88px;
        right: max(4px, env(safe-area-inset-right, 0px));
        padding: 6px 12px 6px 10px;
        font-size: 12px
    }
    body:has(.product-detail-page) .chatbot-toggle-img {
        width: 100px;
        max-height: 90px
    }
    body:has(.product-detail-page) .footer .footer-inner {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px))
    }
}

@media (max-width: 480px) {
    body:has(.product-detail-page) .chatbot-toggle-img {
        width: 88px;
        max-height: 78px
    }
    body:has(.product-detail-page) .chatbot-zalo-btn {
        bottom: 78px
    }
    .product-detail-page {
        padding: 68px 0 0
    }
}

.orders-page {
    min-height: 100vh;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: transparent
}

.orders-main {
    padding: 64px 0 44px
}

.orders-breadcrumb {
    display: flex;
    gap: 8px;
    font-size: .95rem;
    color: #9ca3af;
    margin-bottom: 16px
}

.orders-breadcrumb a {
    color: #e2e8f0;
    text-decoration: none
}

.orders-panel {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .28);
    background: radial-gradient(circle at top left, rgba(99, 102, 241, .22), transparent 55%), radial-gradient(circle at bottom right, rgba(139, 92, 246, .18), transparent 60%), linear-gradient(180deg, #0f172af7, #0f172af5);
    box-shadow: 0 18px 45px #000000a6;
    overflow: hidden
}

.orders-panel-header {
    border-bottom: 1px solid rgba(148, 163, 184, .28);
    padding: 20px 22px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.orders-title {
    display: flex;
    align-items: center;
    gap: 10px
}

.orders-title h2 {
    margin: 0;
    color: #e5f0ff;
    font-size: 1.5rem;
    font-weight: 700
}

.orders-icon {
    font-size: 1.4rem
}

.orders-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.orders-tabs button {
    border: 1px solid rgba(148, 163, 184, .45);
    background: #0f172acc;
    color: #e5e7eb;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease
}

.orders-tabs button.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: #6366f1;
    color: #fff;
    box-shadow: 0 10px 20px #6366f166
}

.orders-list-body {
    min-height: 120px
}

.orders-cards {
    display: none
}

.orders-table-wrap {
    width: 100%;
    overflow-x: auto
}

.orders-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse
}

.orders-table th,
.orders-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .35);
    color: #e5e7eb;
    text-align: left;
    white-space: nowrap
}

.orders-table th {
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9ca3af;
    background: #0f172a8c
}

.orders-table tr:hover {
    background: #0f172a8c
}

.action-group {
    display: flex;
    gap: 8px
}

.action-group button {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .45);
    background: #0f172ab3;
    color: #e5e7eb;
    font-size: .86rem;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .08s ease, box-shadow .16s ease
}

.action-group button:hover {
    background: #6366f1d9;
    border-color: #6366f1f2;
    box-shadow: 0 6px 18px #6366f173;
    transform: translateY(-1px)
}

.amount {
    color: #fca5a5 !important;
    font-weight: 800
}

.order-code {
    color: #e2e8f0;
    font-weight: 700
}

.order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: #94a3b833;
    color: #e5e7eb
}

.status-confirmed {
    background: #6366f12e;
    color: #a5b4fc
}

.status-pending {
    background: #fbbf2433;
    color: #facc15
}

.status-cancelled {
    background: #f8717133;
    color: #f87171
}

.order-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.btn-action {
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: #f8fafc;
    transition: transform .16s ease, box-shadow .16s ease
}

.btn-action:hover {
    transform: translateY(-1px)
}

.btn-view {
    background: linear-gradient(135deg, #6366f1, #4f46e5)
}

.btn-guide {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed)
}

.btn-retry {
    background: linear-gradient(135deg, #10b981, #059669)
}

.orders-state {
    padding: 22px;
    text-align: center;
    color: #cbd5e1
}

.orders-state.error {
    color: #fca5a5
}

.orders-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 18px 18px 20px
}

.orders-pagination button {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .6);
    background: #0f172ad9;
    color: #e5e7eb;
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .08s ease
}

.orders-pagination button.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: #6366f1;
    color: #f9fafb;
    font-weight: 600;
    transform: translateY(-1px)
}

.orders-pagination button:disabled {
    opacity: .45;
    cursor: default
}

@media (max-width: 1100px) {
    .orders-tabs {
        width: 100%
    }
    .orders-panel-header {
        align-items: flex-start
    }
}

@media (max-width: 768px) {
    .orders-main {
        padding: 56px 0 32px
    }
    .orders-table-wrap {
        display: none
    }
    .orders-cards {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px 12px 10px
    }
    .orders-cards-empty {
        border-radius: 14px;
        background: #0f172a80;
        border: 1px solid rgba(148, 163, 184, .2)
    }
    .order-card {
        border-radius: 14px;
        border: 1px solid rgba(100, 116, 139, .35);
        background: linear-gradient(165deg, #1e293bf2, #0f172afa);
        padding: 14px 14px 12px;
        box-shadow: 0 8px 24px #00000059
    }
    .order-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px
    }
    .order-card-meta {
        font-size: .78rem;
        color: #94a3b8;
        line-height: 1.35
    }
    .order-card-meta-dot {
        opacity: .7
    }
    .order-card-status {
        flex-shrink: 0;
        font-size: .72rem;
        padding: 4px 10px
    }
    .order-card-title {
        margin: 0 0 8px;
        font-size: 1rem;
        font-weight: 700;
        color: #f1f5f9;
        line-height: 1.35
    }
    .order-card-key-row {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px 8px;
        margin-bottom: 10px
    }
    .order-card-key-label {
        font-size: .72rem;
        font-weight: 500;
        color: #94a3b8;
        flex-shrink: 0;
        letter-spacing: .02em
    }
    .order-card-key {
        font-size: .8rem;
        font-family: ui-monospace, Cascadia Code, Segoe UI Mono, monospace;
        color: #cbd5e1;
        word-break: break-all;
        background: none;
        padding: 0;
        font-weight: 500
    }
    .order-card-price {
        margin: 0 0 12px;
        font-size: 1.05rem;
        font-weight: 800;
        color: #f8fafc
    }
    .order-card-divider {
        height: 1px;
        background: #4755698c;
        margin-bottom: 12px
    }
    .order-card-actions {
        display: flex;
        flex-direction: column;
        gap: 10px
    }
    .order-card-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        border: none;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: .92rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform .12s ease, filter .15s ease
    }
    .order-card-btn:active {
        transform: scale(.98)
    }
    .order-card-btn-primary {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #ecfdf5;
        box-shadow: 0 4px 14px #6366f166
    }
    .order-card-btn-primary:hover {
        filter: brightness(1.1)
    }
    .order-card-btn-secondary {
        background: #6366f126;
        color: #a5b4fc;
        border: 1px solid rgba(99, 102, 241, .3);
        box-shadow: inset 0 1px #ffffff0a
    }
    .order-card-btn-secondary:hover {
        background: #6366f140;
        border-color: #6366f180;
        color: #c7d2fe
    }
    .orders-pagination {
        flex-wrap: wrap;
        padding: 14px 12px 18px
    }
}

.order-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000bf;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px
}

.order-modal {
    background: linear-gradient(135deg, #1e293bfa, #0f172af7);
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px #0009
}

.order-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, .25)
}

.order-modal-header h3 {
    margin: 0;
    color: #e5f0ff;
    font-size: 1.15rem;
    font-weight: 700
}

.order-modal-close {
    background: #94a3b826;
    border: 1px solid rgba(148, 163, 184, .3);
    color: #e5e7eb;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s
}

.order-modal-close:hover {
    background: #6366f140;
    border-color: #6366f199;
    color: #c7d2fe
}

.order-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.order-detail-loading,
.order-detail-error {
    text-align: center;
    color: #9ca3af;
    padding: 30px
}

.order-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    gap: 16px
}

.order-detail-label {
    color: #9ca3af;
    font-size: .88rem;
    flex-shrink: 0
}

.order-detail-value {
    color: #e5e7eb;
    font-size: .9rem;
    text-align: right;
    word-break: break-all
}

.order-account-section,
.order-guide-section {
    margin-top: 8px
}

.order-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.order-account-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: #94a3b81a;
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease
}

.order-account-copy:hover {
    background: #94a3b833;
    border-color: #94a3b88c;
    color: #e2e8f0
}

.order-account-copy:active {
    transform: scale(.97)
}

.order-account-info {
    background: #0f172acc;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px;
    padding: 14px;
    color: #86efac;
    font-size: .88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    font-family: Be Vietnam Pro, monospace
}

.deposit-bank-page {
    min-height: 100vh;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: transparent
}

.deposit-bank-main {
    padding: 68px 0 56px
}

.deposit-bank-container {
    max-width: 1240px
}

.deposit-bank-hero {
    margin-bottom: 28px
}

.deposit-bank-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .88rem;
    color: #94a3b8;
    margin-bottom: 18px
}

.deposit-bank-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .2s ease
}

.deposit-bank-breadcrumb a:hover {
    color: #a5b4fc
}

.deposit-bank-breadcrumb-sep {
    opacity: .5
}

.deposit-bank-breadcrumb-current {
    color: #e2e8f0;
    font-weight: 600
}

.deposit-bank-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e0e7ff;
    border: 1px solid rgba(99, 102, 241, .45);
    background: #6366f11f;
    margin-bottom: 12px
}

.deposit-bank-hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f8fafc;
    line-height: 1.15
}

.deposit-bank-hero-desc {
    margin: 0;
    max-width: 520px;
    font-size: .98rem;
    line-height: 1.6;
    color: #cbd5e1eb
}

.deposit-bank-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3000;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    color: #f8fafc;
    background: #0f172aeb;
    border: 1px solid rgba(99, 102, 241, .5);
    box-shadow: 0 12px 40px #00000073;
    animation: dbToastIn .25s ease
}

@keyframes dbToastIn {
    0% {
        opacity: 0;
        transform: translate(-50%) translateY(8px)
    }
    to {
        opacity: 1;
        transform: translate(-50%) translateY(0)
    }
}

.deposit-bank-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 22px;
    margin-bottom: 28px;
    align-items: stretch
}

.db-card,
.history-panel {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, .18), transparent 50%), radial-gradient(ellipse 100% 70% at 100% 100%, rgba(139, 92, 246, .12), transparent 55%), linear-gradient(165deg, #111827f0, #0f172afa);
    box-shadow: 0 4px #6366f10f, 0 24px 56px #00000073
}

.create-card,
.invoice-card {
    padding: 22px 22px 20px
}

.db-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .14)
}

.db-card-head--invoice {
    align-items: center
}

.db-card-head-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #c7d2fe;
    background: #6366f133;
    border: 1px solid rgba(99, 102, 241, .35)
}

.db-step {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 8px 20px #6366f159
}

.db-card-title {
    margin: 0 0 4px;
    font-size: 1.12rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.db-card-sub {
    margin: 0;
    font-size: .86rem;
    line-height: 1.45;
    color: #94a3b8
}

.input-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px
}

.input-row label {
    color: #e2e8f0;
    font-weight: 600;
    font-size: .88rem
}

.db-input-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.db-input-wrap input {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 14px;
    background: #0206178c;
    color: #f1f5f9;
    padding: 14px 44px 14px 16px;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease
}

.db-input-suffix {
    position: absolute;
    right: 16px;
    font-size: .9rem;
    font-weight: 700;
    color: #64748b;
    pointer-events: none
}

.db-input-wrap input::placeholder {
    color: #64748b;
    font-weight: 500
}

.db-input-wrap input:focus {
    outline: none;
    border-color: #6366f1bf;
    box-shadow: 0 0 0 3px #6366f133;
    background: #020617bf
}

.btn-create,
.btn-search,
.btn-clear {
    border-radius: 14px;
    font-size: .92rem;
    font-weight: 700;
    padding: 14px 20px;
    border: 1px solid transparent;
    cursor: pointer;
    width: 100%;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease
}

.btn-create:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.btn-create {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 12px 32px #6366f161
}

.btn-create:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px #6366f17a
}

.btn-search {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #f9fafb;
    box-shadow: 0 12px 28px #6366f166
}

.btn-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px #6366f180
}

.btn-clear {
    background: transparent;
    color: #cbd5e1;
    border-color: #94a3b866;
    width: auto;
    min-width: 0;
    padding: 12px 18px
}

.btn-clear:hover {
    background: #6366f11a;
    border-color: #6366f173;
    color: #e2e8f0
}

.error-text {
    color: #fca5a5;
    margin-top: 14px;
    font-size: .88rem;
    font-weight: 500
}

.invoice-layout {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 260px);
    gap: 28px;
    align-items: start
}

.invoice-details {
    min-width: 0
}

.db-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0
}

.db-dl-row {
    display: grid;
    grid-template-columns: minmax(100px, 140px) 1fr;
    gap: 12px 20px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    align-items: center
}

.db-dl-row:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.db-dl-row dt {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.db-dl-row dd {
    margin: 0;
    font-size: .95rem;
    color: #e2e8f0;
    font-weight: 500;
    word-break: break-word;
    min-width: 0
}

.db-dl-row-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.db-dl-row-value--stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.db-dl-row--highlight {
    padding: 16px 14px;
    margin: 4px 0;
    border-radius: 14px;
    border: 1px solid rgba(245, 166, 35, .25);
    background: #f5a6230f;
    border-bottom: none
}

.db-dl-row--highlight dt {
    color: #fcd34d
}

.db-amount-lg {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #fbbf24 !important;
    letter-spacing: -.02em
}

.db-mono {
    font-family: ui-monospace, Cascadia Code, Segoe UI Mono, monospace;
    font-size: .95rem;
    font-weight: 600;
    color: #f1f5f9
}

.db-transfer-code {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #020617a6;
    border: 1px solid rgba(99, 102, 241, .25);
    word-break: break-all
}

.db-icon-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: #6366f11f;
    color: #a5b4fc;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease
}

.db-icon-btn:hover {
    background: #6366f147;
    color: #fff;
    border-color: #6366f18c;
    transform: translateY(-1px)
}

.db-bank-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #e0e7ff;
    background: #6366f138;
    border: 1px solid rgba(99, 102, 241, .35)
}

.db-bank-pill--sm {
    padding: 4px 10px;
    font-size: .75rem
}

.db-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: capitalize
}

.db-status--pending {
    background: #6366f133;
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, .3)
}

.db-status--ok {
    background: #22c55e26;
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, .28)
}

.db-status--bad {
    background: #ef444426;
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, .28)
}

.invoice-qr-block {
    display: flex;
    justify-content: center
}

.invoice-qr-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: #ffffff0a;
    border: 1px solid rgba(148, 163, 184, .2);
    box-shadow: inset 0 1px #ffffff0f, 0 16px 40px #00000040
}

.invoice-qr-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8
}

.invoice-qr-frame img {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: block
}

.invoice-empty {
    text-align: center;
    padding: 36px 20px 28px;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, .25);
    background: #02061759
}

.invoice-empty-icon {
    margin: 0 auto 14px;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #64748b;
    background: #6366f114;
    border: 1px solid rgba(99, 102, 241, .15)
}

.invoice-empty-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0
}

.invoice-empty-text {
    font-size: .88rem;
    line-height: 1.55;
    color: #94a3b8;
    max-width: 320px;
    margin: 0 auto
}

.btn-show-qr {
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, .45);
    background: #6366f11f;
    color: #c7d2fe;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
    vertical-align: middle
}

.btn-show-qr:hover {
    background: #6366f147;
    border-color: #6366f1a6;
    color: #fff;
    transform: translateY(-1px)
}

.history-panel {
    overflow: hidden
}

.history-panel-top {
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(99, 102, 241, .22)
}

.db-history-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.db-history-sub {
    margin: 0;
    font-size: .86rem;
    color: #94a3b8
}

.history-filters {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr minmax(140px, 160px) auto;
    gap: 16px;
    align-items: end;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background: #02061740
}

.history-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.history-filter-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.history-filter-field input {
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 12px;
    background: #0f172abf;
    color: #e5e7eb;
    padding: 11px 14px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease
}

.history-filter-field input:focus {
    outline: none;
    border-color: #6366f18c;
    box-shadow: 0 0 0 2px #6366f126
}

.history-filter-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.history-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0
}

.history-table th,
.history-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    text-align: left;
    color: #e2e8f0;
    font-size: .88rem;
    vertical-align: middle
}

.history-table td.transfer-content {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    background: #0f172af2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(99, 102, 241, .2);
    white-space: nowrap
}

.history-table tbody tr {
    transition: background .15s ease
}

.history-table tbody tr:hover {
    background: #6366f10f
}

.history-table tbody tr:nth-child(2n) {
    background: #02061733
}

.history-table tbody tr:nth-child(2n):hover {
    background: #6366f114
}

.db-mono-sm {
    font-family: ui-monospace, Cascadia Code, Segoe UI Mono, monospace;
    font-size: .82rem;
    color: #cbd5e1
}

.db-time {
    font-size: .8rem;
    color: #94a3b8;
    white-space: nowrap
}

.amount {
    color: #fb923c;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.amount-real {
    color: #93c5fd
}

.amount-bonus {
    color: #c4b5fd
}

.amount-received {
    color: #4ade80
}

.history-state {
    padding: 40px 22px;
    text-align: center;
    color: #94a3b8;
    font-size: .92rem
}

.history-state--empty {
    color: #64748b
}

.bank-success-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: #020617c7;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.bank-success-modal {
    width: min(92vw, 460px);
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: radial-gradient(circle at top left, rgba(99, 102, 241, .22), transparent 55%), radial-gradient(circle at bottom right, rgba(139, 92, 246, .18), transparent 60%), linear-gradient(180deg, #0f172afa, #0f172af5);
    box-shadow: 0 24px 60px #000000b3;
    text-align: center;
    padding: 28px 24px 24px;
    animation: bankSuccessIn .28s ease
}

.bank-success-icon {
    width: 112px;
    height: 112px;
    margin: 0 auto 12px
}

.bank-success-modal h4 {
    margin: 0 0 10px;
    color: #f1f5f9;
    font-size: 1.45rem;
    font-weight: 800
}

.bank-success-modal p {
    margin: 0;
    color: #a5b4fc;
    font-size: .92rem;
    line-height: 1.5
}

@keyframes bankSuccessIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.96)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 20px;
    border-top: 1px solid rgba(148, 163, 184, .1);
    flex-wrap: wrap
}

.history-pagination-info {
    font-size: .84rem;
    color: #64748b;
    white-space: nowrap
}

.history-pagination-info strong {
    color: #a5b4fc;
    font-weight: 700
}

.history-pagination-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.db-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: #6366f114;
    color: #c7d2fe;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease
}

.db-page-btn:hover:not(:disabled) {
    background: #6366f133;
    border-color: #6366f199;
    color: #fff;
    transform: translateY(-1px)
}

.db-page-btn:active:not(:disabled) {
    transform: translateY(0)
}

.db-page-btn--active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #6366f1 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px #6366f166;
    transform: translateY(-1px)
}

.db-page-btn:disabled {
    opacity: .3;
    cursor: default;
    transform: none
}

.db-page-ellipsis {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: .88rem;
    -webkit-user-select: none;
    user-select: none
}

@media (max-width: 1100px) {
    .deposit-bank-grid {
        grid-template-columns: 1fr
    }
    .invoice-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }
    .invoice-qr-block {
        justify-content: flex-start
    }
    .history-filters {
        grid-template-columns: 1fr 1fr
    }
    .history-filter-actions {
        grid-column: 1 / -1;
        justify-content: stretch
    }
    .history-filter-actions .btn-clear {
        width: 100%
    }
}

@media (max-width: 640px) {
    .deposit-bank-main {
        padding: 40px 0
    }
    .db-dl-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0
    }
    .db-dl-row dt {
        margin-bottom: 2px
    }
    .history-filters {
        grid-template-columns: 1fr
    }
}

.deposit-card-page {
    min-height: 100vh;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: transparent
}

.deposit-card-main {
    padding: 68px 0 56px
}

.deposit-card-container {
    max-width: 1240px
}

.deposit-card-hero {
    margin-bottom: 28px
}

.deposit-card-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .88rem;
    color: #94a3b8;
    margin-bottom: 18px
}

.deposit-card-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .2s ease
}

.deposit-card-breadcrumb a:hover {
    color: #a5b4fc
}

.deposit-card-breadcrumb-sep {
    opacity: .5
}

.deposit-card-breadcrumb-current {
    color: #e2e8f0;
    font-weight: 600
}

.deposit-card-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e0e7ff;
    border: 1px solid rgba(99, 102, 241, .45);
    background: #6366f11f;
    margin-bottom: 12px
}

.deposit-card-hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f8fafc;
    line-height: 1.15
}

.deposit-card-hero-desc {
    margin: 0;
    max-width: 520px;
    font-size: .98rem;
    line-height: 1.6;
    color: #cbd5e1eb
}

.card-top-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
    margin-bottom: 28px;
    align-items: stretch
}

.dc-card,
.card-history-panel {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, .18), transparent 50%), radial-gradient(ellipse 100% 70% at 100% 100%, rgba(139, 92, 246, .12), transparent 55%), linear-gradient(165deg, #111827f0, #0f172afa);
    box-shadow: 0 4px #6366f10f, 0 24px 56px #00000073
}

.card-form-panel,
.card-note-panel {
    padding: 22px 22px 20px
}

.dc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .14)
}

.dc-card-head--icon {
    align-items: center
}

.dc-card-head-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #c7d2fe;
    background: #6366f133;
    border: 1px solid rgba(99, 102, 241, .35)
}

.dc-step {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 8px 20px #6366f159
}

.dc-card-title {
    margin: 0 0 4px;
    font-size: 1.12rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.dc-card-sub {
    margin: 0;
    font-size: .86rem;
    line-height: 1.45;
    color: #94a3b8
}

.dc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.field label {
    color: #e2e8f0;
    font-weight: 600;
    font-size: .88rem
}

.field input,
.field select {
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 14px;
    background: #0206178c;
    color: #f1f5f9;
    padding: 13px 16px;
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none
}

.field input::placeholder {
    color: #64748b;
    font-weight: 500
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: #6366f1bf;
    box-shadow: 0 0 0 3px #6366f133;
    background: #020617bf
}

.field select {
    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='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer
}

.field select option {
    background: #1e293b;
    color: #f1f5f9
}

.dc-captcha-section {
    margin-bottom: 18px
}

.dc-captcha-field {
    max-width: 100%
}

.dc-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.dc-captcha-row input {
    flex: 1;
    min-width: 0
}

.dc-captcha-box {
    flex-shrink: 0;
    min-width: 88px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .2em;
    color: #dc2626;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid rgba(245, 158, 11, .25);
    -webkit-user-select: none;
    user-select: none
}

.dc-btn-refresh {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, .4);
    background: #6366f11a;
    color: #a5b4fc;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease
}

.dc-btn-refresh:hover {
    background: #6366f147;
    border-color: #6366f1a6;
    color: #fff;
    transform: translateY(-1px) rotate(-30deg)
}

.dc-btn-submit {
    width: 100%;
    border-radius: 14px;
    font-size: .98rem;
    font-weight: 700;
    padding: 14px 20px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 12px 32px #6366f161;
    transition: background .2s ease, box-shadow .2s ease, transform .12s ease
}

.dc-btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px #6366f17a
}

.dc-btn-submit:active:not(:disabled) {
    transform: translateY(0)
}

.dc-btn-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.dc-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dcSpin .7s linear infinite
}

@keyframes dcSpin {
    to {
        transform: rotate(360deg)
    }
}

.dc-error {
    color: #fca5a5;
    margin: 0 0 14px;
    font-size: .88rem;
    font-weight: 500
}

.dc-note-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.dc-note-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    line-height: 1.55;
    color: #e2e8f0
}

.dc-note-list li strong {
    color: #c7d2fe
}

.dc-note-dot {
    flex-shrink: 0;
    margin-top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 6px #818cf8b3
}

.dc-note-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f59e0b14;
    border: 1px solid rgba(245, 158, 11, .25);
    font-size: .85rem;
    line-height: 1.5;
    color: #fcd34d
}

.dc-note-warning svg {
    flex-shrink: 0;
    color: #f59e0b
}

.card-history-panel {
    overflow: hidden
}

.dc-history-top {
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(99, 102, 241, .22)
}

.dc-history-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.dc-history-sub {
    margin: 0;
    font-size: .86rem;
    color: #94a3b8
}

.dc-history-filters {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr minmax(140px, 160px) minmax(140px, 160px) auto;
    gap: 16px;
    align-items: end;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background: #02061740
}

.dc-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.dc-filter-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.dc-filter-field input,
.dc-filter-field select {
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 12px;
    background: #0f172abf;
    color: #e5e7eb;
    padding: 11px 14px;
    font-size: .9rem;
    font-family: inherit;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease
}

.dc-filter-field select {
    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='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer
}

.dc-filter-field input:focus,
.dc-filter-field select:focus {
    outline: none;
    border-color: #6366f18c;
    box-shadow: 0 0 0 2px #6366f126
}

.dc-filter-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.dc-btn-clear {
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 600;
    padding: 12px 18px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap
}

.dc-btn-clear:hover {
    background: #6366f11a;
    border-color: #6366f173;
    color: #e2e8f0
}

.history-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.dc-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0
}

.dc-table th,
.dc-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    text-align: left;
    color: #e2e8f0;
    font-size: .88rem;
    vertical-align: middle
}

.dc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    background: #0f172af2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(99, 102, 241, .2);
    white-space: nowrap
}

.dc-table tbody tr {
    transition: background .15s ease
}

.dc-table tbody tr:hover {
    background: #6366f10f
}

.dc-table tbody tr:nth-child(2n) {
    background: #02061733
}

.dc-table tbody tr:nth-child(2n):hover {
    background: #6366f114
}

.dc-telco-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #e0e7ff;
    background: #6366f138;
    border: 1px solid rgba(99, 102, 241, .35);
    white-space: nowrap
}

.dc-mono-sm {
    font-family: ui-monospace, Cascadia Code, Segoe UI Mono, monospace;
    font-size: .82rem;
    color: #cbd5e1
}

.dc-time {
    font-size: .8rem;
    color: #94a3b8;
    white-space: nowrap
}

.dc-reason {
    max-width: 220px;
    font-size: .82rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dc-amount {
    color: #fb923c;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.dc-amount--ok {
    color: #4ade80
}

.dc-discount {
    color: #c4b5fd;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.dc-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap
}

.dc-status--pending {
    background: #6366f133;
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, .3)
}

.dc-status--ok {
    background: #22c55e26;
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, .28)
}

.dc-status--warn {
    background: #f59e0b26;
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, .28)
}

.dc-status--bad {
    background: #ef444426;
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, .28)
}

.dc-history-state {
    padding: 40px 22px;
    text-align: center;
    color: #94a3b8;
    font-size: .92rem
}

.dc-history-state--empty {
    color: #64748b
}

.dc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 20px;
    border-top: 1px solid rgba(148, 163, 184, .1);
    flex-wrap: wrap
}

.dc-pagination-info {
    font-size: .84rem;
    color: #64748b;
    white-space: nowrap
}

.dc-pagination-info strong {
    color: #a5b4fc;
    font-weight: 700
}

.dc-pagination-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.dc-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: #6366f114;
    color: #c7d2fe;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease
}

.dc-page-btn:hover:not(:disabled) {
    background: #6366f133;
    border-color: #6366f199;
    color: #fff;
    transform: translateY(-1px)
}

.dc-page-btn:active:not(:disabled) {
    transform: translateY(0)
}

.dc-page-btn--active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #6366f1 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px #6366f166;
    transform: translateY(-1px)
}

.dc-page-btn:disabled {
    opacity: .3;
    cursor: default;
    transform: none
}

.dc-page-ellipsis {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: .88rem;
    -webkit-user-select: none;
    user-select: none
}

@media (max-width: 1100px) {
    .card-top-grid {
        grid-template-columns: 1fr
    }
    .dc-form-grid,
    .dc-history-filters {
        grid-template-columns: 1fr 1fr
    }
    .dc-filter-actions {
        grid-column: 1 / -1;
        justify-content: stretch
    }
    .dc-filter-actions .dc-btn-clear {
        width: 100%
    }
}

@media (max-width: 640px) {
    .deposit-card-main {
        padding: 40px 0
    }
    .dc-form-grid {
        grid-template-columns: 1fr
    }
    .dc-captcha-row {
        flex-wrap: wrap
    }
    .dc-history-filters {
        grid-template-columns: 1fr
    }
}

.profile-page {
    min-height: 100vh;
    padding: 68px 0 56px;
    color: #e2e8f0;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: transparent
}

.profile-container {
    max-width: 1240px
}

.profile-hero {
    margin-bottom: 28px
}

.profile-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .88rem;
    color: #94a3b8;
    margin-bottom: 18px
}

.profile-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .2s ease
}

.profile-breadcrumb a:hover {
    color: #a5b4fc
}

.profile-breadcrumb-sep {
    opacity: .5
}

.profile-breadcrumb-current {
    color: #e2e8f0;
    font-weight: 600
}

.profile-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e0e7ff;
    border: 1px solid rgba(99, 102, 241, .45);
    background: #6366f11f;
    margin-bottom: 12px
}

.profile-hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f8fafc;
    line-height: 1.15
}

.profile-hero-desc {
    margin: 0;
    max-width: 520px;
    font-size: .98rem;
    line-height: 1.6;
    color: #cbd5e1eb
}

.profile-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 22px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, .18), transparent 50%), linear-gradient(165deg, #111827f0, #0f172afa);
    color: #94a3b8;
    font-size: .95rem;
    font-weight: 500
}

.profile-loading-ring {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(99, 102, 241, .2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: profileRingSpin .75s linear infinite
}

@keyframes profileRingSpin {
    to {
        transform: rotate(360deg)
    }
}

.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 22px;
    align-items: start
}

.profile-left {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.profile-user-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, .18), transparent 50%), radial-gradient(ellipse 100% 70% at 100% 100%, rgba(139, 92, 246, .12), transparent 55%), linear-gradient(165deg, #111827f0, #0f172afa);
    box-shadow: 0 4px #6366f10f, 0 24px 56px #00000073;
    padding: 24px 22px;
    text-align: center
}

.puc-avatar-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: visible;
    display: inline-block
}

.puc-avatar-wrap img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, .55);
    background: #020617cc;
    display: block
}

.puc-banned-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f87171;
    border: 2px solid rgba(17, 24, 39, .98)
}

.puc-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px
}

.puc-username {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.puc-email {
    font-size: .82rem;
    color: #94a3b8;
    word-break: break-all
}

.puc-level-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    border: 1px solid;
    text-transform: uppercase
}

.puc-divider {
    height: 1px;
    background: #94a3b824;
    margin: 14px 0
}

.puc-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left
}

.puc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.puc-meta-row dt {
    font-size: .8rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap
}

.puc-meta-row dd {
    font-size: .85rem;
    color: #cbd5e1;
    font-weight: 500;
    text-align: right
}

.puc-mono {
    font-family: ui-monospace, Cascadia Code, Segoe UI Mono, monospace;
    font-size: .82rem !important;
    color: #93c5fd !important
}

.status-active {
    color: #4ade80;
    font-weight: 700;
    font-size: .85rem
}

.status-banned {
    color: #f87171;
    font-weight: 700;
    font-size: .85rem
}

.profile-stats {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.ps-card {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(165deg, #111827f0, #0f172afa);
    box-shadow: 0 16px 40px #00000059;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px
}

.ps-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center
}

.ps-card-icon--balance {
    background: #6366f133;
    border: 1px solid rgba(99, 102, 241, .35);
    color: #c7d2fe
}

.ps-card-icon--total {
    background: #fbbf2426;
    border: 1px solid rgba(251, 191, 36, .35);
    color: #fde68a
}

.ps-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.ps-card-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.ps-card-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ps-card-value--primary {
    color: #a5b4fc
}

.profile-right {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.pc-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, .18), transparent 50%), radial-gradient(ellipse 100% 70% at 100% 100%, rgba(139, 92, 246, .12), transparent 55%), linear-gradient(165deg, #111827f0, #0f172afa);
    box-shadow: 0 4px #6366f10f, 0 24px 56px #00000073;
    padding: 24px 24px 22px;
    overflow: hidden
}

.pc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .14)
}

.pc-card-head-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #6366f133;
    border: 1px solid rgba(99, 102, 241, .35);
    color: #c7d2fe
}

.pc-card-head-icon--shield {
    background: #8b5cf633;
    border-color: #8b5cf659;
    color: #d8b4fe
}

.pc-card-title {
    margin: 0 0 5px;
    font-size: 1.12rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.pc-card-sub {
    margin: 0;
    font-size: .86rem;
    color: #94a3b8;
    line-height: 1.45
}

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

.pc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.pc-form-row--readonly {
    opacity: .7
}

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

.pc-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.pc-input {
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 12px;
    background: #0206178c;
    color: #e5e7eb;
    padding: 12px 14px;
    font-size: .92rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 100%;
    box-sizing: border-box
}

.pc-input:focus {
    outline: none;
    border-color: #6366f18c;
    box-shadow: 0 0 0 2px #6366f126
}

.pc-input::placeholder {
    color: #475569
}

.pc-input--readonly {
    cursor: not-allowed;
    color: #94a3b8;
    background: #02061759
}

.pc-input-group {
    position: relative;
    display: flex;
    align-items: center
}

.pc-input-group .pc-input {
    padding-right: 44px
}

.pc-toggle-pass {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color .15s ease, background .15s ease
}

.pc-toggle-pass:hover {
    color: #c7d2fe;
    background: #6366f11a
}

.pc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: .92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .08s ease, box-shadow .18s ease;
    align-self: flex-start
}

.pc-btn-primary:not(:disabled) {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 8px 22px #6366f161
}

.pc-btn-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px #6366f173
}

.pc-btn-primary--outline {
    background: transparent !important;
    border-color: #94a3b873 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important
}

.pc-btn-primary--outline:not(:disabled):hover {
    background: #6366f114 !important;
    border-color: #6366f166 !important;
    box-shadow: none !important;
    transform: translateY(-1px)
}

.pc-btn-primary:disabled {
    opacity: .65;
    cursor: not-allowed
}

.pc-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcSpin .7s linear infinite;
    flex-shrink: 0
}

@keyframes pcSpin {
    to {
        transform: rotate(360deg)
    }
}

.profile-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3000;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: #f8fafc;
    background: #0f172aeb;
    border: 1px solid rgba(99, 102, 241, .5);
    box-shadow: 0 12px 40px #00000073;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: profileToastIn .25s ease;
    white-space: nowrap
}

.profile-toast--success {
    border-color: #4ade808c;
    color: #4ade80
}

.profile-toast--error {
    border-color: #f871718c;
    color: #f87171
}

@keyframes profileToastIn {
    0% {
        opacity: 0;
        transform: translate(-50%) translateY(8px)
    }
    to {
        opacity: 1;
        transform: translate(-50%) translateY(0)
    }
}

@media (max-width: 1100px) {
    .profile-grid {
        grid-template-columns: 260px 1fr
    }
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr
    }
    .profile-left {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }
    .profile-user-card {
        grid-column: 1 / -1
    }
}

@media (max-width: 640px) {
    .profile-page {
        padding: 40px 0
    }
    .profile-left,
    .pc-form-row {
        grid-template-columns: 1fr
    }
    .pc-card {
        padding: 18px 16px 16px
    }
    .profile-hero-title {
        font-size: 1.45rem
    }
}

.money-history-page {
    min-height: 100vh;
    padding: 68px 0 56px;
    color: #e2e8f0;
    font-family: "Be Vietnam Pro", var(--font-primary);
    background: transparent
}

.money-history-container {
    max-width: 1240px
}

.mh-hero {
    margin-bottom: 28px
}

.mh-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .88rem;
    color: #94a3b8;
    margin-bottom: 18px
}

.mh-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .2s ease
}

.mh-breadcrumb a:hover {
    color: #a5b4fc
}

.mh-breadcrumb-sep {
    opacity: .5
}

.mh-breadcrumb-current {
    color: #e2e8f0;
    font-weight: 600
}

.mh-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e0e7ff;
    border: 1px solid rgba(99, 102, 241, .45);
    background: #6366f11f;
    margin-bottom: 12px
}

.mh-hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f8fafc;
    line-height: 1.15
}

.mh-hero-desc {
    margin: 0;
    max-width: 560px;
    font-size: .98rem;
    line-height: 1.6;
    color: #cbd5e1eb
}

.mh-panel {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, .18), transparent 50%), radial-gradient(ellipse 100% 70% at 100% 100%, rgba(139, 92, 246, .12), transparent 55%), linear-gradient(165deg, #111827f0, #0f172afa);
    box-shadow: 0 4px #6366f10f, 0 24px 56px #00000073;
    overflow: hidden
}

.mh-panel-top {
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(99, 102, 241, .22)
}

.mh-panel-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em
}

.mh-panel-sub {
    margin: 0;
    font-size: .86rem;
    color: #94a3b8
}

.mh-filters {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr minmax(140px, 160px) auto;
    gap: 16px;
    align-items: end;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background: #02061740
}

.mh-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.mh-filter-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.mh-filter-field input {
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 12px;
    background: #0f172abf;
    color: #e5e7eb;
    padding: 11px 14px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease
}

.mh-filter-field input:focus {
    outline: none;
    border-color: #6366f18c;
    box-shadow: 0 0 0 2px #6366f126
}

.mh-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px
}

.mh-btn-search,
.mh-btn-clear {
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .08s ease, box-shadow .18s ease
}

.mh-btn-search {
    border: 1px solid transparent;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 8px 22px #6366f161
}

.mh-btn-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px #6366f173
}

.mh-btn-clear {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, .45)
}

.mh-btn-clear:hover {
    background: #6366f114;
    border-color: #6366f166
}

.mh-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.mh-table {
    width: 100%;
    min-width: 1020px;
    border-collapse: separate;
    border-spacing: 0
}

.mh-table th,
.mh-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    text-align: left;
    font-size: .88rem;
    vertical-align: middle
}

.mh-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    background: #0f172af2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(99, 102, 241, .2);
    white-space: nowrap
}

.mh-table tbody tr {
    transition: background .15s ease
}

.mh-table tbody tr:hover {
    background: #6366f10f
}

.mh-table tbody tr:nth-child(2n) {
    background: #02061733
}

.mh-table tbody tr:nth-child(2n):hover {
    background: #6366f114
}

.mh-table tbody td {
    color: #e2e8f0
}

.mh-code-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.mh-mono {
    font-family: ui-monospace, Cascadia Code, Segoe UI Mono, monospace;
    font-size: .82rem;
    color: #cbd5e1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mh-icon-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: #6366f11a;
    color: #c7d2fe;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease
}

.mh-icon-btn:hover {
    background: #6366f138;
    border-color: #6366f18c;
    color: #fff
}

.mh-amount {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fdba74
}

.mh-amount--after {
    color: #93c5fd
}

.mh-change {
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.mh-change--plus {
    color: #4ade80
}

.mh-change--minus {
    color: #f87171
}

.mh-content {
    max-width: 380px;
    line-height: 1.45;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mh-state {
    padding: 40px 22px;
    text-align: center;
    color: #94a3b8;
    font-size: .92rem
}

.mh-state--empty {
    color: #64748b
}

.mh-state--error {
    color: #fca5a5
}

.mh-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 20px;
    border-top: 1px solid rgba(148, 163, 184, .1);
    flex-wrap: wrap
}

.mh-pagination-info {
    font-size: .84rem;
    color: #64748b;
    white-space: nowrap
}

.mh-pagination-info strong {
    color: #a5b4fc;
    font-weight: 700
}

.mh-pagination-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.mh-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: #6366f114;
    color: #c7d2fe;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease
}

.mh-page-btn:hover:not(:disabled) {
    background: #6366f133;
    border-color: #6366f199;
    color: #fff;
    transform: translateY(-1px)
}

.mh-page-btn--active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #6366f1 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px #6366f166;
    transform: translateY(-1px)
}

.mh-page-btn:disabled {
    opacity: .3;
    cursor: default;
    transform: none
}

.mh-page-ellipsis {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: .88rem;
    -webkit-user-select: none;
    user-select: none
}

.mh-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3000;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    color: #f8fafc;
    background: #0f172aeb;
    border: 1px solid rgba(99, 102, 241, .5);
    box-shadow: 0 12px 40px #00000073;
    animation: mhToastIn .25s ease
}

@keyframes mhToastIn {
    0% {
        opacity: 0;
        transform: translate(-50%) translateY(8px)
    }
    to {
        opacity: 1;
        transform: translate(-50%) translateY(0)
    }
}

@media (max-width: 1100px) {
    .mh-filters {
        grid-template-columns: 1fr 1fr
    }
    .mh-filter-actions {
        grid-column: 1 / -1;
        justify-content: stretch
    }
    .mh-filter-actions .mh-btn-search,
    .mh-filter-actions .mh-btn-clear {
        flex: 1;
        min-width: 0
    }
}

@media (max-width: 640px) {
    .money-history-page {
        padding: 40px 0
    }
    .mh-filters {
        grid-template-columns: 1fr
    }
    .mh-hero-title {
        font-size: 1.45rem
    }
}

.contact-page {
    position: relative;
    background: #000;
    overflow-x: clip;
    padding: 68px 0 56px
}

.contact-hero-pattern {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, .45) 58%, transparent 78%);
    mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, .45) 58%, transparent 78%);
    opacity: .85
}

.contact-hero-stage {
    position: relative;
    z-index: 1;
    min-height: calc(100dvh - 64px);
    min-height: calc(100vh - 64px);
    padding-bottom: 40px
}

.contact-hero-container {
    position: relative;
    z-index: 2
}

@media (min-width: 961px) {
    .contact-hero-container {
        padding-right: min(52vw, 740px)
    }
}

.contact-breadcrumb {
    padding: 4px 0 22px;
    font-size: .8rem;
    font-weight: 500;
    color: #94a3b8e0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.contact-breadcrumb a {
    color: #94a3b8f2;
    text-decoration: none
}

.contact-breadcrumb a:hover {
    color: #cbd5e1;
    text-decoration: underline
}

.contact-breadcrumb-sep {
    opacity: .65
}

.contact-hero-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 520px;
    padding-bottom: 24px;
    margin-top: 100px
}

.contact-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f1f5f9;
    border: 1px solid transparent;
    background: linear-gradient(#08080c, #08080c) padding-box, linear-gradient(90deg, #3b82f6, #6366f1, #a855f7) border-box;
    box-shadow: 0 0 0 1px #6366f140, 0 0 28px #8b5cf659, 0 0 48px #3b82f61f
}

.contact-title {
    margin: 0;
    font-family: "Be Vietnam Pro", var(--font-primary);
    line-height: 1.05;
    letter-spacing: -.035em
}

.contact-title-line {
    display: block;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff
}

.contact-title-gradient {
    display: block;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.contact-lead {
    margin: 0;
    font-size: clamp(.94rem, 1.25vw, 1.05rem);
    line-height: 1.6;
    color: #cbd5e1e0;
    max-width: 28rem
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 4px
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.contact-form .form-group label {
    font-size: .78rem;
    font-weight: 600;
    color: #e2e8f0e6
}

.contact-form .form-group input,
.contact-form .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0a0a0ee6;
    border: 1px solid rgba(71, 85, 105, .65);
    color: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .93rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease
}

.contact-form .form-group textarea {
    min-height: 112px;
    resize: vertical
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
    border-color: #818cf8d9;
    box-shadow: 0 0 0 2px #6366f138;
    outline: none
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: #64748bd9
}

.contact-form .form-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #64748bd9;
    line-height: 1.4
}

.contact-form .form-group input:invalid:not(:placeholder-shown) {
    border-color: #ef4444
}

.contact-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
    margin-top: 8px;
    width: 100%
}

.contact-form-error {
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #ef44441f;
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fca5a5;
    font-size: .85rem
}

.contact-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .98rem;
    font-family: inherit;
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #2563eb, #4f46e5 48%, #7c3aed);
    box-shadow: 0 1px #ffffff14 inset;
    transition: transform .15s ease, filter .15s ease, opacity .15s ease
}

.contact-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06)
}

.contact-btn-primary:disabled {
    opacity: .65;
    cursor: not-allowed
}

.contact-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    color: #f8fafc;
    border: 1px solid rgba(226, 232, 240, .35);
    background: transparent;
    transition: background .2s ease, border-color .2s ease
}

.contact-btn-ghost:hover {
    background: #ffffff0d;
    border-color: #f8fafc80
}

.contact-hero-figure {
    position: fixed;
    right: 0;
    top: 64px;
    bottom: 0;
    z-index: 1;
    width: min(76vw, 1740px);
    max-width: none;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: visible
}

.contact-hero-figure img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: calc(100dvh - 64px);
    max-height: calc(100vh - 64px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(-12px 0 40px rgba(0, 0, 0, .45))
}

@media (max-width: 600px) {
    .contact-hero-figure {
        top: 60px
    }
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

@media (max-width: 1100px) {
    .contact-hero-container {
        padding-right: min(48vw, 540px)
    }
    .contact-hero-figure {
        width: min(68vw, 720px)
    }
}

@media (max-width: 960px) {
    .contact-hero-stage {
        min-height: unset;
        padding-bottom: 32px
    }
    .contact-hero-figure {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: min(92vw, 400px);
        height: auto;
        min-height: 240px;
        margin: -8px auto 8px;
        justify-content: center
    }
    .contact-hero-figure img {
        height: auto;
        max-height: min(50vh, 460px);
        object-fit: contain;
        object-position: center bottom;
        filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .55))
    }
    .contact-hero-left {
        max-width: none
    }
}

@media (max-width: 640px) {
    .contact-hero-figure {
        display: none
    }
    .contact-form .form-row {
        grid-template-columns: 1fr
    }
    .contact-form-actions {
        flex-direction: column;
        align-items: stretch
    }
    .contact-btn-primary,
    .contact-btn-ghost {
        width: 100%
    }
}

.support-main {
    padding: 26px 0 56px
}

.support-hero {
    padding: 40px 0 30px;
    text-align: center;
    background: linear-gradient(135deg, #0f172adb, #0a0c1ec2);
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, .35);
    margin-bottom: 32px
}

.support-title {
    font-size: 42px;
    font-weight: 700;
    color: #31d6ff;
    margin-bottom: 12px;
    letter-spacing: -.02em
}

.support-subtitle {
    font-size: 18px;
    color: #94a3b8
}

.support-content {
    padding: 0
}

.support-breadcrumb {
    padding: 20px 0 16px;
    font-size: .9rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.support-breadcrumb a {
    color: #38bdf8;
    text-decoration: none
}

.support-breadcrumb a:hover {
    color: #7dd3fc;
    text-decoration: underline
}

.support-page section.support-content {
    max-width: 720px;
    margin: 0 auto 48px;
    padding: 32px 28px 36px;
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 16px;
    box-shadow: 0 4px 24px #02061773
}

.support-page section.support-content h1 {
    font-size: clamp(1.5rem, 2.5vw, 1.85rem);
    font-weight: 700;
    color: #e8f4ff;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    line-height: 1.25
}

.support-page section.support-content p {
    color: #cbd5e1;
    line-height: 1.75;
    margin: 0 0 16px
}

.support-page section.support-content p:last-child {
    margin-bottom: 0
}

.support-page section.support-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #7dd3fc;
    margin: 24px 0 12px
}

.support-page section.support-content h2:first-of-type {
    margin-top: 8px
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px
}

.support-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.support-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.support-form .form-group label {
    font-size: .875rem;
    font-weight: 600;
    color: #cbd5e1
}

.support-form .form-group input,
.support-form .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0f172af2;
    border: 1px solid rgba(148, 163, 184, .5);
    color: #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease
}

.support-form .form-group textarea {
    min-height: 120px;
    resize: vertical
}

.support-form .form-group input:focus,
.support-form .form-group textarea:focus {
    border-color: #3b82f6e6;
    box-shadow: 0 0 0 3px #2563eb47;
    outline: none
}

.support-form .form-group input::placeholder,
.support-form .form-group textarea::placeholder {
    color: #64748b
}

.support-form .btn-submit {
    margin-top: 4px;
    align-self: flex-start;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border: 1px solid rgba(99, 102, 241, .45);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease
}

.support-form .btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px #6366f159
}

.support-form .btn-submit:disabled {
    opacity: .65;
    cursor: not-allowed
}

@media (max-width: 640px) {
    .support-form .form-row {
        grid-template-columns: 1fr
    }
    .support-page section.support-content {
        padding: 24px 18px 28px
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 40px
}

.contact-card {
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .25);
    padding: 32px 24px;
    border-radius: 16px;
    text-align: center;
    transition: all .3s;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px #02061759
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #60a5fa99;
    box-shadow: 0 12px 24px #1e3a8a42
}

.contact-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff
}

.contact-title {
    font-size: 16px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px
}

.contact-value {
    font-size: 18px;
    font-weight: 700;
    color: #31d6ff;
    margin: 0
}

.social-section {
    margin-bottom: 40px
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    text-align: center;
    margin-bottom: 24px
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px
}

.social-card {
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .25);
    padding: 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: all .3s;
    box-shadow: 0 4px 12px #02061759
}

.social-card:hover {
    transform: translateY(-4px);
    border-color: #60a5fa99;
    box-shadow: 0 8px 16px #1e3a8a42
}

.social-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0
}

.social-name {
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0
}

.support-hours {
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .25);
    padding: 48px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 12px #02061759
}

.hours-icon {
    color: #31d6ff;
    margin-bottom: 20px
}

.hours-title {
    font-size: 24px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 12px
}

.hours-text {
    font-size: 18px;
    color: #94a3b8;
    margin: 0
}

.faq-container {
    margin-bottom: 40px
}

.faq-category {
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px #02061759
}

.faq-category-title {
    font-size: 24px;
    font-weight: 700;
    color: #31d6ff;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(148, 163, 184, .2)
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.faq-item {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease;
    background: #0f172a80
}

.faq-item.open {
    border-color: #6366f1;
    box-shadow: 0 4px 12px #6366f140;
    background: #0f172acc
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all .2s ease
}

.faq-question:hover {
    background: #1e293b80;
    color: #31d6ff
}

.faq-item.open .faq-question {
    color: #31d6ff;
    background: #1e293bb3;
    border-bottom: 1px solid rgba(148, 163, 184, .15)
}

.faq-icon {
    flex-shrink: 0;
    transition: transform .3s ease;
    color: #94a3b8
}

.faq-item.open .faq-icon {
    transform: rotate(180deg);
    color: #6366f1
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden
}

.faq-answer.open {
    grid-template-rows: 1fr
}

.faq-answer-content {
    min-height: 0;
    padding: 0 24px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease .1s, transform .3s ease .1s
}

.faq-answer.open .faq-answer-content {
    padding: 20px 24px;
    opacity: 1;
    transform: translateY(0)
}

.faq-answer-content p {
    color: #cbd5e1;
    line-height: 1.8;
    margin: 0
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.faq-cta {
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .25);
    padding: 48px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 12px #02061759
}

.faq-cta h3 {
    font-size: 24px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 12px
}

.faq-cta p {
    font-size: 16px;
    color: #94a3b8;
    margin-bottom: 24px
}

.btn-primary {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all .3s
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px #6366f14d
}

.policy-content {
    background: linear-gradient(145deg, #091126f0, #0b132ae6);
    border: 1px solid rgba(148, 163, 184, .25);
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 4px 12px #02061759
}

.policy-section {
    margin-bottom: 40px
}

.policy-section:last-child {
    margin-bottom: 0
}

.policy-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: #31d6ff;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(148, 163, 184, .2)
}

.policy-section p {
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 16px
}

.policy-section ul {
    list-style: none;
    padding: 0;
    margin: 16px 0
}

.policy-section ul li {
    color: #cbd5e1;
    line-height: 1.8;
    padding-left: 28px;
    position: relative;
    margin-bottom: 12px
}

.policy-section ul li:before {
    content: "•";
    color: #6366f1;
    font-weight: 700;
    font-size: 20px;
    position: absolute;
    left: 8px
}

.policy-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 2px solid rgba(148, 163, 184, .2);
    text-align: center;
    color: #64748b;
    font-style: italic
}

@media (max-width: 768px) {
    .support-main {
        padding: 18px 0 40px
    }
    .support-title {
        font-size: 32px
    }
    .support-subtitle {
        font-size: 16px
    }
    .contact-grid,
    .social-grid {
        grid-template-columns: 1fr
    }
    .policy-content {
        padding: 32px 20px
    }
    .policy-section h2 {
        font-size: 20px
    }
    .support-hours {
        padding: 32px 20px
    }
    .faq-category {
        padding: 24px 16px
    }
    .faq-cta {
        padding: 32px 20px
    }
}

.support-footer {
    background: linear-gradient(135deg, #0f172af2, #0a0c1ee6);
    border-top: 1px solid rgba(148, 163, 184, .2);
    padding: 48px 0 24px;
    margin-top: 60px
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 48px;
    margin-bottom: 32px
}

.footer-brand {
    max-width: 400px
}

.footer-brand-name {
    font-size: 24px;
    font-weight: 700;
    color: #31d6ff;
    margin-bottom: 12px
}

.footer-brand p {
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 20px
}

.footer-social {
    display: flex;
    gap: 12px
}

.social-btn {
    width: 40px;
    height: 40px;
    background: #6366f133;
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    transition: all .3s
}

.social-btn:hover {
    background: #6366f1;
    color: #fff;
    transform: translateY(-2px)
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
}

.footer-column h4 {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 16px
}

.footer-column a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color .2s
}

.footer-column a:hover {
    color: #31d6ff
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, .2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b;
    font-size: 14px
}

.footer-bottom .heart {
    color: #ef4444;
    animation: heartbeat 1.5s ease-in-out infinite
}

@keyframes heartbeat {
    0%,
    to {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
}

@media (max-width: 768px) {
    .support-footer {
        padding: 32px 0 20px;
        margin-top: 40px
    }
    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px
    }
    .footer-links {
        grid-template-columns: 1fr;
        gap: 24px
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center
    }
}

.toast.toast-contact {
    top: 80px;
    right: 16px;
    box-shadow: 0 12px 40px #00000073
}

@media (max-width: 600px) {
    .toast.toast-contact {
        left: 12px;
        right: 12px;
        min-width: 0;
        max-width: none
    }
}

.policy-page {
    background: var(--bg-primary);
    min-height: 100vh;
    padding-bottom: 80px
}

.policy-header {
    position: relative;
    overflow: hidden;
    padding: 48px 0 44px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 52px
}

.policy-header-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99, 102, 241, .2), transparent);
    pointer-events: none
}

.policy-header-inner {
    position: relative;
    z-index: 1;
    max-width: 720px
}

.policy-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 500;
    color: #94a3b8bf;
    margin-bottom: 20px
}

.policy-breadcrumb a {
    color: #94a3b8bf;
    text-decoration: none;
    transition: color .2s
}

.policy-breadcrumb a:hover {
    color: #a5b4fc
}

.policy-breadcrumb svg {
    opacity: .4
}

.policy-header-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px #6366f14d
}

.policy-header-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -.5px
}

.policy-header-sub {
    font-size: 1rem;
    color: #94a3b8d9;
    margin-bottom: 20px
}

.policy-header-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: #94a3b8bf;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #ffffff0a;
    text-transform: uppercase;
    letter-spacing: .5px
}

.meta-chip svg {
    opacity: .7
}

.policy-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 52px;
    align-items: start
}

.policy-toc {
    grid-column: 1
}

.toc-sticky {
    position: sticky;
    top: 80px
}

.toc-label {
    font-size: .72rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px
}

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.toc-link {
    display: block;
    font-size: .82rem;
    color: #94a3b8a6;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: all .2s ease
}

.toc-link:hover {
    color: #cbd5e1;
    background: #ffffff0a;
    border-left-color: #6366f199;
    padding-left: 14px
}

.policy-body {
    grid-column: 2
}

.policy-section {
    margin-bottom: 52px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.policy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

.policy-section-icon {
    width: 38px;
    height: 38px;
    background: #6366f11f;
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #818cf8;
    margin-bottom: 16px
}

.policy-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    letter-spacing: -.2px
}

.policy-section>p {
    font-size: .9rem;
    color: #94a3b8d9;
    line-height: 1.75;
    margin-bottom: 14px
}

.policy-section>p strong {
    color: #cbd5e1
}

.highlight-red {
    color: #f87171 !important
}

.policy-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px
}

.policy-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .2s ease
}

.policy-card:hover {
    border-color: #6366f159
}

.policy-card-icon {
    width: 34px;
    height: 34px;
    background: #6366f11f;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #818cf8;
    flex-shrink: 0
}

.policy-card>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.policy-card strong {
    font-size: .85rem;
    font-weight: 600;
    color: #e2e8f0
}

.policy-card span {
    font-size: .8rem;
    color: #94a3b8b3;
    line-height: 1.5
}

.policy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px
}

.policy-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    background: #ffffff06;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 9px;
    font-size: .875rem;
    color: #94a3b8cc;
    line-height: 1.6;
    transition: border-color .2s
}

.policy-list-item:hover {
    border-color: #6366f133
}

.policy-list-item strong {
    color: #cbd5e1
}

.policy-list-item span {
    flex: 1
}

.policy-security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px
}

.security-item {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .2s
}

.security-item:hover {
    border-color: #6366f159
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 700;
    color: #818cf8;
    background: #6366f11f;
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 6px;
    padding: 3px 9px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: .5px
}

.security-item strong {
    font-size: .875rem;
    font-weight: 600;
    color: #e2e8f0
}

.security-item span {
    font-size: .8rem;
    color: #94a3b8b3;
    line-height: 1.55
}

.policy-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px
}

.rights-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff06;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 14px;
    transition: border-color .2s
}

.rights-item:hover {
    border-color: #6366f14d
}

.rights-item>svg {
    color: #818cf8;
    flex-shrink: 0;
    margin-top: 2px
}

.rights-item>div {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.rights-item strong {
    font-size: .875rem;
    font-weight: 600;
    color: #e2e8f0
}

.rights-item span {
    font-size: .8rem;
    color: #94a3b8b3;
    line-height: 1.5
}

.policy-highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #6366f114;
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 16px 0
}

.policy-highlight-box svg {
    color: #818cf8;
    flex-shrink: 0;
    margin-top: 3px
}

.policy-highlight-box>div {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.policy-highlight-box strong {
    font-size: .9rem;
    font-weight: 700;
    color: #c7d2fe
}

.policy-highlight-box span {
    font-size: .82rem;
    color: #94a3b8bf;
    line-height: 1.65
}

.policy-contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px
}

.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 500;
    color: #cbd5e1;
    background: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 9px 15px;
    transition: all .2s
}

.contact-chip:hover {
    border-color: #6366f166;
    background: #6366f114;
    color: #a5b4fc
}

.contact-chip svg {
    color: #818cf8
}

.policy-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    color: #94a3b8bf;
    background: #fbbf240d;
    border: 1px solid rgba(251, 191, 36, .12);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    line-height: 1.6
}

.policy-note svg {
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 2px
}

.policy-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0
}

.policy-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff06;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .2s
}

.policy-step:hover {
    border-color: #6366f14d
}

.step-number {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0
}

.policy-step>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.policy-step strong {
    font-size: .875rem;
    font-weight: 600;
    color: #e2e8f0
}

.policy-step span {
    font-size: .8rem;
    color: #94a3b8b3;
    line-height: 1.5
}

.policy-prohibited {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 14px
}

.prohibited-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #94a3b8cc;
    padding: 8px 12px;
    background: #ef44440d;
    border: 1px solid rgba(239, 68, 68, .1);
    border-radius: 8px
}

.prohibited-item svg {
    color: #f87171;
    flex-shrink: 0
}

@media (max-width: 900px) {
    .policy-layout {
        grid-template-columns: 1fr;
        gap: 32px
    }
    .policy-toc {
        display: none
    }
    .policy-body {
        grid-column: 1
    }
}

@media (max-width: 640px) {
    .policy-header {
        padding: 36px 0 32px
    }
    .policy-cards,
    .policy-security-grid,
    .policy-rights-grid,
    .policy-prohibited {
        grid-template-columns: 1fr
    }
    .policy-section {
        margin-bottom: 36px;
        padding-bottom: 36px
    }
}

:root {
    --admin-sidebar-w: 248px;
    --admin-bg: #0a0a0f;
    --admin-surface: #12121a;
    --admin-surface-elevated: #1a1a25;
    --admin-border: #2a2a3a;
    --admin-text-main: #ffffff;
    --admin-text-muted: #a0a0b0;
    --admin-text-dim: #6b6b7b;
    --admin-primary: #00ff88;
    --admin-primary-hover: #00cc6a;
    --admin-primary-glow: rgba(0, 255, 136, .15)
}

.admin-sidebar {
    width: 248px;
    background: #0f0f1a;
    border-right: 1px solid var(--admin-border);
    padding: 18px 12px 22px;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto
}

.admin-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 14px;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 12px
}

.admin-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--admin-primary);
    box-shadow: 0 0 8px var(--admin-primary-glow)
}

.admin-logo-text {
    font-weight: 600;
    font-size: .8rem;
    color: var(--admin-text-main);
    letter-spacing: .02em
}

.admin-sidebar-nav {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1
}

.admin-nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.admin-nav-title {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--admin-text-dim);
    font-weight: 700;
    margin: 8px 0 4px;
    padding-left: 12px
}

.admin-nav-block {
    display: flex;
    flex-direction: column
}

.admin-nav-item {
    border: none;
    outline: none;
    background: transparent;
    color: var(--admin-text-muted);
    font-size: .875rem;
    font-weight: 500;
    padding: 9px 12px;
    line-height: 1.2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    text-align: left
}

.admin-nav-item .nav-icon-svg {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-primary);
    flex-shrink: 0
}

.admin-nav-item.has-children {
    position: relative
}

.nav-caret {
    margin-left: auto;
    color: var(--admin-text-dim);
    transition: transform .2s ease
}

.nav-caret.open {
    transform: rotate(180deg)
}

.admin-nav-item:hover {
    background: var(--admin-surface-elevated);
    color: var(--admin-text-main)
}

.admin-nav-item.active {
    background: var(--admin-primary-glow);
    color: var(--admin-primary)
}

.admin-nav-item.active .nav-icon-svg {
    color: var(--admin-primary)
}

.admin-sub-nav {
    margin: 0 0 2px;
    background: var(--admin-surface);
    border-radius: 0 0 8px 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.admin-sub-item {
    border: none;
    background: transparent;
    color: var(--admin-text-muted);
    font-size: .8rem;
    font-weight: 500;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease
}

.admin-sub-item:hover {
    background: var(--admin-surface-elevated);
    color: var(--admin-text-main)
}

.admin-sub-item.active {
    background: var(--admin-primary-glow);
    color: var(--admin-primary)
}

.admin-client-shortcut {
    padding: 0 10px 6px
}

.admin-client-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 136, .25);
    background: #00ff880d;
    color: var(--admin-text-muted);
    font-size: .78rem;
    cursor: pointer;
    outline: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease
}

.admin-client-btn:hover {
    background: #00ff881f;
    border-color: #00ff8880;
    color: var(--admin-primary)
}

.admin-dashboard {
    display: flex;
    min-height: 100vh;
    background: var(--admin-bg);
    color: var(--admin-text-main);
    font-family: Be Vietnam Pro, system-ui, -apple-system, sans-serif
}

.admin-main {
    flex: 1;
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-left: 248px
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.admin-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--admin-text-main)
}

.admin-subtitle {
    font-size: .9rem;
    color: var(--admin-text-muted);
    margin-top: 4px
}

.admin-stats-section {
    margin-top: 4px
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px
}

.admin-stat-card {
    background: var(--admin-surface);
    border-radius: 12px;
    padding: 14px 16px 10px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 4px 12px #0000004d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px #0006;
    border-color: #00ff884d
}

.admin-stat-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px
}

.admin-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--admin-text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.admin-stat-label {
    font-size: .8rem;
    color: var(--admin-text-muted)
}

.admin-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--admin-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.admin-stat-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px
}

.admin-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: var(--admin-primary-glow);
    color: var(--admin-primary)
}

.admin-card-full,
.admin-card-side {
    background: var(--admin-surface);
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 4px 12px #0000004d;
    padding: 14px 18px 16px
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--admin-border)
}

.admin-card-header h2 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--admin-text-main)
}

.admin-stat-icon-inner {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--admin-primary);
    border-top-width: 4px;
    border-bottom-width: 0;
    transform: translateY(1px)
}

.admin-chart-card,
.admin-chart-card-half,
.admin-chart-card-large,
.admin-chart-card-small {
    background: var(--admin-surface);
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 4px 12px #0000004d;
    overflow: hidden
}

.admin-chart-card .admin-card-header,
.admin-chart-card-half .admin-card-header,
.admin-chart-card-large .admin-card-header,
.admin-chart-card-small .admin-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 0
}

.admin-chart-card .admin-card-header h2,
.admin-chart-card-half .admin-card-header h2,
.admin-chart-card-large .admin-card-header h2,
.admin-chart-card-small .admin-card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--admin-text-main);
    margin: 0
}

.admin-charts-row {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.1fr);
    gap: 14px;
    margin-top: 10px
}

.admin-charts-row-split {
    display: grid;
    grid-template-columns: 70fr 30fr;
    gap: 24px
}

.admin-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.admin-chart-container {
    position: relative
}

.admin-recent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px
}

.admin-recent-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--admin-surface-elevated);
    border-radius: 8px;
    transition: background .2s ease
}

.admin-recent-item:hover {
    background: #1a1a25cc
}

.admin-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--admin-primary);
    box-shadow: 0 0 8px #0f86;
    margin-top: 4px;
    flex-shrink: 0
}

.admin-timeline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1
}

.timeline-time {
    font-size: .78rem;
    color: var(--admin-text-dim)
}

.timeline-desc {
    font-size: .85rem;
    color: var(--admin-text-main)
}

.admin-no-data {
    text-align: center;
    color: var(--admin-text-dim);
    padding: 40px 20px;
    font-size: .9rem
}

.admin-chart-placeholder {
    height: 200px;
    display: flex;
    align-items: flex-end
}

.admin-chart-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10px, 1fr);
    gap: 6px;
    width: 100%
}

.admin-chart-bar {
    height: 40px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(to top, #0f8c, #00cc6a80);
    transition: height .3s ease
}

.admin-chart-bar:hover {
    filter: brightness(1.2)
}

.admin-chart-bar:nth-child(3n) {
    height: 80px
}

.admin-chart-bar:nth-child(4n) {
    height: 120px
}

.admin-chart-bar:nth-child(5n) {
    height: 60px
}

.admin-chart-labels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(30px, 1fr);
    gap: 6px;
    margin-top: 10px;
    padding: 0 4px
}

.admin-chart-label {
    font-size: .7rem;
    color: var(--admin-text-dim);
    text-align: center
}

.admin-loading,
.admin-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    font-size: 1.1rem;
    color: var(--admin-text-muted)
}

.admin-error {
    color: #ef4444
}

@media (max-width: 1200px) {
    .admin-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .admin-charts-row-split,
    .admin-chart-row {
        grid-template-columns: 1fr
    }
}

@media (max-width: 960px) {
    .admin-dashboard {
        flex-direction: column
    }
    .admin-main {
        margin-left: 0;
        padding: 16px
    }
    .admin-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 12px 14px
    }
    .admin-sidebar-logo {
        border-bottom: none;
        border-right: 1px solid var(--admin-border);
        margin-bottom: 0;
        padding-right: 14px
    }
    .admin-sidebar-nav {
        flex-direction: row;
        gap: 18px;
        padding-left: 16px
    }
    .admin-nav-section {
        min-width: 150px
    }
    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .admin-charts-row {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media (max-width: 640px) {
    .admin-stats-grid {
        grid-template-columns: minmax(0, 1fr)
    }
    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }
    .admin-chart-container {
        height: 250px !important
    }
    .admin-chart-card .admin-card-header,
    .admin-chart-card-half .admin-card-header,
    .admin-chart-card-large .admin-card-header,
    .admin-chart-card-small .admin-card-header {
        padding: 16px 20px
    }
}

.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000080;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 20px;
    animation: fadeIn .2s ease
}

.confirm-dialog {
    background: var(--admin-surface);
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px #0000004d;
    animation: scaleIn .2s ease
}

@keyframes scaleIn {
    0% {
        transform: scale(.9);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.confirm-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.confirm-icon-danger {
    background: #ef44441a;
    color: #ef4444
}

.confirm-icon-warning {
    background: #f59e0b1a;
    color: #f59e0b
}

.confirm-icon-info {
    background: #3b82f61a;
    color: #3b82f6
}

.confirm-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--admin-text-main);
    margin-bottom: 12px
}

.confirm-message {
    font-size: .95rem;
    color: var(--admin-text-muted);
    margin-bottom: 24px;
    line-height: 1.5
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center
}

:root {
    --admin-bg: #0a0a0f;
    --admin-surface: #12121a;
    --admin-surface-elevated: #1a1a25;
    --admin-border: #2a2a3a;
    --admin-text-main: #e2e8f0;
    --admin-text-muted: #94a3b8;
    --admin-text-dim: #64748b;
    --admin-primary: #00ff88;
    --admin-primary-hover: #00cc6a;
    --admin-primary-glow: rgba(0, 255, 136, .2);
    --admin-secondary: #a855f7;
    --admin-secondary-hover: #9333ea;
    --admin-success: #00ff88;
    --admin-success-hover: #00cc6a;
    --admin-danger: #ef4444;
    --admin-danger-hover: #dc2626;
    --admin-warning: #fbbf24;
    --admin-warning-hover: #d97706;
    --admin-info: #3b82f6;
    --admin-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);
    --admin-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --admin-shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);
    --admin-shadow-glow: 0 0 20px rgba(0, 255, 136, .2);
    --admin-spacing-xs: 4px;
    --admin-spacing-sm: 8px;
    --admin-spacing-md: 16px;
    --admin-spacing-lg: 24px;
    --admin-spacing-xl: 32px;
    --admin-radius-sm: 6px;
    --admin-radius-md: 12px;
    --admin-radius-lg: 16px;
    --admin-radius-xl: 24px;
    --admin-transition-fast: .15s ease;
    --admin-transition-normal: .25s ease;
    --admin-transition-slow: .4s ease
}

.admin-dashboard {
    display: flex;
    min-height: 100vh
}

.admin-page {
    flex: 1;
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-left: 248px;
    min-height: 100vh
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.admin-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--admin-text-main)
}

.admin-page-subtitle {
    font-size: .9rem;
    color: var(--admin-text-muted);
    margin-top: 4px
}

.admin-card {
    background: var(--admin-surface);
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow-sm);
    padding: 18px 20px
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--admin-spacing-md);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--admin-border)
}

.admin-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--admin-text-main)
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--admin-spacing-sm);
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    border: none;
    border-radius: var(--admin-radius-md);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--admin-transition-normal);
    outline: none;
    white-space: nowrap
}

.admin-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.admin-btn-primary {
    background: var(--admin-primary);
    color: #fff
}

.admin-btn-primary:hover:not(:disabled) {
    background: var(--admin-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #3b82f666
}

.admin-btn-success {
    background: var(--admin-success);
    color: #fff
}

.admin-btn-success:hover:not(:disabled) {
    background: var(--admin-success-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #22c55e66
}

.admin-btn-danger {
    background: var(--admin-danger);
    color: #fff
}

.admin-btn-danger:hover:not(:disabled) {
    background: var(--admin-danger-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #ef444466
}

.admin-btn-warning {
    background: var(--admin-warning);
    color: #fff
}

.admin-btn-warning:hover:not(:disabled) {
    background: var(--admin-warning-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #f59e0b66
}

.admin-btn-ghost {
    background: transparent;
    color: var(--admin-text-muted);
    border: 1px solid var(--admin-border)
}

.admin-btn-ghost:hover:not(:disabled) {
    background: var(--admin-surface);
    color: var(--admin-text-main);
    border-color: var(--admin-primary)
}

.admin-btn-sm {
    padding: 6px 12px;
    font-size: .8rem
}

.admin-btn-lg {
    padding: 10px 20px;
    font-size: .95rem
}

.admin-btn-icon {
    padding: var(--admin-spacing-sm);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.admin-table-container {
    overflow-x: auto;
    border-radius: var(--admin-radius-md);
    border: 1px solid var(--admin-border)
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem
}

.admin-table thead {
    background: var(--admin-surface)
}

.admin-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--admin-text-main);
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap
}

.admin-table td {
    padding: 12px 16px;
    color: var(--admin-text-muted);
    border-bottom: 1px solid var(--admin-border)
}

.admin-table tbody tr {
    transition: background var(--admin-transition-fast)
}

.admin-table tbody tr:hover {
    background: var(--admin-surface)
}

.admin-table tbody tr:last-child td {
    border-bottom: none
}

.admin-table-actions {
    display: flex;
    gap: var(--admin-spacing-sm);
    align-items: center
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--admin-spacing-sm);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--admin-border)
}

.admin-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--admin-border);
    background: transparent;
    color: var(--admin-text-muted);
    border-radius: var(--admin-radius-sm);
    font-size: .875rem;
    cursor: pointer;
    transition: all var(--admin-transition-normal)
}

.admin-pagination-btn:hover:not(:disabled) {
    background: var(--admin-surface);
    color: var(--admin-text-main);
    border-color: var(--admin-primary)
}

.admin-pagination-btn.active {
    background: var(--admin-primary);
    color: #fff;
    border-color: var(--admin-primary)
}

.admin-pagination-btn:disabled {
    opacity: .3;
    cursor: not-allowed
}

.admin-pagination-info {
    color: var(--admin-text-dim);
    font-size: .875rem;
    margin: 0 12px
}

.admin-form-group {
    margin-bottom: var(--admin-spacing-md)
}

.admin-form-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--admin-text-main);
    margin-bottom: 6px
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text-main);
    font-size: .875rem;
    transition: all var(--admin-transition-normal);
    outline: none
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px #3b82f61a
}

.admin-form-textarea {
    resize: vertical;
    min-height: 100px
}

.admin-form-error {
    color: var(--admin-danger);
    font-size: .8rem;
    margin-top: 4px
}

.admin-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--admin-spacing-md)
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600
}

.admin-badge-success {
    background: var(--admin-success-light);
    color: var(--admin-success-hover)
}

.admin-badge-danger {
    background: var(--admin-danger-light);
    color: var(--admin-danger-hover)
}

.admin-badge-warning {
    background: var(--admin-warning-light);
    color: var(--admin-warning-hover)
}

.admin-badge-info {
    background: var(--admin-info-light);
    color: var(--admin-primary-hover)
}

.admin-badge-gray {
    background: #f1f5f9;
    color: var(--admin-text-muted)
}

.admin-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: var(--admin-spacing-md);
    flex-wrap: wrap
}

.admin-search {
    position: relative;
    flex: 1;
    min-width: 250px
}

.admin-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--admin-text-dim);
    pointer-events: none
}

.admin-search-input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text-main);
    font-size: .875rem;
    outline: none;
    transition: all var(--admin-transition-normal)
}

.admin-search-input:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px #3b82f61a
}

.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #020617c7;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 40px 20px;
    overflow-y: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%
}

.admin-modal {
    background: linear-gradient(160deg, #0b1220, #0f172a 48%, #111c34);
    border-radius: var(--admin-radius-xl);
    border: 1px solid rgba(59, 130, 246, .3);
    max-width: 600px;
    width: 100%;
    margin: 0 auto 40px;
    flex-shrink: 0;
    overflow-y: auto;
    scroll-behavior: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 30px 70px #020617a6
}

.admin-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
    background: #0f172a73;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.admin-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e2e8f0
}

.admin-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all var(--admin-transition-normal)
}

.admin-modal-close:hover {
    background: #94a3b81f;
    color: #e2e8f0
}

.admin-modal-body {
    padding: 24px
}

.admin-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(148, 163, 184, .22);
    background: #0f172a66;
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.admin-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--admin-text-muted)
}

.admin-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--admin-border);
    border-top-color: var(--admin-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite
}

.admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--admin-text-dim);
    text-align: center;
    gap: 12px
}

.admin-empty-icon {
    width: 64px;
    height: 64px;
    opacity: .5
}

.admin-empty-text {
    font-size: 1rem;
    color: var(--admin-text-muted)
}

@media (max-width: 1024px) {
    .admin-stats-grid {
        grid-template-columns: repeat(3, 1fr)
    }
    .admin-recent-table-container {
        overflow-x: auto
    }
}

@media (max-width: 768px) {
    .admin-page {
        padding: 16px 16px 80px;
        margin-left: 0
    }
    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
    .admin-page-title {
        font-size: 1.25rem
    }
    .admin-page-subtitle {
        font-size: .8rem
    }
    .admin-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }
    .admin-search {
        min-width: 100%
    }
    .admin-card {
        padding: 14px 12px
    }
    .admin-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
    .admin-table-container {
        overflow-x: auto;
        margin: 0 -12px;
        padding: 0 12px
    }
    .admin-table {
        font-size: .8rem;
        min-width: 600px
    }
    .admin-table th,
    .admin-table td {
        padding: 8px 10px;
        white-space: nowrap
    }
    .admin-form-row {
        grid-template-columns: 1fr
    }
    .admin-form-group {
        margin-bottom: 12px
    }
    .admin-detail-grid {
        grid-template-columns: 1fr
    }
    .admin-detail-section {
        padding: 16px
    }
    .recharge-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }
    .recharge-stat-card {
        padding: 14px;
        flex-direction: column;
        text-align: center;
        gap: 10px
    }
    .recharge-stat-icon {
        width: 44px;
        height: 44px
    }
    .recharge-stat-value {
        font-size: 16px
    }
    .recharge-filters {
        grid-template-columns: 1fr;
        padding: 0 0 12px
    }
    .admin-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 12px 0
    }
    .admin-pagination-info {
        width: 100%;
        text-align: center;
        order: -1
    }
    .admin-empty-state,
    .admin-empty {
        padding: 24px 12px;
        font-size: .9rem
    }
    .recharge-config-grid {
        grid-template-columns: 1fr !important
    }
    .admin-card>div:last-child {
        flex-direction: column
    }
    .admin-card button {
        width: 100%
    }
    .admin-modal-overlay {
        padding: 16px
    }
    .admin-modal {
        margin: 40px auto;
        width: 100%;
        max-height: calc(100vh - 80px);
        overflow-y: auto
    }
    .admin-modal-header,
    .admin-modal-body {
        padding: 16px
    }
    .admin-modal-footer {
        padding: 16px;
        flex-direction: column
    }
    .admin-modal-footer button {
        width: 100%
    }
}

@media (max-width: 480px) {
    .admin-page {
        padding: 12px
    }
    .admin-page-title {
        font-size: 1.1rem
    }
    .admin-stats-grid,
    .recharge-stats-grid {
        grid-template-columns: 1fr
    }
    .recharge-stat-card {
        flex-direction: row;
        text-align: left
    }
    .admin-table th,
    .admin-table td {
        padding: 6px 8px;
        font-size: .75rem
    }
    .admin-form-input,
    .admin-form-select {
        padding: 8px 10px;
        font-size: .8rem
    }
    .admin-btn {
        padding: 8px 12px;
        font-size: .8rem
    }
    .admin-table .hide-mobile {
        display: none
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .admin-dashboard {
        flex-direction: column
    }
    .admin-page {
        margin-left: 0
    }
    .admin-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 10px 12px
    }
    .admin-sidebar-logo {
        border-bottom: none;
        border-right: 1px solid var(--admin-border);
        margin-bottom: 0;
        padding-right: 12px
    }
    .admin-sidebar-nav {
        flex-direction: row;
        gap: 12px;
        padding-left: 12px
    }
    .admin-nav-section {
        min-width: 140px
    }
    .admin-stats-grid,
    .recharge-stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .recharge-filters {
        grid-template-columns: repeat(3, 1fr)
    }
}

.admin-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-main);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--admin-shadow-md)
}

.admin-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0009;
    z-index: 999;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

@media (max-width: 768px) and (orientation: landscape) {
    .admin-page {
        padding-bottom: 60px
    }
    .admin-stats-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width: 768px) {
    .admin-mobile-toggle {
        display: flex
    }
    .admin-sidebar-overlay {
        display: block
    }
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px;
        z-index: 1000;
        flex-direction: column;
        transition: left .3s ease;
        overflow-y: auto
    }
    .admin-sidebar.open {
        left: 0
    }
    .admin-sidebar-logo {
        border-bottom: 1px solid var(--admin-border);
        margin-bottom: 0;
        padding-bottom: 16px
    }
    .admin-sidebar-nav {
        flex-direction: column;
        gap: 0
    }
    .admin-nav-section {
        min-width: auto
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .admin-dashboard {
        flex-direction: column
    }
    .admin-page {
        margin-left: 0
    }
    .admin-mobile-toggle {
        display: flex
    }
    .admin-sidebar-overlay {
        display: block
    }
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px;
        z-index: 1000;
        flex-direction: column;
        transition: left .3s ease;
        overflow-y: auto
    }
    .admin-sidebar.open {
        left: 0
    }
    .admin-sidebar-logo {
        border-bottom: 1px solid var(--admin-border);
        margin-bottom: 0;
        padding-bottom: 16px
    }
    .admin-sidebar-nav {
        flex-direction: column;
        gap: 0
    }
    .admin-stats-grid,
    .recharge-stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .recharge-filters {
        grid-template-columns: repeat(3, 1fr)
    }
}

.admin-detail-section {
    padding: 24px;
    border-bottom: 1px solid var(--admin-border)
}

.admin-detail-section:last-child {
    border-bottom: none
}

.admin-detail-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--admin-text-main);
    margin-bottom: 20px
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px
}

.admin-detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.admin-detail-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px
}

.admin-detail-value {
    font-size: 15px;
    color: var(--admin-text-main);
    font-weight: 500;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word
}

.admin-detail-item .admin-badge {
    display: inline-block;
    width: fit-content;
    max-width: 100%
}

.admin-detail-item .admin-form-select,
.admin-detail-item .admin-form-input,
.admin-detail-item .admin-form-textarea {
    width: 100%;
    box-sizing: border-box
}

.admin-detail-item code {
    display: block;
    word-break: break-all;
    white-space: pre-wrap;
    overflow-wrap: break-word
}

.admin-detail-item .admin-badge {
    display: inline-block;
    width: auto;
    max-width: 100%
}

.admin-detail-item .admin-form-select,
.admin-detail-item .admin-form-input {
    width: 100%;
    max-width: 100%
}

.admin-detail-value {
    word-break: break-word;
    overflow-wrap: break-word
}

.admin-detail-item code {
    word-break: break-all;
    white-space: pre-wrap;
    color: #0f172a;
    background-color: #f1f5f9
}

.user-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px
}

.user-summary-card {
    border-radius: 14px;
    padding: 14px 16px;
    background: radial-gradient(circle at top left, rgba(59, 130, 246, .16), transparent 55%), #0f172ae6;
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 18px 40px #0f172a8c
}

.user-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9ca3af;
    margin-bottom: 6px
}

.user-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #e5e7eb
}

.user-summary-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px
}

.user-summary-value.balance {
    color: #22c55e
}

.user-summary-value.total {
    color: #3b82f6
}

.user-summary-value.cost {
    color: #f97316
}

.admin-detail-section {
    border-radius: 14px;
    padding: 16px 18px 14px;
    background: #0f172ad9;
    border: 1px solid rgba(30, 64, 175, .45);
    margin-bottom: 18px
}

.admin-detail-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #9ca3af;
    margin-bottom: 10px
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 20px
}

.admin-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.admin-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6b7280
}

.admin-detail-value {
    font-size: 14px;
    color: #e5e7eb
}

.admin-toolbar--users {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between
}

.admin-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.admin-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color .15s, background .15s;
    z-index: 2
}

.admin-search-clear:hover {
    color: #e2e8f0;
    background: #ffffff14
}

th.sortable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap
}

th.sortable:hover {
    color: var(--admin-primary, #3b82f6)
}

td.num,
th.num {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.cell-id {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.cell-username {
    display: flex;
    align-items: center;
    gap: 8px
}

.username-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0
}

.cell-secondary {
    color: #94a3b8;
    font-size: 13px
}

.muted {
    color: #475569;
    font-style: italic
}

.cell-money {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #64748b
}

.cell-money.money-positive {
    color: #22c55e
}

tr.row-banned {
    opacity: .7
}

tr.row-banned td {
    text-decoration: line-through;
    text-decoration-color: #ef444466
}

.admin-pagination-info-bottom {
    text-align: center;
    font-size: 12px;
    color: #64748b;
    padding: 10px 0 2px
}

.admin-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: #475569;
    pointer-events: none
}

.required-star {
    color: #ef4444;
    margin-left: 2px
}

.admin-form-input.input-error {
    border-color: #ef4444;
    background: #ef44440f
}

.field-error-msg {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #ef4444;
    font-weight: 500;
    letter-spacing: .02em
}

.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b
}

.admin-modal:has(.product-form-body) {
    max-width: 920px !important;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, .25);
    background: linear-gradient(180deg, #0b1220, #0f172a);
    box-shadow: 0 24px 70px #020617b3;
    overflow-y: auto;
    scroll-behavior: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto 40px;
    flex-shrink: 0
}

.admin-modal-header:has(+.product-form-body) {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(96, 165, 250, .2);
    background: linear-gradient(180deg, #1e293bbf, #0f172abf)
}

.admin-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #e2e8f0
}

.admin-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #0f172ab3;
    color: #94a3b8
}

.admin-modal-close:hover {
    background: #1e293bf2;
    border-color: #60a5fa73;
    color: #e2e8f0
}

.product-form-body {
    background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 42%), radial-gradient(circle at 100% 100%, rgba(14, 165, 233, .1), transparent 40%), linear-gradient(180deg, #0f172aeb, #0f172abf)
}

.product-form-body .admin-form-row {
    gap: 18px
}

.product-form-body .admin-form-group {
    margin-bottom: 18px
}

.product-form-body .admin-form-label {
    color: #c7d2fe;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px
}

.product-form-body .admin-form-input,
.product-form-body .admin-form-select,
.product-form-body .admin-form-textarea {
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, .28);
    background: linear-gradient(180deg, #0b152d, #0f172a);
    color: #e2e8f0;
    font-weight: 600
}

.product-form-body .admin-form-input::placeholder,
.product-form-body .admin-form-textarea::placeholder {
    color: #7b91b3
}

.product-form-body .admin-form-input:focus,
.product-form-body .admin-form-select:focus,
.product-form-body .admin-form-textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #60a5fa38
}

.product-form-body .admin-form-select option {
    background: #0f172a;
    color: #e2e8f0
}

.product-form-body .admin-form-select option:disabled {
    background: #0b152d;
    color: #64748b
}

.product-form-body .admin-form-textarea {
    min-height: 96px
}

.product-form-body small {
    color: #93a4be !important;
    line-height: 1.45
}

.product-form-body input[type=file].admin-form-input {
    padding: 10px !important;
    color: #a5b4fc
}

.product-form-body input[type=file].admin-form-input::file-selector-button {
    margin-right: 10px;
    border: 1px solid rgba(96, 165, 250, .4);
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer
}

.product-image-preview {
    margin-top: 12px;
    position: relative;
    display: inline-block
}

.product-image-preview img {
    width: 132px;
    height: 132px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, .35) !important;
    box-shadow: 0 12px 28px #02061773;
    object-fit: cover
}

.product-image-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer
}

.product-checklive {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .2);
    background: #0f172a80
}

.product-checklive input[type=checkbox] {
    accent-color: #3b82f6
}

.admin-modal-footer {
    border-top: 1px solid rgba(96, 165, 250, .2);
    background: #0f172abf
}

.admin-modal-footer .admin-btn {
    min-width: 100px;
    height: 42px;
    border-radius: 10px;
    font-weight: 700
}

.admin-modal-footer .admin-btn-ghost {
    border: 1px solid rgba(148, 163, 184, .35);
    color: #cbd5e1;
    background: #0f172ac7
}

.admin-status-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #0f172ab3;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 10px;
    padding: 4px
}

.admin-status-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
    white-space: nowrap
}

.admin-status-tab:hover {
    background: #3b82f61f;
    color: #e2e8f0
}

.admin-status-tab.active {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 2px 8px #2563eb59
}

.admin-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 999px;
    background: #0f172a99;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1
}

.admin-toggle-btn:hover {
    border-color: #818cf873;
    box-shadow: 0 0 0 2px #6366f11f
}

.admin-toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0
}

.admin-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s cubic-bezier(.34, 1.3, .64, 1), box-shadow .2s;
    box-shadow: 0 1px 4px #0000004d
}

.admin-toggle-label {
    color: #94a3b8;
    transition: color .2s
}

.admin-toggle-btn--on .admin-toggle-track {
    background: linear-gradient(180deg, #22c55e, #16a34a)
}

.admin-toggle-btn--on .admin-toggle-thumb {
    transform: translate(14px)
}

.admin-toggle-btn--on .admin-toggle-label {
    color: #4ade80
}

.admin-toggle-btn--off .admin-toggle-track {
    background: #47556999
}

.admin-toggle-btn--off .admin-toggle-thumb {
    transform: translate(0)
}

.admin-toggle-btn--off .admin-toggle-label {
    color: #64748b
}

@media (max-width: 900px) {
    .admin-modal:has(.product-form-body) {
        max-width: calc(100vw - 24px) !important;
        margin: 0 auto 20px
    }
}

.category-panel {
    background: linear-gradient(180deg, #1b2233, #171e2d);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    overflow: hidden
}

.category-panel-title {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    background: #94a3b814;
    border-bottom: 1px solid rgba(148, 163, 184, .12)
}

.category-table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent
}

.category-table {
    font-size: 15px
}

.category-table thead {
    background: #1b2230
}

.category-table th {
    color: #8fb0df;
    font-weight: 700;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .16)
}

.category-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .08);
    color: #cbd5e1;
    vertical-align: middle
}

.category-table tbody tr {
    background: #1a2130
}

.category-table tbody tr:nth-child(2n) {
    background: #1c2434
}

.category-table tbody tr:hover {
    background: #232d40
}

.cat-id {
    color: #dbeafe;
    font-weight: 700;
    min-width: 70px
}

.cat-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .2)
}

.cat-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.cat-icon-placeholder {
    background: linear-gradient(145deg, #1e293b, #0f172a)
}

.cat-name {
    color: #f8fafc;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px
}

.cat-priority-input {
    width: 90px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, .25);
    background: #111827;
    color: #dbeafe;
    font-weight: 600;
    text-align: left;
    padding: 0 12px
}

.cat-priority-input:focus {
    outline: none;
    border-color: #3b82f6
}

.cat-switch {
    position: relative;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #111827;
    cursor: pointer;
    transition: all .2s ease
}

.cat-switch-dot {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all .2s ease
}

.cat-switch.active {
    background: #1976d2;
    border-color: #1976d2
}

.cat-switch.active .cat-switch-dot {
    left: 19px;
    background: #fff
}

.cat-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.cat-action-btn {
    width: 36px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.cat-action-edit {
    background: #1d78d8
}

.cat-action-delete {
    background: #f26722;
    font-size: 24px;
    line-height: 1
}

.category-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 18px;
    color: #93a4be;
    font-weight: 600
}

.category-pagination {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 6px;
    overflow: hidden
}

.category-pagination button {
    min-width: 42px;
    height: 36px;
    border: none;
    padding: 0 14px;
    background: #111827;
    color: #7da2db;
    font-weight: 700
}

.category-pagination button.active {
    background: #1976d2;
    color: #fff
}

.category-form-body {
    background: linear-gradient(180deg, #0f172a8c, #0f172a59)
}

.category-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.category-form-group-full {
    grid-column: 1 / -1
}

.category-form-help {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 6px;
    display: block
}

.category-image-preview-wrap {
    margin-top: 12px;
    width: 132px;
    height: 132px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .25);
    position: relative;
    background: #0f172a
}

.category-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.category-image-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #ef4444f2;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.admin-modal:has(.category-form-body) {
    max-width: 720px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, .28);
    background: linear-gradient(180deg, #0f172a, #111827);
    box-shadow: 0 30px 80px #020617bf
}

.admin-modal-header:has(+.category-form-body) {
    padding: 18px 22px;
    background: linear-gradient(180deg, #1e293beb, #0f172aeb);
    border-bottom: 1px solid rgba(96, 165, 250, .24)
}

.admin-modal-title {
    color: #e2e8f0;
    font-size: 22px;
    font-weight: 700
}

.admin-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #93a4be;
    background: #0f172a99;
    border: 1px solid rgba(148, 163, 184, .2)
}

.category-form-body {
    background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 45%), linear-gradient(180deg, #0f172af0, #0f172ac7)
}

.category-form-grid {
    gap: 16px
}

.category-form-body .admin-form-label {
    color: #c7d2fe;
    font-weight: 600;
    margin-bottom: 8px
}

.category-form-body .admin-form-input,
.category-form-body .admin-form-select {
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, .26);
    background: linear-gradient(180deg, #0b152d, #0f172a);
    color: #e2e8f0;
    font-weight: 600
}

.category-form-body .admin-form-input::placeholder {
    color: #7b91b3
}

.category-form-body .admin-form-input:focus,
.category-form-body .admin-form-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #60a5fa33
}

.category-form-body input[type=file].admin-form-input {
    padding: 10px;
    color: #a5b4fc
}

.category-form-body input[type=file].admin-form-input::file-selector-button {
    margin-right: 10px;
    border: 1px solid rgba(96, 165, 250, .4);
    background: linear-gradient(180deg, #1d4ed8, #1e40af);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer
}

.category-form-help {
    color: #93a4be
}

.category-image-preview-wrap {
    width: 140px;
    height: 140px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, .35);
    box-shadow: 0 10px 24px #02061766
}

.category-image-remove {
    width: 26px;
    height: 26px;
    background: #ef4444
}

.admin-modal-footer {
    border-top: 1px solid rgba(96, 165, 250, .2);
    background: #0f172ab3
}

.admin-modal-footer .admin-btn {
    min-width: 96px;
    height: 40px;
    border-radius: 10px;
    font-weight: 700
}

.admin-modal-footer .admin-btn-ghost {
    border: 1px solid rgba(148, 163, 184, .35);
    color: #cbd5e1;
    background: #0f172abf
}

.admin-modal-footer .admin-btn-primary {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    box-shadow: 0 10px 24px #2563eb59
}

@media (max-width: 900px) {
    .category-panel-title {
        font-size: 16px
    }
    .category-table {
        font-size: 14px
    }
    .category-form-grid {
        grid-template-columns: 1fr
    }
}

.admin-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: .75rem;
    font-weight: 500;
    border-radius: 6px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-main);
    cursor: pointer;
    transition: all .2s ease;
    margin-left: 8px
}

.admin-copy-btn:hover {
    background: var(--admin-border);
    border-color: var(--admin-text-dim)
}

.admin-copy-btn:active {
    transform: scale(.98)
}

.contact-message-preview {
    display: block;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default
}

.contact-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000a6;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.contact-modal {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px #00000080;
    animation: modalIn .2s ease
}

@keyframes modalIn {
    0% {
        opacity: 0;
        transform: scale(.95) translateY(-8px)
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.contact-modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9
}

.contact-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s
}

.contact-modal-close:hover {
    color: #fff;
    background: #ffffff14
}

.contact-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1
}

.contact-modal-field {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 12px
}

.contact-modal-field--full {
    grid-template-columns: 130px 1fr;
    align-items: flex-start
}

.contact-modal-field label {
    font-size: .82rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em
}

.contact-modal-field span:not(.admin-badge) {
    font-size: .92rem;
    color: #e2e8f0
}

.contact-modal-message {
    font-size: .92rem;
    color: #cbd5e1;
    line-height: 1.6;
    background: #0003;
    border-radius: 8px;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word
}

.contact-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.contact-modal-footer .admin-btn {
    flex: 1
}

.recharge-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px
}

.recharge-stat-card {
    background: var(--admin-card-bg, #ffffff);
    border: 1px solid var(--admin-border, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px #0000000d;
    transition: transform .2s, box-shadow .2s
}

.recharge-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #0000001a
}

.recharge-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.recharge-stat-content {
    flex: 1
}

.recharge-stat-label {
    font-size: 14px;
    color: var(--admin-text-dim, #64748b);
    margin: 0 0 4px
}

.recharge-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--admin-text-main, #1e293b);
    margin: 0
}

@media (max-width: 1200px) {
    .recharge-stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .recharge-stats-grid {
        grid-template-columns: 1fr
    }
}

.recharge-history-toolbar {
    gap: 12px;
    flex-wrap: wrap
}

.recharge-config-grid {
    width: 100%
}

.recharge-config-grid .admin-form-group {
    min-width: 0
}

.recharge-config-grid .admin-form-input,
.recharge-config-grid .admin-form-select {
    width: 100%;
    min-width: 0;
    max-width: 100%
}

.recharge-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 12px;
    padding: 0 20px 16px;
    width: 100%
}

.recharge-filters .admin-btn {
    height: 42px;
    align-self: end
}

.admin-form-input {
    min-width: 0
}

@media (max-width: 1400px) {
    .recharge-filters {
        grid-template-columns: repeat(3, minmax(160px, 1fr))
    }
    .recharge-config-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important
    }
}

@media (max-width: 900px) {
    .recharge-filters {
        grid-template-columns: 1fr 1fr
    }
    .recharge-config-grid {
        grid-template-columns: 1fr !important
    }
}

@media (max-width: 560px) {
    .recharge-filters {
        grid-template-columns: 1fr
    }
}

.recharge-note-ellipsis {
    display: inline-block;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle
}

.admin-form-input option,
.admin-form-select option {
    color: #0f172a;
    background: #fff
}

.promotions-page {
    padding: 24px
}

.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000080;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.admin-modal {
    background: linear-gradient(180deg, #0f172a, #111827);
    border: 1px solid rgba(96, 165, 250, .28);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.admin-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(96, 165, 250, .24);
    background: linear-gradient(180deg, #1e293beb, #0f172aeb);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.admin-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0
}

.admin-modal-close {
    background: #0f172a99;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 10px;
    cursor: pointer;
    padding: 4px;
    color: #93a4be;
    transition: all .2s
}

.admin-modal-close:hover {
    color: #e2e8f0;
    border-color: #60a5fa73;
    background: #1e293be6
}

.admin-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 45%), linear-gradient(180deg, #0f172af0, #0f172ac7)
}

.admin-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(96, 165, 250, .2);
    background: #0f172ab3;
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.admin-form-group {
    margin-bottom: 20px
}

.admin-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #c7d2fe;
    margin-bottom: 8px
}

.admin-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(96, 165, 250, .26);
    background: linear-gradient(180deg, #0b152d, #0f172a);
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all .2s
}

.admin-form-input::placeholder {
    color: #7b91b3
}

.admin-form-input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #60a5f633
}

.admin-form-input:disabled {
    background: #0f172a80;
    cursor: not-allowed;
    opacity: .6
}

.admin-btn-ghost {
    background: #0f172abf;
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, .35)
}

.admin-btn-ghost:hover {
    background: #1e293be6;
    border-color: #60a5fa73;
    color: #e2e8f0
}

.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #1e293b;
    margin-bottom: 24px
}

.settings-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #94a3b8;
    transition: all .2s;
    position: relative;
    bottom: -2px
}

.settings-tab:hover {
    color: #e2e8f0;
    background: #1e293b
}

.settings-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
    background: #1e293b
}

.settings-content {
    padding: 24px 0
}

.settings-toggle-group {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #1e293b
}

.settings-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #1e293b;
    border-radius: 8px;
    margin-bottom: 12px
}

.settings-toggle-label {
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 500
}

.settings-toggle {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    min-width: 80px
}

.settings-toggle.on {
    background: #10b981;
    color: #fff
}

.settings-toggle.off {
    background: #475569;
    color: #94a3b8
}

.settings-toggle:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.settings-editor {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden
}

.settings-editor textarea {
    border: none;
    border-radius: 0
}

.settings-footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #1e293b;
    display: flex;
    justify-content: flex-end
}

.admin-btn-lg {
    padding: 12px 32px;
    font-size: 16px
}

.theme-card {
    padding: 0;
    overflow: hidden
}

.theme-header-row {
    padding: 14px 18px;
    background: #2b3446;
    color: #9fb4d1;
    font-weight: 700;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(148, 163, 184, .2)
}

.theme-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    padding: 20px
}

.theme-form-col {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.theme-preview-col {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.theme-preview-item {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 10px;
    padding: 12px;
    background: #0f172a80
}

.theme-preview-label {
    color: #c7d7ef;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600
}

.theme-preview-img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, .2);
    background: #0b1220
}

.theme-preview-img.is-logo {
    max-height: 90px;
    object-fit: contain
}

.theme-preview-img.is-favicon {
    width: 72px;
    height: 72px;
    object-fit: cover
}

.theme-preview-empty {
    min-height: 70px;
    border-radius: 8px;
    border: 1px dashed rgba(148, 163, 184, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8ba0bf;
    font-size: 13px
}

.theme-uploading {
    display: inline-block;
    margin-top: 6px;
    color: #60a5fa;
    font-size: 12px
}

.slider-uploader {
    margin-top: 4px
}

.slider-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px
}

.slider-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .3)
}

.slider-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.slider-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dc2626e6;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s
}

.slider-image-remove:hover {
    background: #dc2626
}

.slider-image-add {
    aspect-ratio: 1;
    border: 2px dashed rgba(148, 163, 184, .4);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #8ba0bf;
    transition: all .2s
}

.slider-image-add:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: #60a5fa1a
}

.slider-image-add input {
    display: none
}

.slider-image-add span {
    font-size: 11px;
    text-align: center
}

.slider-upload-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(148, 163, 184, .3);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spin .8s linear infinite
}

.slider-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #8ba0bf
}

.slider-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px
}

.slider-preview-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, .2)
}

@media (max-width: 1100px) {
    .theme-layout {
        grid-template-columns: 1fr
    }
}

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-card: #15151f;
    --bg-card-hover: #1e1e2a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #6b6b7b;
    --text-accent: #00ff88;
    --accent-primary: #00ff88;
    --accent-secondary: #00cc6a;
    --accent-glow: rgba(0, 255, 136, .3);
    --accent-purple: #a855f7;
    --accent-purple-glow: rgba(168, 85, 247, .3);
    --border-color: #2a2a3a;
    --border-active: #00ff88;
    --success: #00ff88;
    --warning: #fbbf24;
    --error: #ef4444;
    --info: #3b82f6;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-glow: 0 0 20px var(--accent-glow);
    --gradient-dark: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
    --gradient-card: linear-gradient(145deg, #15151f 0%, #1a1a25 100%);
    --gradient-accent: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    --gradient-hero: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 50%);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --transition-fast: .15s ease;
    --transition-normal: .25s ease;
    --transition-slow: .4s ease;
    --font-primary: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 16px;
    background: var(--bg-primary)
}

body {
    font-family: var(--font-primary);
    background: linear-gradient(180deg, #070b18, #111);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative
}

body.page-home {
    background: var(--bg-primary)
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(rgba(76, 110, 245, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 110, 245, .16) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .55
}

#root {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column
}

body.page-home:before {
    opacity: 0
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary)
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary)
}

::selection {
    background: var(--accent-primary);
    color: var(--bg-primary)
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: var(--transition-fast)
}

a:hover {
    text-decoration: underline
}

button {
    font-family: var(--font-primary);
    cursor: pointer;
    border: none;
    outline: none;
    transition: var(--transition-normal)
}

button:disabled {
    cursor: not-allowed;
    opacity: .5
}

input,
textarea,
select {
    font-family: var(--font-primary);
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    outline: none;
    transition: var(--transition-fast)
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow)
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted)
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg)
}

.text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.glow-text {
    text-shadow: 0 0 10px var(--accent-glow)
}

.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-primary)
}

.loader {
    width: 50px;
    height: 50px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.9)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes pulse {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

@keyframes glow {
    0%,
    to {
        box-shadow: 0 0 5px var(--accent-glow)
    }
    50% {
        box-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--accent-glow)
    }
}

.animate-fade-in {
    animation: fadeIn .5s ease forwards
}

.animate-slide-up {
    animation: slideUp .5s ease forwards
}

.animate-scale-in {
    animation: scaleIn .3s ease forwards
}

.stagger-1 {
    animation-delay: .1s
}

.stagger-2 {
    animation-delay: .2s
}

.stagger-3 {
    animation-delay: .3s
}

.stagger-4 {
    animation-delay: .4s
}

.stagger-5 {
    animation-delay: .5s
}

.stagger-6 {
    animation-delay: .6s
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px
}