/* VIP privileges page (/vip-privileges) - Jun88 "myvip" layout */

.app-body.j88-vip {
    display: block;
    width: 100%;
}

.j88-vip .vip-info-page-wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.j88-vip .vip-info-page-wrapper * {
    box-sizing: border-box;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider,
.j88-vip .vip-info-page-wrapper > div.vip-level-tabs,
.j88-vip .vip-info-page-wrapper > div.vip-reward-info {
    font-family: "Times New Roman", Times, serif;
}

/* Banner */
.j88-vip .vip-info-page-wrapper > div.vip-info-bg {
    position: relative;
}

.j88-vip .vip-info-page-wrapper > div.vip-info-bg > img {
    display: block;
    width: 100%;
}

/* Level card slider */
.j88-vip .vip-info-page-wrapper > div.vip-level-slider {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper {
    height: 190px;
    margin: 0;
    max-width: 600px;
    overflow: visible;
    width: 600px;
}

/* Jun88 để nút prev/next ngoài vùng swiper nên không nhìn thấy */
.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-prev,
.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-next {
    display: none !important;
}

/* Jun88 ẩn bảng "Đặc quyền VIP", chỉ hiển thị phần "Nội dung chi tiết" */
.j88-vip .vip-reward-info .info-table .info-title.info-title-privilege,
.j88-vip .vip-reward-info .info-table .level-table {
    display: none !important;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-slide {
    align-items: center;
    background: transparent;
    border-radius: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: visible;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-slide-shadow {
    display: none;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-prev,
.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-next {
    --swiper-navigation-size: 44px;
    background: none;
    color: #3caae1;
    height: 44px;
    margin: -22px 0 0;
    opacity: 1;
    top: 50%;
    width: 27px;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-prev::after,
.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-next::after {
    font-family: swiper-icons;
    font-size: 44px;
    line-height: 1;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-prev {
    left: -60px;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-prev::after {
    content: "prev";
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-next {
    right: -60px;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-next::after {
    content: "next";
}

.j88-vip .vip-info-page-wrapper > div.vip-level-slider .swiper .swiper-button-disabled {
    opacity: .35;
}

.j88-vip .vip-display-level {
    background: url(/jun88/vip/card/1.png) center center / 100% 100% no-repeat;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, .25) 0 3px 3px 0;
    color: #fff;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 30px;
    position: relative;
    width: 67%;
}

.j88-vip .vip-display-level .info-display {
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 130px);
}

.j88-vip .vip-display-level .display-block {
    font-size: 12px;
    font-weight: 300;
}

.j88-vip .vip-display-level .display-block > div {
    padding: 3px;
}

.j88-vip .vip-display-level .level-number {
    font-size: 24px;
    font-weight: 800;
}

.j88-vip .vip-display-level .level-name {
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.j88-vip .vip-display-level .badge-image {
    align-items: center;
    display: flex;
    flex: 0 0 130px;
    height: 130px;
    justify-content: center;
    width: 130px;
}

.j88-vip .vip-display-level .badge-image img {
    max-height: 100%;
    max-width: 100%;
}

/* Level group tabs */
.j88-vip .vip-info-page-wrapper > div.vip-level-tabs {
    align-items: center;
    display: flex;
    justify-content: center;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-tabs .level-group-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    justify-content: center;
    max-width: 630px;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-tabs .level-group-btn .group-level {
    align-items: center;
    background: rgba(136, 136, 136, .8);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 30px;
    justify-content: center;
    line-height: 30px;
    margin: 0 5px;
    opacity: .6;
    padding: 0 10px;
    position: relative;
}

.j88-vip .vip-info-page-wrapper > div.vip-level-tabs .level-group-btn .group-level.selected {
    background-color: #3caae1;
    color: #fff;
    opacity: 1;
}

/* Reward table + rules */
.j88-vip .vip-info-page-wrapper > div.vip-reward-info {
    align-items: flex-start;
    display: flex;
    font-size: 14px;
    justify-content: center;
    margin: 20px 0 50px;
}

.j88-vip .vip-reward-info .info-table {
    background-image: linear-gradient(0deg, #ededed 100%, #f2f2f2 0);
    padding: 0 25px;
    width: 1200px;
}

.j88-vip .vip-reward-info .info-table .info-title {
    color: #454545;
    font-size: 20px;
    font-weight: 600;
    line-height: 4.5;
    text-align: center;
}

.j88-vip .vip-reward-info .info-table .level-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td {
    align-items: center;
    background-color: #fff;
    color: #000;
    display: inline-flex;
    font-size: 16px;
    justify-content: center;
    line-height: 20px;
    margin: 1px;
    max-width: calc(25% - 2.5px);
    min-height: 50px;
    min-width: 0;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    width: calc(25% - 2.5px);
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td.stripe {
    background-color: #e6f7ff;
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td.vip-error {
    color: #888;
    max-width: 100%;
    width: 100%;
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td.title {
    background-color: #23afe3;
    color: #fff;
    font-size: 18px;
    height: auto;
    line-height: 3;
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td.name {
    background-color: #23afe3;
    color: #ff0;
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td.active {
    color: #ff9b00;
    font-weight: 700;
}

.j88-vip .vip-reward-info .info-table .level-table > span.vip-td.name.active {
    background-color: #ff9b00;
    color: #fff;
}

.j88-vip .vip-reward-info .rule-info {
    margin-bottom: 50px;
}

.j88-vip .editor-content-view .nrc-editor-view-mode {
    border: none;
    color: #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    height: 100%;
    overflow-wrap: break-word;
    padding: 5px;
}

.j88-vip .editor-content-view .nrc-editor-view-mode p {
    line-height: 1.5;
    margin: 1em 0;
    text-align: justify;
}

.j88-vip .editor-content-view .rule-head {
    margin-bottom: 15px;
    padding: 10px;
    text-align: center;
}

.j88-vip .editor-content-view .rule-head p {
    background-color: #e8faff;
    border: 1px solid #007acc;
    border-radius: 15px;
    color: #007acc;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 8px 18px;
    text-align: center;
}

.j88-vip .editor-content-view .rule-box {
    background-color: #f1f9ff;
    border-left: 2px solid #23afe3;
    border-radius: 12px;
    border-right: 2px solid #23afe3;
    margin-bottom: 15px;
    padding: 12px 20px;
}

.j88-vip .editor-content-view .nrc-editor-view-mode .rule-box p {
    font-size: 18px;
    line-height: 27px;
    margin: 18px 0 6px;
    text-align: left;
}

.j88-vip .editor-content-view .nrc-editor-view-mode p.rule-label {
    color: #26a8df;
    margin-bottom: 0;
}

.j88-vip .editor-content-view .nrc-editor-view-mode p:empty {
    display: none;
}

/* Rule table (full level list) */
.j88-vip .editor-content-view .rule-table-wrap {
    overflow-x: auto;
}

.j88-vip .editor-content-view .rule-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.j88-vip .editor-content-view .rule-table th,
.j88-vip .editor-content-view .rule-table td {
    border: 1px solid #b3d9ff;
    color: #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: 400;
    padding: 6px 5px;
    text-align: center;
    white-space: normal;
}

.j88-vip .editor-content-view .rule-table thead th {
    background-color: #23afe3;
    color: #fff;
    padding: 10px 5px;
}

.j88-vip .editor-content-view .rule-table thead th:first-child {
    width: 13%;
}

.j88-vip .editor-content-view .nrc-editor-view-mode .rule-red,
.j88-vip .editor-content-view .rule-table .rule-red {
    color: #ff0000;
}

.j88-vip .editor-content-view .nrc-editor-view-mode p.rule-detail {
    color: #333;
    text-align: left;
}

.j88-vip .editor-content-view .rule-star {
    color: #00ccff;
}

.j88-vip .editor-content-view .rule-detail-label {
    border-bottom: 2px solid #23afe3;
    color: #23afe3;
    padding-bottom: 2px;
}

.j88-vip .editor-content-view .rule-table tbody tr:nth-child(odd) {
    background-color: #e6f7ff;
}

.j88-vip .editor-content-view .rule-table tbody tr:nth-child(even) {
    background-color: #fff;
}

.j88-vip .editor-content-view .rule-table tbody td:first-child {
    background-color: #23afe3;
    color: #ff0;
}

/* Logged-in VIP progress panel */
.j88-vip .vip-info-page-wrapper > div.vip-my-progress {
    display: flex;
    gap: 16px;
    margin: 20px 0 0;
}

.j88-vip .vip-info-page-wrapper > div.vip-my-progress:empty {
    display: none;
}

.j88-vip .vip-my-progress.guest {
    justify-content: center;
}

.j88-vip .vip-my-progress .my-box {
    background: #fff;
    border: 1px solid #cfeaf7;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(35, 175, 227, .12);
    color: #333;
    font-size: 14px;
    padding: 14px 18px;
}

.j88-vip .vip-my-progress .my-level {
    flex: 1 1 58%;
}

.j88-vip .vip-my-progress .my-side {
    display: flex;
    flex: 1 1 42%;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.j88-vip .vip-my-progress .my-title {
    border-left: 4px solid #23afe3;
    color: #23afe3;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    padding-left: 8px;
}

.j88-vip .vip-my-progress .my-current {
    align-items: center;
    background: #f1f9ff;
    border-radius: 8px;
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
    padding: 8px 12px;
}

.j88-vip .vip-my-progress .my-badge {
    height: 64px;
    object-fit: contain;
    width: 64px;
}

.j88-vip .vip-my-progress .my-level-name {
    color: #ff9b00;
    font-size: 22px;
    font-weight: 800;
}

.j88-vip .vip-my-progress .my-sub {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

.j88-vip .vip-my-progress .my-sub b {
    color: #23afe3;
}

.j88-vip .vip-my-progress .vip-prog {
    margin-bottom: 10px;
}

.j88-vip .vip-my-progress .vip-prog-label {
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin-bottom: 4px;
}

.j88-vip .vip-my-progress .vip-prog-label b {
    color: #23afe3;
}

.j88-vip .vip-my-progress .vip-prog-bar {
    background: #e6f7ff;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    width: 100%;
}

.j88-vip .vip-my-progress .vip-prog-fill {
    background: linear-gradient(90deg, #5cc6ef, #23afe3);
    border-radius: 6px;
    height: 100%;
    min-width: 2px;
}

.j88-vip .vip-my-progress .my-max {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 6px;
    color: #ff9b00;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 8px 12px;
    text-align: center;
}

.j88-vip .vip-my-progress .my-note {
    border-top: 1px dashed #cfeaf7;
    color: #999;
    font-size: 12px;
    margin-top: 10px;
    padding-top: 8px;
}

.j88-vip .vip-my-progress .vip-btn {
    background-color: #23afe3;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    height: 34px;
    padding: 0 16px;
    white-space: nowrap;
}

.j88-vip .vip-my-progress .vip-btn:hover {
    background-color: #1b9ccc;
}

.j88-vip .vip-my-progress .vip-btn:disabled {
    cursor: default;
    opacity: .6;
}

.j88-vip .vip-my-progress .bd-claim {
    background-color: #ff9b00;
    margin-top: 8px;
    width: 100%;
}

.j88-vip .vip-my-progress .bd-claim:hover {
    background-color: #f08c00;
}

.j88-vip .vip-my-progress .bd-form {
    display: flex;
    gap: 8px;
}

.j88-vip .vip-my-progress .bd-input {
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    color: #333;
    flex: 1 1 auto;
    font-size: 14px;
    height: 34px;
    min-width: 0;
    padding: 0 8px;
}

.j88-vip .vip-my-progress .bd-note {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 6px;
}

.j88-vip .vip-my-progress .bd-saved {
    font-size: 13px;
    margin-bottom: 6px;
}

.j88-vip .vip-my-progress .bd-status {
    background: #f1f9ff;
    border-radius: 6px;
    color: #23afe3;
    font-size: 13px;
    padding: 8px 10px;
}

.j88-vip .vip-my-progress .bd-status.ok {
    color: #52c41a;
}

.j88-vip .vip-my-progress .reward-list {
    max-height: 210px;
    overflow-y: auto;
}

.j88-vip .vip-my-progress .reward-item {
    align-items: center;
    border-bottom: 1px solid #eef6fb;
    display: grid;
    font-size: 13px;
    gap: 2px 10px;
    grid-template-columns: 1fr auto;
    padding: 6px 0;
}

.j88-vip .vip-my-progress .reward-item:last-child {
    border-bottom: none;
}

.j88-vip .vip-my-progress .reward-type {
    font-weight: 600;
    min-width: 0;
}

.j88-vip .vip-my-progress .reward-note {
    color: #999;
    display: block;
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.j88-vip .vip-my-progress .reward-amount {
    color: #ff9b00;
    font-weight: 700;
    text-align: right;
}

.j88-vip .vip-my-progress .reward-time {
    color: #999;
    font-size: 12px;
    grid-column: 1 / -1;
}

.j88-vip .vip-my-progress .reward-empty {
    color: #999;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
}

.j88-vip .vip-my-progress .my-guest {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 10px 18px;
}

.j88-vip .vip-my-progress .my-guest span {
    color: #23afe3;
    font-size: 15px;
    font-weight: 600;
}