/*
 * Giao diện đồng bộ theo wedplus_giftcode_item_mapping_fixed.
 * File này chỉ chứa CSS; toàn bộ JavaScript của htdocs_vip_Y_Plus được giữ nguyên.
 */

:root {
    --header-size: 3.5rem;
    --footer-size: 2.5rem;
    --primary-color: rgb(251, 146, 60);
    --hover-color: rgb(200, 95, 9);
    --theme-color: rgb(255, 255, 255);
    --wedplus-bg: var(--theme-color);
    --wedplus-panel: #ffffff;
    --wedplus-panel-soft: #f9fafb;
    --wedplus-border: #e5e7eb;
    --wedplus-text: #111827;
    --wedplus-muted: #6b7280;
    --wedplus-primary: var(--primary-color);
    --wedplus-primary-hover: var(--hover-color);
    --wedplus-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

html.dark {
    --theme-color: rgb(17, 24, 39);
    --wedplus-bg: var(--theme-color);
    --wedplus-panel: #111827;
    --wedplus-panel-soft: #1f2937;
    --wedplus-border: #374151;
    --wedplus-text: #f3f4f6;
    --wedplus-muted: #9ca3af;
    --wedplus-primary: var(--primary-color);
    --wedplus-primary-hover: var(--hover-color);
    --wedplus-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

html,
body {
    min-height: 100%;
}

html {
    background: var(--wedplus-bg);
    scrollbar-gutter: stable;
}

body.wedplus-body {
    min-height: 100vh;
    margin: 0;
    background: var(--wedplus-bg);
    color: var(--wedplus-text);
    font-family: __Inter_e8ce0c, Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    transition: background-color .2s ease, color .2s ease;
}

.wedplus-app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wedplus-app-shell > .max-w-7xl.grid {
    width: 100%;
    flex: 1 0 auto;
}

/* Header */
.wedplus-header {
    min-height: calc(var(--header-size) + 4rem);
    border-bottom: 0;
}

html.dark .wedplus-header {
    background: rgba(17, 24, 39, .78) !important;
}

.wedplus-logo {
    width: 9rem !important;
    height: auto !important;
    max-height: calc(var(--header-size) * 2.8);
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .12));
}

.wedplus-marquee-wrap {
    pointer-events: none;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee__inner {
    display: inline-flex;
    min-width: 100%;
    animation: wedplus-marquee 18s linear infinite;
}

.marquee__line {
    padding-left: 100%;
    white-space: nowrap;
}

@keyframes wedplus-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.wedplus-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: rgb(55 65 81);
    border-radius: .375rem;
}

html.dark .wedplus-mobile-trigger {
    color: rgb(229 231 235);
}

/* Theme selector: bố cục và bảng màu khớp source WedPlus mẫu. */
.theme-wrapper {
    z-index: 60;
}

.theme-popup {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    width: 14rem;
    display: none;
    z-index: 70;
    transform: translateX(-50%);
    border: 1px solid rgb(229 231 235);
    border-radius: .375rem;
    background: #fff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .14);
}

html.dark .theme-popup {
    border-color: rgb(31 41 55);
    background: #111827;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
}

.theme-popup.is-open {
    display: block;
    animation: theme-popup-in .14s ease-out;
}

@keyframes theme-popup-in {
    from { opacity: 0; transform: translate(-50%, -.25rem) scale(.98); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.theme-popup-inner {
    width: 14rem;
    padding: .5rem;
}

.theme-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    padding: .25rem;
    border-radius: .5rem;
    background: #f3f4f6;
}

html.dark .theme-switch {
    background: #1f2937;
}

.theme-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2rem;
    padding: .375rem .75rem;
    border: 0;
    border-radius: .375rem;
    color: #6b7280;
    background: transparent;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

html.dark .theme-btn {
    color: #9ca3af;
}

.theme-btn.active {
    color: #111827;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}

html.dark .theme-btn.active {
    color: #fff;
    background: #111827;
}

.theme-accent-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .25rem;
}

.theme-color-dot,
.theme-background-dot {
    --dot-color: #9ca3af;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--dot-color);
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.theme-color-dot:hover,
.theme-background-dot:hover {
    transform: scale(1.1);
}

.theme-color-dot.active {
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #d1d5db;
    filter: brightness(.9);
}

html.dark .theme-color-dot.active {
    box-shadow: 0 0 0 4px #111827, 0 0 0 8px #6b7280;
}

.theme-divider {
    height: 0;
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

html.dark .theme-divider {
    border-top-color: #374151;
}

.theme-background-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .25rem;
}

.theme-background-dot:not(.active) {
    filter: brightness(1.3);
}

.theme-background-dot.active {
    box-shadow: 0 0 0 4px #d1d5db;
    filter: brightness(.9);
}

html.dark .theme-background-dot.active {
    box-shadow: 0 0 0 4px #6b7280;
}

.theme-background-dot span {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--dot-color);
}

.wedplus-theme-trigger:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Sidebar */
.wedplus-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, .42) transparent;
}

.wedplus-sidebar > div {
    padding-right: .1rem;
}

.button-primary,
.bg-primary-500 {
    background-color: var(--wedplus-primary) !important;
}

.button-primary:hover,
.hover\:bg-primary-600:hover {
    background-color: var(--wedplus-primary-hover) !important;
}

.wedplus-menu-list {
    gap: .05rem;
}

.wedplus-menu-heading {
    min-height: 2.25rem;
    color: var(--wedplus-text);
    border-radius: .45rem;
    transition: background-color .15s ease, color .15s ease;
}

.wedplus-menu-heading:hover {
    background: rgba(45, 212, 191, .08);
}

.wedplus-menu-heading p {
    font-size: .875rem;
    line-height: 1.25rem;
}

.wedplus-menu-panel > div {
    padding-left: 1.5rem;
}

.wedplus-menu-panel li + li {
    margin-top: .05rem;
}

.wedplus-menu-panel a {
    min-height: 2rem;
}

.wedplus-menu-panel.hidden {
    display: none !important;
}

.mobileMenu {
    position: fixed;
    inset: 0;
    z-index: 100;
    transform: translateX(-130%);
    transition: transform .25s ease;
}

.wedplus-mobile-panel {
    box-shadow: 20px 0 60px rgba(0, 0, 0, .18);
}

/* Main page typography and sections */
main.py-4 {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

main h1,
main h2,
main h3,
main h4 {
    letter-spacing: -.015em;
}

main > .mb-8,
main > .mb-6,
main > .relative.mb-7,
main .wedplus-page-heading {
    margin-bottom: 1.75rem;
}

main h1.text-3xl,
main h2.text-3xl {
    color: rgb(55 65 81) !important;
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    font-weight: 700 !important;
}

html.dark main h1.text-3xl,
html.dark main h2.text-3xl {
    color: rgb(209 213 219) !important;
}

/* Cards */
main .rounded-xl,
main .rounded-2xl,
[role="dialog"] .rounded-xl,
[role="dialog"] .rounded-2xl,
[role="dialog"] .rounded-lg {
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

main .bg-white.dark\:bg-gray-900,
main .bg-white.dark\:bg-gray-800,
main .dark\:bg-gray-900,
[role="dialog"] .bg-white.dark\:bg-gray-900,
[role="dialog"] .dark\:bg-gray-900 {
    background-color: var(--wedplus-panel) !important;
}

main .border-gray-200,
main .ring-gray-200,
[role="dialog"] .border-gray-200,
[role="dialog"] .ring-gray-200 {
    border-color: var(--wedplus-border) !important;
}

html.dark main .dark\:border-gray-800,
html.dark main .dark\:ring-gray-800,
html.dark [role="dialog"] .dark\:border-gray-800,
html.dark [role="dialog"] .dark\:ring-gray-800 {
    border-color: var(--wedplus-border) !important;
}

main .shadow-sm,
main .shadow-md,
[role="dialog"] .shadow-sm,
[role="dialog"] .shadow-xl,
[role="dialog"] .shadow-2xl {
    box-shadow: var(--wedplus-shadow) !important;
}

main a > .rounded-xl:hover,
main a > .rounded-2xl:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 212, 191, .75) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .10) !important;
}

