.member-header {
    --lh-red-1: var(--tp-b91404,#b91404);
    --lh-red-2: var(--tp-650300,#650300);
    --lh-gold-1: var(--ta-fff29a,#fff29a);
    --lh-gold-2: var(--ta-d8a546,#d8a546);
    --lh-cream: var(--ta-fff0a0,#fff0a0);
    --lh-h: 92px;
    --lh-row-h: 65px;
    --lh-logo: clamp(64px, 20vw, 86px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 92px;
    margin: 0 auto;
    background: rgba(var(--tp-3b0300-rgb,59,3,0),0.7);
    font-family: 'Kanit', sans-serif;
}
.mh-spacer {
    height: 92px;
    margin-bottom: 8px;
}
@media (min-width: 576px) {
    .member-header { width: 540px; }
}
@media (min-width: 992px) {
    .member-header { width: 560px; }
}
@media (min-width: 1200px) {
    .member-header { width: 570px; }
}
.lh-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: var(--lh-h);
    isolation: isolate;
}
.lh-left {
    position: relative;
    flex: 0 0 80%;
    height: var(--lh-h);
}
.lh-right {
    position: relative;
    flex: 0 0 20%;
    height: var(--lh-row-h);
}
.lh-bg-left,
.lh-bg-right {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.lh-bg-left { width: 107%; }
.lh-bg-right { left: -3%; width: 111%; }
.lh-logo {
    position: absolute;
    z-index: 2;
    top: calc((var(--lh-h) - var(--lh-logo)) / 2);
    left: 6px;
    width: var(--lh-logo);
    height: var(--lh-logo);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.lh-emblem {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: radial-gradient(circle at 50% 32%, var(--tp-d62a14,#d62a14) 0%, var(--tp-9a0e04,#9a0e04) 45%, var(--tp-4d0200,#4d0200) 100%);
    box-shadow: inset 0 0 0 3px var(--lh-gold-2), inset 0 0 0 5px var(--tp-6a0600,#6a0600), inset 0 0 0 6px rgba(var(--ta-fff0a0-rgb,255,240,160),0.55), 0 6px 14px rgba(0,0,0,0.55);
    color: var(--lh-gold-1);
    line-height: 1;
    text-align: center;
}
.lh-emblem svg { width: 34%; height: auto; }
.lh-emblem-name {
    font-size: calc(var(--lh-logo) * 0.165);
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.lh-emblem-num {
    font-size: calc(var(--lh-logo) * 0.15);
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--ta-ffd66b,#ffd66b);
}
.lh-actions {
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(var(--lh-logo) + 40px);
    right: calc(3.6% + 6px);
    height: var(--lh-row-h);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lh-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 124px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 12px;
    font-family: 'Kanit', sans-serif;
    font-size: clamp(11px, 3.2vw, 13.5px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.lh-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lh-btn:active { transform: translateY(1px); }
.lh-btn-login {
    flex: 0 1 auto;
    padding: 0 16px;
    border: 0;
    background: linear-gradient(180deg, var(--tn-fff29a, var(--lh-gold-1)) 0%, var(--tn-d8a546, var(--lh-gold-2)) 100%);
    color: var(--tnt-201b12,#201b12);
    box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
}
.lh-btn-register,
.lh-btn-register:hover {
    flex: 0 1 auto;
    padding: 0 16px;
    border: 2px solid var(--tn-fff0a0, var(--lh-cream));
    background: rgba(0,0,0,0.12);
    color: var(--tn-fff0a0, var(--lh-cream)) !important;
    font-weight: 500;
}
.lh-menu-btn {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 18%;
    border: 0;
    background: none;
    cursor: pointer;
}
.lh-menu-btn svg {
    width: 36px;
    height: 28px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.lh-menu-btn:hover svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)) brightness(1.1); }
.lh-marquee {
    position: absolute;
    z-index: 0;
    top: var(--lh-row-h);
    left: 19%;
    right: 0;
    height: calc(var(--lh-h) - var(--lh-row-h));
    display: flex;
    align-items: stretch;
    padding-left: 1.5%;
    background: linear-gradient(90deg, var(--tp-1c0100,#1c0100) 0%, var(--tp-2e0300,#2e0300) 45%, var(--tp-140000,#140000) 100%);
    overflow: hidden;
}
.lh-marquee-label {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 8px 0 calc(min(100vw, 460px) * 0.067);
    background: #000;
    color: var(--tf-ffffff,#fff);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}
.lh-marquee-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.lh-marquee-text {
    flex: none;
    padding-left: 100%;
    white-space: nowrap;
    font-size: 13px;
    color: var(--tf-ffffff,#fff);
    animation: lhMarquee 22s linear infinite;
}
@keyframes lhMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .lh-marquee-text { animation: none; padding-left: 8px; }
}
/* ========== MENU DRAWER ========== */
.lh-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lh-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lh-drawer {
    position: absolute;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(70vw, 322px);
    display: flex;
    flex-direction: column;
    padding: 40px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--tp-c31500,#c31500) 0%, var(--tp-9c0c00,#9c0c00) 42%, var(--tp-570300,#570300) 100%);
    border: 0;
    box-shadow: -10px 0 30px rgba(0,0,0,0.4);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}
.lh-drawer-overlay.active .lh-drawer { transform: translateX(0); }
@media (min-width: 768px) {
    .lh-drawer { right: calc(50% - 230px); }
}
.lh-drawer-head {
    position: absolute;
    top: 6px;
    right: 2px;
}
.lh-drawer-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.lh-drawer-close i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--tp-bd1400,#bd1400);
    font-size: 15px;
}
.lh-drawer-btn {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff);
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.lh-drawer-btn:hover { color: var(--ta-fff0a0,#fff0a0); }
.lh-drawer-btn-icon {
    font-size: 28px;
    background: linear-gradient(180deg, var(--ta-fff29a,#fff29a) 0%, var(--ta-d8a546,#d8a546) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lh-drawer-btn-text { flex: 0 0 auto; }
.lh-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tf-ffffff,#ffffff);
    font-size: 15px;
    font-weight: 400;
}
.lh-lang-current img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}
.lh-lang-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 6px;
}
.lh-lang-opt {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--ta-ffe696-rgb,255,230,150),0.15);
    background: rgba(0,0,0,0.25);
    color: var(--tf-ffffff,#ffffff);
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    cursor: pointer;
}
.lh-lang-opt img {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}
.lh-lang-opt span { flex: 1 1 auto; text-align: left; }
.lh-lang-opt i { color: var(--ta-e9b033,#E9B033); }
.lh-lang-opt.active {
    border-color: var(--ta-e9b033,#E9B033);
    background: rgba(var(--ta-e9b033-rgb,233,176,51),0.12);
    color: var(--ta-fff0a0,#fff0a0);
}
.lh-drawer-hr {
    width: 100%;
    height: 1px;
    margin: 8px 0 16px;
    border: 0;
    background: rgba(255,255,255,0.85);
    opacity: 1;
}
.lh-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lh-contact-card,
.lh-contact-card:hover {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    overflow: hidden;
    border-radius: 9px;
    color: var(--tf-ffffff,#ffffff) !important;
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none !important;
}
.lh-contact-card:hover { filter: brightness(1.06); }
.lh-contact-line { background: linear-gradient(180deg, #3bd000, #209b00); }
.lh-contact-tg { background: linear-gradient(180deg, #00a9e8, #007aaf); }
.lh-contact-icon {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    align-items: center;
    width: 27%;
    padding-left: 14px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
.lh-contact-icon img { width: 30px; height: 30px; object-fit: contain; }
.lh-contact-text {
    flex: 1;
    padding-left: 27%;
    text-align: center;
}

.mh-economy {
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(var(--lh-logo) + 16px);
    right: calc(3.6% + 4px);
    height: var(--lh-row-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}
.mh-pills {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.mh-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 23px;
    padding: 2px 3px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--tp-290900,#290900);
    color: var(--ta-efb52c,#efb52c);
}
.mh-ico {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.mh-ico img,
.mh-ico svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.mh-ico.is-spin img,
.mh-ico.is-spin svg { animation: mhSpin 0.8s linear infinite; }
@keyframes mhSpin { to { transform: rotate(360deg); } }
.mh-gem { cursor: default; }
.mh-sparkles { position: absolute; inset: 0; pointer-events: none; }
.mh-sparkles span { position: absolute; display: block; }
.mh-sparkles svg { display: block; width: 100%; height: 100%; fill: var(--ta-fff6c9,#fff6c9); filter: drop-shadow(0 0 2px var(--ta-ffd84d,#ffd84d)); }
.mh-sparkles .one { top: -4px; left: -5px; width: 9px; height: 9px; }
.mh-sparkles .two { bottom: -3px; right: -5px; width: 7px; height: 7px; }
.mh-num {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ta-efb52c,#efb52c);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.mh-plus,
.mh-plus:hover {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}
.mh-plus svg { display: block; width: 100%; height: 100%; }
.mh-rank,
.mh-rank:hover {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    color: var(--tf-ffffff,#ffffff) !important;
    text-decoration: none !important;
}
.mh-rank img {
    flex: 0 0 24px;
    width: 24px;
    height: 28px;
    object-fit: contain;
}
.mh-rank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 16px;
}
.mh-rank-text {
    color: var(--tf-ffffff,#ffffff);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}
.mh-rank-bar {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #020a00;
}
.mh-rank-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ta-f5a623,#f5a623), var(--ta-ffe68a,#ffe68a));
    transition: width 0.4s ease;
}
.lh-drawer.member-drawer {
    background: linear-gradient(180deg, var(--tp-bd1500,#bd1500) 0%, var(--tp-910d00,#910d00) 45%, var(--tp-500400,#500400) 100%);
    color: var(--tf-ffffff,#ffffff);
}
.member-drawer .member-summary {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 8px 8px 6px;
    border: 1px solid var(--ta-fff0d4,#fff0d4);
    border-radius: 9px;
    color: var(--tf-ffffff,#ffffff);
}
.member-drawer .ms-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.member-drawer .ms-rank-img {
    flex: 0 0 54px;
    width: 54px;
    height: 64px;
    object-fit: contain;
}
.member-drawer .ms-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}
.member-drawer .ms-user {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.member-drawer .ms-copy {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff);
    font-size: 15px;
    cursor: pointer;
}
.member-drawer .ms-money {
    color: var(--tf-ffffff,#ffffff);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
}
.member-drawer .ms-rank-link,
.member-drawer .ms-rank-link:hover {
    display: block;
    margin-top: 6px;
    color: var(--tf-ffffff,#ffffff) !important;
    text-decoration: none !important;
}
.member-drawer .ms-rank-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
}
.member-drawer .ms-bar {
    display: block;
    height: 8px;
    margin-top: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeee;
}
.member-drawer .ms-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ta-e3ac3b,#e3ac3b), var(--ta-fff09c,#fff09c));
    transition: width 0.4s ease;
}
.member-drawer .ms-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 10px 0 0;
}
.member-drawer .ms-actions a,
.member-drawer .ms-actions a:hover {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--tf-ffffff,#ffffff) !important;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none !important;
}
.member-drawer .ms-deposit { background: linear-gradient(180deg, #57d329, #008523); }
.member-drawer .ms-withdraw { background: linear-gradient(180deg, #be0909, #a30b0b); }
.member-drawer .lh-drawer-hr { margin: 12px 0 6px; background: var(--ta-ffe8cd,#ffe8cd); }
.lh-drawer.member-drawer { padding-top: 36px; width: min(75vw, 345px); }
.member-drawer .ms-actions a,
.member-drawer .ms-actions a:hover { height: 38px; }
.member-drawer .lh-contacts { margin-top: 12px; }
.lh-drawer-menu {
    display: flex;
    flex-direction: column;
}
.lh-drawer-link,
.lh-drawer-link:hover {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff) !important;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.lh-drawer-link svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
.lh-drawer-link .mh-gi {
    flex-shrink: 0;
    width: 28px;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    background: linear-gradient(180deg, var(--ta-fff29a,#fff29a) 0%, var(--ta-d8a546,#d8a546) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
.member-drawer .ms-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}
.member-drawer .ms-lang img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    .mh-ico.is-spin img,
    .mh-ico.is-spin svg { animation: none; }
}

/* ===== Ranking popup ===== */
.rk-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.rk-overlay.active { opacity: 1; visibility: visible; }
.rk-modal {
    position: relative;
    isolation: isolate;
    width: min(380px, calc(100vw - 16px));
    max-height: calc(100dvh - 24px);
    padding: 3px;
    border-radius: 25px;
    background: #a5a5a5;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    color: var(--tf-ffffff,#ffffff);
    font-family: 'Kanit', sans-serif;
    transform: scale(0.94);
    transition: transform 0.25s ease;
}
.rk-overlay.active .rk-modal { transform: scale(1); }
@property --frame-light-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.rk-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 3px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--frame-light-angle), transparent 0deg, transparent 235deg, rgba(255,255,255,0.15) 270deg, rgba(255,255,255,0.65) 305deg, #ffffff 330deg, transparent 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: frame-light-spin 2.5s linear infinite;
}
.rk-overlay:not(.active) .rk-modal::before { animation: none; }
@keyframes frame-light-spin { to { --frame-light-angle: 360deg; } }
.rk-inner {
    position: relative;
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
    padding: 14px 12px;
    border-radius: 22px;
    background: linear-gradient(180deg, #3c3d3b, #232720 48%, #030800);
}
.rk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rk-head p { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 18px; font-weight: 400; }
.rk-x {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff);
    cursor: pointer;
}
.rk-x svg { width: 100%; height: 100%; fill: currentColor; }
.rk-content { margin-top: 18px; padding: 8px; }
.rk-content > * + * { margin-top: 22px; }
.rk-content p { margin: 0; }
.rk-card {
    padding: 1.5px;
    border-radius: 14px;
    background: linear-gradient(120deg, #ffffff, #98989c);
}
.rk-card-in {
    height: 100%;
    padding: 9px;
    border-radius: 12.5px;
    background: #191c18;
}
.rk-current { position: relative; margin-left: 20px; }
.rk-badge {
    position: absolute;
    z-index: 1;
    top: -7px;
    left: -28px;
    width: 96px;
    padding: 2px;
    border-radius: 50%;
    background: #bcbcc0;
}
.rk-badge span {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #191c18;
}
.rk-badge img { width: 74%; height: 74%; object-fit: contain; }
.rk-current-in { min-height: 68px; padding-left: 80px; }
.rk-name { margin-bottom: 4px !important; font-size: 18px; font-weight: 400; }
.rk-prog { margin-bottom: 4px !important; font-size: 13px; }
.rk-bar {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeee;
}
.rk-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ta-e5ae38,#e5ae38), var(--ta-fff1a0,#fff1a0));
    transition: width 0.4s ease;
}
.rk-stats .rk-card-in { display: flex; flex-direction: column; gap: 10px; padding: 10px 8px; }
.rk-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rk-stat p { font-size: 13px; font-weight: 400; line-height: 1.5; }
.rk-val { color: var(--tt-e0341a,#e0341a); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-slider { position: relative; }
.rk-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 3);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.rk-rail::-webkit-scrollbar { display: none; }
.rk-rank { scroll-snap-align: start; --rank-card-bg: #261529; }
.rk-rank .rk-card-in {
    min-height: 176px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 7px;
    background: var(--rank-card-bg);
    text-align: center;
}
.rk-rank-img { width: 60px; height: 56px; object-fit: contain; }
.rk-rname { margin-top: 4px !important; font-size: 14px; font-weight: 400; text-transform: capitalize; }
.rk-small { font-size: 12px; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.8); }
.rk-need { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; }
.rk-need img { width: 16px; height: 16px; }
.rk-tag {
    margin-top: auto;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    font-size: 10px;
}
.rk-bronze { --rank-card-bg: #321d06; }
.rk-silver { --rank-card-bg: #080535; }
.rk-gold { --rank-card-bg: #001e10; }
.rk-platinum { --rank-card-bg: #1c2733; }
.rk-ruby { --rank-card-bg: #35091d; }
.rk-diamond { --rank-card-bg: #062d28; }
.rk-black { --rank-card-bg: #141414; }
.rk-king { --rank-card-bg: #382607; }
.rk-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.22);
    color: var(--tf-ffffff,#ffffff);
    font-size: 16px;
    transform: translateY(-50%);
    cursor: pointer;
}
.rk-prev { left: 10px; }
.rk-next { right: 10px; }
.rk-more,
.rk-more:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--tf-ffffff,#ffffff) !important;
    font-size: 14px;
    text-decoration: underline !important;
}
.rk-more i { font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
    .rk-modal::before { animation: none; }
    .rk-overlay, .rk-modal { transition: none; }
}
.rk-cover { display: block; width: 100%; height: auto; }

/* ===== แบนเนอร์หนัง/บอล ในเมนูสมาชิก ===== */
.lh-drawer > * { flex-shrink: 0; }
.ent-v.entA,
.ent-v.entA:hover {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 14px 0 8px;
    padding: 12px 16px;
    overflow: hidden;
    border: 1px solid var(--ta-f9db99,#f9db99);
    border-radius: 14px;
    background: linear-gradient(110deg, var(--ta-f2b234,#f2b234), var(--ta-e9b033,#e9b033) 40%, var(--ta-aa6615,#aa6615));
    box-shadow: 0 6px 22px rgba(var(--ta-e9b033-rgb,233,176,51),0.5), inset 0 1px rgba(255,255,255,0.4);
    font-family: 'Kanit', sans-serif;
    text-align: left;
    text-decoration: none !important;
    min-height: 76px;
    line-height: 1.3;
    cursor: pointer;
    animation: entertainment-pulse 2.2s ease-in-out infinite;
    transition: transform 0.12s ease;
}
.ent-v.entA .ico {
    position: relative;
    flex: 0 0 84px;
    height: 50px;
}
.ent-v.entA .ent-ico {
    position: absolute;
    bottom: 0;
    width: 58px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
}
.ent-v.entA .ent-film { left: 0; }
.ent-v.entA .ent-ball { right: 0; }
.ent-v.entA .tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--ta-503100,#503100);
}
.ent-v.entA .tx-h {
    margin-bottom: 5px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ent-v.entA .tx-p { font-size: 13px; font-weight: 400; }
.ent-v.entA .ent-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 0 0 0 10px;
    background: linear-gradient(#df2525, #ab0808);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    color: #ffffff;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
}
.ent-v.entA .blink {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    animation: entertainment-live 1s ease-in-out infinite;
}
.ent-v.entA .chev {
    flex-shrink: 0;
    color: var(--ta-503100,#503100);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}
@media (hover: hover) {
    .ent-v.entA:hover { transform: translateY(-2px); }
}
.ent-v.entA:focus-visible { outline: 2px solid var(--ta-fff3bd,#fff3bd); outline-offset: 3px; }
@keyframes entertainment-pulse {
    0%, 100% { box-shadow: 0 6px 14px rgba(var(--ta-e9b033-rgb,233,176,51),0.31), inset 0 1px rgba(255,255,255,0.4); }
    50% { box-shadow: 0 6px 26px rgba(var(--ta-e9b033-rgb,233,176,51),0.63), inset 0 1px rgba(255,255,255,0.4); }
}
@keyframes entertainment-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .ent-v.entA,
    .ent-v.entA .blink { animation: none !important; transition: none !important; }
    .ent-v.entA:hover { transform: none; }
}
@media (min-width: 768px) {
    .lh-drawer.member-drawer { right: calc(50% - 270px); }
}
@media (min-width: 992px) {
    .lh-drawer.member-drawer { right: calc(50% - 280px); }
}
@media (min-width: 1200px) {
    .lh-drawer.member-drawer { right: calc(50% - 285px); }
}
.rk-top .rk-card-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 10px 12px;
    background: #190326;
}
.rk-top-img { width: 72px; height: 64px; object-fit: contain; }
.rk-top-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rk-top-name { font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; }
.rk-top .rk-need { font-size: 18px; }
.rk-top .rk-need img { width: 18px; height: 18px; }
.rk-top .rk-tag { margin-top: 2px; }

/* ===== popup ข้อมูลผู้ใช้ ===== */
.pf-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 10px;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pf-overlay.active { opacity: 1; visibility: visible; }
.pf-modal {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: min(380px, calc(100vw - 20px));
    padding: 3px;
    border-radius: 25px;
    background: #999999;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    color: var(--tf-ffffff,#ffffff);
    font-family: 'Kanit', sans-serif;
    transform: scale(0.94);
    transition: transform 0.25s ease;
}
.pf-overlay.active .pf-modal { transform: scale(1); }
.pf-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 3px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--frame-light-angle), transparent 0deg, transparent 235deg, rgba(255,255,255,0.15) 270deg, rgba(255,255,255,0.65) 305deg, #ffffff 330deg, transparent 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: frame-light-spin 2.5s linear infinite;
}
.pf-overlay:not(.active) .pf-modal::before { animation: none; }
.pf-inner {
    box-sizing: border-box;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 12px 12px;
    border-radius: 22px;
    background: linear-gradient(180deg, #3c3d3b, #232720 48%, #030800);
    color: var(--tf-ffffff,#ffffff);
}
@supports not (height: 100dvh) {
    .pf-inner { max-height: calc(100vh - 32px); }
}
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-head p { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 20px; font-weight: 400; }
.pf-x {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff);
    cursor: pointer;
}
.pf-x svg { width: 100%; height: 100%; fill: currentColor; }

/* กล่องข้อมูล + รูปซ้อนขอบบน */
.pf-info {
    position: relative;
    margin-top: 24px;
    padding: 0 20px 14px;
    border: 1px solid #dddddd;
    border-radius: 13px;
    background: #1a1b1a;
}
.pf-avatar {
    position: absolute;
    top: 0;
    left: 50%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #1a1b1a;
    transform: translate(-50%, -45%);
}
.pf-avatar-ring {
    position: absolute;
    inset: -1px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    clip-path: inset(0 0 55% 0);
    pointer-events: none;
}
.pf-avatar img {
    position: absolute;
    top: 8px;
    left: 8px;
    display: block;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
}
.pf-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 64px;
}
.pf-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    font-weight: 400;
}
.pf-row > span { flex-shrink: 0; }
.pf-row b {
    min-width: 0;
    font-weight: 400;
    text-align: right;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.pf-pass { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 1px; }
.pf-link {
    color: var(--ta-fff09b,#fff09b) !important;
    font-size: 12px;
    letter-spacing: 0;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.pf-link:hover { color: var(--tf-ffffff,#ffffff) !important; }
.pf-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeeee;
}
.pf-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ta-e9b033,#e9b033), var(--ta-fff09b,#fff09b));
    transition: width 0.3s ease;
}
.pf-turn {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* บัญชีธนาคาร */
.pf-bank {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 13px;
    background: rgba(0,0,0,0.4);
}
.pf-bank-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
}
.pf-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    color: #000000;
    background:
        radial-gradient(ellipse at 10% 120%, #e2e2e2 0 47%, transparent 48%),
        radial-gradient(ellipse at 85% 120%, #ededed 0 54%, transparent 55%),
        #ffffff;
}
.pf-card-logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
}
.pf-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.2;
}
.pf-card-info b,
.pf-card-info span {
    overflow: hidden;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pf-card-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000000;
    font-size: 24px;
    cursor: pointer;
}
.pf-card-copy .ph-check-circle { color: #1f8a3a; }
.pf-card-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}
.pf-card-no {
    font-size: 16px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.pf-card-main {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 35px;
    padding: 0 10px;
    border-radius: 5px;
    background: var(--ta-efb52c,#efb52c);
    color: #000000;
    font-size: 13px;
    font-weight: 400;
}
.pf-empty { margin: 0; padding: 14px 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); font-size: 13px; text-align: center; }
.pf-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin-top: 12px;
    border: 1px solid var(--ta-fff09b,#fff09b);
    border-radius: 6px;
    background: transparent;
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}
.pf-add:hover { background: rgba(var(--ta-fff09b-rgb,255,240,155),0.08); }
.pf-x:focus-visible,
.pf-card-copy:focus-visible,
.pf-add:focus-visible,
.pf-link:focus-visible { outline: 2px solid var(--ta-ffe794,#ffe794); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .pf-overlay, .pf-modal, .pf-bar span { transition: none; }
    .pf-modal::before { animation: none; }
}

/* ===== popup เปลี่ยนรหัสผ่าน (ใช้กรอบเดียวกับ pf-*) ===== */
.pf-overlay.cp-overlay { z-index: 100002; }
.cp-form { display: flex; flex-direction: column; margin-top: 16px; }
.cp-label { margin: 18px 0 8px; color: var(--tf-ffffff,#ffffff); font-size: 15px; font-weight: 400; }
.cp-form > .cp-label:first-child { margin-top: 0; }
.cp-field { position: relative; }
.cp-field input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 44px 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #000000;
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.cp-field input::placeholder { color: rgba(194,194,194,1); }
.cp-field input:focus { border-color: var(--ta-ffe794,#ffe794); }
.cp-field.is-error input,
.cp-field.is-error input:focus { border-color: #d03050; }
.cp-field-err { margin: 6px 0 0 2px; color: #e8537a; font-size: 14px; line-height: 1.4; }
.cp-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(194,194,194,1);
    font-size: 19px;
    cursor: pointer;
    transform: translateY(-50%);
}
.cp-error {
    margin: 14px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(255,90,90,0.5);
    border-radius: 8px;
    background: rgba(255,60,60,0.12);
    color: #ff9a9a;
    font-size: 13px;
}
.cp-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    margin-top: 28px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--tn-fff0a0,#fff0a0), var(--tn-d4a64e,#d4a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}
.cp-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.cp-done { margin-top: 20px; text-align: center; }
.cp-done i { font-size: 56px; color: #4ade80; }
.cp-done p { margin: 8px 0 0; font-size: 16px; font-weight: 400; }
.cp-eye:focus-visible,
.cp-submit:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }

/* ===== popup ประวัติการใช้งาน (กรอบเดียวกับ pf-*) ===== */
.hs-modal .pf-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: min(680px, calc(100dvh - 38px));
    overflow: hidden;
}
@supports not (height: 100dvh) {
    .hs-modal .pf-inner { height: min(680px, calc(100vh - 38px)); }
}
.hs-modal .pf-head { flex-shrink: 0; }
.hs-tabs {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.hs-tab {
    position: relative;
    padding: 8px 2px 10px;
    border: 0;
    background: none;
    color: rgba(var(--tf-ffffff-rgb,255,255,255),0.8);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.hs-tab.active { color: var(--ta-ffd84d,#ffd84d); }
.hs-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--ta-ffd84d,#ffd84d);
}
.hs-dates {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background: #000000;
}
.hs-date {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 34px;
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}
.hs-date-text {
    overflow: hidden;
    color: var(--tf-ffffff,#ffffff);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}
.hs-date-text.is-ph { color: rgba(194,194,194,1); }
.hs-date .hs-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    opacity: 0;
    cursor: pointer;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
}
.hs-date .hs-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.hs-date:focus-within .hs-date-text { color: var(--ta-ffe794,#ffe794); }
.hs-date-arrow,
.hs-date-icon { flex-shrink: 0; color: rgba(194,194,194,1); font-size: 16px; }
.hs-date-clear {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: var(--tf-ffffff,#ffffff);
    font-size: 13px;
    cursor: pointer;
}
.hs-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
    color: var(--tf-ffffff,#ffffff);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.hs-empty {
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
}
.hs-empty i { font-size: 56px; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.45); }
.hs-empty p { margin: 0; }
.hs-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hs-item:last-of-type { border-bottom: 0; }
.hs-item-main { min-width: 0; }
.hs-item-main p { margin: 0; }
.hs-item-title { overflow: hidden; font-size: 14px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.hs-item-sub { margin-top: 2px !important; overflow: hidden; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.7); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.hs-item-date { margin-top: 2px !important; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.5); font-size: 11px; }
.hs-item-note { margin-top: 2px !important; color: #ffb020; font-size: 11px; overflow-wrap: anywhere; }
.hs-item-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hs-item-amount { margin: 0; font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-item-amount.is-plus { color: #4ade80; }
.hs-item-amount.is-minus { color: #ff8a8a; }
.hs-item-amount.is-gold { color: var(--ta-ffd84d,#ffd84d); }
.hs-badge {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
}
.hs-badge.is-ok { background: rgba(74,222,128,0.15); color: #4ade80; }
.hs-badge.is-wait { background: rgba(255,176,32,0.15); color: #ffb020; }
.hs-badge.is-fail { background: rgba(255,107,107,0.15); color: #ff8a8a; }
.hs-badge.is-info { background: rgba(96,165,250,0.15); color: #7fb4ff; }
.hs-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin: 8px 0;
    border: 1px solid var(--ta-fff09b,#fff09b);
    border-radius: 8px;
    background: transparent;
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.hs-more:disabled { opacity: 0.6; cursor: default; }
.hs-tab:focus-visible,
.hs-date-clear:focus-visible,
.hs-more:focus-visible { outline: 2px solid var(--ta-ffe794,#ffe794); outline-offset: 2px; }

/* ===== popup ตั้งค่า (กรอบเดียวกับ pf-*, แถวแบบหน้าแลนดิ้ง) ===== */
.st-overlay .st-body { margin-top: 12px; }
.st-overlay .st-section { margin: 4px 0 6px; color: var(--tf-ffffff,#ffffff); font-size: 14px; font-weight: 400; }
.st-overlay .st-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}
.st-overlay .st-row + .st-section { margin-top: 16px; }
.st-overlay .st-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tf-ffffff,#ffffff);
    font-size: 14px;
    font-weight: 400;
}
.st-overlay .st-label i { font-size: 26px; }
.st-overlay .st-switch {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: background 0.2s ease;
}
.st-overlay .st-switch span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}
.st-overlay .st-switch[aria-checked="true"] { background: #18a058; }
.st-overlay .st-switch[aria-checked="true"] span { transform: translateX(18px); }
.st-overlay .st-range {
    width: 150px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #18a058 var(--v, 50%), #dbdbdf var(--v, 50%));
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.st-overlay .st-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    -webkit-appearance: none;
    appearance: none;
}
.st-overlay .st-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.st-overlay .st-select {
    width: 200px;
    max-width: 55%;
    height: 34px;
    padding: 0 26px 0 12px;
    border: 1px solid #e0e0e6;
    border-radius: 3px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 5.6a.5.5 0 0 1 .7 0L8 9.8l4.1-4.2a.5.5 0 1 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0L3.1 6.3a.5.5 0 0 1 0-.7z' fill='%23c2c2c2'/%3E%3C/svg%3E") no-repeat right 6px center / 16px;
    color: #333639;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}
.st-overlay .st-switch:focus-visible,
.st-overlay .st-range:focus-visible,
.st-overlay .st-select:focus-visible { outline: 2px solid var(--ta-ffe794,#ffe794); outline-offset: 2px; }
.music-yt {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* ปุ่มปิดลิ้นชักสมาชิก: ขยับขึ้น + เล็กลง */
.member-drawer .lh-drawer-head { top: 0; right: 2px; }
.member-drawer .lh-drawer-close { width: 30px; height: 30px; }
.member-drawer .lh-drawer-close i { width: 20px; height: 20px; font-size: 12px; }

/* ให้ฉากหลังลิ้นชัก/popup เป็นชั้นของตัวเอง (Safari เรียง z-index ตามที่กำหนด) */
.lh-drawer-overlay,
.rk-overlay,
.pf-overlay {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ลิ้นชักสมาชิกแบบต้นแบบ: header ไม่โดนฉากมืด (กดได้), ฉากมืดบางลง, เมนูล่างทับลิ้นชัก (ดู member-footer.css) */
.lh-drawer-overlay.member-drawer-overlay {
    background: transparent;
    pointer-events: none;
}
.member-drawer-overlay::before {
    content: '';
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    pointer-events: auto;
}
.member-drawer-overlay .lh-drawer { pointer-events: auto; }
.lh-drawer.member-drawer::after {
    content: '';
    flex: 0 0 calc(var(--fb-h, 78px) + 30px);
}

/* ===== popup คืนยอดเสีย & คอมมิชชั่น ===== */
.rw-overlay .rw-tabs { margin-top: 18px; justify-content: center; gap: 36px; border-bottom: 0; }
.rw-overlay .rw-tabs .hs-tab { padding: 10px 0; color: var(--tf-ffffff,#ffffff); font-size: 16px; }
.rw-overlay .rw-tabs .hs-tab.active { color: var(--ta-fff09b,#fff09b); }
.rw-overlay .rw-tabs .hs-tab.active::after { bottom: 0; background: var(--ta-e7c36c,#e7c36c); }
.rw-total { margin: 12px 2px 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); font-size: 13px; text-align: right; }
.rw-total b { color: var(--ta-ffd84d,#ffd84d); font-weight: 500; font-variant-numeric: tabular-nums; }
.rw-empty { margin: 0; padding: 12px 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.65); font-size: 13px; text-align: center; }
.rw-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.rw-card { padding: 10px 12px 10px 8px; border: 1px solid #dddddd; border-radius: 9px; }
.rw-card-main { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.rw-icon { flex: 0 0 45px; width: 45px; height: 48px; object-fit: contain; }
.rw-card-text { flex: 1; min-width: 0; }
.rw-card-name { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 16px; font-weight: 500; white-space: nowrap; }
.rw-card-amount { margin: 3px 0 0; color: var(--tt-a71200,#a71200); font-size: 20px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rw-card-btn {
    flex: 0 0 100px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--tn-fff19d,#fff19d), var(--tn-d5a64e,#d5a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.rw-card-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rw-info {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff);
    font-size: 16px;
    cursor: pointer;
}
.rw-row-note { margin: 8px 0 0 4px; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); font-size: 12px; line-height: 1.5; }
.rw-card-btn:focus-visible,
.rw-info:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }
@media (max-width: 360px) {
    .rw-card-main { gap: 6px; }
    .rw-card-btn { flex-basis: 82px; }
    .rw-card-name { font-size: 14px; }
    .rw-icon { flex-basis: 38px; width: 38px; }
}

/* ===== popup ถอนเงิน ===== */
.wd-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.wd-bar p { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 15px; }
.wd-history {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--tn-fff0a0,#fff0a0), var(--tn-d4a64e,#d4a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    cursor: pointer;
}
.wd-history i { font-size: 16px; }
.wd-account {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    margin-top: 12px;
    padding: 0 14px 0 8px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    background: #000000;
}
.wd-bank { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #cccccc; }
.wd-name { min-width: 0; overflow: hidden; color: var(--tf-ffffff,#ffffff); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.wd-no { flex-shrink: 0; color: var(--tf-ffffff,#ffffff); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.wd-add { margin-top: 12px; }
.wd-card {
    position: relative;
    margin-top: 14px;
    padding: 16px 16px 14px;
    border: 2px solid #dddddd;
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    color: var(--tf-ffffff,#ffffff);
}
.wd-card p { margin: 0; }
.wd-card-label { font-size: 14px; }
.wd-card-amount { margin-top: 12px !important; font-size: 24px; font-weight: 400; font-variant-numeric: tabular-nums; }
.wd-card-turn { margin-top: 12px !important; padding-right: 4px; font-size: 12px; font-weight: 400; line-height: 1.5; }
.wd-card-img { position: absolute; top: 8px; right: 8px; width: 78px; height: 78px; object-fit: contain; pointer-events: none; }
.wd-stats { display: flex; gap: 10px; margin-top: 12px; }
.wd-stats > div {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 6px;
    background: rgba(0,0,0,0.4);
    color: var(--tf-ffffff,#ffffff);
    font-size: 14px;
}
.wd-stats b { font-weight: 400; font-variant-numeric: tabular-nums; }
.wd-loading { margin: 14px 0 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); font-size: 14px; text-align: center; }
.wd-alert {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 6px;
    background: #ef4444;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}
.wd-line { display: block; }
.wd-ph { display: inline-block; max-width: 100%; }
.wd-form { margin-top: 12px; }
.wd-form label { display: block; margin: 0 0 6px; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.wd-input {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    background: #000000;
}
.wd-input:focus-within { border-color: var(--ta-e9b033,#e9b033); }
.wd-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.wd-input input::placeholder { color: rgba(194,194,194,1); }
.wd-input input[readonly] { color: var(--ta-ffd84d,#ffd84d); }
.wd-input span { color: rgba(var(--tf-ffffff-rgb,255,255,255),0.7); font-size: 14px; }
.wd-hint { margin: 6px 2px 0; color: #ffb4b4; font-size: 12px; }
.wd-note { margin: 6px 2px 0; color: var(--ta-ffd84d,#ffd84d); font-size: 12px; }
.wd-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--tn-fff0a0,#fff0a0), var(--tn-d4a64e,#d4a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.wd-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.wd-rules-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px auto 0;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}
.wd-rules-btn i { color: var(--ta-e9b033,#e9b033); font-size: 20px; }
.wd-rules-btn u { text-underline-offset: 3px; }
.wd-rules {
    margin: 10px 0 0;
    padding: 12px 14px 12px 30px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    color: rgba(var(--tf-ffffff-rgb,255,255,255),0.85);
    font-size: 13px;
    line-height: 1.55;
}
.wd-rules li + li { margin-top: 4px; }
.wd-history:focus-visible,
.wd-submit:focus-visible,
.wd-rules-btn:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }

/* ===== SweetAlert ดีไซน์ใหม่ (กรอบเงิน + แสงวิ่ง + พื้นเข้ม + ปุ่มทอง เหมือน popup ใหม่) ===== */
.swal2-container { backdrop-filter: none !important; }
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation { background: rgba(0,0,0,0.55) !important; }
.swal2-container .swal2-popup {
    position: relative;
    width: min(360px, calc(100vw - 32px)) !important;
    padding: 24px 18px 20px !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: linear-gradient(180deg, #3c3d3b, #232720 48%, #030800) !important;
    box-shadow: inset 0 0 0 3px #999999, 0 12px 40px rgba(0,0,0,0.6) !important;
    color: var(--tf-ffffff,#ffffff) !important;
    font-family: 'Kanit', sans-serif !important;
}
.swal2-container .swal2-popup::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 3px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--frame-light-angle), transparent 0deg, transparent 235deg, rgba(255,255,255,0.15) 270deg, rgba(255,255,255,0.65) 305deg, #ffffff 330deg, transparent 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: frame-light-spin 2.5s linear infinite;
}
.swal2-container .swal2-title { padding: 0 !important; color: var(--tf-ffffff,#ffffff) !important; font-size: 20px !important; font-weight: 400 !important; }
.swal2-container .swal2-html-container { margin: 10px 0 0 !important; padding: 0 !important; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.85) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; }
.swal2-container .swal2-actions { margin: 18px 0 0 !important; gap: 10px; }
.swal2-container .swal2-styled {
    min-width: 110px;
    height: 42px;
    margin: 0 !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.swal2-container .swal2-styled.swal2-confirm { border: 0 !important; background: linear-gradient(180deg, var(--tn-fff0a0,#fff0a0), var(--tn-d4a64e,#d4a64e)) !important; color: var(--tnt-17170f,#17170f) !important; }
.swal2-container .swal2-styled.swal2-cancel { border: 1px solid rgba(255,255,255,0.45) !important; background: rgba(255,255,255,0.08) !important; color: var(--tf-ffffff,#ffffff) !important; }
.swal2-container .swal2-styled.swal2-deny { border: 0 !important; background: #ef4444 !important; color: #ffffff !important; }
.swal2-container .swal2-styled:hover { filter: brightness(1.05) !important; transform: none !important; box-shadow: none !important; }
.swal2-container .swal2-styled:focus-visible { box-shadow: 0 0 0 2px var(--ta-ffe794,#ffe794) !important; }
.swal2-container .swal2-loader { border-color: var(--ta-ffd84d,#ffd84d) transparent var(--ta-ffd84d,#ffd84d) transparent !important; }
.swal2-container .swal2-close { color: var(--tf-ffffff,#ffffff) !important; font-size: 30px !important; transform: none !important; }
.swal2-container .swal2-close:hover { color: var(--ta-ffd84d,#ffd84d) !important; }
.swal2-container .swal2-timer-progress-bar { background: var(--ta-ffd84d,#ffd84d) !important; }
.swal2-container .swal2-footer { border-top-color: rgba(255,255,255,0.15) !important; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.7) !important; }
.swal2-container .swal2-validation-message { background: #ef4444 !important; color: var(--tf-ffffff,#ffffff) !important; }
.swal2-container :is(.swal2-input, .swal2-textarea, .swal2-select, .form-control) {
    border: 1px solid #ffffff !important;
    border-radius: 12px !important;
    background: #000000 !important;
    color: var(--tf-ffffff,#ffffff) !important;
    box-shadow: none !important;
}
.swal2-container .swal2-icon.swal2-warning,
.swal2-container .swal2-icon.swal2-question { border-color: var(--ta-ffd84d,#ffd84d) !important; color: var(--ta-ffd84d,#ffd84d) !important; }
.swal2-container .swal2-icon.swal2-info { border-color: #ffffff !important; color: var(--tf-ffffff,#ffffff) !important; }

/* ค่าตั้งต้นหัวข้อของ Bootstrap (500) ให้บางลงตามทั้งเว็บ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 400; }

/* ป้ายผู้เล่น VIP ในลิ้นชัก (users.flag = 'vip' ที่แอดมินตั้ง) */
.member-drawer .ms-vip {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 10px;
    padding: 4px 8px 4px 56px;
    overflow: hidden;
    border: 1px solid rgb(242,227,190);
    border-radius: 8px;
    background: linear-gradient(278deg, rgb(189,143,66) -72.31%, rgb(238,227,177) -55.06%, rgb(174,125,52) -13.32%, rgb(246,238,170) 11.56%, rgb(178,128,39) 50.88%, rgb(218,193,117) 76.16%);
    color: #1c1204;
    font-size: 15px;
    font-weight: 500;
}
.member-drawer .ms-vip-corner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 52px;
    padding-left: 7px;
    background: #141414;
    clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}
.member-drawer .ms-vip-emblem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid #d8b25a;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #3a2a10, #0d0a04 70%);
    color: #f3d27a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.3px;
}
.member-drawer .ms-vip-emblem i { margin-bottom: 1px; font-size: 8px; }

/* ===== popup กงล้อ ===== */
.lw-wheel { display: flex; justify-content: center; margin-top: 18px; }
.lw-wheel img { display: block; width: 112px; height: 112px; object-fit: contain; }
.lw-wheel img.spinning { animation: lw-spin 0.7s linear infinite; }
@keyframes lw-spin { to { transform: rotate(360deg); } }
.lw-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.lw-bar p { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 13px; font-weight: 400; }
.lw-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #ffffff;
    border-radius: 13px;
}
.lw-balance span { color: var(--tf-ffffff,#ffffff); font-size: 15px; font-weight: 400; }
.lw-balance b { color: var(--ta-efb52c,#efb52c); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lw-spin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--tn-fff19d,#fff19d), var(--tn-d5a64e,#d5a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
a.lw-spin, a.lw-spin:hover { color: var(--tnt-17170f,#17170f) !important; text-decoration: none !important; }
.lw-note { margin: 8px 0 0; color: #ff8a8a; font-size: 13px; text-align: center; }
.lw-result {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--ta-ffd84d-rgb,255,216,77),0.6);
    border-radius: 12px;
    background: rgba(var(--ta-ffd84d-rgb,255,216,77),0.12);
    color: var(--ta-ffd84d,#ffd84d);
    font-size: 15px;
    text-align: center;
}
.lw-hr { margin: 16px 0 10px; border: 0; border-top: 1px solid rgba(255,255,255,0.35); }
.lw-sub { margin: 0 0 8px; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.lw-empty { margin: 0; padding: 8px 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.65); font-size: 13px; text-align: center; }
.lw-history { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lw-history li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    font-size: 13px;
}
.lw-history li span { color: rgba(var(--tf-ffffff-rgb,255,255,255),0.7); white-space: nowrap; }
.lw-history li b { min-width: 0; color: var(--tf-ffffff,#ffffff); font-weight: 400; text-align: right; }
.lw-spin:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }

/* SweetAlert (เช่น ยืนยันรับโปร) ต้องอยู่เหนือ popup และลิ้นชัก แต่ต่ำกว่า toast */
.swal2-container { z-index: 150000 !important; }

/* ===== popup โปรโมชัน ===== */
.pm-overlay .pf-head p { display: flex; align-items: center; gap: 4px; }
.pm-back { display: inline-flex; align-items: center; padding: 0 4px 0 0; border: 0; background: none; color: var(--tf-ffffff,#ffffff); font-size: 20px; cursor: pointer; }
.pm-label { margin: 16px 0 8px; color: var(--tf-ffffff,#ffffff); font-size: 15px; font-weight: 400; }
.pm-status {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 6px 14px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    background: #000000;
    color: var(--tf-ffffff,#ffffff);
}
.pm-status > i { flex-shrink: 0; font-size: 26px; }
.pm-status-text { display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.pm-status-text b { overflow: hidden; color: var(--ta-ffd84d,#ffd84d); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.pm-status-text small { color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); font-size: 12px; }
.pm-bar { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.2); }
.pm-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ta-e9b033,#e9b033); }
.pm-empty { margin: 16px 0 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.7); font-size: 14px; text-align: center; }
.pm-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.pm-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 16px;
    background: rgba(0,0,0,0.4);
}
.pm-img { flex: 0 0 35%; width: 35%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; }
.pm-info { flex: 1; min-width: 0; }
.pm-name { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 17px; font-weight: 500; line-height: 1.3; }
.pm-sum { margin: 4px 0 0; color: var(--tf-ffffff,#ffffff); font-size: 13px; }
.pm-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.pm-btn, .pm-claim {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--tn-fff19d,#fff19d), var(--tn-d5a64e,#d5a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.pm-btn:disabled, .pm-claim:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-status-row { display: flex; justify-content: space-between; gap: 10px; margin: 14px 4px 0; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.pm-status-row b { font-weight: 400; }
.pm-status-row span { min-width: 0; overflow: hidden; color: var(--ta-ffd84d,#ffd84d); text-overflow: ellipsis; white-space: nowrap; }
.pm-detail { margin-top: 12px; padding: 14px; border: 1px solid rgba(255,255,255,0.85); border-radius: 16px; background: rgba(0,0,0,0.4); text-align: center; }
.pm-detail-img { display: block; width: 100%; border-radius: 8px; }
.pm-detail-name { margin: 12px 0 6px; color: var(--ta-e9b033,#e9b033); font-size: 20px; font-weight: 500; }
.pm-term { margin: 2px 0 0; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.pm-desc { margin-top: 12px; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.9); font-size: 13px; line-height: 1.6; text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
.pm-claim { width: 100%; height: 40px; margin-top: 12px; font-size: 15px; }
.pm-note { margin: 8px 0 0; color: #ff8a8a; font-size: 13px; text-align: center; }
.pm-btn:focus-visible, .pm-claim:focus-visible, .pm-back:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }

/* ===== popup เพิ่มบัญชีธนาคาร (แทน Swal ตั้งค่าบัญชี) ===== */
.bk-sub { margin: 0; padding: 12px 0; color: var(--tf-ffffff,#ffffff); font-size: 17px; font-weight: 400; text-align: center; }
.bk-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    padding: 20px;
    border-radius: 12px;
    background: rgba(0,0,0,0.4);
}
.bk-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 22%;
    background: none;
    cursor: pointer;
}
.bk-item img { display: block; width: 100%; aspect-ratio: 1; border-radius: 22%; object-fit: cover; filter: brightness(0.5); transition: filter 0.15s ease; }
.bk-item:hover img, .bk-item.on img { filter: none; }
.bk-check {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    color: var(--tf-ffffff,#ffffff);
    font-size: 10px;
}
.bk-name { margin: 0 0 12px; color: var(--tf-ffffff,#ffffff); font-size: 15px; text-align: center; }
.bk-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    margin: 0 0 12px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    outline: 0;
    background: rgba(1,6,0,0.72);
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 16px;
}
.bk-input::placeholder { color: rgba(194,194,194,1); }
.bk-input:focus { border-color: #ffffff; }
.bk-dd { position: relative; margin: 0 0 12px; }
.bk-dd-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}
.bk-dd .bk-dd-btn { margin: 0; }
.bk-dd-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dd-ico { flex-shrink: 0; width: 26px; height: 26px; object-fit: contain; }
.bk-dd-list li .bk-dd-ico { margin-right: 2px; }
.bk-dd-list li span { flex: 1; min-width: 0; }
.bk-dd-btn.empty span { color: rgba(194,194,194,1); }
.bk-dd-btn i { flex-shrink: 0; color: var(--ta-e9b033,#e9b033); font-size: 16px; transition: transform 0.2s ease; }
.bk-dd.open .bk-dd-btn { border-color: var(--ta-e9b033,#e9b033); }
.bk-dd.open .bk-dd-btn i { transform: rotate(180deg); }
.bk-dd-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 232px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: 1px solid rgba(var(--ta-e9b033-rgb,233,176,51),0.7);
    border-radius: 12px;
    background: linear-gradient(180deg, #2b2c2a, #0d0f0b);
    box-shadow: 0 10px 24px rgba(0,0,0,0.6);
    scrollbar-width: thin;
    scrollbar-color: var(--ta-8b6832,#8b6832) transparent;
}
.bk-dd.up .bk-dd-list { top: auto; bottom: calc(100% + 6px); }
.bk-dd-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--tf-ffffff,#ffffff);
    font-size: 15px;
    cursor: pointer;
}
.bk-dd-list li.act { background: rgba(var(--ta-fff09b-rgb,255,240,155),0.1); }
.bk-dd-list li.on { color: var(--ta-ffd84d,#ffd84d); }
.bk-dd-list li i { color: var(--ta-ffd84d,#ffd84d); font-size: 16px; }
.bk-dd-btn:focus-visible { outline: 2px solid var(--ta-ffe794,#ffe794); outline-offset: 2px; }
.bk-hint { margin: -6px 2px 10px; }
.bk-warn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.bk-warn i { flex-shrink: 0; color: #f1c40f; font-size: 24px; }
.bk-warn p { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 12px; }
.bk-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--tn-fff0a0,#fff0a0), var(--tn-d4a64e,#d4a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.bk-submit i { font-size: 20px; }
.bk-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-item:focus-visible, .bk-submit:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }
@media (max-width: 380px) {
    .bk-grid { gap: 10px; padding: 16px; }
}
@media (max-height: 700px) {
    .bk-sub { padding: 6px 0; }
    .bk-grid { margin-bottom: 12px; padding: 12px; }
    .bk-name { margin-bottom: 10px; }
    .bk-input { height: 40px; margin-bottom: 10px; }
    .bk-dd { margin-bottom: 10px; }
    .bk-hint { margin: -4px 2px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-item img, .bk-dd-btn i { transition: none; }
}

/* ===== popup แนะนำเพื่อน ===== */
.af-body { margin-top: 12px; }
.af-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.af-share { flex: 1; min-width: 0; }
.af-share > p { margin: 0 0 8px 4px; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.af-share-box {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    gap: 10px;
    justify-content: start;
    padding: 4px 0 0 4px;
}
.af-share-box a { display: block; width: 44px; height: 44px; border-radius: 12px; }
.af-share-box img { display: block; width: 100%; height: 100%; }
.af-qr {
    flex: 0 0 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid #dddddd;
    border-radius: 12px;
    background: rgba(0,0,0,0.4);
}
.af-qr-img {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    overflow: hidden;
    border-radius: 6px;
    background: #ffffff;
    color: #9a9a9a;
    font-size: 48px;
}
.af-qr-img img { display: block; width: 100%; height: 100%; }
.af-qr-dl { display: inline-flex; align-items: center; gap: 4px; color: var(--tf-ffffff,#ffffff) !important; font-size: 13px; text-decoration: none !important; }
.af-qr-dl i { color: var(--ta-ffd84d,#ffd84d); font-size: 16px; }
.af-label { display: block; margin: 16px 0 6px 2px; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.af-link { display: flex; gap: 8px; }
.af-link input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    outline: 0;
    background: #000000;
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 14px;
}
.af-link input:focus { border-color: var(--ta-e9b033,#e9b033); }
.af-copy, .af-claim, .af-more {
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--tn-fff0a0,#fff0a0), var(--tn-d4a64e,#d4a64e));
    color: var(--tnt-17170f,#17170f);
    font-family: inherit;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.af-copy { flex-shrink: 0; height: 40px; padding: 0 14px; font-size: 14px; }
.af-income {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 96px;
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
}
.af-income p { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 15px; }
.af-income b { color: var(--ta-ffd84d,#ffd84d); font-size: 34px; font-weight: 500; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
.af-claim { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; margin-top: 12px; font-size: 15px; }
.af-claim:disabled, .af-more:disabled { opacity: 0.5; cursor: not-allowed; }
.af-claim-note { margin: 6px 0 0; color: rgba(255,255,255,0.7); font-size: 12px; text-align: center; }
.af-hr { margin: 16px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.25); }
.af-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.af-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 84px;
    padding: 6px 4px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 12px;
    background: linear-gradient(180deg, #3c3d3b, #121410);
    color: var(--tf-ffffff,#ffffff);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.af-card img { width: 44px; height: 44px; object-fit: contain; }
.af-card.on { border-color: var(--ta-e9b033,#e9b033); background: linear-gradient(180deg, var(--ta-4a3d1c,#4a3d1c), var(--ta-17130a,#17130a)); color: var(--ta-ffd84d,#ffd84d); box-shadow: inset 0 0 0 1px var(--ta-e9b033,#e9b033); }
.af-pane { margin-top: 14px; }
.af-tabs { display: flex; justify-content: space-around; border-bottom: 1px solid rgba(255,255,255,0.15); }
.af-tabs button {
    position: relative;
    padding: 6px 2px 8px;
    border: 0;
    background: none;
    color: rgba(var(--tf-ffffff-rgb,255,255,255),0.8);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.af-tabs button.on { color: var(--ta-ffd84d,#ffd84d); }
.af-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ta-ffd84d,#ffd84d); }
.af-overall { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.af-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    color: var(--tf-ffffff,#ffffff);
    font-size: 13px;
}
.af-box span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.af-box b { flex-shrink: 0; color: var(--ta-ffd84d,#ffd84d); font-weight: 500; font-variant-numeric: tabular-nums; }
.af-box-wide { font-size: 14px; }
.af-tip-btn { display: inline-flex; padding: 0; border: 0; background: none; color: var(--tf-ffffff,#ffffff); font-size: 16px; cursor: pointer; }
.af-tip { margin: -6px 2px 0; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); font-size: 12px; }
.af-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.af-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    height: 54px;
    padding: 0 10px;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 10px;
    background: linear-gradient(180deg, #111111, #1c1c1c);
    color: var(--tf-ffffff,#ffffff);
    font-size: 14px;
    font-weight: 500;
}
.af-level span { min-width: 0; white-space: nowrap; }
.af-level b { flex-shrink: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.af-level.is-lock { background: linear-gradient(180deg, #3b3b3b, #121212); color: rgba(var(--tf-ffffff-rgb,255,255,255),0.45); }
.af-level.is-lock img { flex-shrink: 0; width: auto; height: 24px; }
.af-rules-btn { margin-top: 16px; }
.af-sub { margin: 0; color: var(--tf-ffffff,#ffffff); font-size: 14px; }
.af-table-wrap { margin-top: 12px; }
.af-pane.af-table-wrap { margin-top: 14px; }
.af-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }
.af-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--tf-ffffff,#ffffff); font-size: 12px; }
.af-table-wide { min-width: 460px; }
.af-table th {
    padding: 8px 6px;
    background: linear-gradient(180deg, var(--ta-fff0a0,#fff0a0), var(--ta-d4a64e,#d4a64e));
    color: #17170f;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}
.af-table th:first-child { border-radius: 8px 0 0 8px; }
.af-table th:last-child { border-radius: 0 8px 8px 0; }
.af-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.af-table td small { display: block; color: rgba(var(--tf-ffffff-rgb,255,255,255),0.6); font-size: 11px; }
.af-table tbody tr:last-child td { border-bottom: 0; }
.af-table td[colspan] { padding: 10px 0 0; }
.af-gold { color: var(--ta-ffd84d,#ffd84d); }
.af-verify { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); color: rgba(var(--tf-ffffff-rgb,255,255,255),0.75); white-space: nowrap; }
.af-verify.ok { background: rgba(34,197,94,0.18); color: #6ee79a; }
.af-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 128px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    font-size: 13px;
}
.af-empty img { width: 56px; height: 56px; }
.af-empty p, .af-wait { margin: 0; color: var(--tf-ffffff,#ffffff); }
.af-wait { padding: 20px 0; font-size: 13px; text-align: center; }
.af-more { display: block; width: 100%; height: 38px; margin-top: 10px; font-size: 14px; }
.af-share-box a:focus-visible, .af-qr-dl:focus-visible, .af-copy:focus-visible, .af-claim:focus-visible, .af-card:focus-visible,
.af-tabs button:focus-visible, .af-tip-btn:focus-visible, .af-more:focus-visible { outline: 2px solid var(--tn-ffe794,#ffe794); outline-offset: 2px; }
@media (max-width: 360px) {
    .af-share-box { grid-template-columns: repeat(3, 40px); gap: 8px; }
    .af-share-box a { width: 40px; height: 40px; }
    .af-income b { font-size: 30px; }
}