html.dark main a > .rounded-xl:hover,
html.dark main a > .rounded-2xl:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .24) !important;
}

/* Tables */
main table {
    width: 100%;
}

main table thead {
    background: rgba(249, 250, 251, .86) !important;
}

html.dark main table thead {
    background: rgba(31, 41, 55, .6) !important;
}

main table th {
    color: #9ca3af !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
}

main table td,
main table th {
    border-color: rgba(229, 231, 235, .75);
}

html.dark main table td,
html.dark main table th {
    border-color: rgba(55, 65, 81, .72);
}

main tbody tr {
    transition: background-color .15s ease;
}

main tbody tr:hover {
    background: rgba(45, 212, 191, .055) !important;
}

/* Forms */
input,
select,
textarea {
    accent-color: var(--wedplus-primary);
}

.form-input,
.form-select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea {
    border-radius: .375rem;
}

[role="dialog"] input,
[role="dialog"] select,
[role="dialog"] textarea {
    background-color: #fff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

html.dark [role="dialog"] input,
html.dark [role="dialog"] select,
html.dark [role="dialog"] textarea {
    background-color: #111827 !important;
    color: #fff !important;
    border-color: #374151 !important;
}

/* Modal consistency */
[id$="Modal"].fixed,
#activeMd.fixed {
    background: rgba(17, 24, 39, .52);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

[id$="Modal"] > div > div,
#activeMd > div {
    border: 1px solid var(--wedplus-border);
}

[id$="Modal"] h3,
#activeMd h3 {
    text-transform: none !important;
    letter-spacing: -.01em !important;
}

/* Giftcode page: adapt its legacy inline CSS to the Wed Plus theme. */
.reward-table-wrap {
    border-radius: .75rem !important;
    border-color: var(--wedplus-border) !important;
    background: var(--wedplus-panel) !important;
    box-shadow: var(--wedplus-shadow) !important;
}

.reward-table {
    background: var(--wedplus-panel) !important;
    color: var(--wedplus-text) !important;
}

.reward-table thead tr {
    background: rgba(45, 212, 191, .14) !important;
}

.reward-table thead th {
    color: var(--wedplus-text) !important;
    border-bottom-color: rgba(45, 212, 191, .26) !important;
}

.reward-table tbody tr {
    border-bottom-color: var(--wedplus-border) !important;
}

.reward-table tbody tr:nth-child(even) {
    background: var(--wedplus-panel-soft) !important;
}

.reward-table tbody tr:hover {
    background: rgba(45, 212, 191, .06) !important;
}

.items-cell::after,
.reward-table tbody tr:nth-child(even) .items-cell::after {
    display: none !important;
}

.icon-img-wrap {
    background: var(--wedplus-panel-soft) !important;
    border-color: var(--wedplus-border) !important;
    box-shadow: var(--wedplus-shadow) !important;
}

.icon-label {
    color: var(--wedplus-muted) !important;
}

.popup-card {
    color: var(--wedplus-text) !important;
    background: var(--wedplus-panel) !important;
    border-color: var(--wedplus-border) !important;
}

.popup-img-wrap {
    background: var(--wedplus-panel-soft) !important;
    border-color: var(--wedplus-border) !important;
}

/* Download blocks */
main .space-y-6 > .bg-white {
    overflow: hidden;
}

/* Article content */
.prose {
    color: var(--wedplus-text) !important;
    line-height: 1.75;
}

.prose img {
    border-radius: .75rem;
}

/* Footer */
.wedplus-footer {
    flex: 0 0 auto;
    min-height: var(--footer-size);
    margin-top: auto;
}

.wedplus-footer a,
.wedplus-footer .text-primary-colors {
    color: var(--wedplus-primary);
}

/* Responsive */
@media (max-width: 767px) {
    .wedplus-header {
        min-height: calc(var(--header-size) + 4rem);
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .wedplus-logo {
        width: 9rem !important;
        height: auto !important;
        margin-left: 1rem !important;
        max-height: none;
    }

    .wedplus-brand-wrap {
        justify-content: flex-start;
    }

    .wedplus-username {
        display: none;
    }

    .theme-wrapper {
        margin-right: .5rem !important;
    }

    main.py-4 {
        padding-top: .75rem;
    }

    main h1.text-3xl,
    main h2.text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    .reward-table-wrap {
        border-radius: .625rem !important;
    }

    .code-cell {
        width: 108px !important;
        min-width: 98px !important;
        padding: 10px !important;
    }

    .reward-icon-item {
        width: 48px !important;
    }

    .icon-img-wrap {
        width: 42px !important;
        height: 42px !important;
    }
}

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

/* Ranking pages copied from the WedPlus layout; data is rendered by PHP. */
.wedplus-ranking {
    width: 100%;
}

.rank-server-picker {
    display: block;
}

.rank-server-picker > summary {
    list-style: none;
}

.rank-server-picker > summary::-webkit-details-marker {
    display: none;
}

.rank-server-picker[open] .rank-server-chevron {
    transform: rotate(180deg);
}

.rank-server-chevron {
    transition: transform .18s ease;
}

.rank-server-menu {
    left: 0;
    right: 0;
}

.rank-server-option {
    min-height: 2.25rem;
    text-decoration: none !important;
    cursor: pointer;
}

.rank-server-option:hover,
.rank-server-option.is-active {
    color: var(--wedplus-text) !important;
}

.rank-table-card {
    background: var(--wedplus-panel) !important;
    border-color: var(--wedplus-border) !important;
    box-shadow: var(--wedplus-shadow) !important;
}

.rank-table {
    border-collapse: collapse;
}

.rank-table thead {
    background: transparent !important;
}

.rank-table th {
    color: var(--wedplus-text) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.rank-table td,
.rank-table th {
    border-color: var(--wedplus-border) !important;
}

.rank-table tbody tr:hover {
    background: rgba(45, 212, 191, .045) !important;
}

.rank-table .text-primary-colors {
    color: var(--wedplus-primary) !important;
}

.rank-col-position {
    width: 7.25rem;
}

@media (max-width: 640px) {
    .rank-table {
        min-width: 560px;
    }

    .rank-table th,
    .rank-table td {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    .rank-col-position {
        width: 6.2rem;
    }
}


/* Màu chữ/nút động theo bộ chọn giao diện. */
.text-primary-500,
.text-primary-400,
.text-primary-colors,
html.dark .dark\:text-primary-400,
html.dark .dark\:text-primary-500 {
    color: var(--primary-color) !important;
}

.bg-primary-500,
.bg-primary-400,
.button-primary,
html.dark .dark\:bg-primary-400,
html.dark .dark\:bg-primary-500 {
    background-color: var(--primary-color) !important;
}

.bg-primary-50,
html.dark .dark\:bg-primary-950 {
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
}

.hover\:bg-primary-100:hover,
.hover\:bg-primary-500:hover,
.hover\:bg-primary-600:hover,
.button-primary:hover,
.button-primary-hover:hover,
html.dark .dark\:hover\:bg-primary-500:hover,
html.dark .dark\:hover\:bg-primary-900:hover {
    background-color: var(--hover-color) !important;
}

.hover\:text-primary-500:hover,
.text-primary-colors:hover,
.text-primary-colors-hover:hover,
html.dark .dark\:hover\:text-primary-400:hover {
    color: var(--hover-color) !important;
}

.border-primary-500,
.border-primary-400,
html.dark .dark\:border-primary-400 {
    border-color: var(--primary-color) !important;
}

.ring-primary-500,
.ring-primary-400,
.focus-visible\:ring-primary-500:focus-visible,
html.dark .dark\:focus-visible\:ring-primary-400:focus-visible,
html.dark .dark\:ring-primary-400 {
    --tw-ring-color: var(--primary-color) !important;
}

.fill-primary-500,
html.dark .dark\:fill-primary-400 {
    fill: var(--primary-color) !important;
}

html.dark body.wedplus-body,
html.dark {
    background-color: var(--theme-color) !important;
}

html:not(.dark) body.wedplus-body,
html:not(.dark) {
    background-color: var(--theme-color) !important;
}

html.dark .wedplus-header {
    background: color-mix(in srgb, var(--theme-color) 78%, transparent) !important;
}

/* ===== WedPlus account / profile ===== */
.wedplus-account-control {
    z-index: 80;
}

.wedplus-account-trigger {
    width: 200px;
    min-height: 58px;
    border: 0;
}

.wedplus-account-trigger:hover {
    filter: brightness(.97);
}

.wedplus-account-dropdown {
    position: absolute;
    z-index: 90;
    top: calc(100% + .25rem);
    right: 0;
    width: 100%;
    min-width: 200px;
    opacity: 0;
    transform: translateY(-4px) scale(.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.wedplus-account-dropdown.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wedplus-account-dropdown[hidden] {
    display: none !important;
}

.wedplus-profile-shell {
    max-width: 700px;
    margin-inline: auto;
}

.wedplus-profile-card,
.wedplus-transaction-card,
.wedplus-activation-card {
    border-radius: .5rem;
    overflow: visible;
}

.wedplus-profile-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 9999px;
}

.wedplus-account-stat {
    min-width: 0;
}

.wedplus-account-stat + .wedplus-account-stat {
    border-left: 1px solid rgb(243 244 246);
}

.dark .wedplus-account-stat + .wedplus-account-stat {
    border-left-color: rgb(31 41 55);
}

.wedplus-profile-action {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.wedplus-profile-action:hover {
    color: var(--wedplus-primary, var(--primary-color));
}

.wedplus-profile-value {
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wedplus-account-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wedplus-account-modal.is-open {
    display: flex;
}

.wedplus-account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(5px);
}

.wedplus-account-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: .5rem;
    background: #fff;
    color: rgb(17 24 39);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
}

.dark .wedplus-account-modal-panel {
    background: rgb(17 24 39);
    color: rgb(243 244 246);
}

.wedplus-account-table-wrap {
    overflow-x: auto;
}

.wedplus-account-table {
    min-width: 720px;
    width: 100%;
    border-collapse: collapse;
}

.wedplus-account-table th,
.wedplus-account-table td {
    padding: .875rem .75rem;
    text-align: left;
    white-space: nowrap;
}

.wedplus-account-table tbody tr + tr {
    border-top: 1px solid rgb(229 231 235);
}

.dark .wedplus-account-table tbody tr + tr {
    border-top-color: rgb(31 41 55);
}

.wedplus-sort-button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.wedplus-pagination-button[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .wedplus-account-trigger {
        width: 148px;
        padding-inline: .7rem;
        gap: .5rem;
    }

    .wedplus-account-trigger > span:first-child {
        display: none;
    }

    .wedplus-account-stat p:last-child {
        font-size: .8rem;
    }

    .wedplus-profile-row {
        align-items: flex-start;
        gap: .75rem;
    }

    .wedplus-profile-value {
        max-width: 52%;
        text-align: right;
    }
}

/* ===== Mobile interaction and touch reliability ===== */
html,
body {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-x: none;
}

body.wedplus-no-scroll {
    overflow: hidden !important;
    overscroll-behavior: none;
}

button,
a,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobileMenu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-110%, 0, 0) !important;
    transition: transform .24s ease, opacity .18s ease, visibility 0s linear .24s;
    will-change: transform;
}

.mobileMenu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s;
}

.mobileMenu > .fixed {
    height: 100dvh;
    max-height: 100dvh;
}

.wedplus-mobile-panel {
    width: min(88vw, 20rem) !important;
    max-width: min(88vw, 20rem) !important;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 2;
}

.mobileMenu .close-menu-mobile.fixed {
    z-index: 1;
}

.mobileMenu a,
.mobileMenu button,
.wedplus-menu-heading {
    min-height: 44px;
}

[role="dialog"].wedplus-modal-open {
    z-index: 220 !important;
    display: flex !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(.75rem, env(safe-area-inset-top)) .5rem max(.75rem, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[role="dialog"].wedplus-modal-open > .relative {
    margin: auto;
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

[role="dialog"].wedplus-modal-open > .relative > .relative {
    max-height: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.wedplus-generated-modal-close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .5rem;
    background: rgba(243, 244, 246, .95);
    color: rgb(75 85 99);
    font-size: 1.75rem;
    line-height: 1;
}

html.dark .wedplus-generated-modal-close {
    background: rgba(31, 41, 55, .96);
    color: rgb(229 231 235);
}

.wedplus-account-modal {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wedplus-account-modal-panel {
    -webkit-overflow-scrolling: touch;
}

.wedplus-account-table-wrap,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 767px) {
    .wedplus-header {
        min-height: 64px !important;
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
    }

    .wedplus-header > .max-w-7xl {
        height: auto !important;
        max-height: none !important;
        min-height: 44px;
        padding-left: .65rem !important;
        padding-right: .65rem !important;
        gap: .35rem;
    }

    .wedplus-brand-wrap {
        min-width: 0;
        margin-right: auto !important;
    }

    .wedplus-brand-wrap .wedplus-logo {
        width: 5rem !important;
        height: 44px !important;
        max-height: 44px !important;
        margin-left: 0 !important;
    }

    .wedplus-mobile-trigger {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .theme-wrapper {
        margin-right: .35rem !important;
    }

    .wedplus-theme-trigger {
        width: 42px;
        height: 42px;
        justify-content: center;
    }

    .theme-popup {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 4.25rem) !important;
        left: .75rem !important;
        right: .75rem !important;
        width: auto !important;
        max-width: 22rem;
        margin-left: auto;
        transform: none !important;
        z-index: 230 !important;
    }

    .theme-popup.is-open {
        animation: none !important;
    }

    .theme-popup-inner {
        width: 100% !important;
        max-height: calc(100dvh - 5.5rem - env(safe-area-inset-top));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .theme-color-dot,
    .theme-background-dot {
        min-width: 34px;
        min-height: 34px;
    }

    .wedplus-account-trigger {
        width: 118px !important;
        min-height: 44px !important;
        padding: .35rem .55rem !important;
    }

    .wedplus-account-trigger > span:first-child {
        display: none !important;
    }

    .wedplus-account-trigger span.text-\[13px\] {
        display: none;
    }

    .wedplus-account-dropdown {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 4.25rem) !important;
        right: .65rem !important;
        width: min(14rem, calc(100vw - 1.3rem)) !important;
        min-width: 0 !important;
        z-index: 225 !important;
    }

    [role="dialog"].wedplus-modal-open {
        align-items: flex-start !important;
    }

    [role="dialog"].wedplus-modal-open > .relative {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    [role="dialog"].wedplus-modal-open > .relative > .relative {
        border-radius: .85rem !important;
    }

    [role="dialog"] input,
    [role="dialog"] select,
    [role="dialog"] textarea {
        font-size: 16px !important;
    }

    .wedplus-profile-row button,
    .wedplus-profile-action,
    .wedplus-pagination-button,
    [data-account-close] {
        min-height: 42px;
        min-width: 42px;
    }

    .wedplus-profile-row {
        min-height: 54px;
    }

    .wedplus-account-modal-panel {
        max-height: calc(100dvh - 1.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}

/* Top Cao Thủ: level và phần trăm EXP tính trực tiếp từ players.data + others.exp. */
.rank-level-cell {
    min-width: 7.25rem;
}

.rank-level-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    color: var(--wedplus-primary);
    background: color-mix(in srgb, var(--wedplus-primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--wedplus-primary) 28%, transparent);
    font-weight: 700;
    line-height: 1.15;
}

.rank-exp-cell {
    min-width: 14.5rem;
}

.rank-exp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .4rem;
}

.rank-exp-percent {
    color: var(--wedplus-primary);
    font-size: .875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.rank-exp-percent.is-negative {
    color: #ef4444 !important;
}

.rank-max-level {
    display: inline-flex;
    align-items: center;
    padding: .1rem .42rem;
    border-radius: 999px;
    color: #f59e0b;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .28);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.rank-exp-progress {
    position: relative;
    width: 100%;
    height: .42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .22);
}

.rank-exp-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--wedplus-primary);
    transition: width .2s ease;
}

.rank-exp-progress.is-negative > span {
    background: #ef4444;
}

.rank-exp-detail {
    margin-top: .38rem;
    color: var(--wedplus-muted);
    font-size: .7rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .rank-table {
        min-width: 620px;
    }

    .rank-level-cell {
        min-width: 6.75rem;
    }

    .rank-exp-cell {
        min-width: 13.5rem;
    }
}

/* ================================================================
   VÒNG QUAY + LẬT THẺ — giao diện tương thích WedPlus
   ================================================================ */
.game-feature-page {
    --feature-card: rgba(255,255,255,.92);
    --feature-border: rgba(148,163,184,.28);
    --feature-muted: #64748b;
    color: #1f2937;
}
.dark .game-feature-page {
    --feature-card: rgba(17,24,39,.9);
    --feature-border: rgba(71,85,105,.48);
    --feature-muted: #94a3b8;
    color: #e5e7eb;
}
.game-feature-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    margin-bottom:1.25rem;
}
.game-feature-title-row { display:flex; align-items:center; gap:.65rem; }
.game-feature-title-row h1 { margin:0; font-size:clamp(1.25rem,2.5vw,1.65rem); font-weight:800; color:inherit; }
.game-feature-heading p { margin:.25rem 0 0 1.65rem; color:var(--feature-muted); font-size:.93rem; }
.game-feature-dot { width:.9rem; height:.9rem; border-radius:999px; background:var(--wedplus-primary); box-shadow:0 0 0 .28rem color-mix(in srgb,var(--wedplus-primary) 18%,transparent); }
.game-feature-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.game-feature-badge { display:inline-flex; align-items:center; gap:.45rem; min-height:2.25rem; padding:.42rem .75rem; border:1px solid var(--feature-border); border-radius:999px; background:var(--feature-card); color:inherit; box-shadow:0 5px 18px rgba(15,23,42,.06); font-size:.82rem; font-weight:700; white-space:nowrap; }
.game-feature-badge i { color:var(--wedplus-primary); }
.feature-price-badge { border-color:color-mix(in srgb,var(--wedplus-primary) 45%,var(--feature-border)); }
.game-feature-card,.game-history-card { border:1px solid var(--feature-border); border-radius:1rem; background:var(--feature-card); box-shadow:0 14px 34px rgba(15,23,42,.08); overflow:hidden; }
.dark .game-feature-card,.dark .game-history-card { box-shadow:0 18px 40px rgba(0,0,0,.24); }
.wheel-layout { display:grid; grid-template-columns:minmax(300px,1.08fr) minmax(280px,.92fr); gap:1.25rem; padding:1.25rem; }
.wheel-stage { position:relative; display:grid; place-items:center; min-height:510px; overflow:hidden; }
.wheel-pointer { position:absolute; z-index:9; top:13px; left:50%; width:0; height:0; transform:translateX(-50%); border-left:18px solid transparent; border-right:18px solid transparent; border-top:0; border-bottom:40px solid var(--wedplus-primary); filter:drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.lucky-wheel { --wheel-rotation:0deg; position:relative; width:min(455px,88vw); aspect-ratio:1; border-radius:50%; transform:rotate(var(--wheel-rotation)); background:conic-gradient(from -22.5deg, rgba(251,146,60,.92) 0 12.5%, rgba(59,130,246,.82) 12.5% 25%, rgba(16,185,129,.82) 25% 37.5%, rgba(236,72,153,.82) 37.5% 50%, rgba(139,92,246,.82) 50% 62.5%, rgba(245,158,11,.9) 62.5% 75%, rgba(6,182,212,.84) 75% 87.5%, rgba(239,68,68,.82) 87.5% 100%); border:10px solid color-mix(in srgb,var(--wedplus-primary) 70%,#111827); box-shadow:0 0 0 6px rgba(255,255,255,.75),0 20px 45px rgba(0,0,0,.26),inset 0 0 35px rgba(0,0,0,.22); transition:transform 5s cubic-bezier(.12,.72,.05,1); }
.dark .lucky-wheel { box-shadow:0 0 0 6px rgba(31,41,55,.9),0 20px 45px rgba(0,0,0,.42),inset 0 0 35px rgba(0,0,0,.28); }
.lucky-wheel.is-spinning { will-change:transform; }
.wheel-ring { position:absolute; inset:4%; border-radius:50%; border:2px dashed rgba(255,255,255,.58); pointer-events:none; }
.wheel-prize { position:absolute; top:var(--prize-y); left:var(--prize-x); width:76px; height:88px; border:0; background:transparent; transform:translate(-50%,-50%); padding:0; z-index:3; cursor:pointer; }
.wheel-prize-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.85); font-size:.75rem; font-weight:800; }
.wheel-prize img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 4px 3px rgba(0,0,0,.38)); }
.wheel-prize strong { margin-top:.18rem; background:rgba(15,23,42,.68); padding:.08rem .42rem; border-radius:999px; }
.wheel-center { position:absolute; inset:50% auto auto 50%; width:112px; height:112px; transform:translate(-50%,-50%); border-radius:50%; padding:8px; background:linear-gradient(145deg,#fff,#dbeafe); border:7px solid color-mix(in srgb,var(--wedplus-primary) 76%,#111827); box-shadow:0 8px 22px rgba(0,0,0,.34); z-index:6; }
.wheel-center img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.game-feature-controls { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.game-feature-reward-list { border:1px solid var(--feature-border); border-radius:.85rem; overflow:hidden; }
.game-feature-reward-list h2 { margin:0; padding:.72rem .9rem; font-size:.94rem; font-weight:800; border-bottom:1px solid var(--feature-border); }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; padding:.75rem; }
.reward-item { display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width:0; padding:.48rem .25rem; border:1px solid transparent; border-radius:.75rem; background:transparent; color:var(--feature-muted); font-size:.7rem; font-weight:700; text-align:center; cursor:pointer; transition:.18s ease; }
.reward-item:hover,.reward-item:focus-visible { border-color:var(--wedplus-primary); background:color-mix(in srgb,var(--wedplus-primary) 9%,transparent); color:inherit; outline:none; }
.reward-item > span:last-child { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reward-icon { position:relative; display:grid; place-items:center; width:54px; height:54px; }
.reward-icon img { max-width:50px; max-height:50px; object-fit:contain; }
.reward-icon b { position:absolute; right:-4px; bottom:-2px; padding:.05rem .28rem; border-radius:999px; background:#111827; color:#fff; font-size:.64rem; }
.game-action-panel { display:flex; flex-direction:column; gap:.7rem; padding:1rem; border:1px solid var(--feature-border); border-radius:.85rem; }
.game-action-panel label,.flip-toolbar label { color:inherit; font-size:.84rem; font-weight:750; }
.game-feature-select { width:100%; min-height:42px; padding:.58rem 2.25rem .58rem .75rem; border:1px solid var(--feature-border); border-radius:.6rem; background:var(--feature-card); color:inherit; outline:none; }
.game-feature-select:focus { border-color:var(--wedplus-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--wedplus-primary) 18%,transparent); }
.game-primary-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:42px; padding:.58rem 1rem; border:0; border-radius:999px; background:var(--wedplus-primary); color:#fff; font-size:.88rem; font-weight:800; box-shadow:0 8px 20px color-mix(in srgb,var(--wedplus-primary) 25%,transparent); cursor:pointer; transition:.18s ease; }
.dark .game-primary-button { color:#111827; }
.game-primary-button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(.93); }
.game-primary-button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.game-feature-hint { margin:0; color:var(--feature-muted); font-size:.75rem; line-height:1.45; text-align:center; }
.game-feature-empty { display:grid; place-items:center; min-height:320px; padding:2rem; border:1px dashed var(--feature-border); border-radius:1rem; background:var(--feature-card); text-align:center; }
.game-feature-empty > span { width:3rem; height:3rem; color:var(--wedplus-primary); }
.game-feature-empty h2 { margin:.5rem 0 .25rem; font-size:1.2rem; }
.game-feature-empty p { margin:0; color:var(--feature-muted); }
.game-history-card { margin-top:1rem; }
.game-history-heading { display:flex; justify-content:space-between; align-items:center; padding:.85rem 1rem; border-bottom:1px solid var(--feature-border); }
.game-history-heading h2 { margin:0; font-size:.95rem; font-weight:800; }
.game-history-heading span { color:var(--feature-muted); font-size:.72rem; }
.game-history-table-wrap { overflow-x:auto; }
.game-history-table { width:100%; min-width:650px; border-collapse:collapse; }
.game-history-table th,.game-history-table td { padding:.72rem .9rem; border-bottom:1px solid var(--feature-border); text-align:left; font-size:.78rem; }
.game-history-table th { color:var(--feature-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.game-history-table tbody tr:last-child td { border-bottom:0; }
.history-empty-row td { color:var(--feature-muted); text-align:center; padding:1.4rem; }

.flip-layout { padding:1rem; }
.flip-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.flip-toolbar > div { flex:1; max-width:420px; }
.flip-toolbar label { display:block; margin-bottom:.35rem; }
.flip-status { min-height:2.8rem; display:flex; align-items:center; justify-content:center; margin:.3rem 0 1rem; padding:.65rem .9rem; border-radius:.7rem; background:color-mix(in srgb,var(--wedplus-primary) 10%,transparent); color:var(--wedplus-primary); font-weight:750; text-align:center; }
.flip-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; max-width:850px; margin:0 auto 1rem; perspective:1200px; }
.lucky-card { aspect-ratio:.72; border:0; background:transparent; padding:0; cursor:pointer; perspective:1000px; transition:transform .2s ease,order .35s ease; }
.lucky-card:disabled { cursor:default; }
.lucky-card:not(:disabled):hover { transform:translateY(-5px) scale(1.015); }
.lucky-card-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.72,.2,1); }
.lucky-card.is-flipped .lucky-card-inner { transform:rotateY(180deg); }
.lucky-card-front,.lucky-card-back { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border-radius:1rem; backface-visibility:hidden; border:2px solid color-mix(in srgb,var(--wedplus-primary) 65%,#334155); box-shadow:0 12px 25px rgba(15,23,42,.18); }
.lucky-card-front { background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--wedplus-primary) 36%,#1e293b),#0f172a 72%); }
.lucky-card-front::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.32); border-radius:.72rem; }
.lucky-card-front img { width:72%; aspect-ratio:1; object-fit:cover; border-radius:50%; opacity:.9; filter:saturate(.9) contrast(1.05); }
.lucky-card-front b { position:absolute; font-size:2rem; color:#fff; text-shadow:0 3px 8px rgba(0,0,0,.6); }
.card-shine { position:absolute; inset:-80% -40%; transform:rotate(28deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.lucky-card:not(:disabled) .card-shine { animation:card-shine 1.8s linear infinite; }
.lucky-card-back { transform:rotateY(180deg); padding:.7rem; background:linear-gradient(155deg,#fff,#eef2ff); color:#1f2937; }
.dark .lucky-card-back { background:linear-gradient(155deg,#1f2937,#0f172a); color:#f8fafc; }
.lucky-card-back img { width:62px; height:62px; object-fit:contain; margin-bottom:.45rem; }
.lucky-card-back strong { max-width:100%; font-size:.78rem; line-height:1.2; text-align:center; }
.lucky-card-back small { margin-top:.35rem; padding:.08rem .4rem; border-radius:999px; background:var(--wedplus-primary); color:#fff; font-weight:800; }
.lucky-card.is-selected { transform:translateY(-7px) scale(1.045); filter:drop-shadow(0 0 12px color-mix(in srgb,var(--wedplus-primary) 70%,transparent)); }
.lucky-card.is-shuffling { animation:card-shuffle .5s ease-in-out infinite alternate; }
.flip-reward-list { margin-top:1rem; }
.flip-reward-list .reward-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

.game-reward-modal[hidden] { display:none !important; }
.game-reward-modal { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:1rem; }
.game-reward-backdrop { position:absolute; inset:0; border:0; background:rgba(2,6,23,.72); backdrop-filter:blur(6px); }
.game-reward-dialog { position:relative; width:min(330px,92vw); padding:1.4rem; border:1px solid color-mix(in srgb,var(--wedplus-primary) 45%,rgba(148,163,184,.3)); border-radius:1rem; background:#fff; color:#1f2937; text-align:center; box-shadow:0 25px 70px rgba(0,0,0,.42); animation:reward-pop .28s ease-out; }
.dark .game-reward-dialog { background:#111827; color:#f8fafc; }
.game-reward-dialog > img { width:95px; height:95px; object-fit:contain; margin:.5rem auto; filter:drop-shadow(0 7px 7px rgba(0,0,0,.25)); }
.game-reward-dialog h2 { margin:.45rem 0 .2rem; font-size:1.05rem; font-weight:850; }
.game-reward-dialog p { margin:0 0 1rem; color:var(--feature-muted,#64748b); }
.reward-celebration { color:var(--wedplus-primary); font-size:1.25rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.game-reward-close { position:absolute; top:.45rem; right:.55rem; width:2rem; height:2rem; border:0; border-radius:50%; background:rgba(148,163,184,.15); color:inherit; font-size:1.35rem; line-height:1; cursor:pointer; }
.game-modal-open { overflow:hidden; }

@keyframes card-shine { to { transform:translateX(65%) rotate(28deg); } }
@keyframes card-shuffle { from { transform:translate(-4px,-2px) rotate(-2deg); } to { transform:translate(4px,2px) rotate(2deg); } }
@keyframes reward-pop { from { opacity:0; transform:scale(.85) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }

@media (max-width:1024px) {
    .wheel-layout { grid-template-columns:1fr; }
    .wheel-stage { min-height:480px; }
    .game-feature-controls { display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:767px) {
    .game-feature-heading { flex-direction:column; }
    .game-feature-heading p { margin-left:0; }
    .game-feature-badges { justify-content:flex-start; width:100%; }
    .game-feature-badge { flex:1; justify-content:center; min-width:135px; }
    .wheel-layout { padding:.75rem; }
    .wheel-stage { min-height:380px; }
    .lucky-wheel { width:min(335px,86vw); border-width:7px; }
    .wheel-prize { width:58px; height:68px; }
    .wheel-prize img { width:38px; height:38px; }
    .wheel-center { width:82px; height:82px; border-width:5px; padding:5px; }
    .wheel-pointer { top:11px; border-left-width:14px; border-right-width:14px; border-bottom-width:31px; }
    .game-feature-controls { display:flex; }
    .flip-toolbar { align-items:stretch; flex-direction:column; }
    .flip-toolbar > div { max-width:none; }
    .flip-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
    .flip-reward-list .reward-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:390px) {
    .wheel-stage { min-height:335px; }
    .lucky-wheel { width:292px; }
    .wheel-prize img { width:34px; height:34px; }
    .reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .flip-reward-list .reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Vòng quay/Lật thẻ: bỏ khung danh sách phần thưởng bên cạnh. */
.wheel-layout {
    grid-template-columns: minmax(300px, 1.15fr) minmax(260px, .65fr);
    align-items: center;
}
.wheel-layout .game-feature-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wheel-layout .game-action-panel {
    width: min(100%, 420px);
}
@media (max-width: 1024px) {
    .wheel-layout {
        grid-template-columns: 1fr;
    }
    .wheel-layout .game-feature-controls {
        display: flex;
    }
}
.reward-delivery-message {
    margin-top: -.55rem !important;
    padding: .55rem .65rem;
    border-radius: .65rem;
    background: color-mix(in srgb, var(--wedplus-primary) 10%, transparent);
    color: var(--wedplus-primary) !important;
    font-size: .75rem;
    line-height: 1.45;
}

/* Centered theme-aware feedback for login/register and account actions */
.wedplus-notice-layer{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:18px;pointer-events:none}.wedplus-notice-card{--notice-accent:var(--wedplus-primary,var(--primary-color,#fb923c));width:min(430px,calc(100vw - 32px));display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--notice-accent) 58%,transparent);background:color-mix(in srgb,var(--wedplus-bg,#111827) 92%,#fff 8%);color:#fff;box-shadow:0 26px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.04) inset;opacity:0;transform:scale(.94) translateY(10px);transition:opacity .2s ease,transform .2s ease;backdrop-filter:blur(18px)}html.light-mode .wedplus-notice-card{background:color-mix(in srgb,#fff 94%,var(--notice-accent) 6%);color:#111827;box-shadow:0 24px 70px rgba(15,23,42,.2)}.wedplus-notice-card.is-visible{opacity:1;transform:scale(1) translateY(0)}.wedplus-notice-card.success{--notice-accent:#22c55e}.wedplus-notice-card.error{--notice-accent:#ef4444}.wedplus-notice-card.warning{--notice-accent:#f59e0b}.wedplus-notice-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--notice-accent) 18%,transparent);border:1px solid color-mix(in srgb,var(--notice-accent) 68%,transparent)}.wedplus-notice-icon::before{content:'i';font-weight:900;color:var(--notice-accent);font-size:20px}.wedplus-notice-card.success .wedplus-notice-icon::before{content:'✓'}.wedplus-notice-card.error .wedplus-notice-icon::before{content:'!'}.wedplus-notice-card.warning .wedplus-notice-icon::before{content:'⚠';font-size:17px}.wedplus-notice-copy{min-width:0;display:grid;gap:4px}.wedplus-notice-copy strong{font-size:16px;color:inherit}.wedplus-notice-copy span{font-size:14px;line-height:1.45;color:color-mix(in srgb,currentColor 78%,transparent);overflow-wrap:anywhere}
#authModal:not(.hidden),#authModal.wedplus-modal-open{display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;overflow:auto!important}#authModal>.relative{margin:auto!important;max-height:calc(100vh - 32px);overflow:auto}#authModal>div>div{border:1px solid color-mix(in srgb,var(--wedplus-primary,var(--primary-color,#fb923c)) 35%,transparent);box-shadow:0 28px 90px rgba(0,0,0,.48)}
@media(max-width:520px){.wedplus-notice-card{grid-template-columns:36px minmax(0,1fr);padding:14px}.wedplus-notice-icon{width:34px;height:34px}}

/* ========================================================================
   VÒNG QUAY 3D — PORT GIAO DIỆN TỪ SOURCE WEB 1
   Giữ nguyên backend/API của source web 2.
   ======================================================================== */
.source-wheel-page {
    --source-wheel-card: #fff;
    --source-wheel-text: #111827;
    --source-wheel-muted: #6b7280;
    --source-wheel-border: rgba(148, 163, 184, .32);
    --source-wheel-item-bg: #f3f4f6;
    --source-wheel-radius: 200px;
}
.dark .source-wheel-page {
    --source-wheel-card: #111827;
    --source-wheel-text: #f3f4f6;
    --source-wheel-muted: #9ca3af;
    --source-wheel-border: rgba(75, 85, 99, .9);
    --source-wheel-item-bg: #1f2937;
}
.source-wheel-shell {
    width: min(700px, 100%);
    margin: 0 auto;
}
.source-wheel-heading {
    margin-bottom: 1rem;
}
.source-wheel-card {
    position: relative;
    overflow: visible;
    padding: 1.25rem;
    border: 1px solid var(--source-wheel-border);
    border-radius: .75rem;
    background: var(--source-wheel-card);
    color: var(--source-wheel-text);
    box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
}
.dark .source-wheel-card {
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
}
.source-wheel-account-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 34px;
    margin-bottom: .85rem;
}
.source-wheel-pill {
    display: inline-flex;
    align-items: stretch;
    min-height: 34px;
    overflow: hidden;
    border-radius: 999px;
    color: var(--source-wheel-text);
    box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
}
.source-wheel-pill-link {
    text-decoration: none;
}
.source-wheel-pill-value {
    display: inline-flex;
    align-items: center;
    padding: .42rem .7rem;
    border: 1px solid var(--source-wheel-border);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: color-mix(in srgb, var(--source-wheel-card) 94%, #94a3b8 6%);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.source-wheel-pill-icon {
    display: grid;
    place-items: center;
    width: 34px;
    border-radius: 0 999px 999px 0;
    background: var(--wedplus-primary, #fb923c);
    color: #fff;
    font-size: 1.15rem;
}
.source-wheel-stage-wrap {
    margin: 0 -1.25rem 1.2rem;
    padding: 1.7rem 1rem 2.3rem;
    overflow: hidden;
    border-bottom: 4px solid var(--wedplus-primary, #fb923c);
}
.source-wheel-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    perspective: 1200px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
}
.source-wheel-carousel {
    position: relative;
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateY(var(--wheel-rotation, -36deg));
    transform-style: preserve-3d;
}
.source-wheel-carousel.is-idle,
.source-wheel-carousel.is-spinning {
    will-change: transform;
}
@keyframes source-wheel-idle-fallback {
    from { transform: perspective(1200px) rotateY(-36deg); }
    to { transform: perspective(1200px) rotateY(-396deg); }
}
/* Fallback giống source gốc: nếu JavaScript gặp lỗi, vòng quà vẫn tự quay. */
.source-wheel-carousel.is-idle {
    animation: source-wheel-idle-fallback 30s linear infinite;
}
.source-wheel-carousel.is-spinning {
    animation: none !important;
}
.source-wheel-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    padding: 0;
    border: 0;
    background: transparent;
    transform:
        rotateY(calc(var(--wheel-item-index) * var(--wheel-step)))
        translateZ(var(--source-wheel-radius));
    transform-origin: center;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: filter .2s ease;
    -webkit-box-reflect: below 5px linear-gradient(transparent, transparent 45%, rgba(255,255,255,.08));
}
.source-wheel-item:hover,
.source-wheel-item:focus-visible {
    filter: brightness(1.08);
    outline: none;
}
.source-wheel-item-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    padding: 4px;
    border: 1px solid var(--source-wheel-border);
    border-radius: .75rem;
    background: var(--source-wheel-item-bg);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .16);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.dark .source-wheel-item-frame {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.source-wheel-item-image {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border-radius: .65rem;
}
.source-wheel-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}
.source-wheel-item-quantity {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: .08rem .35rem;
    border-radius: .38rem;
    background: rgba(31, 41, 55, .82);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    line-height: 1.2;
}
.source-wheel-arrow {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 10;
    width: 35px;
    height: 35px;
    transform: translateX(-50%);
    filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .28));
}
.source-wheel-arrow span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--wedplus-primary, #fb923c);
    clip-path: polygon(50% 0, 20% 100%, 80% 100%);
}
.source-wheel-form {
    display: grid;
    gap: 1rem;
}
.source-wheel-field label {
    display: block;
    margin-bottom: .42rem;
    color: var(--source-wheel-text);
    font-size: .86rem;
    font-weight: 700;
}
.source-wheel-select {
    min-height: 42px;
    border-radius: .45rem;
}
.source-wheel-actions {
    display: flex;
    justify-content: flex-end;
}
.source-wheel-spin-button {
    min-width: 145px;
    min-height: 42px;
    border-radius: .45rem;
}
.source-wheel-spin-button .button-idle,
.source-wheel-spin-button .button-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.source-wheel-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: source-wheel-loading .75s linear infinite;
}
.source-wheel-history {
    margin-top: 1rem;
}
@keyframes source-wheel-loading {
    to { transform: rotate(360deg); }
}
@media (max-width: 767px) {
    .source-wheel-page {
        --source-wheel-radius: 145px;
    }
    .source-wheel-card {
        padding: .85rem;
    }
    .source-wheel-account-bar {
        justify-content: flex-start;
        gap: .4rem;
    }
    .source-wheel-pill-value {
        padding: .36rem .55rem;
        font-size: .7rem;
    }
    .source-wheel-pill-icon {
        width: 30px;
        font-size: 1rem;
    }
    .source-wheel-stage-wrap {
        margin-inline: -.85rem;
        padding: 1.35rem .5rem 2rem;
    }
    .source-wheel-stage {
        height: 185px;
    }
    .source-wheel-carousel,
    .source-wheel-item {
        width: 100px;
        height: 100px;
    }
    .source-wheel-item-frame {
        width: 76px;
        height: 76px;
    }
    .source-wheel-item-image {
        width: 66px;
        height: 66px;
    }
    .source-wheel-actions,
    .source-wheel-spin-button {
        width: 100%;
    }
}
@media (max-width: 390px) {
    .source-wheel-page {
        --source-wheel-radius: 128px;
    }
    .source-wheel-account-bar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .source-wheel-pill {
        width: 100%;
    }
    .source-wheel-pill-value {
        flex: 1;
    }
    .source-wheel-stage {
        height: 170px;
    }
    .source-wheel-carousel,
    .source-wheel-item {
        width: 90px;
        height: 90px;
    }
    .source-wheel-item-frame {
        width: 70px;
        height: 70px;
    }
    .source-wheel-item-image {
        width: 60px;
        height: 60px;
    }
}

/* ========================================================================== 
   WEDPLUS AUTH MODAL + REGISTER CAPTCHA (2026-08-04)
   ========================================================================== */
#authModal.auth-modal-shell:not(.hidden),
#authModal.auth-modal-shell.wedplus-modal-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: auto !important;
    isolation: isolate;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--wedplus-primary, #a855f7) 24%, transparent), transparent 36%),
        radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--wedplus-primary, #ec4899) 16%, transparent), transparent 34%),
        rgba(3, 7, 18, .78);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.auth-modal-dialog {
    width: min(100%, 720px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.auth-modal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--wedplus-primary, #a855f7) 38%, rgba(148, 163, 184, .26));
    border-radius: 24px;
    padding: 24px;
    color: var(--wedplus-text, #e5e7eb);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 42%),
        color-mix(in srgb, var(--wedplus-bg, #111827) 92%, #0f172a 8%);
    box-shadow: 0 30px 100px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .07);
}

html:not(.dark) .auth-modal-card {
    color: #172033;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
    box-shadow: 0 30px 90px rgba(15, 23, 42, .25);
}

.auth-modal-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wedplus-primary, #a855f7), #f472b6, transparent);
}

.auth-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    color: #94a3b8;
    background: rgba(15, 23, 42, .44);
    transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}

html:not(.dark) .auth-modal-close { background: rgba(241,245,249,.92); }
.auth-modal-close:hover { transform: rotate(4deg) scale(1.04); color: #fff; border-color: var(--wedplus-primary, #a855f7); background: color-mix(in srgb, var(--wedplus-primary, #a855f7) 28%, rgba(15,23,42,.72)); }
html:not(.dark) .auth-modal-close:hover { color: #111827; }

.auth-modal-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 2px 52px 20px 0;
}

.auth-modal-logo-wrap {
    position: relative;
    display: grid;
    width: 64px;
    min-width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--wedplus-primary, #a855f7) 42%, transparent);
    border-radius: 18px;
    background: rgba(15,23,42,.42);
    box-shadow: 0 12px 34px rgba(0,0,0,.25);
}

.auth-modal-logo { width: 58px; height: 58px; object-fit: contain; }
.auth-logo-fallback { display: none; width: 30px; height: 30px; color: var(--wedplus-primary, #a855f7); }
.auth-modal-logo-wrap.is-fallback .auth-logo-fallback { display: block; }
.auth-modal-eyebrow { margin: 0 0 2px; color: var(--wedplus-primary, #a855f7); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.auth-modal-title { margin: 0; color: inherit; font-size: clamp(20px, 4vw, 27px); font-weight: 900; line-height: 1.15; }
.auth-modal-subtitle { margin: 5px 0 0; color: #94a3b8; font-size: 13px; line-height: 1.5; }
html:not(.dark) .auth-modal-subtitle { color: #64748b; }

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: rgba(15, 23, 42, .42);
}
html:not(.dark) .auth-tabs { background: #eef2f7; }

.auth-tab {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 8px 10px;
    color: #94a3b8;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.auth-tab:hover { color: inherit; background: rgba(148,163,184,.08); }
.auth-tab.is-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--wedplus-primary, #a855f7) 50%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--wedplus-primary, #a855f7) 86%, #7c3aed), #ec4899);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--wedplus-primary, #a855f7) 25%, transparent);
}
html:not(.dark) .auth-tab.is-active { color: #fff; }

.auth-tab-content { padding-top: 18px; }
.auth-panel { animation: authPanelIn .22s ease both; }
.auth-panel.hidden { display: none !important; }
@keyframes authPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.auth-panel-heading { margin-bottom: 18px; }
.auth-panel-heading h3 { margin: 0; color: inherit; font-size: 19px; font-weight: 900; }
.auth-panel-heading p { margin: 4px 0 0; color: #94a3b8; font-size: 13px; line-height: 1.5; }
html:not(.dark) .auth-panel-heading p { color: #64748b; }

.auth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-field { display: block; margin-bottom: 14px; text-align: left; }
.auth-label { display: block; margin-bottom: 7px; color: inherit; font-size: 12px; font-weight: 800; }
.auth-input-wrap {
    position: relative;
    display: flex;
    min-height: 46px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 12px;
    background: rgba(15, 23, 42, .42);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
html:not(.dark) .auth-input-wrap { background: #fff; }
.auth-input-wrap:focus-within {
    border-color: var(--wedplus-primary, #a855f7);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wedplus-primary, #a855f7) 18%, transparent);
}
.auth-input-wrap.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.14); }
.auth-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 43px 0 42px;
    color: inherit;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
}
.auth-input-wrap input::placeholder { color: #64748b; opacity: .86; }
html:not(.dark) .auth-input-wrap input::placeholder { color: #94a3b8; }
.auth-input-icon { position: absolute; left: 13px; width: 19px; height: 19px; color: #64748b; pointer-events: none; }
.auth-input-wrap:focus-within .auth-input-icon { color: var(--wedplus-primary, #a855f7); }
.auth-password-toggle {
    position: absolute;
    right: 5px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #64748b;
    background: transparent;
}
.auth-password-toggle:hover { color: var(--wedplus-primary, #a855f7); background: rgba(148,163,184,.1); }

.auth-captcha-block {
    margin: 1px 0 14px;
    padding: 14px;
    border: 1px dashed color-mix(in srgb, var(--wedplus-primary, #a855f7) 42%, rgba(148,163,184,.25));
    border-radius: 15px;
    background: color-mix(in srgb, var(--wedplus-primary, #a855f7) 6%, transparent);
}
.auth-captcha-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.auth-captcha-heading small { display: block; color: #94a3b8; font-size: 11px; }
.auth-captcha-refresh {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 9px;
    padding: 5px 10px;
    color: var(--wedplus-primary, #a855f7);
    background: rgba(15,23,42,.34);
    font-size: 12px;
    font-weight: 800;
}
html:not(.dark) .auth-captcha-refresh { background: #fff; }
.auth-captcha-refresh:hover { border-color: var(--wedplus-primary, #a855f7); }
.auth-captcha-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 12px; }
.auth-captcha-image-wrap { overflow: hidden; width: 210px; height: 72px; border-radius: 12px; background: #111827; }
.auth-captcha-image { display: block; width: 210px; height: 72px; transition: opacity .16s ease, filter .16s ease; user-select: none; }
.auth-captcha-image.is-loading { opacity: .35; filter: blur(2px); }
.auth-captcha-input-field { margin: 0; }
.auth-captcha-input-field input { text-transform: uppercase; letter-spacing: .16em; font-weight: 900; }

.auth-agree-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 2px 0 14px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}
html:not(.dark) .auth-agree-row { color: #64748b; }
.auth-agree-row input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--wedplus-primary, #a855f7); }
.auth-honeypot { position: fixed !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }

.auth-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 13px;
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 11px;
    padding: 10px 12px;
    color: #fecaca;
    background: rgba(127,29,29,.18);
    font-size: 12px;
    text-align: left;
}
.auth-inline-error.hidden { display: none !important; }
html:not(.dark) .auth-inline-error { color: #b91c1c; background: #fef2f2; }

.auth-submit-button {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    padding: 10px 18px;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--wedplus-primary, #a855f7) 88%, #7c3aed), #ec4899);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--wedplus-primary, #a855f7) 24%, transparent);
    font-size: 14px;
    font-weight: 900;
    transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.auth-submit-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 36px color-mix(in srgb, var(--wedplus-primary, #a855f7) 32%, transparent); }
.auth-submit-button:disabled { cursor: wait; opacity: .68; }
.auth-submit-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: authSpin .65s linear infinite; }
.auth-submit-button.is-loading .auth-submit-spinner { display: block; }
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 17px;
    color: #64748b;
    font-size: 11px;
    text-align: center;
}
.auth-security-note > span:first-child { color: var(--wedplus-primary, #a855f7); }

@media (max-width: 700px) {
    #authModal.auth-modal-shell:not(.hidden), #authModal.auth-modal-shell.wedplus-modal-open { padding: 9px !important; }
    .auth-modal-dialog { max-height: calc(100dvh - 18px); }
    .auth-modal-card { border-radius: 19px; padding: 18px 14px; }
    .auth-modal-brand { gap: 11px; padding-right: 42px; }
    .auth-modal-logo-wrap { width: 52px; min-width: 52px; height: 52px; border-radius: 15px; }
    .auth-modal-logo { width: 48px; height: 48px; }
    .auth-modal-subtitle { display: none; }
    .auth-tabs { gap: 4px; padding: 4px; }
    .auth-tab { min-height: 42px; padding: 7px 5px; font-size: 11px; }
    .auth-tab > span:first-child { display: none; }
    .auth-form-grid { grid-template-columns: 1fr; gap: 0; }
    .auth-captcha-row { grid-template-columns: 1fr; }
    .auth-captcha-image-wrap, .auth-captcha-image { width: 100%; }
    .auth-captcha-image { object-fit: cover; }
}

@media (max-width: 380px) {
    .auth-modal-card { padding-left: 11px; padding-right: 11px; }
    .auth-modal-eyebrow { font-size: 9px; }
    .auth-modal-title { font-size: 18px; }
    .auth-tab { font-size: 10px; }
}


/* ==========================================================================
   Trang chủ: slider hình ảnh nổi bật
   ========================================================================== */
.home-showcase {
    position: relative;
    min-width: 0;
}

.home-showcase__viewport {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color, #34d399) 28%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--theme-color, #111827) 88%, #000);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    isolation: isolate;
}

.home-showcase__track {
    display: flex;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: pan-y pinch-zoom;
}

.home-showcase__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    aspect-ratio: 16 / 8.7;
    overflow: hidden;
    background: #020617;
}

.home-showcase__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform 6s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.home-showcase__slide[aria-hidden="false"] .home-showcase__image {
    transform: scale(1.065);
}

.home-showcase__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.08) 22%, rgba(2, 6, 23, 0.86) 100%),
        linear-gradient(90deg, rgba(2, 6, 23, 0.52), transparent 58%);
    pointer-events: none;
}

.home-showcase__caption {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 4vw, 2.5rem);
    right: clamp(1rem, 4vw, 2.5rem);
    bottom: clamp(1.15rem, 4vw, 2.35rem);
    max-width: 42rem;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.home-showcase__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.52);
    color: color-mix(in srgb, var(--primary-color, #34d399) 78%, #fff);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.home-showcase__caption h2 {
    margin: 0;
    font-size: clamp(1.35rem, 3.4vw, 2.55rem);
    font-weight: 900;
    line-height: 1.08;
}

.home-showcase__caption p {
    max-width: 38rem;
    margin: 0.65rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.84rem, 1.5vw, 1rem);
    line-height: 1.55;
}

.home-showcase__arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    width: 2.85rem;
    height: 2.85rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.56);
    color: #fff;
    opacity: 0;
    transform: translateY(-50%) scale(0.92);
    transition:
        opacity 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
    backdrop-filter: blur(12px);
}

.home-showcase__viewport:hover .home-showcase__arrow,
.home-showcase__arrow:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.home-showcase__arrow:hover {
    border-color: color-mix(in srgb, var(--primary-color, #34d399) 75%, #fff);
    background: color-mix(in srgb, var(--primary-color, #34d399) 74%, rgba(2, 6, 23, 0.75));
}

.home-showcase__arrow--prev {
    left: 1rem;
}

.home-showcase__arrow--next {
    right: 1rem;
}

.home-showcase__dots {
    position: absolute;
    z-index: 4;
    right: clamp(1rem, 3vw, 1.7rem);
    bottom: clamp(0.85rem, 2vw, 1.25rem);
    display: flex;
    align-items: center;
    gap: 0.48rem;
}

.home-showcase__dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transition:
        width 260ms ease,
        background-color 260ms ease,
        transform 260ms ease;
}

.home-showcase__dot:hover,
.home-showcase__dot:focus-visible {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.85);
}

.home-showcase__dot.is-active {
    width: 1.8rem;
    background: var(--primary-color, #34d399);
}

html.light-mode .home-showcase__viewport {
    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(15, 23, 42, 0.03) inset;
}

@media (max-width: 767px) {
    .home-showcase__slide {
        aspect-ratio: 4 / 3;
    }

    .home-showcase__image {
        object-position: center;
    }

    .home-showcase__caption {
        bottom: 1.1rem;
    }

    .home-showcase__caption p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-showcase__arrow {
        width: 2.45rem;
        height: 2.45rem;
        opacity: 0.92;
    }

    .home-showcase__arrow--prev {
        left: 0.55rem;
    }

    .home-showcase__arrow--next {
        right: 0.55rem;
    }

    .home-showcase__dots {
        right: 0.85rem;
        bottom: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-showcase__track,
    .home-showcase__image,
    .home-showcase__arrow,
    .home-showcase__dot {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}