/* ==========================================================================
   F168 template — shell khóa 480px (--f168-shell-width trong theme-f168.css)
   - Shell / fixed UI / container: theme-f168.css (base, không @media 992/768…)
   - Mốc @media duy nhất được phép: min-width 480px — chỉ toggle nội dung (vd filter panel)
   ========================================================================== */

/* Token phụ từ theme (--f168-accent / --f168-accent-secondary trong theme_tokens) — thay hex cam cứng */
:root {
  --f168-header-height: 52px;
  --home-section-gutter: clamp(10px, 2.5vw, 12px);
  --f168-accent-07: color-mix(in srgb, var(--f168-accent) 7%, transparent);
  --f168-accent-12: color-mix(in srgb, var(--f168-accent) 12%, white);
  --f168-accent-14: color-mix(in srgb, var(--f168-accent) 14%, white);
  --f168-accent-22: color-mix(in srgb, var(--f168-accent) 22%, white);
  --f168-accent-35t: color-mix(in srgb, var(--f168-accent) 35%, transparent);
  --f168-accent-25t: color-mix(in srgb, var(--f168-accent) 25%, transparent);
  --f168-accent-grad-mid: color-mix(in srgb, var(--f168-accent) 42%, white);
}

/* 覆盖 Bootstrap .py-3：减少上下边距 (默认 1rem) (Override Bootstrap .py-3) */
.py-3 {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

/* 正常状态下的页眉背景 (Header background normal state) */
.header {
  background-color: var(--f168-header-bg);
}

/* 用户控制面板页面：无页眉，白色背景，仅内容 + 固定页脚 (User dashboard: white background, content + fixed footer) */
.page-body--white {
  min-height: 100vh;
  background-color: transparent;
}

/* ==========================================================================
   个人中心 – 设计参考 (Design layout)
   ========================================================================== */
.mine-page {
  /* Một gutter ngang duy nhất — tránh padding/margin chồng lớp gây hụt 2 bên ở shell 480px */
  --mine-gutter: clamp(10px, 2.5vw, 12px);
  min-height: 100vh;
  background-color: var(--f168-bg-page);
  background-image: url("../images/profile/style_1_topbg.avif");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding-inline: var(--mine-gutter);
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1rem);
  box-sizing: border-box;
}

/* 1. 顶部栏 – 透明背景以显示 mine-page 图像 */
.mine-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0;
  background: transparent;

}

.mine-topbar__back {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.mine-topbar__btn--back {
  transition: transform 0.2s ease;
}

.mine-topbar__btn--back:hover {
  transform: translateX(-2px);
}

.mine-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  color: var(--f168-text-muted);
  font-size: 1.35rem;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.mine-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mine-topbar__right .mine-topbar__btn {
  font-size: 1.62rem;
  color: var(--f168-accent);
}

.mine-topbar__btn--menu {
  position: relative;
}

.mine-topbar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--f168-bg-page);
  background: var(--f168-status-error);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. 用户资料区块 – 背景透明以显示顶图 */
.mine-profile-section {
  background: transparent;
  padding: 0;
}

.mine-profile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.8rem;
}

.mine-profile-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mine-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.mine-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--f168-border);
  background-image: url("../images/profile/img_ntx6.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: rgba(0, 0, 0, 0.4);
}

.mine-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--f168-accent);
  color: var(--f168-bg-page);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mine-profile-info {
  flex: 1;
  min-width: 0;
}

.mine-username {
  font-size: 13px;
  font-weight: 500;
  color: var(--f168-text-dark);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mine-username .la-caret-down {
  font-size: 0.75rem;
  color: var(--f168-text-muted);
}

.mine-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 4px;
  border: none;
  outline: none;
}

.mine-id {
  font-size: 17px;
  color: var(--f168-text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  outline: none;
}

.mine-id:focus,
.mine-id-row:focus {
  outline: none;
  border: none;
}

.mine-profile-section .mine-icon-link:focus,
.mine-profile-section .mine-icon-link.mine-copy:focus {
  outline: none;
  border: none;
}

.mine-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
  font-size: 1rem;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.mine-icon-link.mine-copy {
  color: var(--f168-accent);
}

.mine-balance-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mine-balance-star {
  color: var(--f168-status-error);
  font-size: 1.1rem;
}

.mine-balance-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--f168-text-dark);
  text-decoration: underline;
}

/* 3. Quick action buttons */
.mine-quick-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  overflow: visible;
}

.mine-quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  padding: 10px 8px;
  position: relative;
  overflow: visible;

  border-radius: 8px;
  text-decoration: none;
  color: var(--f168-text-dark);
  font-size: 0.8125rem;

  transition: background 0.15s;
}



.mine-quick-btn__icon {
  position: relative;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.mine-quick-btn__icon--withdraw {
  color: var(--f168-accent);
}

.mine-quick-btn__icon--withdraw svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mine-quick-btn__icon--deposit {
  color: var(--f168-accent-secondary);
}

.mine-quick-btn__icon-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.mine-quick-btn__icon--deposit .mine-quick-btn__gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mine-quick-btn__badge--top-center {
  position: absolute;
  top: -2px;
  right: -15px;
  min-width: 26px;
  height: 16px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--f168-bg-page);
  background: var(--f168-status-error);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.mine-quick-btn__icon--profit {
  color: var(--f168-accent);
}

.mine-quick-btn__icon--profit .mine-quick-btn__icon-wrap {
  color: var(--f168-accent);
}

.mine-quick-btn__icon--profit svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: var(--f168-accent);
  fill: currentColor;
}

.mine-quick-btn__badge {
  position: absolute;
  top: -4px;
  right: -14px;
  min-width: 28px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--f168-bg-page);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mine-quick-btn__badge--green {
  background: var(--f168-status-success);
}

.mine-quick-btn__badge--yellow {
  background: var(--f168-accent);
  color: var(--f168-text-dark);
}

/* 盈利徽章：黄色字体，背景accent_2 (如 ui-badge ref) */
.mine-quick-btn__badge--accent {
  background: var(--f168-status-error);
  color: rgb(255, 255, 0);
}

.mine-quick-btn__text {
  text-align: center;
  font-weight: 500;
}

/* 4. VIP卡 (F168示例: avif背景, 双层徽章, 进度条, 白色字体) */
.mine-vip-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1px 0;
  padding: 0.5rem;
  min-height: 5rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--f168-bg-page);
  overflow: hidden;
  background: var(--f168-accent);
}

.mine-vip-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.mine-vip-card__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mine-vip-level {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mine-vip-level__image {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.mine-vip-level__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mine-vip-level__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--f168-bg-page);
  z-index: 2;
}

.mine-vip-current {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--f168-bg-page);
  font-style: italic;
}

.mine-vip-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.mine-vip-process__item {
  display: block;
  width: 100%;
}

.mine-vip-process__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10px;
  min-width: 150px;
  background-color: rgba(0, 0, 0, .1);

  max-width: 100%;
  margin: 0 auto;
  /* background: var(--f168-bg-page); */
  border: 1px solid var(--f168-accent);
  border-radius: 40px;
  overflow: visible;
}

.mine-vip-process__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--f168-accent);
  border-radius: 3px;
  transition: width 0.2s;
  z-index: 0;
}

.mine-vip-process__label {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  font-size: 0.65rem;
  color: var(--f168-bg-page);
  text-align: center;
}

.mine-vip-card__middle {
  position: relative;
  z-index: 1;
  flex: 0 0 8px;
}

.mine-vip-card__right {
  position: relative;
  z-index: 1;
  text-align: right;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.mine-vip-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px 4px;
}

.mine-vip-promo__text {
  font-size: 0.65rem;
  color: var(--f168-bg-page);
}

.mine-vip-promo__amount {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--f168-bg-page);
}

.mine-vip-req {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.mine-vip-req__row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.6rem;
  color: var(--f168-bg-page);
}

.mine-vip-req__label u {
  text-decoration: underline;
}

.mine-vip-req__amount {
  font-weight: 500;
}

.mine-vip-card__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--f168-bg-page);
  width: 1em;
  height: 1em;
}

.mine-vip-card__arrow svg {
  width: 100%;
  height: 100%;
}

/* Beat theme-f168 body/link color !important + :visited on <a class="mine-vip-card"> */
.mine-vip-card,
.mine-vip-card:visited,
.mine-vip-card:hover,
.mine-vip-card:focus,
.mine-vip-card:active,
.mine-vip-card .mine-vip-current,
.mine-vip-card .mine-vip-process__label,
.mine-vip-card .mine-vip-promo__text,
.mine-vip-card .mine-vip-promo__amount,
.mine-vip-card .mine-vip-req__row,
.mine-vip-card .mine-vip-req__label,
.mine-vip-card .mine-vip-req__amount,
.mine-vip-card .mine-vip-req__label u,
.mine-vip-card .mine-vip-card__arrow {
  color: var(--f168-bg-page) !important;
  -webkit-text-fill-color: var(--f168-bg-page);
}

/* 5. Menu list */
.mine-list {

  background: var(--f168-bg-page);

  overflow: hidden;
}

.mine-list__item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  text-decoration: none;
  color: var(--f168-text-dark);
  font-size: 14px;

  transition: background 0.15s;
  gap: 12px;
}

.mine-list__item:last-child {
  border-bottom: none;
}

.mine-list__item:hover,
.mine-list__item:focus {
  background: var(--f168-bg-page);
}

.mine-list__icon {
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: hsl(var(--main));
}

/* Site Base Color (General Setting → --main): mask recolor thay filter cam cứng */
.mine-list__icon-glyph {
  display: block;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--main));
  -webkit-mask-image: var(--mine-list-icon-url);
  mask-image: var(--mine-list-icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.mine-list__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* BO combin icon — style_7_icon_zkq + style_7_icon_zkq1 (badge + %) */
.mine-list__icon--combin {
  color: inherit;
}

.mine-list__combin-icon {
  position: relative;
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
}

.mine-list__combin-icon-layer {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mine-list__combin-icon-layer svg {
  width: 1em;
  height: 1em;
  display: block;
}

.mine-list__combin-icon-layer--lead {
  color: var(--f168-text-dark);
}

.mine-list__combin-icon-layer--primary {
  color: hsl(var(--main));
}

.mine-list__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: hsl(var(--main));
}

.mine-list__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mine-list__item>.mine-list__label {
  flex: 1;
  min-width: 0;
}

.mine-list__label {
  font-weight: 400;
}

.mine-list__desc {
  font-size: 0.75rem;
  color: var(--f168-text-muted);
  line-height: 1.3;
}

.mine-list__tag {
  font-size: 0.8125rem;
  color: var(--f168-accent);
  font-weight: 500;
  flex-shrink: 0;
}

.mine-list__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 0.8rem;
  color: var(--f168-text-muted);
  flex-shrink: 0;
  transform: scaleX(-1);
}

.mine-list__arrow svg {
  width: 100%;
  height: 100%;
}

/* mine-page kế thừa shell 480px từ body (theme-f168) — không thu hẹp thêm 28rem */

/* ==========================================================================
   安全页面 – 独立的 class/id，改动不影响 mine-page
   ========================================================================== */
.sec-page {
  --sec-primary: var(--f168-accent);
  --sec-primary-dark: var(--f168-accent-secondary);
  --sec-bg: var(--f168-bg-surface);
  --sec-text: var(--f168-text-dark);
  --sec-text-secondary: var(--f168-text-muted);
  --sec-border: var(--f168-border);
  min-height: 100vh;
  background-color: var(--f168-bg-surface);
  padding-bottom: 1rem;
}

.sec-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
}

.sec-topbar__back {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.sec-topbar__btn--back {
  transition: transform 0.2s ease;
}

.sec-topbar__btn--back:hover {
  transform: translateX(-2px);
}

.sec-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--sec-text-secondary);
  font-size: 1.35rem;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.sec-topbar__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--sec-text);
  flex: 1;
  text-align: center;
  line-height: 48px;
}

.sec-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-topbar__right .sec-topbar__btn {
  font-size: 1.62rem;
  color: var(--sec-primary);
}

.sec-content {
  padding: 0.8rem;
}

/* 安全菜单 – 列表项类似 F168 */
.sec-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--f168-bg-page);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.sec-menu__list+.sec-menu__list {
  margin-top: 12px;
}

.sec-menu__item {
  position: relative;
  border-bottom: 1px solid var(--sec-border);
  min-height: 56px;
}

.sec-menu__list .sec-menu__item:last-child {
  border-bottom: none;
}

.sec-menu__item--disabled {
  padding: 0 5px;
  display: flex;
  align-items: center;
  min-height: 56px;
  gap: 2px;
}

.sec-menu__link {
  display: flex;
  align-items: center;
  padding: 0 5px;
  min-height: 56px;
  gap: 2px;
  color: var(--sec-text);
  text-decoration: none;
  transition: background 0.2s;
}

.sec-menu__link:hover {
  background: rgba(0, 0, 0, .03);
}

.sec-menu__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.sec-menu__icon--gray {
  color: var(--f168-text-muted);
}

.sec-menu__icon--orange {
  color: var(--sec-primary);
}

.sec-menu__icon--blue {
  color: var(--f168-accent-secondary);
}

.sec-menu__icon--green {
  color: var(--f168-status-success);
}

.sec-menu__icon--red {
  color: var(--f168-status-error);
}

.sec-menu__label-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-menu__label-wrap--dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--f168-status-error);
  flex-shrink: 0;
}

.sec-menu__label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sec-text);
}

.sec-menu__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.sec-menu__suffix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--f168-text-muted);
}

.sec-menu__suffix span {
  color: var(--f168-text-muted);
}

.sec-menu__suffix span.sec-menu__suffix-text--set {
  color: var(--sec-primary);
}

.sec-menu__account {
  font-weight: 500;
  color: var(--sec-text);
}

.sec-menu__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--sec-primary);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
}

.sec-menu__copy:hover {
  background: rgba(252, 139, 0, .1);
}

.sec-menu__bind--unverify span {
  color: var(--f168-text-accent);
}

.sec-menu__arrow {
  font-size: 0.875rem;
  color: var(--f168-text-muted);
}

/* 设置提款密码 – 仅在 .sec-page--set-withdraw-code 下使用 */
.sec-page--set-withdraw-code .sec-content {
  padding: 0.8rem;
}

.sec-page--set-withdraw-code .sec-form__card {
  background: var(--f168-bg-page);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: 1rem 0.8rem;
}

.sec-page--set-withdraw-code .sec-form__tip {
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--f168-status-success);
}

.sec-page--set-withdraw-code .sec-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.sec-page--set-withdraw-code .sec-form__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sec-text);
}

.sec-page--set-withdraw-code .sec-form__eye-wrap {
  flex-shrink: 0;
}

.sec-page--set-withdraw-code .sec-form__eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--f168-text-muted);
  cursor: pointer;
  border-radius: 6px;
}

.sec-page--set-withdraw-code .sec-form__eye:hover {
  color: var(--sec-text-secondary);
  background: rgba(0, 0, 0, .05);
}

.sec-page--set-withdraw-code .sec-form__password-wrap {
  margin-bottom: 1rem;
}

.sec-page--set-withdraw-code .sec-password-cells {
  display: flex;
  gap: 0;
  border: 1px solid var(--sec-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--f168-bg-page);
}

.sec-page--set-withdraw-code .sec-password-cell {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 2.75rem;
  border: none;
  border-right: 1px solid var(--sec-border);
  padding: 0;
  font-size: 1.25rem;
  text-align: center;
  color: var(--sec-text);
  background: var(--f168-bg-page);
  -webkit-appearance: none;
  appearance: none;
}

.sec-page--set-withdraw-code .sec-password-cell:last-child {
  border-right: none;
}

.sec-page--set-withdraw-code .sec-password-cell:focus {
  outline: none;
  background: rgba(252, 139, 0, .06);
  box-shadow: inset 0 0 0 2px var(--sec-primary);
}

.sec-page--set-withdraw-code .sec-form__warn {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
}

.sec-page--set-withdraw-code .sec-form__warn-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--f168-status-error);
}

.sec-page--set-withdraw-code .sec-form__warn-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--f168-status-error);
}

.sec-page--set-withdraw-code .sec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 10px;
  border: 1px solid var(--sec-border);
  background: var(--f168-bg-page);
  color: var(--sec-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sec-page--set-withdraw-code .sec-btn--block {
  display: flex;
  width: 100%;
}

.sec-page--set-withdraw-code .sec-btn--default:hover {
  background: var(--f168-bg-surface);
  border-color: var(--f168-accent-secondary);
}

.sec-page--set-withdraw-code .sec-btn--primary {
  background: var(--sec-primary);
  border-color: var(--sec-primary);
  color: var(--f168-bg-page);
}

.sec-page--set-withdraw-code .sec-btn--primary:hover {
  background: var(--sec-primary-dark);
  border-color: var(--sec-primary-dark);
  color: var(--f168-bg-page);
}

/* 修改密码 – 结构与安全页面表单相同 */
.sec-page--change-password .sec-content {
  padding: 0.8rem;
}

.sec-page--change-password .sec-form__card {
  background: var(--f168-bg-page);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: 1rem 0.8rem;
}

.sec-page--change-password .sec-form__row {
  margin-bottom: 0.5rem;
}

.sec-page--change-password .sec-form__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sec-text);
}

.sec-page--change-password .sec-form__input-wrap {
  margin-bottom: 1rem;
}

/* Input group: prefix (lock) + input + suffix (eye) – F168 style */
.sec-page--change-password .sec-form__input-group {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2.75rem;
  background: var(--f168-bg-surface);
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
}

.sec-page--change-password .sec-form__input-group:focus-within {
  background: var(--f168-bg-page);
  border-color: var(--sec-primary);
  box-shadow: 0 0 0 2px rgba(252, 139, 0, 0.2);
}

.sec-page--change-password .sec-form__input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex-shrink: 0;
  color: var(--f168-text-muted);
  font-size: 1rem;
}

.sec-page--change-password .sec-form__input-group .sec-form__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0.5rem;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.sec-page--change-password .sec-form__input-group .sec-form__input:focus {
  border: none;
  box-shadow: none;
}

.sec-page--change-password .sec-form__input-suffix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 0.5rem;
}

.sec-page--change-password .sec-form__eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--f168-text-muted);
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.sec-page--change-password .sec-form__eye:hover {
  color: var(--sec-text);
}

.sec-page--change-password .sec-form__eye svg {
  width: 1.1em;
  height: 1.1em;
}

/* 密码强度 – 4 条 */
.sec-page--change-password .sec-form__strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sec-page--change-password .sec-form__strength-label {
  font-size: 0.875rem;
  color: var(--sec-text);
  flex-shrink: 0;
}

.sec-page--change-password .sec-form__strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sec-page--change-password .sec-form__strength-bar {
  flex: 1;
  height: 6px;
  min-width: 0;
  background: var(--f168-bg-surface);
  border-radius: 3px;
  transition: background 0.2s;
}

.sec-page--change-password .sec-form__strength-bar.is-filled {
  background: var(--sec-primary);
}

.sec-page--change-password .sec-form__input {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--sec-text);
  background: var(--f168-bg-page);
  border: 1px solid var(--sec-border);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.sec-page--change-password .sec-form__input:focus {
  outline: none;
  border-color: var(--sec-primary);
  box-shadow: 0 0 0 2px rgba(252, 139, 0, 0.2);
}

.sec-page--change-password .sec-form__input::placeholder {
  color: var(--f168-text-muted);
}

.sec-page--change-password .sec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 10px;
  border: 1px solid var(--sec-border);
  background: var(--f168-bg-page);
  color: var(--sec-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sec-page--change-password .sec-btn--block {
  display: flex;
  width: 100%;
}

.sec-page--change-password .sec-btn--primary {
  background: var(--sec-primary);
  border-color: var(--sec-primary);
  color: var(--f168-bg-page);
}

.sec-page--change-password .sec-btn--primary:hover {
  background: var(--sec-primary-dark);
  border-color: var(--sec-primary-dark);
  color: var(--f168-bg-page);
}

/* sec-page kế thừa shell 480px từ body — không thu hẹp thêm 28rem */

/* ==========================================================================
   页眉 F168 – 居中 Logo，左侧菜单图标，右侧 VIP 图标，背景 430×52
   ========================================================================== */
.header-f168 .header-f168__bar {
  position: relative;
  min-height: var(--f168-header-height, 52px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-f168__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.header-f168__container {
  position: relative;
  z-index: 1;
}

.header-f168__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 7px 0px;
}

.header-f168__section {
  display: flex;
  align-items: center;
}

.header-f168__section--left {
  flex: 1;
  justify-content: flex-start;
  min-width: 33px;
}

.header-f168__section--center {
  flex: 0 0 auto;
  justify-content: center;
}

.header-f168__section--right {
  flex: 1;
  justify-content: flex-end;
  min-width: 33px;
}

.header-f168__menu-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-f168__menu-icon,
.header-f168__vip-icon {
  display: block;
  width: 33px;
  height: 29px;
  object-fit: contain;
}

.header-f168__logo {
  display: flex;
  align-items: center;
  max-height: 36px;
}

.header-f168__logo img {
  max-width: 120px;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (min-width: 1200px) {
  .header-f168__logo img {
    max-width: 240px;
    max-height: 42px;
  }
}

.header-f168__vip {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* 在栏下方的折叠菜单 (navbar) */
.header-f168__collapse {
  position: relative;
  z-index: 1;
  background-color: rgba(7, 11, 40, 0.95);
}

/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !important;
}

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: var(--f168-bg-page);
  background-color: var(--f168-accent);
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}

/* Cookie banner — trong shell 480px, không breakpoint 768px */
.cookies-card {
  width: calc(100% - 30px);
  max-width: var(--f168-shell-width, 480px);
  padding: 15px;
  font-size: 14px;
  color: var(--f168-bg-page);
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all 0.5s;
  background: var(--f168-bg-inverse);
  border-radius: 5px;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--f168-text-muted);
  color: var(--f168-bg-page);
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: var(--f168-text-dark);
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: var(--f168-text-dark);
}


.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: var(--f168-bg-inverse);
  color: var(--f168-bg-page);
  padding: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: "";
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--f168-bg-inverse) transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: "";
  font-family: "Line Awesome Free";
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: var(--f168-status-error);
}

.input-popup p.success::before {
  content: "\f058";
  color: var(--f168-status-success);
}

/* 移动优先：窄屏显示过滤按钮；≥480px 显示过滤面板（shell tối đa 480px） */
.show-filter {
  display: block;
}

.responsive-filter-card {
  display: none;
  transition: none;
}

@media (min-width: 480px) {
  .show-filter {
    display: none;
  }

  .responsive-filter-card {
    display: block;
  }
}

/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05),
    6px 4px 19px rgb(115 103 240 / 20%);
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: var(--f168-border) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--f168-border) !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--f168-bg-page);
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: var(--f168-border);
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: var(--f168-accent-secondary);
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--f168-accent-secondary);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: 0.3s;
}

.select2-container--default .select2-selection--single {
  border-color: var(--f168-border) !important;
  border-width: 2px !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--f168-border) !important;
  color: var(--f168-text-dark) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--f168-accent) !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-radius: 0.375rem !important;
}

.gateway-card {
  padding: 15px;
}

.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: var(--f168-accent);
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: var(--f168-bg-page);
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: color-mix(in srgb, var(--f168-border) 35%, transparent);
  --hover-border-color: var(--f168-accent);
  background-color: transparent;
  border-radius: 5px;
  height: 100%;
}

.payment-system-list.is-scrollable {
  max-height: min(388px, 70vh);
  overflow-x: auto;
  padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--f168-accent);
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  border: 1px solid var(--f168-bg-page);
  border-top-color: var(--border-color);
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.payment-item:first-child {
  border-top-color: var(--f168-bg-page);
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid var(--hover-border-color);
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid var(--f168-accent);
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width));
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid var(--f168-accent);
  display: inline-block;
  border-radius: 100%;
}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
    width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
  border-radius: 5px;
}

.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
    align-self: center;
    padding-left: 5px;
  }
}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
  background: unset;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
  border: none;
  background: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;
}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 500;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
  border-top-color: var(--f168-bg-page);
}

.payment-item__btn p,
span {
  color: var(--f168-bg-inverse);
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

label.required:after {
  content: "*";
  color: var(--f168-status-error) !important;
  margin-left: 2px;
}

.header .nav-right a {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  border-radius: 4px;
}

.btn--dark:hover {
  color: var(--f168-text-dark) !important;
  background-color: var(--f168-status-error) !important;
  box-shadow: 0 0 10px 2px var(--f168-status-error)8c !important;
}

/* ========== 存款弹窗 (存款) - F168 示例 ========== */
/* 顶端留空3倍 (大 padding-top)，底部贴紧 (bottom sheet) */
.deposit-popup-overlay {
  /* 顶部空出3倍 (12px * 3) */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 0 0;
  padding-top: var(--f168-popup-top-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.deposit-popup-overlay[data-hidden="0"] {
  opacity: 1;
  visibility: visible;
}

.deposit-popup-overlay[data-hidden="0"] .deposit-popup {
  display: flex;
  flex-direction: column;
  animation: depositPopupSlideUp 0.3s ease;
}

@keyframes depositPopupSlideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deposit-popup {
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  max-height: calc(100vh - var(--f168-popup-top-gap));
  overflow: hidden;
  display: none;
  flex-direction: column;
  background: var(--f168-bg-page);
  border-radius: var(--f168-popup-radius) var(--f168-popup-radius) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.deposit-popup__content {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 页眉 + 余额列 + 标签 固定在顶部，不滚动 */
.deposit-popup__header,
.deposit-popup__balance-row,
.deposit-popup__tabs {
  flex-shrink: 0;
}

/* 余额行：左侧“支付方式” + 右侧余额组 (胶囊样式，参考 F168) */
.deposit-popup__balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--f168-border);
  background: var(--f168-bg-page);
  gap: 12px;
}

.deposit-popup__balance-row-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--f168-text-dark);
  flex-shrink: 0;
}

.deposit-popup__currency-info-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 2px 6px;
  background: var(--f168-bg-page);
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: 25px;
  min-width: 0;
}

.deposit-popup__currency-icon-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.15);
}

.deposit-popup__currency-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.deposit-popup__currency-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.deposit-popup__currency-count {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--f168-accent);
  border-bottom: 1px solid rgba(245, 166, 35, 0.6);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.deposit-popup__currency-refresh {
  background: none;
  border: none;
  color: var(--f168-accent);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.deposit-popup__currency-refresh i {
  font-size: 1.1rem;
}

.deposit-popup__currency-refresh:hover {
  transform: rotate(180deg);
}

.deposit-popup__currency-refresh i.la-spin {
  animation: deposit-popup-spin 0.8s linear infinite;
}

@keyframes deposit-popup-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 仅下方部分（支付方式、优惠、金额、页脚）可滚动 */
.deposit-popup__inner {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.deposit-popup__inner::-webkit-scrollbar {
  display: none;
}

/* Header */
.deposit-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 0px solid var(--f168-border);
  background: var(--f168-bg-page);
  flex-shrink: 0;
}

.deposit-popup__back {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--f168-text-dark);
  font-size: 2.8rem;
  cursor: pointer;
  padding: 0;
}

.deposit-popup__back i,
.deposit-popup__back .las {
  font-size: 2.8rem !important;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: left;
}

.deposit-popup__back i::before,
.deposit-popup__back .las::before {
  font-size: 0.5em;
}

.deposit-popup__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--f168-text-dark);
}

.deposit-popup__header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deposit-popup__header-icon {
  color: var(--f168-text-muted);
  font-size: 1.2rem;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.deposit-popup__header-icon--svg {
  color: var(--f168-accent);
  font-size: 1.4rem;
}

.deposit-popup__header-icon--svg svg {
  width: 1em;
  height: 1em;
  display: block;
}

.deposit-popup__balance {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--f168-text-dark);
}

.deposit-popup__balance-star {
  color: var(--f168-accent);
}

.deposit-popup__balance-refresh {
  border: 0;
  background: transparent;
  color: var(--f168-accent);
  padding: 2px;
  cursor: pointer;
  font-size: 0.95rem;
}

.deposit-popup__gift-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, var(--f168-accent-14), var(--f168-bg-page));
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--f168-text-dark);
}

.deposit-popup__gift-badge-text {
  color: var(--f168-status-error);
  font-weight: 700;
}

/* Tabs */
.deposit-popup__tabs {
  padding: 20px 16px 0px;
  border-bottom: 1px solid var(--f168-border);
}

.deposit-popup__tab-list {
  display: flex;
  gap: 0;
}

.deposit-popup__tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  color: var(--f168-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.deposit-popup__tab-badge {
  position: absolute;
  top: -0.6rem;
  right: 30px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.deposit-popup__tab-badge__gift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -4px;
  position: relative;
  z-index: 2;
}

.deposit-popup__tab-badge__gift img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

.deposit-popup__tab-badge--on-method {
  top: -12px;
  right: 6px;
}

.deposit-popup__tab-badge__content {
  display: inline-flex;
  align-items: center;
  padding: 0px 5px;
  border-radius: 999px;
  background-color: var(--f168-accent);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--f168-bg-page);
  white-space: nowrap;
}

/* Badge thưởng kênh nạp — text pill (clone 789k _deposit-bonus-badge), không icon gift */
.deposit-bonus-badge {
  position: absolute;
  top: -6px;
  right: -20px;
  z-index: 2;
  display: inline-block;
  box-sizing: border-box;
  max-width: 88px;
  --badge-bg-color: var(--f168-accent-secondary);
  background-color: var(--badge-bg-color);
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  color: var(--f168-bg-page);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  pointer-events: none;
}

.deposit-bonus-badge::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -5px;
  z-index: 20;
  left: 0;
  width: 0;
  height: 0;
  border-left: 8px solid var(--badge-bg-color);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  font-size: 0;
}

[dir="rtl"] .deposit-bonus-badge::before {
  border-left: none;
  border-right: 4px solid var(--badge-bg-color);
  right: 0;
  left: auto;
}

.user-section__nav-icon > .deposit-bonus-badge,
.mine-quick-btn__icon-wrap > .deposit-bonus-badge {
  top: -6px;
  right: -20px;
}

.deposit-popup__tab > .deposit-bonus-badge {
  top: -6px;
  right: 20px;
}

.user-section__nav-icon > img {
  position: relative;
  z-index: 0;
}

.deposit-popup__tab i {
  font-size: 1.1rem;
}

.deposit-popup__tab .deposit-popup__tab-icon {
  font-size: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-accent);
}

.deposit-popup__tab .deposit-popup__tab-icon svg {
  width: 1em;
  height: 1em;
}

.deposit-popup__tab--active {
  font-weight: 500;
  border-bottom-color: var(--f168-accent);
}

.deposit-popup__tab--active>span:last-child {
  color: var(--f168-text-accent);
}

/* Section */
.deposit-popup__section {
  padding: 14px 16px;
}

.deposit-popup__section-title {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--f168-text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.deposit-popup__section-title i {
  color: var(--f168-accent);
}

/* Payment methods grid */
.deposit-popup__methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.deposit-popup__methods--main {
  margin-bottom: 0;
}

.deposit-popup__sub-methods {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--f168-border);
}

.deposit-popup__sub-methods-panel.d-none {
  display: none !important;
}

.deposit-popup__methods--sub {
  grid-template-columns: repeat(3, 1fr);
}

.deposit-popup__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--f168-border);
  border-radius: 8px;
  background: var(--f168-bg-page);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
  min-height: 45px;
}

.deposit-popup__methods--main .deposit-popup__method {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 0px 10px;
  text-align: left;
}

.deposit-popup__methods--main .deposit-popup__method-icon {
  flex-shrink: 0;
}

.deposit-popup__methods--main .deposit-popup__method-name {
  flex: 1;
  text-align: center;
}

.deposit-popup__method:hover {
  background: var(--f168-bg-surface);
  border-color: var(--f168-accent);
}

.deposit-popup__method--active {
  background: rgba(245, 166, 35, 0.1);
  border-color: var(--f168-accent);
  color: var(--f168-accent);
}

.deposit-popup__method-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--f168-text-muted);
}

.deposit-popup__method-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.deposit-popup__method-icon--orange {
  color: var(--f168-accent);
}

.deposit-popup__method-icon--blue {
  color: var(--f168-accent-secondary);
}

.deposit-popup__method-icon--momo,
.deposit-popup__method-icon--zalo,
.deposit-popup__method-icon--viettel {
  font-size: 0.75rem;
  font-weight: 700;
}

.deposit-popup__method-icon--momo {
  color: var(--f168-status-error);
}

.deposit-popup__method-icon--zalo {
  color: var(--f168-accent-secondary);
}

.deposit-popup__method-icon--viettel {
  color: var(--f168-status-error);
}

.deposit-popup__method-icon--usdt {
  color: var(--f168-status-success);
  font-weight: 700;
  font-size: 1.1rem;
}

.deposit-popup__method-icon--btc {
  color: var(--f168-text-accent);
  font-weight: 700;
}

.deposit-popup__method-icon--eth {
  color: var(--f168-accent-secondary);
  font-weight: 700;
  font-size: 1.05rem;
}

.deposit-popup__method-icon--usdc {
  color: var(--f168-accent-secondary);
  font-weight: 700;
  font-size: 1.1rem;
}

.deposit-popup__method-badge--red .deposit-popup__tab-badge__content {
  background-color: var(--f168-status-error);
}

.deposit-popup__method-badge--green .deposit-popup__tab-badge__content {
  background-color: var(--f168-status-success);
}

.deposit-popup__method-name {
  font-size: 0.8rem;
  color: var(--f168-text-dark);
  text-align: center;
  line-height: 1.2;
}

.deposit-popup__method--active .deposit-popup__method-name {
  color: var(--f168-accent);
  font-weight: 400;
}

.deposit-popup__method--badge {
  padding-top: 18px;
}

.deposit-popup__method-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.6rem;
  color: var(--f168-bg-page);
  background: var(--f168-status-error);
  padding: 2px 6px;
  border-radius: 4px;
}

.deposit-popup__methods--crypto .deposit-popup__method {
  position: relative;
}

/* 优惠 (F168样式) */
.deposit-popup__offers {
  background: var(--f168-accent-12);
  border-radius: var(--f168-popup-radius);
  padding: 12px 2px;
}

.deposit-popup__offers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.deposit-popup__offers-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deposit-popup__offers-title-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.deposit-popup__offers-title-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--f168-text-dark);
}

.deposit-popup__offer-list-wrap {
  overflow-y: auto;
}

.deposit-popup__offer-list-wrap--collapsed {
  max-height: 196px;
  overflow: hidden;
}

.deposit-popup__offer-list-wrap--collapsed .deposit-popup__offer-item:nth-child(n+5) {
  display: none;
}

.deposit-popup__offer-list-wrap:not(.deposit-popup__offer-list-wrap--collapsed) {
  max-height: 320px;
}

.deposit-popup__offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deposit-popup__offer-item {
  margin-bottom: 5px;
  border-radius: 6px;
  overflow: hidden;
}

.deposit-popup__offer-item--selected {
  background: rgba(255, 170, 9, 0.08);
}

.deposit-popup__offer-item--disabled {
  opacity: 0.45;
}

.deposit-popup__offer-item--disabled .deposit-popup__offer-row {
  cursor: not-allowed;
}

.deposit-popup__offer-item--disabled .deposit-popup__offer-check,
.deposit-popup__offer-item--disabled .deposit-popup__offer-radio,
.deposit-popup__offer-item--disabled .deposit-popup__offer-check-ui {
  pointer-events: none;
}

.deposit-popup__offer-row {
  background: var(--f168-bg-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 0;
  min-height: 44px;
  cursor: pointer;
}

.deposit-popup__offer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  position: relative;
  padding-left: 4px;
}

.deposit-popup__offer-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--f168-accent);
  border-radius: 0 2px 2px 0;
}

.deposit-popup__offer-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.deposit-popup__offer-label-txt,
.deposit-popup__offer-give {
  font-size: 0.7rem;
  color: var(--f168-text-dark);
}

.deposit-popup__offer-left-txt {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.deposit-popup__offer-currency {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--f168-text-accent);
}

.deposit-popup__offer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.deposit-popup__offer-condition {
  font-size: 0.7rem;
  color: var(--f168-text-muted);
  text-align: right;
}

.deposit-popup__offer-min {
  font-weight: 600;
  color: var(--f168-text-dark);
}

.deposit-popup__offer-check {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.deposit-popup__offer-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.deposit-popup__offer-check-ui {
  width: 22px;
  height: 22px;
  border: 2px solid var(--f168-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-bg-page);
  transition: border-color 0.2s, background 0.2s;
}

.deposit-popup__offer-check-ui svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.deposit-popup__offer-radio:checked+.deposit-popup__offer-check-ui {
  border-color: var(--f168-accent);
  background: var(--f168-accent);
}

.deposit-popup__offer-radio:checked+.deposit-popup__offer-check-ui svg {
  opacity: 1;
}

.deposit-popup__more {
  margin-top: 0;
  padding: 10px 0 4px;
  border: 0;
  background: transparent;
  color: var(--f168-accent);
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.deposit-popup__more-icon {
  transition: transform 0.2s;
}

.deposit-popup__more[aria-expanded="true"] .deposit-popup__more-icon {
  transform: rotate(180deg);
}

/* Amount */
.deposit-popup__amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.deposit-popup__amount-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--f168-border-v2);
  border-radius: 8px;
  background: transparent;
  font-size: 0.85rem;
  color: var(--f168-text-dark);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.deposit-popup__amount-btn:hover {
  border-color: var(--f168-accent);
}

.deposit-popup__amount-btn--active,
.deposit-popup__amount-btn--active:hover,
.deposit-popup__amount-btn--active:focus {
  border-color: var(--f168-accent);
  box-shadow: 0 0 0 1px var(--f168-accent) inset;
  background: var(--f168-bg-inverse-surface);
}

.deposit-popup__amount-btn .deposit-popup__amount-label-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
  width: 100%;
}

.deposit-popup__amount-btn .deposit-popup__amount-label {
  display: block;
  width: 100%;
  padding: 7px 6px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--f168-text-dark);
  background: var(--f168-bg-page);
}

.deposit-popup__amount-btn .deposit-popup__amount-reward-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 18px;
  padding: 2px 6px 3px;
  background: var(--f168-text-dark);
  line-height: 1;
}

.deposit-popup__amount-btn .deposit-popup__amount-reward-box[hidden] {
  display: none !important;
}

.deposit-popup__amount-btn--active .deposit-popup__amount-label {
  color: var(--f168-bg-page);
  background: var(--f168-bg-inverse-surface);
}

.deposit-popup__amount-btn--active .deposit-popup__amount-reward-box {
  background: var(--f168-text-dark);
}

.deposit-popup__amount-btn .deposit-popup__amount-reward {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--f168-accent);
  white-space: nowrap;
}

.deposit-popup__amount-combo {
  margin-top: 10px;
}

.deposit-popup__amount-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--f168-status-error);
  border-radius: 10px;
  background: rgba(var(--f168-status-error__toRgbString), 0.06);
  padding: 5px 14px;
  margin-bottom: 0;
}

.deposit-popup__amount-combo--has-value .deposit-popup__amount-input-wrap {
  border-color: var(--f168-status-success);
  background: rgba(var(--f168-status-success__toRgbString), 0.06);
  border-radius: 10px 10px 0 0;
}

.deposit-popup__amount-input-icon {
  color: var(--f168-text-muted);
  font-size: 1.5rem;
  margin-right: 10px;
}

.deposit-popup__amount-input-icon i,
.deposit-popup__amount-input-icon .las {
  font-size: 1.5rem;
  line-height: 1;
}

.deposit-popup__amount-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-weight: 700;
  font-size: 20px !important;
  color: var(--f168-text-dark);
  outline: none;
}

.deposit-popup__amount-input::placeholder {
  color: var(--f168-text-muted);
}

.deposit-popup__amount-input-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--f168-text-muted);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.deposit-popup__amount-input-clear i,
.deposit-popup__amount-input-clear .las {
  font-size: 1.65rem;
  line-height: 1;
}

.deposit-popup__amount-input-clear:hover {
  color: var(--f168-text-dark);
}

.deposit-popup__amount-input-clear.is-visible {
  display: inline-flex;
}

.deposit-popup__amount-hint {
  display: none;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(var(--f168-accent__toRgbString), 0.4);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: rgba(var(--f168-accent__toRgbString), 0.06);
  font-size: 11px;
  color: var(--f168-text-dark);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deposit-popup__amount-combo--has-value .deposit-popup__amount-hint {
  display: block;
}

.deposit-popup__amount-exchange {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px 8px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.deposit-popup__amount-exchange-label {
  color: var(--f168-text-dark);
}

.deposit-popup__amount-exchange-info {
  color: var(--f168-text-dark);
  font-weight: 700;
}

.deposit-popup__amount-hint-total,
.deposit-popup__amount-hint-reward {
  color: var(--f168-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.deposit-popup__amount-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--f168-text-muted);
}

.deposit-popup__amount-rate-label {
  color: var(--f168-text-muted);
}

.deposit-popup__amount-rate-value {
  font-weight: 600;
  color: var(--f168-text-dark);
}

/* 页脚 CTA - 与内容一同正常滚动 */
.deposit-popup__footer {
  padding: 0px;
  flex-shrink: 0;
}

.deposit-popup__cta {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--f168-popup-radius);
  background: var(--f168-accent);
  color: var(--f168-bg-page);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
  border: 0;
  cursor: pointer;
}

.deposit-popup__cta:hover {
  background: var(--f168-accent-secondary);
  color: var(--f168-bg-page);
}

/* Homepage: marquee + user-section stick below fixed header (BO _nav-container pattern) */
.home-sticky-nav {
  position: sticky;
  top: var(--f168-header-height, 52px);
  z-index: 100;
  background-color: var(--f168-bg-page);
}

.home-sticky-nav.is-stuck {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.home-sticky-nav .user-section {
  padding-bottom: 0.15rem;
}

.home-sticky-nav .user-section .container {
  padding-top: 0;
}

/* Marquee / Announcement section */
.announce-wrap {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--f168-bg-page);
  padding: 0px 10px 0px 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  margin: 0;
}

.ann-icon {
  max-width: 24px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f168-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ann-icon i {
  font-size: 18px;
}

.ann-icon-img {
  max-width: 22px;
  height: auto;
}

.ann-bar {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 20px;
  /* Adjust based on font size + line height */
}

.ann-bar-inner {
  position: absolute;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  top: 0;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    left: 100%;
    transform: translateX(0);
  }

  100% {
    left: 0%;
    transform: translateX(-100%);
  }
}

/* 右侧区块：通知背景 172x38 + 文本 + 红点 */
.ann-right {
  flex-shrink: 0;
  width: 80px;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 10px;
  cursor: pointer;
  right: -5px;
}

.ann-right-text {
  color: var(--f168-text-accent);
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 60px;
}

.ann-right-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--f168-status-error);
  display: block;
}

/* ============================================
   User Section
   ============================================ */
.user-section {
  padding: 0;
}

/* 移动优先：基础 = 移动端 (更小的 gap/padding) */
.user-section__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0px;
}

/* --- LEFT: Guest buttons --- */
.user-section__guest-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.user-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s;
  white-space: nowrap;
}

.user-section__btn--login {
  background: transparent;
  color: var(--f168-accent-secondary);
  border: 1px solid var(--f168-accent-secondary);
}

.user-section__btn--login:hover {
  background: var(--f168-accent-secondary);
  color: var(--f168-bg-page);
}

.user-section__btn--register {
  background: hsl(var(--main));
  color: var(--f168-bg-page);
  border: 1px solid hsl(var(--main));
}

.user-section__btn--register:hover {
  opacity: 0.85;
  color: var(--f168-bg-page);
}

/* --- LEFT: Authenticated user --- */
.user-section__auth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.user-section__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.user-section__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-section__info {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
}

.user-section__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-section__vip {
  flex-shrink: 0;
}

.user-section__vip-badge {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-section__vip-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.user-section__vip-level {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--f168-bg-page);
  text-shadow: 0 0 2px var(--f168-text-dark), 0 1px 3px var(--f168-text-dark), 0 0 4px rgba(0, 0, 0, 0.8);
  line-height: 1;
}

.user-section__vip-level span {
  color: var(--f168-bg-page);
  transform: scale(var(--vip-level-scale, 1));
  font-size: 15px;
}

.user-section__username {
  font-size: 13px;
  font-weight: 400;
  color: var(--f168-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  text-decoration: none;
}

.user-section__username:hover {
  color: var(--f168-text-dark);
  text-decoration: underline;
}

.user-section__copy-btn {
  background: none;
  border: none;
  color: hsl(var(--main));
  cursor: pointer;
  padding: 0;
  font-size: 32px;
  line-height: 1;
  transition: opacity 0.2s;
}

.user-section__copy-btn i {
  font-size: 18px !important;
}

.user-section__copy-btn:hover {
  opacity: 0.7;
}

.user-section__balance-row {
  display: flex;
  align-items: center;
}

.user-section__currency-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-radius: 25px;
  border: 1px solid var(--f168-border);

}

.user-section__currency-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

.user-section__currency-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.user-section__balance {
  font-size: 14px;
  font-weight: 500;
  color: var(--f168-text-muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
  border-bottom: 0.1rem solid var(--f168-text-muted);
}

.user-section__refresh-btn {
  background: none;
  border: none;
  color: hsl(var(--main));
  cursor: pointer;
  padding: 2px;
  font-size: 32px;
  line-height: 1;
  transition: transform 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-section__refresh-btn i {
  font-size: 19px !important;
}

.user-section__refresh-btn:hover {
  transform: rotate(180deg);
}

.user-section__refresh-btn i.la-spin {
  animation: user-section-spin 0.8s linear infinite;
}

@keyframes user-section-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* --- RIGHT: Nav items --- */
.user-section__right {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 8px;
}

.user-section__right::-webkit-scrollbar {
  display: none;
}

.user-section__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--f168-bg-page);
  min-width: 48px;
  transition: opacity 0.2s;
  flex-shrink: 0;
  overflow: visible;
}

.user-section__nav-item:hover {
  opacity: 0.8;
  color: var(--f168-bg-page);
}

.user-section__nav-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 0;
}

.user-section__nav-icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.user-section__nav-icon i {
  font-size: 32px;
  color: hsl(var(--main));
}

.user-section__nav-title {
  margin-top: 4px;
  font-size: 11.5px;
  text-align: center;
  line-height: 1.2;
  color: var(--f168-text-dark);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   Footbox1 - 2 个等宽列（左：频道图标，右：图片）
   ============================================ */
.footbox1 {
  padding: 1rem 0;
}

/* 移动优先：基础 = 手机端（较小的间距/内边距/字体/图标） */
.footbox1__wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.footbox1__item {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex: 1;
  min-width: 0;
}

.footbox1__item--right {
  padding-left: 0.5rem;
}

.footbox1__title {
  font-weight: 700;
  font-size: 0.75rem;
  margin: 0 0 0.25rem;
  color: var(--f168-bg-page);
}

.footbox1__channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footbox1__channel-item {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.footbox1__channel-item a,
.footbox1__channel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footbox1__channel-item a {
  text-decoration: none;
}

.footbox1__right-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footbox1__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* ============================================
   Footbox2 - 两个等宽列，每列：标题 + 1张图片
   ============================================ */
.footbox2 {
  padding: 0 0 1rem;
}

/* Mobile first: base = mobile */
.footbox2__wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.footbox2__item {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex: 1;
  min-width: 0;
}

.footbox2__item--right {
  padding-left: 0.5rem;
}

.footbox2__title {
  font-weight: 700;
  font-size: 0.75rem;
  margin: 0 0 0.25rem;
  color: var(--f168-bg-page);
}

.footbox2__img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footbox2__item--left .footbox2__img {
  max-width: 100%;
}

.footbox2__item--right .footbox2__img {
  width: 70%;
}

/* Footer Fix - Bottom bar (all screen sizes) */
.footer-fix-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: var(--section-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
}

/* 底部留空防止 footbox1 / 页脚被系统固定操作栏覆盖 */
.page-wrapper {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* 没有底部操作栏的页面 (如 cat-slot)：去掉底部留白 */
.page-wrapper-no-footer-bar {
  padding-bottom: 0;
}

/* ---------- 活动 / 优惠页面 (F168：顶部主内容，左侧次级导航) ---------- */
.event-page {
  min-height: 100vh;
  background: var(--f168-bg-page);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-page__wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Trang event (F168 header) — footer-fix-bar cố định; page-wrapper đã chừa padding đáy */
.event-page__wrap:has(> .event-header.lobby-base-header) {
  min-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
}

/* ========== 用户提款页 (类似活动页头的3个选项卡) ========== */
.withdraw-page {
  min-height: 100vh;
  background: var(--f168-bg-page);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.withdraw-page__wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.withdraw-page__wrap .event-header__section--right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.withdraw-page__wrap .event-header__back:hover {
  color: var(--f168-accent);
}

/* 提款页面的客服按钮 */
.withdraw-page__wrap .event-header__section--right .mine-topbar__btn {
  color: var(--f168-accent);
  font-size: 2rem;
  /* 比 1.62rem 增加 50% */
}

.withdraw-page__wrap .event-header__section--right .mine-topbar__btn:hover {
  opacity: 0.9;
  color: var(--f168-accent);
}

/* a标签样式的标签: 与活动页的 .event-tab 按钮相同 */
.withdraw-page__wrap .event-tabs-row--main a.event-tab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
}

.withdraw-page__wrap .event-tabs-row--main a.event-tab:link,
.withdraw-page__wrap .event-tabs-row--main a.event-tab:visited {
  color: var(--f168-text-muted);
}

.withdraw-page__wrap .event-tabs-row--main a.event-tab:hover {
  color: var(--f168-text-dark);
}

.withdraw-page__wrap .event-tabs-row--main a.event-tab.active,
.withdraw-page__wrap .event-tabs-row--main a.event-tab.active:link,
.withdraw-page__wrap .event-tabs-row--main a.event-tab.active:visited,
.report-page__wrap .event-tabs-row--main a.event-tab.active,
.report-page__wrap .event-tabs-row--main a.event-tab.active:link,
.report-page__wrap .event-tabs-row--main a.event-tab.active:visited {
  color: var(--f168-accent);
  font-weight: 400;
  border-bottom: 2px solid var(--f168-accent);
  margin-bottom: -1px;
}

.withdraw-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1rem 1.5rem;
}

.withdraw-panel {
  max-width: var(--f168-shell-width, 480px);
  margin: 0 auto;
}

.withdraw-balance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.withdraw-balance__label {
  color: var(--f168-text-muted);
  font-size: 0.9375rem;
}

.withdraw-balance__value {
  color: var(--f168-accent);
  font-weight: 500;
  font-size: 1.rem;
}

.withdraw-balance__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-accent);
  margin-left: 0.25rem;
  font-size: 1.3em;
  /* 大小增加 30% */
}

.withdraw-balance__refresh:hover {
  opacity: 0.9;
}

.withdraw-method-type {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.withdraw-method-type__btn {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: 1px solid var(--f168-border);
  border-radius: 8px;
  background: var(--f168-bg-page);
  color: var(--f168-text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.withdraw-method-type__btn:hover {
  border-color: var(--f168-accent-secondary);
  color: var(--f168-text-dark);
}

.withdraw-method-type__btn.active {
  border-color: var(--f168-accent);
  color: var(--f168-accent);
}

/* 两个独立的白色区块 (参考 lobby-form-item + 图像) */
.withdraw-form-item {
  margin-bottom: 0.75rem;
}

.withdraw-form-item--amount .withdraw-account-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-border);
  border-radius: 10px;
  box-sizing: border-box;
}

.withdraw-add-account-btn {
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background: var(--f168-bg-page);
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--f168-border);
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}

.withdraw-add-account-btn:hover {
  background: var(--f168-bg-surface);
  border-color: var(--f168-border);
}

.withdraw-add-account-btn__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.withdraw-add-account-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--f168-accent);
  font-size: 2em;
  /* icon x2 */
}

.withdraw-add-account-btn__text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--f168-text-muted);
}

.withdraw-add-account-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--f168-accent-secondary);
  font-size: 1em;
  /* icon x2 */
}

.withdraw-account-input-wrap {
  color: var(--f168-accent-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}

.withdraw-account-input-wrap:hover {
  color: var(--f168-accent-secondary);
}

.withdraw-account-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--f168-accent-secondary);
  pointer-events: none;
}

.withdraw-form-item--amount .withdraw-account-block__methods {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--f168-bg-page);
}

.withdraw-account-block__methods {
  padding: 0;
}

.withdraw-method-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.withdraw-method-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}

.withdraw-method-item:hover,
.withdraw-method-item:has(.withdraw-method-item__input:checked) {
  background: var(--f168-bg-surface);
  border-color: var(--f168-bg-page);
}

.withdraw-method-item__input {
  margin: 0;
}

.withdraw-method-item__name {
  font-size: 0.875rem;
}

.withdraw-amount-row__label {
  display: block;
  font-size: 0.875rem;
  color: var(--f168-text-muted);
  margin-bottom: 0.35rem;
}

.withdraw-amount-row__input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--f168-border);
  border-radius: 8px;
  overflow: hidden;
}

.withdraw-amount-row__sym {
  padding: 0.5rem 0.75rem;
  background: var(--f168-bg-surface);
  color: var(--f168-text-muted);
  font-size: 0.875rem;
}

.withdraw-amount-row__input {
  flex: 1;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  min-width: 0;
}

.withdraw-amount-row__limit {
  margin-top: 0.35rem;
}

.withdraw-actions {
  display: flex;
  gap: 0.75rem;
}

.withdraw-actions__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s;
}

.withdraw-actions__btn--earn {
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-accent);
  color: var(--f168-accent);
}

.withdraw-actions__btn--earn:hover {
  opacity: 0.9;
}

.withdraw-actions__badge {
  position: absolute;
  top: -1em;
  left: 0;
  background: var(--f168-status-error);
  color: var(--f168-bg-page);
  font-size: 0.6875rem;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
}

.withdraw-actions__btn--confirm {
  background: var(--f168-border);
  color: var(--f168-bg-page);
  cursor: not-allowed;
}

.withdraw-actions__btn--confirm:not(:disabled) {
  background: var(--f168-accent);
  cursor: pointer;
}

.withdraw-actions__btn--confirm:not(:disabled):hover {
  opacity: 0.9;
}

/* F168 提款表单（已绑定银行卡时） – 0_WithdrawChunk */
._form_wkump_45 {
  padding: 0.5rem 0 0;
}

._account-select-gap_13crb_45 {
  margin-top: 0.25rem;
}

._accountSelectWrapper_13crb_49 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

._accountSelectWrapper_13crb_49>.withdraw-account-select-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

._accountSelectWrapper_13crb_49 .ui-select__reference--large.ui-select-single {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--f168-border);
  border-radius: 0.35rem;
  background: var(--f168-bg-surface);
}

._accountSelectWrapper_13crb_49 .ui-select-single__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  color: var(--f168-text-dark);
}

._accountSelectWrapper_13crb_49 .ui-select-single__suffix {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
}

._accountSelectWrapper_13crb_49>._accountIcon_13crb_62 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

._accountSelectWrapper_13crb_49 ._icon_13crb_65 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-accent);
  font-size: 1.25rem;
}

._accountSelectWrapper_13crb_49 ._accountOption_13crb_74 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

._accountSelectWrapper_13crb_49 ._logo_13crb_95 {
  width: 2rem;
  height: 2rem;
  border-radius: 0.35rem;
  object-fit: contain;
  flex-shrink: 0;
}

._accountSelectWrapper_13crb_49 ._name_13crb_74 {
  font-weight: 600;
  color: var(--f168-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8rem;
}

._accountSelectWrapper_13crb_49 ._accountOption_13crb_74 span[dir="ltr"] {
  color: var(--f168-text-muted);
  font-size: 0.875rem;
}

._amountInputWrapper_1t1kf_45 {
  margin-top: 0.75rem;
}

._amountInputWrapper_1t1kf_45 ._inputWrapper_1t1kf_45 {
  width: 100%;
  position: relative;
}

.withdraw-amount-f168 {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--f168-border);
  border-radius: 0.35rem;
  background: var(--f168-bg-surface);
  min-height: 2.75rem;
  padding: 0 0.5rem;
}

.withdraw-amount-f168 ._prefix_1t1kf_61 {
  color: var(--f168-text-dark);
  font-size: 0.9375rem;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.withdraw-amount-f168 .amount-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.withdraw-amount-f168 .amount-input::placeholder {
  font-weight: 400;
  color: var(--f168-text-muted);
}

.withdraw-amount-f168 ._allAmount_1t1kf_55 {
  color: var(--f168-accent);
  background: none;
  border: none;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
}

._exchangeDetails_wkump_63 {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--f168-text-dark);
}

._bindAccountSplitLine_wkump_73 {
  height: 1px;
  background: var(--f168-border);
  margin: 0.75rem 0;
}

._withdrawalPwdBox_ant3d_45 {
  width: 100%;
  margin-bottom: 0.5rem;
}

._withdrawalPwdBox_ant3d_45 ._label_ant3d_48 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

._withdrawalPwdBox_ant3d_45 ._text_ant3d_54 {
  color: var(--f168-text-dark);
  font-size: 0.9375rem;
}

._withdrawalPwdBox_ant3d_45 .withdraw-pwd-toggle {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--f168-text-muted);
  display: inline-flex;
}

.withdraw-pwd-cells-wrap {
  margin-top: 0.25rem;
}

.withdraw-pwd-cells-wrap .withdraw-pwd-cells {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--f168-border);
  border-radius: 0.35rem;
  overflow: hidden;
  background: var(--f168-bg-surface);
}

.withdraw-pwd-cells-wrap .ui-password-input__item {
  flex: 1;
  min-width: 0;
  border: none;
  border-right: 1px solid var(--f168-border);
  margin: 0;
  padding: 0;
}

.withdraw-pwd-cells-wrap .ui-password-input__item:last-child {
  border-right: none;
}

.withdraw-pwd-cells-wrap .withdraw-pwd-cell {
  width: 100%;
  height: 2.75rem;
  border: none;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0;
  background: none;
}

._kindTips_wkump_78 {
  color: var(--f168-text-dark);
  font-size: 0.875rem;
  word-wrap: break-word;
  margin-bottom: 0.75rem;
}

._kindTips_wkump_78 span:first-child {
  font-weight: 600;
  margin-right: 0.25rem;
}

._btnGroup_wkump_83 {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

._btnGroup_wkump_83 ._interest_wkump_95 {
  flex: 1;
  position: relative;
}

._btnGroup_wkump_83 ._apply-withdraw-form-btn_wkump_125 {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  background: var(--f168-border);
  color: var(--f168-bg-page);
}

._btnGroup_wkump_83 ._apply-withdraw-form-btn_wkump_125:not(:disabled) {
  background: var(--f168-accent);
}

._btnGroup_wkump_83 ._apply-withdraw-form-btn_wkump_125:not(:disabled):hover {
  opacity: 0.9;
}

/* 收款账户面板 (withdraw#accounts) – 参照 F168 _bindAccount 样式 */
.withdraw-accounts-wrap {
  padding: 0;
}

.withdraw-accounts-title {
  margin-bottom: 1rem;
}

.withdraw-accounts-title__left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--f168-text-dark);
}

.withdraw-accounts-title__count {
  color: var(--f168-text-muted);
  font-weight: 400;
}

.withdraw-accounts-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--f168-accent);
  cursor: pointer;
  font-size: 1.3em;
}

.withdraw-accounts-refresh:hover {
  opacity: 0.9;
}

/* 收款账户列表 (F168 ReceiveAccount) – 用户已有银行账户时显示 */
._accountList_1aae1_81 {
  margin-bottom: 1rem;
}

._cell_1arji_45 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--f168-border);
  border-radius: 0.35rem;
  padding: 0.5rem 0.75rem 0.4rem;
  margin-top: 0.5rem;
  min-height: 3.25rem;
  background: var(--f168-bg-surface);
}

._cell_1arji_45._defAccount_1arji_55 {
  border-color: var(--f168-accent);
  position: relative;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 {
  position: absolute;
  height: 1.25rem;
  width: 1.25rem;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._corner-bg_1arji_74 {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  color: var(--f168-accent);
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._corner-bg_1arji_74 svg {
  height: 100%;
  width: 100%;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._gou_1arji_66 {
  position: absolute;
  right: 0.1rem;
  bottom: -0.1rem;
  color: var(--f168-bg-page);
  height: 0.5rem;
  width: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._gou_1arji_66 svg {
  width: 100%;
  height: 100%;
}

._cell_1arji_45 ._left_1arji_86 {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

._cell_1arji_45 ._left_1arji_86 ._logo_1arji_90 {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  margin-right: 0.6rem;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--f168-bg-surface);
}

._cell_1arji_45 ._left_1arji_86 ._logo_1arji_90--placeholder {
  display: block;
  background: var(--f168-text-muted);
  opacity: 0.5;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 {
  min-width: 0;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 ._channelName_1arji_96 {
  color: var(--f168-text-dark);
  max-width: 12rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0 0.15rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 ._l_1arji_86 {
  display: flex;
  align-items: center;
  color: var(--f168-text-muted);
  margin: 0;
  font-size: 0.8125rem;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 ._l_1arji_86 ._l-text_1arji_113 {
  max-width: 10rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: ltr;
}

._cell_1arji_45 ._right_1arji_125 {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  height: 2.25rem;
  line-height: 1.5;
  padding-left: 0.5rem;
  flex-shrink: 0;
}

._cell_1arji_45 ._right_1arji_125 ._deleBox_1arji_159 {
  width: 1.25rem;
  height: 1.25rem;
}

.withdraw-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.withdraw-account-cell {
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-border);
  border-radius: 10px;
  overflow: hidden;
}

.withdraw-account-cell__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  min-height: 56px;
}

.withdraw-account-cell__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.withdraw-account-cell__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.withdraw-account-cell__logo--bank {
  color: var(--f168-accent-secondary);
}

.withdraw-account-cell__logo--crypto {
  color: var(--f168-accent);
}

.withdraw-account-cell__logo-img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.withdraw-account-cell__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--f168-text-dark);
}

.withdraw-account-cell__right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--f168-accent);
  font-size: 0.9375rem;
}

.withdraw-account-cell__action {
  color: var(--f168-accent);
}

.withdraw-account-cell__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  transform: rotate(180deg);
}

/* 添加银行账户弹窗 (屏幕中间，F168样式) */
.withdraw-bank-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: auto;
}

.withdraw-bank-modal-overlay[hidden] {
  display: none !important;
}

.withdraw-bank-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 25rem;
  margin: auto;
}

.withdraw-bank-modal__main {
  background: var(--f168-bg-surface);
  border-radius: 0.5rem;
  overflow: visible;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.withdraw-bank-modal__header {
  padding: 0.75rem 1rem 0.5rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--f168-text-dark);
}

.withdraw-bank-modal__content {
  padding: 0 1rem 1rem;
  overflow: visible;
}

.withdraw-bank-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.withdraw-bank-modal__remark {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--f168-text-muted);
}

.withdraw-bank-modal-field {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-border);
  border-radius: 0.35rem;
  gap: 0.5rem;
}

.withdraw-bank-modal-form .withdraw-bank-modal-field:not(:first-of-type) {
  background: transparent;

}

.withdraw-bank-modal-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  font-size: 1.625rem;
  color: var(--f168-text-muted);
}

.withdraw-bank-modal-field__input,
.withdraw-bank-modal-field__select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--f168-text-dark);
}

.withdraw-bank-modal-field__input::placeholder {
  color: var(--f168-text-muted);
}

.withdraw-bank-modal-field__input:disabled {
  color: var(--f168-text-muted);
  cursor: not-allowed;
}

.withdraw-bank-modal-field__select {
  padding: 0.5rem 1.5rem 0.5rem 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.withdraw-bank-modal-field--select {
  position: relative;
  flex-wrap: wrap;
}

.withdraw-bank-modal-field__trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--f168-text-muted);
  cursor: pointer;
  text-align: left;
}

.withdraw-bank-modal-field__trigger[aria-expanded="true"] {
  color: var(--f168-text-dark);
}

.withdraw-bank-modal-field__trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.withdraw-bank-modal-field__trigger-text.has-value {
  color: var(--f168-text-dark);
}

.withdraw-bank-modal-field__trigger-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--f168-text-muted);
  transition: transform 0.2s;
}

.withdraw-bank-modal-field__trigger-arrow svg {
  display: block;
}

.withdraw-bank-modal-field__trigger[aria-expanded="true"] .withdraw-bank-modal-field__trigger-arrow {
  transform: rotate(180deg);
}

.withdraw-bank-modal-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 2100;
  background: var(--f168-bg-surface);
  border: 1px solid var(--f168-border);
  border-radius: 0.35rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
  max-height: 20rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.withdraw-bank-modal-dropdown__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
  flex-shrink: 0;
}

.withdraw-bank-modal-dropdown__search-wrap:focus-within {
  border-bottom-color: var(--f168-accent);
  box-shadow: 0 1px 0 0 var(--f168-accent);
}

.withdraw-bank-modal-dropdown__search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--f168-text-muted);
  flex-shrink: 0;
}

.withdraw-bank-modal-dropdown__search {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--f168-text-dark);
}

.withdraw-bank-modal-dropdown__search::placeholder {
  color: var(--f168-text-muted);
}

.withdraw-bank-modal-dropdown__scroll {
  overflow-y: auto;
  max-height: 17rem;
  padding: 0.25rem 0;
}

.withdraw-bank-modal-dropdown__option.hidden {
  display: none;
}

.withdraw-bank-modal-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--f168-text-dark);
  cursor: pointer;
  transition: background 0.15s;
}

.withdraw-bank-modal-dropdown__option:hover,
.withdraw-bank-modal-dropdown__option[aria-selected="true"] {
  background: var(--f168-bg-page);
}

.withdraw-bank-modal-dropdown__option-logo {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.withdraw-bank-modal__paste {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--f168-bg-page);
  background: var(--f168-accent);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.withdraw-bank-modal__paste:hover {
  opacity: 0.9;
}

.withdraw-bank-modal__warn {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--f168-text-muted);
  line-height: 1.4;
}

.withdraw-bank-notice__text {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--f168-text-muted);
}

.withdraw-bank-modal__submit {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--f168-bg-page);
  background: var(--f168-accent);
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
}

.withdraw-bank-modal__submit:hover {
  opacity: 0.92;
}

.withdraw-bank-modal-close-box {
  display: flex;
  justify-content: center;
  padding-top: 0.75rem;
}

.withdraw-bank-modal-close-box__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--f168-bg-page);
  background: var(--f168-text-muted);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s;
}

.withdraw-bank-modal-close-box__btn:hover {
  opacity: 0.9;
}

.withdraw-bank-modal-close-box__btn svg {
  width: 1.25em;
  height: 1.25em;
}

/* 提款预览弹窗：透明边距区域 */
#withdraw-preview-modal .withdraw-preview-modal-dialog .withdraw-bank-modal__main,
#withdraw-preview-modal .withdraw-preview-modal-body {
  background: transparent;
}

/* F168 风格页眉: lobby-base-header, 左后退键 + 单行横向滚动标签 */
.event-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.5rem;
  /* ~36px，相当于基准40px下的.9rem */
  min-height: 44px;
  background: var(--f168-bg-surface);
  border-bottom: 1px solid var(--f168-border);
  flex-shrink: 0;
  width: 100%;
}

.event-header__section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.event-header__section--left {
  min-width: 2.75rem;
}

.event-header__section--center {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  justify-content: center;
}

.event-header__section--right {
  min-width: 2rem;
}

.event-header__back {
  width: 2.75rem;
  height: 100%;
  padding-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--f168-text-muted);
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

.event-header__back:hover {
  color: var(--f168-accent);
  opacity: 0.9;
}

.event-header__back-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  transition: transform 0.3s linear;
}

.event-header__back-icon svg {
  display: block;
}

.event-tabs-wrap {
  width: 100%;
  overflow: hidden;
}

/*
 * Event promo header — px cố định (chuẩn /home/event @ html 16px).
 * Dùng cho mọi tab: /home/event, /home/svip, /home/vip… — không bị BO html rem scale.
 */
.event-page__wrap > .event-header.lobby-base-header {
  height: 56px;
  min-height: 44px;
  max-height: 56px;
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
}

.event-page__wrap > .event-header .event-header__section--left {
  min-width: 44px;
}

.event-page__wrap > .event-header .event-header__section--right {
  min-width: 32px;
}

.event-page__wrap > .event-header .event-header__back {
  width: 44px;
  padding-left: 8px;
}

.event-page__wrap > .event-header .event-header__back-icon {
  font-size: 27px;
}

.event-page__wrap > .event-header .event-header__back-icon svg {
  width: 1em;
  height: 1em;
}

.event-page__wrap > .event-header .event-tabs-row--main.event-tabs-row--scroll {
  padding: 0 8px;
  gap: 20px;
}

.event-page__wrap > .event-header .event-tabs-row--main .event-tab {
  box-sizing: border-box;
  padding: 0 2px;
  height: 53px;
  max-height: 53px;
  line-height: 36px;
  font-size: 13px;
  font-weight: 400;
  border-bottom-width: 2px;
  margin-bottom: -1px;
}

.event-page__wrap > .event-header .event-tabs-row--main .event-tab.active {
  font-weight: 400;
}

/* Event main tabs — anchor links (F168 header, BO URL routes) */
.event-page__wrap .event-tabs-row--main a.event-tab {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--f168-text-muted);
}

.event-page__wrap .event-tabs-row--main a.event-tab:link,
.event-page__wrap .event-tabs-row--main a.event-tab:visited {
  color: var(--f168-text-muted);
}

.event-page__wrap .event-tabs-row--main a.event-tab:hover {
  color: var(--f168-text-dark);
}

.event-page__wrap .event-tabs-row--main a.event-tab.active,
.event-page__wrap .event-tabs-row--main a.event-tab.active:link,
.event-page__wrap .event-tabs-row--main a.event-tab.active:visited {
  color: var(--f168-accent);
  border-bottom: 3px solid var(--f168-accent);
  margin-bottom: -1px;
}

/*
 * footer-fix-bar — khóa px giống /home/event khi BO sub-tab scale html rem (~64px).
 * --text-xs (0.75rem) × 64px → label ~48px, bị ellipsis T…/K… — tách khỏi rem BO.
 */
html:has(.event-page__wrap--subtab) .footer-fix-bar {
  font-size: 16px !important;
}

html:has(.event-page__wrap--subtab) .footer-fix-bar__inner {
  padding: 8px 4px 8px !important;
  gap: 4px !important;
}

html:has(.event-page__wrap--subtab) .footer-fix-bar__item {
  font-size: 11px !important;
  padding: 6px 4px !important;
}

html:has(.event-page__wrap--subtab) .footer-fix-bar__label {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html:has(.event-page__wrap--subtab) .footer-fix-bar__icon {
  width: 28px !important;
  height: 28px !important;
  margin-bottom: 2px !important;
}

html:has(.event-page__wrap--subtab) .footer-fix-bar__icon i {
  font-size: 20px !important;
}

/* Event sub-tab (SVIP/VIP/…) — F168 header + BO embed scaffold */
.event-page__wrap--subtab {
  min-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
  max-width: var(--f168-shell-width, 480px);
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.event-page__wrap--subtab .event-header {
  flex: 0 0 auto;
  z-index: 4;
}

.event-body--subtab {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;

}

.event-page__wrap--subtab .bo-event-subtab-embed.bo-event-clone-v2 {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  background: transparent;
  color: inherit;
  overflow: hidden;
}

.event-page__wrap--subtab .bo-event-subtab-embed .bo-event-shell-v2,
.event-page__wrap--subtab .bo-event-subtab-embed .bo-event-view-v2,
.event-page__wrap--subtab .bo-event-subtab-embed .bo-event-content-v2 {
  height: 100%;
  min-height: 0;
}

/* F168 header + BO scroll: không khóa #main-scrollbar khi embed trong event-page */
body.body:has(.event-page__wrap--subtab) #main-scrollbar {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
}

body.body:has(.event-page__wrap--subtab.bo-event-subtab-embed),
body.body:has(.event-page__wrap--subtab .bo-event-clone-v2) {
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.body:has(.event-page__wrap--subtab) .event-page__wrap--subtab {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * VIP sub-tab (/home/vip) — F168 light trên nền trắng.
 * BO subpages dùng --f168-text-dark / --f168-accent (dark theme); không set token → chữ/badge chìm.
 */
.event-page__wrap--subtab .bo-event-subtab-embed[data-active-tab="vip"] {
  --f168-accent__toRgbString: 255, 173, 0;
  color: var(--f168-text-muted);
}

.event-page__wrap--subtab .bo-event-tab-panel--vip._vip_113p5_45 {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, hsl(var(--main)) 12%, var(--f168-bg-page)) 3.31%,
    color-mix(in srgb, hsl(var(--main)) 4%, var(--f168-bg-page)) 64.92%
  );
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._list-tabs_zvwas_45 {
  background-color: var(--f168-bg-page);
}

/* Badge thưởng (+8, +18…) — cam đậm trên nền vàng nhạt */
.event-page__wrap--subtab .bo-event-tab-panel--vip ._reward-list_1to7t_45 ._reward_1to7t_45 {
  color: hsl(var(--main)) !important;
  background: var(--f168-accent-14) !important;
  font-weight: 600;
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._bonus-info_5j2ft_109,
.event-page__wrap--subtab .bo-event-tab-panel--vip ._vip-info_5j2ft_77 ._vip-name_5j2ft_87,
.event-page__wrap--subtab .bo-event-tab-panel--vip ._label_1to7t_93,
.event-page__wrap--subtab .bo-event-tab-panel--vip ._title-text_zvwas_79 {
  color: var(--f168-text-dark);
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._bonus-amount_5j2ft_114 {
  color: hsl(var(--main));
  font-weight: 700;
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._toggle_5j2ft_119 {
  color: hsl(var(--main));
  font-weight: 500;
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._toggle_5j2ft_119 ._arrow_5j2ft_127 {
  color: var(--f168-text-muted);
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._progress_1to7t_112 {
  color: var(--f168-text-muted);
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._progress_1to7t_112 ._text_1to7t_120,
.event-page__wrap--subtab .bo-event-tab-panel--vip ._texts_1to7t_124 b {
  color: var(--f168-text-dark);
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._reward-list_5j2ft_132 a._btn_1to7t_149.ui-button,
.event-page__wrap--subtab .bo-event-tab-panel--vip ._reward-list_5j2ft_132 button._btn_1to7t_149.ui-button {
  background: hsl(var(--main)) !important;
  border-color: hsl(var(--main)) !important;
  color: var(--f168-bg-page) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._list-tabs_zvwas_45 ._title_zvwas_66 ._title-icon_zvwas_72 {
  color: var(--f168-text-muted) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--vip ._vip-rule_1gmel_45 ._text_1gmel_45 {
  color: var(--f168-text-muted);
}

/*
 * VIP full-bleed (/home/vip) — bỏ gutter ngang rem BO (.2rem), full shell 480px.
 * Scroll: ẩn thanh cuộn (native + Perfect Scrollbar .ps__rail-*), vẫn cuộn được.
 */
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip._vip_113p5_45,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-placeholder_113p5_48,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45 ._level-item_1yv02_49 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-scroll_kkjqm_55 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  border: var(--lobby__px, 1px) solid var(--f168-border) !important;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-scroll_kkjqm_55 ._list-item_5j2ft_45,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-scroll_kkjqm_55 ._level-header_kkjqm_62 {
  width: 100%;
  box-sizing: border-box;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._list-tabs_zvwas_45 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._list-tabs_zvwas_45 ._title_zvwas_66,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-list_kkjqm_45 ._receive-amount_kkjqm_51 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-scroll_kkjqm_55,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._rule-scroll_zvwas_62,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2,
.event-page__wrap--subtab[data-active-tab="vip"] .event-tabs-row--main.event-tabs-row--scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-scroll_kkjqm_55::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._rule-scroll_zvwas_62::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="vip"] .event-tabs-row--main.event-tabs-row--scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._level-scroll_kkjqm_55::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._rule-scroll_zvwas_62::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45:hover::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45:focus-within::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2:hover::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2:focus-within::-webkit-scrollbar-thumb {
  background: transparent !important;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45:hover,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip ._vip-list_1yv02_45:focus-within,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2:hover,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-subtab-embed .bo-event-shell-v2:focus-within {
  scrollbar-color: transparent transparent !important;
}

.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip .ps__rail-x,
.event-page__wrap--subtab[data-active-tab="vip"] .bo-event-tab-panel--vip .ps__rail-y {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * SVIP sub-tab (/home/svip) — F168 light + cam như /home/vip.
 * BO subpages.css mặc định nền xanh (--f168-accent-secondary) + chữ trắng.
 */
.event-page__wrap--subtab .bo-event-subtab-embed[data-active-tab="svip"] {
  --f168-accent__toRgbString: 255, 173, 0;
  color: var(--f168-text-muted);
}

.event-page__wrap--subtab .bo-event-tab-panel--svip._placeholder_1p0uc_45 {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, hsl(var(--main)) 12%, var(--f168-bg-page)) 3.31%,
    color-mix(in srgb, hsl(var(--main)) 4%, var(--f168-bg-page)) 64.92%
  );
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._container_1p0uc_50 {
  background: transparent !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * SVIP full-bleed — bỏ gutter ngang rem BO (.2rem ≈ 12.8px/side @ shell 480px).
 * Không để vùng trống hai bên (user: không chiếm diện tích / hụt phải).
 */
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._svip-header_1p0uc_55 {
  margin-left: 0;
  margin-right: 0;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tabs-wrap_1p0uc_95 {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tabs-wrap_1p0uc_95 ._tabs_1p0uc_95 .ui-tabs__nav,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tabs-wrap_1p0uc_95 ._tabs_1p0uc_95 .ui-tabs__content,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tabs-wrap_1p0uc_95 ._tabs_1p0uc_95 .ui-swipe-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* SVIP — ẩn scrollbar (vẫn cuộn); main.css *::-webkit-scrollbar làm thanh cuộn lộ */
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-subtab-embed .bo-event-shell-v2,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--y,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--x,
.event-page__wrap--subtab[data-active-tab="svip"] .event-tabs-row--main.event-tabs-row--scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-subtab-embed .bo-event-shell-v2::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--y::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--x::-webkit-scrollbar,
.event-page__wrap--subtab[data-active-tab="svip"] .event-tabs-row--main.event-tabs-row--scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-subtab-embed .bo-event-shell-v2::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--y::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--x::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50:hover::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50:focus-within::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--y:hover::-webkit-scrollbar-thumb,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .lobby-scroll--y:focus-within::-webkit-scrollbar-thumb {
  background: transparent !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50:hover,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._container_1p0uc_50:focus-within {
  scrollbar-color: transparent transparent !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._tabs-wrap_1p0uc_95 {
  background-color: var(--f168-bg-page) !important;
  box-shadow: 0 3px 10px var(--f168-shadow-soft);
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._tabs-wrap_1p0uc_95 ._tabs_1p0uc_95 .ui-tabs__nav {
  border-bottom-color: var(--f168-border) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip .bo-event-svip-tab-nav .ui-tab._tabTitle_1p0uc_108 {
  color: var(--f168-text-dark) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip .bo-event-svip-tab-nav .ui-tab._tabTitle_1p0uc_108.ui-tab--active {
  color: hsl(var(--main)) !important;
  font-weight: 600;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip .bo-event-svip-tab-line {
  background-color: hsl(var(--main)) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._wallet-tips_1xr9q_50 {
  color: var(--f168-text-muted);
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._wallet-tips_1xr9q_50 ._btn-more_1xr9q_64,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._wallet-tips_1xr9q_50 ._wallet-paytype_1xr9q_60 {
  color: hsl(var(--main));
}

/* Bảng thưởng SVIP */
.event-page__wrap--subtab .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__thead {
  background: hsl(var(--main)) !important;
  border-color: hsl(var(--main)) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__thead-item:last-child,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__cell .ui-table__cell-item:last-child {
  border-left-color: hsl(var(--main)) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__tbody {
  border-color: hsl(var(--main)) !important;
  background: var(--f168-bg-page);
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__cell {
  border-top-color: color-mix(in srgb, hsl(var(--main)) 30%, var(--f168-border)) !important;
  background: var(--f168-bg-page) !important;
}

/*
 * Bảng SVIP — nền sáng → chữ tối. bo-event-subpages + bo-event-clone-v2 load sau custom.css
 * (mặc định --f168-bg-page / --f168-border trên cell) → cần [data-active-tab] + !important.
 */
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__cell .ui-table__cell-item,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._next-vip_aovwl_63,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__cell-item > div:has(._next-vip_aovwl_63) > span:not(._next-vip_aovwl_63),
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._integral_aovwl_146 ._text_aovwl_168,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._integral_aovwl_146 ._text_aovwl_168 > span:not(.amount):not(.reward),
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._text_aovwl_168 {
  color: var(--f168-text-dark) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._integral_aovwl_146 ._text_aovwl_168 .amount,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._integral_aovwl_146 ._text_aovwl_168 .reward,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._text_aovwl_168 .amount,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._text_aovwl_168 .reward {
  color: hsl(var(--main)) !important;
  font-weight: 600;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-progress._progress_cahpr_45 .ui-progress__text {
  color: var(--f168-text-dark) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__tbody .ui-empty__text,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__tbody .ui-retry__text,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__tbody .ui-list__loading-text {
  color: var(--f168-text-muted) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._tableList_aovwl_45 .ui-table__cell._background-gray_aovwl_45 {
  background: var(--f168-bg-surface) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._tableList_aovwl_45 ._current-svip_aovwl_49 {
  background: var(--f168-accent-14);
  color: hsl(var(--main));
}

/*
 * (1) Viền bảng — BO accent-secondary (xanh) load sau custom.css.
 * (2) Badge SVIP 7/8… — nền xanh/tím + chữ trắng ≈ invisible trên theme sáng → cam F168.
 * (3) Icon vàng — đĩa trắng trong ảnh hòa nền trắng → chip nền surface.
 */
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._svip-icon_1mh07_45 {
  padding: 0.04rem 0.1rem 0.04rem 0.04rem;
  border-radius: 0.1rem;
  background: var(--f168-bg-surface);
  box-shadow: inset 0 0 0 1px var(--f168-border);
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._tableList_aovwl_45 ._svip-icon_1mh07_45 ._svip-text_1mh07_56 {
  color: var(--f168-bg-page) !important;
  background: linear-gradient(
    90deg,
    hsl(var(--main)) 11.28%,
    color-mix(in srgb, hsl(var(--main)) 65%, var(--f168-bg-page))
  ) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip .ui-progress._progress_cahpr_45 {
  background: var(--f168-bg-surface) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._btn_1mr9i_156.ui-button {
  background: hsl(var(--main)) !important;
  color: var(--f168-bg-page) !important;
}

/* Quy tắc + empty states — chữ tối trên nền sáng */
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 .introduction-inner,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 ._introduction-content_52zuh_72,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 p,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 strong {
  color: var(--f168-text-dark) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 strong {
  color: hsl(var(--main)) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 .ui-empty__text,
.event-page__wrap--subtab .bo-event-tab-panel--svip .public-introduction._public-introduction_52zuh_45 .ui-retry__text,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 .ui-empty__text,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 .ui-empty__text,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 .ui-retry__text,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 .ui-retry__text {
  color: var(--f168-text-muted) !important;
}

/* Lịch sử nạp / kỷ lục điểm */
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._recordContainer_1dfw8_68 ._recordHeader_1dfw8_73 ._recordTotal_1dfw8_114,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._recordContainer_1vfrt_68 ._recordHeader_1vfrt_73 ._recordTotal_1vfrt_114 {
  color: var(--f168-text-muted) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._recordContainer_1dfw8_68 ._recordHeader_1dfw8_73 ._recordCount_1dfw8_119,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._recordContainer_1vfrt_68 ._recordHeader_1vfrt_73 ._recordCount_1vfrt_114 {
  color: hsl(var(--main)) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1dfw8_68 ._recordHeader_1dfw8_73 ._recordSelect_1dfw8_79 .ui-select-single,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1dfw8_68 ._recordHeader_1dfw8_73 ._recordSelect_1dfw8_79 .lobby-date-select__block,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1vfrt_68 ._recordHeader_1vfrt_73 ._recordSelect_1vfrt_79 .ui-select-single,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1vfrt_68 ._recordHeader_1vfrt_73 ._recordSelect_1vfrt_79 .lobby-date-select__block {
  background: var(--f168-bg-surface) !important;
  border-color: var(--f168-border) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1dfw8_68 ._recordHeader_1dfw8_73 ._recordSelect_1dfw8_79 .ui-select-single__content,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1dfw8_68 ._recordHeader_1dfw8_73 ._recordSelect_1dfw8_79 .lobby-date-select__block,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1vfrt_68 ._recordHeader_1vfrt_73 ._recordSelect_1vfrt_79 .ui-select-single__content,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._recordContainer_1vfrt_68 ._recordHeader_1vfrt_73 ._recordSelect_1vfrt_79 .lobby-date-select__block {
  color: var(--f168-text-muted) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 ._record-item_1dfw8_147 ._info-name_1dfw8_198 ._name_1dfw8_205,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 ._record-item_1dfw8_147 ._info-name_1dfw8_198 ._reward_1dfw8_218,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 ._record-item_1vfrt_147 ._item-label_1vfrt_183 ._item-name-box_1vfrt_196,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 ._record-item_1vfrt_147 ._item-label_1vfrt_183 ._item-name-box_1vfrt_196 ._item-name-type_1vfrt_206,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 ._record-item_1vfrt_147 ._item-value_1vfrt_222 {
  color: var(--f168-text-dark) !important;
}

.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 ._record-item_1dfw8_147 ._info-date_1dfw8_225 ._datetime_1dfw8_231,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 ._record-item_1dfw8_147 ._info-date_1dfw8_225 ._orderNo_1dfw8_237,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 ._record-item_1vfrt_147 ._item-label_1vfrt_183 ._item-name-box_1vfrt_196 ._item-name-mark_1vfrt_211,
.event-page__wrap--subtab[data-active-tab="svip"] .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 ._record-item_1vfrt_147 ._item-label_1vfrt_183 ._item-time_1vfrt_216 {
  color: var(--f168-text-muted) !important;
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 .ui-virtual-list__item:nth-child(2n-1) .record-item,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 .ui-virtual-list__item:nth-child(2n-1) .record-item {
  background: var(--f168-bg-surface);
}

.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1dfw8_126 ._recordMain_1dfw8_129 .showMore,
.event-page__wrap--subtab .bo-event-tab-panel--svip ._placeholder_1vfrt_126 ._recordMain_1vfrt_129 .showMore {
  color: hsl(var(--main));
}

/* Lucky Wheel BO parity guards */
[data-lucky-wheel-root] {
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  --lw-ref-primary: var(--f168-lw-silver);
  --lw-ref-text: var(--f168-lw-silver);
}

[data-lucky-wheel-root]._main-bg-silver_k7uae_157 {
  --lw-ref-primary: var(--f168-lw-silver);
  --lw-ref-text: var(--f168-lw-silver);
}

[data-lucky-wheel-root]._main-bg-gold_k7uae_161 {
  --lw-ref-primary: var(--f168-lw-gold);
  --lw-ref-text: var(--f168-lw-gold);
}

[data-lucky-wheel-root]._main-bg-diamond_k7uae_165 {
  --lw-ref-primary: var(--f168-lw-diamond);
  --lw-ref-text: var(--f168-lw-diamond);
}

/* Tab/nút tier → bo-event-lucky-wheel.css (load sau subpages) */

[data-lucky-wheel-root]._main-bg-silver_k7uae_157 ._top-text_k7uae_53,
[data-lucky-wheel-root]._main-bg-silver_k7uae_157 ._top-text_k7uae_53 span {
  color: var(--f168-lw-silver) !important;
}

[data-lucky-wheel-root]._main-bg-gold_k7uae_161 ._top-text_k7uae_53,
[data-lucky-wheel-root]._main-bg-gold_k7uae_161 ._top-text_k7uae_53 span {
  color: var(--f168-lw-gold) !important;
}

[data-lucky-wheel-root]._main-bg-diamond_k7uae_165 ._top-text_k7uae_53,
[data-lucky-wheel-root]._main-bg-diamond_k7uae_165 ._top-text_k7uae_53 span {
  color: var(--f168-lw-diamond) !important;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184 ._center_qdc1y_198,
[data-lucky-wheel-root] ._wheel-item_qdc1y_184 ._text_qdc1y_205 {
  color: var(--f168-bg-page) !important;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-bottom: 0.36rem;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184 ._center_qdc1y_198 {
  flex: 0 0 auto;
  width: 100%;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184 ._lw-segment-prize-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.16rem;
  flex: 0 0 auto;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184 ._lw-segment-prize-meta ._icon_qdc1y_216 {
  display: block;
  width: 0.52rem;
  height: 0.52rem;
  margin-top: 0;
  flex-shrink: 0;
  object-fit: contain;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184 ._lw-reward-bonus-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.58rem;
  height: 0.3rem;
  margin-top: 0.14rem;
  margin-bottom: 0.1rem;
  padding: 0 0.12rem;
  border-radius: 0.24rem;
  border: 1px solid rgba(255, 214, 102, 0.85);
  background: linear-gradient(180deg, rgba(255, 198, 64, 0.95) 0%, rgba(230, 126, 34, 0.92) 100%);
  box-shadow:
    0 0.04rem 0.1rem rgba(0, 0, 0, 0.35),
    0 0 0.1rem rgba(255, 220, 120, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-size: 0.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--f168-bg-inverse-surface);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
  transform: translateZ(0);
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184._wheel-scale_qdc1y_221 {
  padding-bottom: 0.32rem;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184._wheel-scale_qdc1y_221 ._lw-reward-bonus-label {
  margin-top: 0.12rem;
  margin-bottom: 0.08rem;
  min-width: 0.52rem;
  height: 0.28rem;
  font-size: 0.18rem;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184._wheel-scale_qdc1y_221 ._lw-segment-prize-meta ._icon_qdc1y_216 {
  width: 0.48rem;
  height: 0.48rem;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184._wheel-scale-12_qdc1y_228 {
  padding-bottom: 0.28rem;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184._wheel-scale-12_qdc1y_228 ._lw-reward-bonus-label {
  margin-top: 0.1rem;
  margin-bottom: 0.06rem;
  min-width: 0.48rem;
  height: 0.26rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
}

[data-lucky-wheel-root] ._wheel-item_qdc1y_184._wheel-scale-12_qdc1y_228 ._lw-segment-prize-meta ._icon_qdc1y_216 {
  width: 0.42rem;
  height: 0.42rem;
}

[data-lucky-wheel-root] ._turntable-tabs-wrapper_qdc1y_62 ._turntable-tab_qdc1y_62 {
  width: 2.15rem;
}

[data-lucky-wheel-root] ._turntable-tabs-wrapper_qdc1y_62 ._btn-title_qdc1y_85 {
  font-size: 0.2rem;
}

[data-lucky-wheel-root] ._wheel-split_qdc1y_175,
[data-lucky-wheel-root] ._wheel-container-bg_qdc1y_161,
[data-lucky-wheel-root] ._wheel-pointer_qdc1y_284,
[data-lucky-wheel-root] ._light_qdc1y_294 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

[data-lucky-wheel-root] ._wheel-split_qdc1y_175 {
  transform-origin: 50% 50%;
  will-change: transform;
}

[data-lucky-wheel-root] ._wheel-btn_qdc1y_238 {
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0;
  cursor: pointer;
  font-family: "Microsoft YaHei Lobby", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}

[data-lucky-wheel-root] ._turntable-btns_qdc1y_376 ._btn-text_qdc1y_107 {
  user-select: none;
}

[data-lucky-wheel-root] ._turntable-btns_qdc1y_376 ._btn-check_qdc1y_397 img {
  width: 0.16rem;
  height: 0.16rem;
  display: block;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 [data-lw-bottom-tabs].ui-tabs__nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tab {
  border: 0;
  background: transparent;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tab--active {
  color: var(--f168-text-muted);
  font-weight: 600;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tabs__line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.06rem;
  background-color: var(--lw-ref-primary);
  transition: transform 0.3s ease, width 0.3s ease;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tab__panel[hidden] {
  display: none !important;
}

[data-lucky-wheel-root] ._base-info-container_sawlv_56 ._loading_sawlv_76 {
  color: var(--f168-text-muted);
}

[data-lucky-wheel-root] ._base-info-container_sawlv_56 ._loading_sawlv_76.is-loading {
  animation: lw-base-info-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes lw-base-info-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.lw-bo-intro-overlay.lw-bo-dialog-overlay .ui-dialog__main {
  width: 6.9rem;
  max-width: calc(100% - 0.4rem);
}

.lw-bo-intro-overlay .ui-dialog__content {
  max-height: calc(var(--lobby__screen-height, 100vh) - 3.2rem);
  overflow-x: visible;
  overflow-y: auto;
  padding: 0.28rem 0.36rem 0.36rem 0.34rem;
  text-align: left;
}

.lw-bo-intro-overlay .lw-intro-body {
  color: var(--f168-text-muted);
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1.55;
  overflow: visible;
}

.lw-bo-intro-overlay .lw-intro-section {
  margin-bottom: 0.28rem;
  overflow: visible;
}

.lw-bo-intro-overlay .lw-intro-section:last-child {
  margin-bottom: 0;
}

/* Ribbon h4 — cùng mẫu event detail (vd. "Các bước" /event/detail/38) */
.lw-bo-intro-overlay .lw-intro-body h4 {
  --event-detail-title-bg: hsl(var(--main));
  --event-detail-title-text: var(--f168-bg-page);
  position: relative;
  display: inline-block;
  left: -17px;
  max-width: calc(100% - 4px);
  margin: 8px 0 10px;
  padding: 2px 12px 2px 18px;
  min-height: 25px;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 600;
  color: var(--event-detail-title-text) !important;
  background-color: var(--event-detail-title-bg) !important;
  border-top-left-radius: 6px;
  overflow: visible;
  word-break: break-word;
  z-index: 1;
}

.lw-bo-intro-overlay .lw-intro-body h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 5px;
  height: 10px;
  background-color: var(--event-detail-title-bg);
  border-bottom-left-radius: 6px;
}

.lw-bo-intro-overlay .lw-intro-body h4::after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 19px solid var(--event-detail-title-bg);
}

.lw-bo-intro-overlay .lw-intro-text {
  margin: 0;
  color: var(--f168-text-muted);
}

.lw-bo-intro-overlay .lw-intro-text p {
  margin: 0 0 0.12rem;
}

.lw-bo-intro-overlay .lw-intro-text p:last-child {
  margin-bottom: 0;
}

.lw-bo-intro-overlay .ui-dialog__footer {
  display: none;
}

/* Lucky wheel — BO ui-dialog (Mẹo / Thông báo) — tone F168 / Asia Gaming */
.lw-bo-dialog-overlay {
  --ui-overlay-z-index: 10050;
  --ui-overlay-background: rgba(0, 0, 0, 0.55);
  position: fixed;
  inset: 0;
  z-index: var(--ui-overlay-z-index);
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  background-color: var(--ui-overlay-background);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  touch-action: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lw-bo-dialog-overlay[data-hidden="0"] {
  opacity: 1;
  visibility: visible;
}

.lw-bo-dialog-overlay .ui-popup {
  position: relative;
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100% - 0.32rem);
  margin: 0 auto;
  max-height: 100%;
  box-sizing: border-box;
  transform-origin: center center;
  overflow: visible;
}

.lw-bo-dialog-overlay .ui-dialog {
  width: 6.9rem;
  max-width: calc(100% - 0.32rem);
  font-size: 0.16rem;
  transform-origin: center center;
  background-color: transparent;
  overflow-y: visible;
  max-height: 100vh;
}

.lw-bo-dialog-overlay .ui-dialog__main {
  width: 100%;
  background: var(--f168-bg-surface);
  border-radius: 0.2rem;
  box-shadow: 0 0.12rem 0.4rem rgba(0, 0, 0, 0.12);
  backface-visibility: hidden;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lw-bo-dialog-overlay .ui-dialog__header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.3rem;
  font-weight: 400;
  color: var(--f168-text-dark);
  padding: 0.2rem 0.3rem 0.3rem;
  box-sizing: border-box;
  line-height: 1.5;
}

.lw-bo-dialog-overlay .ui-dialog__header__icon {
  font-size: 0.32rem;
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.1rem;
  line-height: 1;
  position: relative;
  top: -0.02rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.lw-bo-dialog-overlay .ui-dialog__header__icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.lw-bo-dialog-overlay .ui-dialog__header--important__icon,
.lw-bo-dialog-overlay .ui-dialog__header--important--title {
  color: hsl(var(--main));
}

.lw-bo-dialog-overlay .ui-dialog__header--success__icon {
  color: var(--f168-bg-page);
  border-radius: 100%;
  background-color: hsl(var(--main));
}

.lw-bo-dialog-overlay .ui-dialog__header--success--title {
  color: var(--f168-text-dark);
  font-weight: 600;
}

.lw-bo-dialog-overlay .ui-dialog__header--warning__icon {
  color: var(--f168-bg-page);
  border-radius: 100%;
  background-color: hsl(var(--main));
  padding: 0.04rem;
  box-sizing: border-box;
}

.lw-bo-dialog-overlay .ui-dialog__header--warning--title {
  color: var(--f168-text-dark);
  font-weight: 600;
}

.lw-bo-dialog-overlay .ui-dialog__content {
  flex: 1;
  padding: 0 0.3rem 0.2rem;
  box-sizing: border-box;
  min-height: 0.92rem;
  color: var(--f168-text-dark);
}

.lw-bo-dialog-overlay .ui-dialog__message {
  color: var(--f168-text-muted);
  flex: 1;
  overflow-y: auto;
  font-size: 0.22rem;
  line-height: 1.64;
  white-space: pre-wrap;
  text-align: center;
  word-wrap: break-word;
}

.lw-bo-dialog-overlay .ui-dialog__message--error {
  font-weight: 600;
  color: var(--f168-text-dark);
}

.lw-bo-dialog-overlay .ui-dialog__footer {
  display: flex;
  overflow: hidden;
  user-select: none;
  padding: 0.2rem 0.3rem 0.3rem;
  box-sizing: border-box;
  gap: 0.2rem;
  border-top: thin solid var(--f168-border);
}

.lw-bo-dialog-overlay .ui-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 0.7rem;
  padding: 0;
  font-size: 0.25rem !important;
  line-height: 1.2;
  text-align: center;
  border-radius: 0.14rem;
  cursor: pointer;
  border: thin solid transparent;
  transition: opacity 0.2s;
  appearance: none;
  font-family: inherit;
}

.lw-bo-dialog-overlay .ui-button--primary {
  color: var(--f168-text-dark);
  background: hsl(var(--main));
  border-color: hsl(var(--main));
}

.lw-bo-dialog-overlay .ui-button--primary:hover {
  opacity: 0.92;
}

.lw-bo-dialog-overlay .ui-button--large,
.lw-bo-dialog-overlay .ui-dialog__confirm {
  width: 100%;
  height: 0.7rem;
  flex: 1;
}

.lw-bo-verify-overlay .lw-bo-verify-content {
  text-align: left;
}

.lw-bo-verify-overlay .lw-bo-verify-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lw-bo-verify-overlay .lw-bo-verify-step {
  margin: 0 0 0.24rem;
}

.lw-bo-verify-overlay .lw-bo-verify-step:last-child {
  margin-bottom: 0;
}

.lw-bo-verify-overlay .lw-bo-verify-step__title {
  margin: 0 0 0.1rem;
  font-size: 0.22rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--f168-text-dark);
}

.lw-bo-verify-overlay .lw-bo-verify-step__line {
  margin: 0;
  font-size: 0.22rem;
  line-height: 1.5;
  color: var(--f168-text-dark);
}

.lw-bo-verify-overlay .lw-bo-verify-step__label {
  font-weight: 600;
}

.lw-bo-verify-overlay .lw-bo-verify-step__num {
  text-decoration: underline;
  text-underline-offset: 0.06em;
}

.lw-bo-verify-overlay .lw-bo-verify-telegram {
  display: inline;
  margin-left: 0.06rem;
  white-space: nowrap;
}

.lw-bo-verify-overlay .lw-bo-verify-telegram a {
  color: hsl(var(--main));
  font-weight: 600;
  text-decoration: none;
}

.lw-bo-verify-overlay .lw-bo-verify-telegram a:hover {
  text-decoration: underline;
}

.lw-bo-verify-overlay .lw-bo-verify-step--input .lw-bo-verify-input {
  margin-top: 0.08rem;
}

.lw-bo-verify-overlay .lw-bo-verify-input {
  font-size: 15px !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.16rem 0.2rem;
  font-size: 0.24rem;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-align: center;
  border: thin solid var(--f168-border);
  border-radius: 0.12rem;
  background: var(--f168-bg-surface);
  color: var(--f168-text-dark);
}

.lw-bo-verify-overlay .lw-bo-verify-error {
  margin: 0.12rem 0 0;
  font-size: 0.2rem;
  line-height: 1.4;
  color: var(--f168-status-error);
  text-align: center;
}

/* Popup cấp điểm may mắn — px cố định, không theo rem html event subpage */
.lucky-wheel-popup-host .lucky-wheel-popup-card [data-lw-cta].btn {
  font-size: 14px !important;
  padding: 10px 14px !important;
  margin-top: 12px !important;
  line-height: 1.35 !important;
  min-height: 42px;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}

.lucky-wheel-popup-host .lucky-wheel-popup-close {
  font-size: 1.5rem !important;
  line-height: 1;
  width: auto;
  height: auto;
  padding: 0;
}

.lw-bo-dialog-overlay .ui-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.lw-bo-dialog-overlay .ui-button__text {
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
}

.lw-bo-dialog-overlay .ui-dialog__confirm-badge {
  width: 100%;
  height: 100%;
}

.lw-bo-dialog-overlay .ui-dialog-close-box {
  position: relative;
  width: 100%;
}

.lw-bo-dialog-overlay .ui-dialog-close-box > div {
  width: 100%;
  position: relative;
  padding-top: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lw-bo-dialog-overlay .ui-dialog-close-box__icon {
  font-size: 0.6rem;
  color: var(--f168-bg-page);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.lw-bo-dialog-overlay .ui-dialog-close-box__icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.bo-event-clone-v2[data-active-tab="wheel"] .bo-event-tab-panel--wheel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bo-event-clone-v2[data-active-tab="wheel"] .bo-event-tab-panel--wheel ._scroll-box_k7uae_50 {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
}

.bo-event-clone-v2[data-active-tab="wheel"] .bo-event-tab-panel--wheel ._scroll-box_k7uae_50::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Lucky Wheel — nền stage LLwin: xyzp_bg_1 trên wrapper; màu tier → bo-event-lucky-wheel.css */
[data-lucky-wheel-root].bo-event-tab-panel--wheel._placeholder_k7uae_45:not(._main-bg-silver_k7uae_157):not(._main-bg-gold_k7uae_161):not(._main-bg-diamond_k7uae_165) {
  background: transparent !important;
}

[data-lucky-wheel-root] ._lucky-wheel-wrapper_k7uae_150 {
  position: relative;
  z-index: 0;
  width: 100%;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

[data-lucky-wheel-root] ._turntable-tab_qdc1y_62:not(._active_qdc1y_128) ._btn-val_qdc1y_98 ._btn-text_qdc1y_107 {
  color: var(--f168-text-dark) !important;
}

[data-lucky-wheel-root] ._turntable-tab_qdc1y_62._active_qdc1y_128 ._btn-val_qdc1y_98,
[data-lucky-wheel-root] ._turntable-tab_qdc1y_62._active_qdc1y_128 ._btn-val_qdc1y_98 ._btn-text_qdc1y_107 {
  color: var(--f168-bg-page) !important;
}

[data-lucky-wheel-root] ._top-main_k7uae_153 {
  padding: 0 0.2rem 0.01rem;
  border-bottom: none;
}

[data-lucky-wheel-root] ._top-main_k7uae_153 ._luckyVal_sawlv_70 {
  color: var(--f168-text-muted) !important;
  font-weight: 600;
  font-size: 0.24rem !important;
  line-height: 0.5rem !important;
}

[data-lucky-wheel-root] ._top-main_k7uae_153 ._base-info-container_sawlv_56 ._loading_sawlv_76 {
  color: var(--f168-text-muted) !important;
}

[data-lucky-wheel-root] ._top-main_k7uae_153 ._subInfo_sawlv_57 {
  color: var(--lw-ref-text);
}

[data-lucky-wheel-root] ._top-main_k7uae_153 ._subInfo_sawlv_57 ._desc_sawlv_124,
[data-lucky-wheel-root] ._top-main_k7uae_153 ._subInfo_sawlv_57 ._desc_sawlv_124 div {
  color: var(--f168-text-muted) !important;
  font-size: 0.22rem !important;
  line-height: 0.36rem !important;
}

[data-lucky-wheel-root] ._top-main_k7uae_153 ._subInfo_sawlv_57 ._desc_sawlv_124 span {
  color: var(--lw-ref-text) !important;
  font-weight: 600;
}

[data-lucky-wheel-root] ._top-main_k7uae_153 ._subInfo_sawlv_57 ._tooltip_sawlv_111 {
  background-color: var(--lw-ref-primary) !important;
  color: var(--f168-bg-page) !important;
  font-weight: 600;
  box-shadow: none;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 {
  margin: 0 0.2rem 0.2rem !important;
  padding: 0 0 0.01rem !important;
  border-radius: 0.14rem !important;
  overflow: hidden;
  background: var(--f168-bg-surface) !important;
  border: none !important;
  box-shadow: 0 0.03rem 0.07rem 0 var(--f168-shadow-soft) !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._tabs_k7uae_94 .ui-tabs__nav {
  background: var(--f168-bg-surface) !important;
  border-bottom: thin solid var(--f168-border) !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tab {
  color: var(--f168-text-dark) !important;
  font-weight: 400;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tab--active {
  color: var(--lw-ref-text) !important;
  font-weight: 600 !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tabs__line {
  height: 0.03rem !important;
  background-color: var(--lw-ref-primary) !important;
  border-radius: 0;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-tabs__content {
  background: var(--f168-bg-surface);
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._recordHeader_168uf_53,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._recordHeader_sqsg8_53 {
  background: var(--f168-bg-surface);
  border-bottom: none;
  color: var(--f168-text-muted);
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._recordSum_168uf_111,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._recordSum_sqsg8_111 {
  color: var(--f168-text-muted) !important;
  font-weight: 400;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._recordSum_168uf_111 span,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._recordSum_sqsg8_111 ._item-value_sqsg8_122 span {
  color: var(--lw-ref-text) !important;
  font-weight: 600 !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._record-item_168uf_139 {
  background: var(--f168-bg-page) !important;
  border: 1px solid var(--f168-border) !important;
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._record-item_168uf_139 ._turntableTitle_168uf_187 {
  color: var(--f168-text-dark) !important;
  font-weight: 600;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._record-item_168uf_139 ._datetime_168uf_207,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._record-item_168uf_139 ._row_168uf_178 {
  color: var(--f168-text-muted) !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._record-item_168uf_139 ._rewardName_168uf_197 {
  color: var(--lw-ref-text) !important;
  font-weight: 600 !important;
}

/* Badge nhân thưởng x10 / x50 — nền đỏ nổi bật, chữ trắng (LLwin ref) */
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._record-item_168uf_139 ._info-text_168uf_149,
[data-lucky-wheel-root] ._placeholder_168uf_121 ._recordMain_168uf_125 ._record-item_168uf_139 ._info-text_168uf_149 {
  background-color: var(--f168-status-error) !important;
  color: var(--f168-bg-page) !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  box-shadow: 0 0.02rem 0.04rem rgba(255, 1, 1, 0.35);
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._listItem_sqsg8_155 {
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-border);
  border-radius: 0.1rem;
  margin-bottom: 0.1rem;
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._listItem_sqsg8_155 ._item-name_sqsg8_176 {
  color: var(--f168-text-dark);
  font-weight: 500;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._listItem_sqsg8_155 ._item-time_sqsg8_186,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._listItem_sqsg8_155 ._item-time-text_sqsg8_189 {
  color: var(--f168-text-muted);
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._listItem_sqsg8_155 ._lucky-num_sqsg8_214 {
  color: var(--lw-ref-text);
  font-weight: 600;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .bo-lw-date-filter__trigger,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._date-select_u0k7c_45 ._date-block_u0k7c_49 {
  background: var(--f168-bg-page) !important;
  border-color: var(--f168-border) !important;
  color: var(--f168-text-muted) !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .bo-lw-date-filter.is-open .bo-lw-date-filter__trigger,
[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .bo-lw-date-filter.is-open ._label_u0k7c_65 {
  border-color: var(--lw-ref-primary) !important;
  color: var(--lw-ref-text) !important;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 ._showMore_onrjk_45.showMore {
  color: var(--lw-ref-text) !important;
  font-weight: 600;
}

[data-lucky-wheel-root] ._tabs-wrap_k7uae_94 .ui-empty__text {
  color: var(--f168-text-muted) !important;
}

/* F168 embed (/home/lucky-wheel): flex chain tới panel wheel (thêm wrapper vs BO thuần 789k) */
.event-page__wrap--subtab .bo-event-subtab-embed[data-active-tab="wheel"] [data-event-subtab-root] {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.event-extra-button a.event-btn-received {
  display: block;
  text-decoration: none;
  color: var(--f168-text-accent);
}

/* 主标签：单行横向滚动 */
.event-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.event-tabs-row--main.event-tabs-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0.5rem;
  gap: 20px;
}

.event-tabs-row--main.event-tabs-row--scroll::-webkit-scrollbar {
  display: none;
}

/* 主标签：激活态的橙色渐变 (F168)，线条/下划线样式 */
.event-tab {
  padding: 8px 2px;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--f168-text-dark);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
  position: relative;
}

.event-tabs-row--main .event-tab {
  padding: 0 0.1rem;
  height: 3.3rem;
  line-height: 2.25rem;
  color: var(--f168-text-muted);
}

.event-tabs-row--main .event-tab:hover {
  color: var(--f168-text-dark);
}

.event-tabs-row--main .event-tab.active {
  color: var(--f168-accent);
  font-weight: 400;
  border-bottom: 2px solid var(--f168-accent);
  margin-bottom: -1px;
}

/* 子标签 (侧边栏) 依然应用边框 + 渐变 */
.event-tab--sub {
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-border);
  border-radius: 6px;
}

.event-tab:hover {
  background: transparent;
}

.event-tab--sub:hover {
  background: var(--f168-bg-surface);
  border-color: var(--f168-accent-secondary);
}

.event-tab.active {
  background: transparent;
  border: none;
}

.event-tab--sub.active {
  background: linear-gradient(180deg, var(--f168-accent-secondary) 0%, var(--f168-accent-secondary) 100%);
  border-color: var(--f168-text-accent);
  color: var(--f168-text-white);
  font-weight: 600;
  border-radius: 0.5rem;
}

/* 主区：左侧栏 + 右主区 */
.event-body {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 0px;
  padding: 0px;
}

/* 侧栏：左侧垂直标签 – F168 样式 (1_PromotionChunk / sidebar-common-tab) */
.event-sidebar {
  padding: 5px 5px 10px 10px; 
  flex-shrink: 0;
  width: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 58px;
  align-self: flex-start;
}

.event-sidebar-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 8px;
}

.event-tabs-row--sub {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* 标签包装器：1.5rem x 0.7rem (F168 _sidebar-common-tab-wrapper) */
.event-sidebar-tab-wrapper {
  width: 90px;
  height: 42px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.event-sidebar-tab-wrapper:last-of-type {
  margin-bottom: 12px;
}

.event-tab--sub {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: block;
}

/* 标签项：F168 _sidebar-common-tab-item – 效果来自 1_PromotionChunk (阴影 .03rem .07rem) */
.event-sidebar-tab-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 6px 0 3px;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--f168-bg-page);
  background-size: 100% 100%;
  color: var(--f168-text-muted);
  font-size: 13px;
  line-height: 1.2;
  word-break: break-word;
  box-shadow: 0 3px 7px 0 var(--f168-shadow-soft);
  transition: background .2s, color .2s, box-shadow .2s;
}

.event-sidebar-tab-item:hover {
  background-color: var(--f168-bg-surface);
  box-shadow: 0 3px 7px 0 var(--f168-shadow-soft);
}

/* 激活态: F168 _sidebar-common-tab-item._is-active – 活动阴影 + 左导航激活颜色 */
.event-sidebar-tab-item.is-active {
  background: var(--f168-accent);
  color: var(--f168-text-white);
  font-weight: 600;
  box-shadow: 0 3px 7px 0 var(--f168-accent-35t);
}

/* Icon box: F168 _sidebar-common-tab-item-icon-box – .48rem x .36rem, flex center */
.event-sidebar-tab-item-icon-box {
  width: 28px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
}

.event-sidebar-tab-item-icon-box .event-sidebar-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.event-sidebar-tab-item.is-active .event-sidebar-icon {
  color: var(--f168-text-white);
}

.event-sidebar-tab-item.is-active .event-sidebar-tab-name {
  color: var(--f168-text-white);
}

/* 管理员分类图标：普通 vs 活跃 (2张图，根据选项卡状态切换) */
.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon {
  width: 100%;
  height: 100%;
  max-width: 28px;
  max-height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--normal {
  display: block;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--active {
  display: none;
}

.event-sidebar-tab-item.is-active .event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--normal {
  display: none;
}

.event-sidebar-tab-item.is-active .event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--active {
  display: block;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon-placeholder .event-sidebar-icon {
  width: 1em;
  height: 1em;
}

/* 标签名：F168 _sidebar-common-tab-name – 居中，最多两行，紧凑字体 */
.event-sidebar-tab-name {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  font-size: 11px;
  line-height: 1.2;
  word-break: break-word;
  font-weight: 400;
}

/* 侧拉菜单下方的两个按钮：已领取 + 刷新 */
.event-extra-button {
  width: 80px;
  margin: 0 auto 12px;
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

/* .event-extra-button 里的按钮：橙色字，橙色边框 */
.event-extra-button .event-btn-received,
.event-extra-button .event-btn-refresh {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--f168-border-v2);
  color: var(--f168-text-accent);
  background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}

.event-extra-button .event-btn-received .ui-button__text {
  color: var(--f168-text-accent);
}

.event-extra-button .event-btn-received .ui-button__content,
.event-extra-button .event-btn-refresh .event-btn-refresh-content,
.event-extra-button .event-btn-refresh .event-btn-refresh-text,
.event-extra-button .event-btn-refresh .event-btn-refresh-icon,
.event-extra-button .event-btn-refresh .event-btn-refresh-icon svg {
  color: inherit;
  fill: currentColor;
}

.event-extra-button .event-btn-received:hover,
.event-extra-button .event-btn-refresh:hover {
  background: rgba(230, 126, 34, 0.1);
  color: var(--f168-text-accent);
  border-color: var(--f168-text-accent);
}

/* 已领取按钮 – 结构遵循 ui-button__content + ui-button__text (F168样式) */
.event-btn-received .ui-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.event-btn-received .ui-button__text {
  color: var(--f168-text-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.event-btn-refresh-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.event-btn-refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.event-btn-refresh-icon svg {
  width: 1em;
  height: 1em;
}

.event-btn-refresh-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* 主区块：优惠列表，垂直滚动 */
.event-main {
  flex: 1; 
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 5px 10px 5px 5px;
  background: var(--f168-bg-page);
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.event-card {
  position: relative;
  background: var(--f168-bg-page);



  flex-shrink: 0;

}

/* 热门丝带（左上角，红色） */
.event-card__hot {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--f168-bg-page);
  background: linear-gradient(135deg, var(--f168-status-error) 0%, var(--f168-status-error) 100%);
  border-radius: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.event-card__inner {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-top: 4px;
}

.event-card__thumb {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.event-card__placeholder {
  display: block;
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--f168-bg-surface) 0%, var(--f168-bg-page) 100%);
  border: 1px dashed var(--f168-accent-secondary);
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  text-align: center;
}

.event-card__code {
  font-size: var(--text-xs);
  color: var(--f168-text-muted);
  margin: 0 0 6px 0;
}

.event-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--f168-text-dark);
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.event-card__desc {
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  margin: 0;
  line-height: 1.4;
}

.event-card__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.event-card--clickable {
  cursor: pointer;
}

.event-card--clickable .event-card__inner {
  display: block;
}

.event-card--link .event-card__inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.event-list__empty {
  padding: 24px 16px;
  text-align: center;
  margin: 0;
}

/* 优惠详情弹窗 */
.event-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.event-modal[hidden] {
  display: none;
}

.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.event-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: var(--f168-bg-page);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.event-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--f168-bg-page);
  flex-shrink: 0;
}

.event-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--f168-bg-inverse);
  padding-right: 36px;
}

.event-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 6px;
}

.event-modal__close:hover {
  background: var(--f168-bg-page);
  color: var(--f168-text-dark);
}

.event-modal__close::before {
  content: "\00d7";
}

.event-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--f168-text-dark);
}

.event-modal__body img {
  max-width: 100%;
  height: auto;
}

/* 活动详情页面：优惠政策详情 */
.eventdetail-page .event-detail-title-header {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--f168-bg-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 44px;
}

.eventdetail-page .event-header__section--center .event-tabs-wrap {
  display: flex;
  
  
  height: 100%;
}

.eventdetail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.eventdetail-main {
  flex: 1;
  padding: 16px 12px 24px;
  max-width: var(--f168-shell-width, 480px);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.eventdetail-page .eventdetail-main {
  background-color: var(--f168-bg-page);
}

.eventdetail-page .eventdetail-article {
  background-color: var(--f168-bg-page);
  border-radius: 10px;
  box-shadow: 0 3px 7px 0 var(--f168-shadow-soft);
  overflow: visible;
}

.eventdetail-article__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--f168-bg-inverse);
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.eventdetail-article__thumb {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.eventdetail-article__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.eventdetail-article__body {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--f168-text-muted);
  padding: 14px 12px 16px;
  overflow-x: visible;
}

/* 仅宽表格区域横向滚动，避免整段活动正文左右滑动 */
.eventdetail-article__body {
  --eventdetail-table-shell-bg: var(--f168-bg-surface);
  --eventdetail-table-head-bg: var(--f168-accent);
  --eventdetail-table-cell-bg: var(--f168-bg-page);
  --eventdetail-table-cell-text: var(--f168-text-dark);
  --eventdetail-table-cell-shadow:
    0 3px 7px color-mix(in srgb, var(--f168-lw-silver) 14%, transparent),
    0 0 3px color-mix(in srgb, var(--f168-lw-silver) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--f168-bg-page) 95%, transparent);
  --eventdetail-table-gap: 3px;
  --eventdetail-table-cell-radius: 8px;
}

.eventdetail-article__body .eventdetail-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 10px 0 16px;
  padding: clamp(6px, 1.6vw, 10px);
  background: var(--eventdetail-table-shell-bg);
  border-radius: 10px;
  border: none;
  box-shadow: none;
}

.eventdetail-article__body .eventdetail-table-scroll table {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.eventdetail-article__body img,
.eventdetail-article__rich img {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35em;
}

/* Banner full-width: p chỉ có ảnh, alt không phải icon/arrow inline (:only-child bỏ qua text node) */
.eventdetail-article__body p > img:only-child:not([alt*="icon" i]):not([alt*="arrow" i]),
.eventdetail-article__rich p > img:only-child:not([alt*="icon" i]):not([alt*="arrow" i]) {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: initial;
  display: block;
  margin-right: 0;
}

/* ul/ol trong rich — đồng bộ với body */
.eventdetail-article__rich ul,
.eventdetail-article__rich ol {
  margin: 12px 0 16px;
  padding-left: 1.5em;
  list-style-position: outside;
  color: var(--f168-text-muted);
}

.eventdetail-article__rich ul {
  list-style-type: disc;
}

.eventdetail-article__rich ol {
  list-style-type: decimal;
}

.eventdetail-article__rich li {
  margin: 0.4em 0;
  padding-left: 0.2em;
  line-height: 1.55;
  word-break: break-word;
}

.eventdetail-article__rich li::marker {
  color: var(--f168-accent-secondary);
  font-weight: 600;
}

/* Event detail: bảng tile/card — clone 12llwin table-shell */
.eventdetail-article__body table {
  width: 100%;
  min-width: 0;
  margin: 10px 0 16px;

  border-collapse: separate;
  border-spacing: var(--eventdetail-table-gap);
  font-size: clamp(0.72rem, 2.6vw, 0.82rem);
  line-height: 1.35;
  color: var(--eventdetail-table-cell-text);
  background: var(--eventdetail-table-shell-bg);
  border: none;
  border-radius: 10px;
  overflow: visible;
  box-shadow: none;
  table-layout: fixed;
}

.eventdetail-article__body .eventdetail-table-scroll > table {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.eventdetail-article__body caption {
  caption-side: top;
  padding: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--f168-text-muted);
  text-align: left;
}

.eventdetail-article__body thead th {
  background: var(--eventdetail-table-head-bg);
  color: var(--f168-text-white);
  font-weight: 700;
  text-align: center;
  padding: clamp(7px, 2vw, 10px) clamp(6px, 1.8vw, 9px);
  border: none;
  border-radius: var(--eventdetail-table-cell-radius);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.eventdetail-article__body tbody th {
  background: var(--eventdetail-table-cell-bg);
  color: var(--eventdetail-table-cell-text);
  font-weight: 700;
  text-align: center;
  padding: clamp(6px, 1.8vw, 9px);
  border: none;
  border-radius: var(--eventdetail-table-cell-radius);
  box-shadow: var(--eventdetail-table-cell-shadow);
}

.eventdetail-article__body td {
  padding: clamp(6px, 1.8vw, 9px);
  text-align: center;
  vertical-align: middle;
  border: none;
  border-radius: var(--eventdetail-table-cell-radius);
  background: var(--eventdetail-table-cell-bg);
  color: var(--eventdetail-table-cell-text);
  font-weight: 700;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.eventdetail-article__body tbody td:first-child {
  font-weight: 750;
  box-shadow: var(--eventdetail-table-cell-shadow);
}

.eventdetail-article__body tfoot td {
  font-weight: 700;
  background: var(--eventdetail-table-cell-bg);
  color: var(--eventdetail-table-cell-text);
  border: none;
  border-radius: var(--eventdetail-table-cell-radius);
}

/* Bảng không có <thead>: hàng đầu = header tile xanh */
.eventdetail-article__body table:not(:has(thead)) tbody tr:first-child td {
  background: var(--eventdetail-table-head-bg);
  color: var(--f168-text-white);
  font-weight: 700;
  box-shadow: none;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:nth-child(n + 2) td {
  background: var(--eventdetail-table-cell-bg);
  color: var(--eventdetail-table-cell-text);
  font-weight: 700;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:nth-child(n + 2) td:first-child {
  font-weight: 750;
  box-shadow: var(--eventdetail-table-cell-shadow);
}

/* Event detail: danh sách ul / ol / li — dễ đọc, marker rõ */
.eventdetail-article__body ul,
.eventdetail-article__body ol {
  margin: 12px 0 16px;
  padding-left: 1.5em;
  list-style-position: outside;
  color: var(--f168-text-muted);
}

.eventdetail-article__body ul {
  list-style-type: disc;
}

.eventdetail-article__body ol {
  list-style-type: decimal;
}

.eventdetail-article__body li {
  margin: 0.4em 0;
  padding-left: 0.2em;
  line-height: 1.55;
  word-break: break-word;
}

.eventdetail-article__body li::marker {
  color: var(--f168-accent-secondary);
  font-weight: 600;
}

.eventdetail-article__body li > ul,
.eventdetail-article__body li > ol {
  margin: 0.45em 0 0.55em;
}

.eventdetail-article__body ul ul {
  list-style-type: circle;
}

.eventdetail-article__body ul ul ul {
  list-style-type: square;
}

.eventdetail-article__body ol ol {
  list-style-type: lower-alpha;
}

/* Li đã có icon → bỏ dot/marker, căn icon + chữ (đặt sau rule ul/ol chung) */
.eventdetail-article__body ul:has(> li > img),
.eventdetail-article__rich ul:has(> li > img),
.eventdetail-article__body ol:has(> li > img),
.eventdetail-article__rich ol:has(> li > img) {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
}

.eventdetail-article__body li:has(> img),
.eventdetail-article__rich li:has(> img) {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
}

.eventdetail-article__body li:has(> img)::marker,
.eventdetail-article__rich li:has(> img)::marker {
  content: none;
}

.eventdetail-article__body li:has(> img) > img,
.eventdetail-article__rich li:has(> img) > img {
  margin-right: 0;
  margin-top: 0.2em;
}

/* Đoạn/div mở đầu có icon + text — inline flow (không flex p: wrap làm text xuống dòng) */
.eventdetail-article__body div:has(> img):not(:has(table)):not(:has(> img[alt*="Decor" i])),
.eventdetail-article__rich div:has(> img):not(:has(table)):not(:has(> img[alt*="Decor" i])) {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  flex-wrap: nowrap;
}

.eventdetail-article__body p:has(> img) > img,
.eventdetail-article__rich p:has(> img) > img {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.15em;
}

.eventdetail-article__body div:has(> img):not(:has(table)):not(:has(> img[alt*="Decor" i])) > img,
.eventdetail-article__rich div:has(> img):not(:has(table)):not(:has(> img[alt*="Decor" i])) > img {
  margin-right: 0;
  margin-top: 0.2em;
}

/* Section header — clone 12llwin .section-header (Decor icon + title) */
.eventdetail-article__body div:has(> img[alt*="Decor" i]):not(:has(table)),
.eventdetail-article__rich div:has(> img[alt*="Decor" i]):not(:has(table)) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(4px, 1.2vw, 7px);
  width: 100%;
  margin: 10px 0px;
  padding: clamp(6px, 2vw, 10px) clamp(8px, 2.2vw, 12px);
  background: var(--f168-accent);
  color: var(--f168-text-white);
  font-weight: 700;
  font-size: clamp(0.72rem, 2.8vw, 0.85rem);
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-radius: clamp(6px, 1.5vw, 10px) clamp(6px, 1.5vw, 10px) 0 0;
  box-sizing: border-box;
}

.eventdetail-article__body div:has(> img[alt*="Decor" i]) > img,
.eventdetail-article__rich div:has(> img[alt*="Decor" i]) > img {
  width: auto;
  height: clamp(10px, 2.5vw, 13px);
  max-width: clamp(36px, 10vw, 52px);
  max-height: clamp(10px, 2.5vw, 13px);
  margin: 0;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  object-position: center;
}

.eventdetail-article__body div:has(> img[alt*="Decor" i]) > img:last-of-type,
.eventdetail-article__rich div:has(> img[alt*="Decor" i]) > img:last-of-type {
  transform: scaleX(-1);
}

.eventdetail-article__body strong,
.eventdetail-article__rich strong {
  color: var(--f168-text-accent);
  font-weight: 700;
}

.eventdetail-article__body table strong,
.eventdetail-article__rich table strong {
  color: inherit;
}

/* Event detail: title tag style (match F168 title-container look) */
.eventdetail-article__body h4,
.eventdetail-article__body h5 {
  --event-detail-title-bg: var(--f168-accent);
  --event-detail-title-text: var(--f168-bg-page);
  position: relative;
  display: inline-block;
  left: -17px;
  max-width: calc(100% - 20px);
  margin: 5px 0;
  padding: 2px 12px 2px 18px;
  min-height: 25px;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 600;
  color: var(--f168-text-white) !important;
  background-color: var(--event-detail-title-bg);
  border-top-left-radius: 6px;
  overflow: visible;
  word-break: break-word;
}

.eventdetail-article__body h4::before,
.eventdetail-article__body h5::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 5px;
  height: 10px;
  background-color: var(--event-detail-title-bg);
  border-bottom-left-radius: 6px;
}

.eventdetail-article__body h4::after,
.eventdetail-article__body h5::after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 19px solid var(--event-detail-title-bg);
}

.footer-fix-bar__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}

.footer-fix-bar__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 8px 4px 8px;
  max-width: 100%;
  gap: 4px;
}

.footer-fix-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 11px;
  transition: color 0.2s;
  min-width: 0;
}

.footer-fix-bar__item:hover,
.footer-fix-bar__item.active {
  color: hsl(var(--main));
}

.footer-fix-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.footer-fix-bar__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 双图标（默认 + 激活）：激活图标默认隐藏，项被选中时显示 */
.footer-fix-bar__icon .footer-fix-bar__icon-active {
  display: none;
}

.footer-fix-bar__item.active .footer-fix-bar__icon .footer-fix-bar__icon-default {
  display: none;
}

.footer-fix-bar__item.active .footer-fix-bar__icon .footer-fix-bar__icon-active {
  display: block;
}

.footer-fix-bar__icon i {
  font-size: 20px;
}

.footer-fix-bar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 轮播图横幅：顶部留空 = 固定页眉的高度（防止被遮挡） */
.slide-banner {
  padding-top: var(--f168-header-height, 52px);
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.slide-banner__slider {
  position: relative;
}

/* 在 Slick 初始化前隐藏多余的幻灯片 (防止 FOUC 闪烁) */
.slide-banner__slider:not(.slick-initialized) .slide-banner__slide:not(:first-child) {
  display: none;
}

.slide-banner__slide {
  outline: none;
}

.slide-banner__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.slide-banner__bg {
  display: block;
  width: 100%;
  aspect-ratio: 1020 / 300;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slide-banner .slick-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-banner .slick-dots li {
  display: inline-block;
  margin: 0 3px;
  padding: 0;
  line-height: 0;
}

.slide-banner .slick-dots li button {
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  border: 1px solid transparent;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  outline: none;
}

.slide-banner .slick-dots li.slick-active button {
  width: 15px;
  background: var(--f168-bg-page);
  border: 1px solid rgba(160, 174, 192, 0.5);
  /* 颜色：var(--f168-text-muted) 50% 透明 */
}

/* Homepage bottom sections: full 480px shell (col-lg-* + .container padding) */
.big-win-section .container,
.ambassador-section .container,
.news-section .container {
  max-width: 100%;
  width: 100%;
  padding-left: var(--home-section-gutter);
  padding-right: var(--home-section-gutter);
  box-sizing: border-box;
}

.ambassador-section .row,
.news-section .row {
  margin-left: 0;
  margin-right: 0;
}

.ambassador-section [class*="col-"],
.news-section [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 新闻部分 - 品牌历程资讯 (F168风格) */
.news-brand-list {
  padding: 0;
}

.news-brand-list__title {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

.news-brand-title__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--f168-accent-secondary), var(--f168-accent));
  height: 24px;
  padding: 0 8px 0 10px;
  border-radius: 4px 0 0 4px;
  margin-right: 14px;
  position: relative;
}

.news-brand-title__badge::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 10px solid var(--f168-accent);
}

.news-brand-title__badge em {
  color: var(--f168-bg-page);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.news-brand-title__main {
  font-size: 1rem;
  font-weight: 700;
  color: var(--f168-text-accent);
}

.news-brand-item {
  position: relative;
  background: linear-gradient(to top, var(--f168-accent) 60%, var(--f168-border));
  padding: 1px 1px 2px 1px;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.news-brand-item__content {
  position: relative;
  background: var(--f168-bg-page);
  border-radius: 7px;
  padding: 15px;
  display: block;
  overflow: hidden;
}

.news-brand-item__img {
  float: right;
  width: 100px;
  margin-left: 10px;
  margin-bottom: 5px;
  border-radius: 6px;
  overflow: hidden;
}

.news-brand-item__img img {
  width: 100%;
  height: auto;
  display: block;
}

.news-brand-item__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--f168-accent-secondary);
  margin-bottom: 0.3rem;
}

.news-content {
  position: relative;
  font-size: 11px;
  line-height: 1.6;
  color: var(--f168-accent-secondary);
  text-align: justify;
}

.news-content__excerpt {
  color: var(--f168-text-dark);
  display: inline;
}

.news-expend-btn {
  display: inline;
  color: var(--f168-text-accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}

/* ========== Ambassador Section (F168 style) ========== */
.ambassador-section {
  background-color: var(--f168-bg-page);
}

.ambassador-section__inner {
  margin-bottom: 1rem;
}

.ambassador-section__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--f168-text-muted);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.ambassador-section__image-wrap {
  margin-bottom: 1rem;
  overflow: hidden;
}

.ambassador-section__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.ambassador-section__video-wrap {
  margin-bottom: 1rem;
}

.ambassador-section__video {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--f168-bg-surface);
}

.ambassador-section__video-trigger {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ambassador-section__video-thumb {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ambassador-section__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--f168-accent) 88%, transparent);
  box-shadow: 0 0.15rem 0.75rem var(--f168-shadow-soft);
}

.ambassador-section__video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent var(--f168-bg-page);
}

.ambassador-section__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--f168-bg-surface);
}

.ambassador-section__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
  transform: scale(1.16);
  transform-origin: center center;
}

.ambassador-section__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ambassador-section__ambassador-info {
  font-size: var(--text-base, 0.875rem);
  color: var(--f168-text-muted);
  flex-shrink: 0;
}

.ambassador-section__name {
  display: block;
  font-weight: 700;
  font-size: var(--text-lg, 1rem);
  color: var(--f168-text-dark);
  margin-bottom: 0.25rem;
}

.ambassador-section__tenure {
  margin: 0;
  font-size: var(--text-base, 0.875rem);
  color: var(--f168-text-muted);
  font-weight: 400;
}

.ambassador-section__signature-wrap {
  flex-shrink: 0;
}

.ambassador-section__signature {
  display: block;
  max-width: 13rem;
  height: auto;
  object-fit: contain;
}

/* ========== Big Win Section (F168 style) ========== */
.big-win-section {
  background-color: var(--f168-bg-page);
}

.big-win-section__wrap {
  width: 100%;
  padding: 0;
  border-radius: 0.56rem;
  background-color: var(--f168-bg-page);
}

.big-win-section__header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.4rem 0 0.2rem;
}

.big-win-section__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* 左右图标：仅设置高度，宽度自动以保持原图比例并防止扭曲 */
.big-win-section__icon {
  height: 1.4rem;
  width: auto;
  max-width: 2rem;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.big-win-section__icon--right {
  transform: scaleX(-1);
}

.big-win-section__title {
  font-weight: 400;
  font-size: var(--text-xl, 1.2rem);
  color: var(--f168-text-dark);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 15rem;
}

.big-win-section__carousel-wrap {
  padding: 0.5rem 0 0.2rem;
  overflow: hidden;
}

.big-win-section__carousel {
  overflow: hidden;
}

.big-win-section__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: big-win-scroll-left var(--big-win-duration, 5s) linear infinite;
}

@keyframes big-win-scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 垂直卡片：海报在顶，信息在底（F168 _card-below 样式） */
.big-win-section__card {
  flex-shrink: 0;
  width: 5.5rem;
  padding: 0;
  border-radius: 0.56rem;
  border: 1px solid var(--f168-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--f168-bg-page);
  overflow: hidden;
  box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.06);
}

/* 顶部海报，全宽，1:1比例 */
.big-win-section__poster {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--f168-bg-surface);
  flex-shrink: 0;
}

/* 海报下部信息区：居中，带内边距 */
.big-win-section__info {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.4rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.big-win-section__username {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--f168-text-muted);
  width: 100%;
  text-align: center;
}

.big-win-section__win-text {
  color: var(--f168-status-error);
}

.big-win-section__win-box {
  margin-top: -0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.big-win-section__currency-icon {
  width: 11px;
  height: 11px;
  object-fit: contain;
  flex-shrink: 0;
}

.big-win-section__net-profit {
  font-size: 0.6rem;
  color: var(--f168-accent);
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.big-win-section__arrow {
  color: var(--f168-accent);
  font-size: 1rem;
  margin-left: 0.2rem;
  flex-shrink: 0;
}

/* ========== 覆盖 Bootstrap .py-5（避免修改 bootstrap.min.css） ========== */
.py-5 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ========== Show Game List Section (F168 style) - Mobile first ========== */
.show-game-list-section {
  background-color: var(--f168-bg-page);
}

/* 确保没有 overflow 阻挡 sticky（F168：.ui-tabs__wrap overflow:hidden 但父级必须 visible） */
.show-game-list-section .container,
.show-game-list__wrap {
  overflow: visible;
}

.show-game-list__wrap {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  min-width: 0;
}

.show-game-list__content {
  margin-left: 0;
}

/* F168 / BO theme 126：ui-sticky sidebar tab dọc (preview.nhacai.app) */
.show-game-list__sidebar.ui-sticky {
  --sgl-tab-width: 100%;
  --sgl-tab-height: clamp(62px, 13.8vw, 68px);
  --sgl-tab-gap: clamp(7px, 1.8vw, 9px);
  --sgl-tab-radius: clamp(10px, 2.4vw, 12px);
  --sgl-tab-icon-w: clamp(40px, 9.4vw, 46px);
  --sgl-tab-icon-h: clamp(30px, 7.1vw, 35px);
  --sgl-tab-text: rgba(22, 120, 255, 0.8);
  --sgl-tab-text-active: var(--f168-bg-page);
  --show-game-list-sticky-top: 70px;
  position: sticky;
  top: var(--show-game-list-sticky-top);
  align-self: flex-start;
  flex: 0 0 clamp(83px, 19vw, 96px);
  width: clamp(83px, 19vw, 96px);
  min-width: 83px;
  max-width: 96px;
  z-index: 10;
  margin-top: 10px;
  padding-left: 0;
}

.show-game-list__sidebar.ui-sticky > .ui-sticky {
  position: sticky;
  top: var(--show-game-list-sticky-top);
  z-index: 1;
}

.show-game-list__sticky-nav {
  width: 100%;
}

.show-game-list__tabs-wrap.sidebar-tabs-theme126 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(-1 * var(--show-game-list-sticky-top) - 1.2rem + 100vh);
  overflow: hidden;
  padding-top: clamp(8px, 1.6vw, 10px);
}

.show-game-list__content {
  flex: 1 1 0;
  min-width: 0;
}

/* lobby-scroll lobby-scroll--y: tab dọc scroll khi nhiều mục */
.show-game-list__tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  height: fit-content;
  max-height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.show-game-list__tabs::-webkit-scrollbar {
  width: 4px;
}

.show-game-list__tabs::-webkit-scrollbar-track {
  background: var(--f168-border);
  border-radius: 4px;
}

.show-game-list__tabs::-webkit-scrollbar-thumb {
  background: var(--f168-accent-secondary);
  border-radius: 4px;
}

.show-game-list__tabs::-webkit-scrollbar-thumb:hover {
  background: var(--f168-text-muted);
}

.show-game-list__tab-item {
  flex: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.show-game-list__tab-wrapper.sidebar-common-tab-wrapper {
  position: relative;
  width: var(--sgl-tab-width);
  height: var(--sgl-tab-height);
  margin-bottom: var(--sgl-tab-gap);
  flex-shrink: 0;
}

.show-game-list__tab-skin.sidebar-common-tab-item-theme-126 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: clamp(3px, 0.8vw, 4px) clamp(1px, 0.2vw, 2px);
  border-radius: var(--sgl-tab-radius);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  box-sizing: border-box;
}

/* Skin toggle: must beat .show-game-list__tab-skin.sidebar-common-tab-item-theme-126 { display:flex } */
.show-game-list__tab-skin.sidebar-common-tab-item-theme-126.show-game-list__tab-skin--active {
  display: none;
  z-index: 2;
}

.show-game-list__tab-item.is-active .show-game-list__tab-skin.sidebar-common-tab-item-theme-126.show-game-list__tab-skin--active,
.show-game-list__tab-item[aria-selected="true"] .show-game-list__tab-skin.sidebar-common-tab-item-theme-126.show-game-list__tab-skin--active {
  display: flex;
}

.show-game-list__tab-item.is-active .show-game-list__tab-skin.sidebar-common-tab-item-theme-126.show-game-list__tab-skin--normal,
.show-game-list__tab-item[aria-selected="true"] .show-game-list__tab-skin.sidebar-common-tab-item-theme-126.show-game-list__tab-skin--normal {
  display: none;
}

.show-game-list__tab-skin.sidebar-common-tab-item-theme-126.show-game-list__tab-skin--normal {
  z-index: 1;
}

.show-game-list__tab-skin .sidebar-common-tab-item-icon-box {
  width: var(--sgl-tab-icon-w);
  height: var(--sgl-tab-icon-h);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  z-index: 6;
}

.show-game-list__tab-skin .sidebar-common-tab-item-icon-box img.lobby-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.show-game-list__tab-skin .sidebar-common-tab-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 4px);
  max-width: 100%;
  height: clamp(14px, 3.6vw, 18px);
  line-height: 1.3;
  z-index: 6;
  color: var(--sgl-tab-text);
  text-align: center;
  font-size: clamp(11px, 2.6vw, 13px);
  font-weight: 600;
  text-transform: uppercase;
}

.show-game-list__tab-item.is-active .show-game-list__tab-skin--active .sidebar-common-tab-name {
  color: var(--sgl-tab-text-active);
}

.show-game-list__tab-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--f168-accent);
  color: var(--f168-bg-page);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  z-index: 7;
}

/* 所有面板垂直堆叠，页面滚动 = 右侧列表滚动 (F168) */
.show-game-list__panel {
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--f168-border);
  scroll-margin-top: var(--show-game-list-scroll-margin, 80px);
}

.show-game-list__panel:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* API 游戏列表：游戏类型 → 供应商 → 游戏列表 */
.api-game-list__provider-tabs .nav-pills .nav-link {
  font-size: 0.875rem;
}

.api-game-list__provider-panel {
  display: none;
}

.api-game-list__provider-panel.is-active {
  display: block;
}

/* 类型 1: HOT - 子标签线条形式 (F168示例: 动态下划线) */
.show-game-list__sub-tabs {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  min-height: 2.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--f168-border);
}

.show-game-list__sub-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.5rem;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 500;
  color: var(--f168-text-muted);
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
}

.show-game-list__sub-tab:hover {
  color: var(--f168-text-dark);
}

.show-game-list__sub-tab.ui-tab--active .show-game-list__sub-tab-title,
.show-game-list__sub-tab .show-game-list__sub-tab-title.is-active {
  color: var(--f168-text-accent);
}

.show-game-list__sub-tab-title {
  text-align: center;
  transition: color 0.2s;
}

/* 激活状态的标签下划线 – 平滑过渡 */
.show-game-list__sub-tabs .ui-tabs__line {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 3px;
  background: var(--f168-accent);
  border-radius: 3px 3px 0 0;
  transition: transform 0.3s ease, width 0.3s ease;
  pointer-events: none;
}

.show-game-list__scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
  -webkit-overflow-scrolling: touch;
}


/* 3列 x 5行 – 均匀分布 */
.show-game-list__game-grid.poster-box-core {
  --card-benchmark: 5.2rem;
  --poster-box-core-height: calc(var(--card-benchmark) * 0.39);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 0.75rem;
  width: 100%;
}

.show-game-list__game-card {
  min-width: 0;
}

.show-game-list__game-card,
.show-game-list__provider-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.2s;
}

.show-game-list__game-card:hover,
.show-game-list__provider-card:hover {
  transform: translateY(-2px);
}

.poster-box-core__thumb {
  aspect-ratio: 520 / 203;
  overflow: hidden;
}

/* 游戏网格（类型1 – HOT）：游戏图 180x180，正方形显示不拉伸 */
.show-game-list__game-grid .poster-box-core__thumb {
  aspect-ratio: 1 / 1;
  position: relative;
}

.poster-box-core__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 热门图标（左上角） – F168 _game-status-label-img 样式 */
.show-game-list__label-hot {
  --label-icon-width: calc(var(--card-benchmark, 5rem) * 0.51);
  --label-icon-height: calc(var(--card-benchmark, 5rem) * 0.42);
  position: absolute;
  top: -0.06rem;
  left: -0.06rem;
  z-index: 8;
  width: var(--label-icon-width);
  height: var(--label-icon-height);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* 收藏图标（右上角） – BO btn_sc_off/on, clickable (789k parity) */
.show-game-list__favorite-btn.show-game-list__favorite-icon,
.show-game-list__favorite-icon {
  --circle-star-icon-side: 1.5rem;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 9;
  width: var(--circle-star-icon-side);
  height: var(--circle-star-icon-side);
  border: 0;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.3);
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
  cursor: pointer;
}

.show-game-list__game-card--hidden-by-favorite {
  display: none !important;
}

.poster-box-core__name {
  display: block;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 400;
  color: var(--f168-text-dark);
  margin-top: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* 类型 2 & 3：供应商卡片 - 默认为水平模式 (如果有的情况下类型1也使用) */
.show-game-list__provider-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-width: min-content;
}

.show-game-list__provider-card {
  flex: 0 0 8rem;
  min-width: 8rem;
}

.poster-box-core--landscape .poster-box-core__thumb {
  aspect-ratio: 520 / 203;
}

/* 类型 2 & 3：单列 (F168样式) */
.show-game-list__scroll-wrap--col {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 类型 2 & 3: 每页 5 项 – 隐藏溢出并允许分页。缺少 min-height 以避免少于 5 项时留白 */
.show-game-list__scroll-wrap--paged {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
}

.show-game-list__provider-pages {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease;
  will-change: transform;
}

.show-game-list__provider-page {
  /* 每页的尺寸由 blade 行内设置 (flex: 0 0 100/n%; min-width: 100/n%) */
  box-sizing: border-box;
}

.show-game-list__provider-grid--col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
  /* 全宽内容，不限制最大宽度以避免右侧留白 */
}

.show-game-list__provider-grid--col .show-game-list__provider-card {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* 供应商图片：使用 contain 防止右侧被裁切 */
.show-game-list__provider-grid--col .poster-box-core__thumb img {
  object-fit: contain;
  object-position: center;
}

/* 防止内容因 flex 缩小 – 类型 2/3 需要足够宽度以免右边留白 */
.show-game-list__content:has(.show-game-list__type2),
.show-game-list__content:has(.show-game-list__type3) {
  min-width: 12rem;
}

/* 标题条：图标 + 供应商列表上的标题 (类型 2, 3) – F168 样式 */
.show-game-list__headline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 0.75rem;
}

.show-game-list__title {
  display: flex;
  align-items: center;
  color: var(--f168-text-dark);
  min-height: 1.3rem;
}

.show-game-list__title-icon {
  width: 30px;
  height: auto;
  object-fit: contain;
  margin-right: 0.2rem;
  flex-shrink: 0;
}

.show-game-list__title-text {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

/* Bottom navigation */
/* 底部线：[← | 全部 | →] 条，参照 F168 _switch-pagination 样式 */
.show-game-list__bottomline {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  overflow: hidden;
}

.show-game-list__switch-pagination {
  display: flex;
  align-items: center;
  width: 130px;
  height: 25px;
  float: right;
  border-radius: 9999px;
  border: 1px solid var(--f168-border);
  background: var(--f168-bg-page);
  overflow: hidden;
}

.show-game-list__switch-pagination .show-game-list__arrow-btn {
  flex-shrink: 0;
  width: 35px;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--f168-text-muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.show-game-list__switch-pagination .show-game-list__arrow-btn:hover {
  background: var(--f168-bg-page);
  color: var(--f168-text-dark);
}

.show-game-list__all-inside {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--f168-border);
  border-right: 1px solid var(--f168-border);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--f168-text-muted);
}

a.show-game-list__all-inside {
  text-decoration: none;
  cursor: pointer;
}

a.show-game-list__all-inside:hover {
  color: var(--primary, var(--f168-text-accent));
}

.show-game-list__switch-pagination .show-game-list__arrow-btn--left {
  padding-left: 0;
}

.show-game-list__switch-pagination .show-game-list__arrow-btn--right {
  padding-right: 0;
}

/* ==========================================================================
   F168 Auth – Login / Register (user/login, user/register)
   ========================================================================== */
.f168-auth-page {
  min-height: 100vh;
  position: relative;
  background: var(--f168-bg-page);
  padding: 0 0 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f168-auth-page__bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.f168-auth-page__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
  box-sizing: border-box;
}

.f168-auth-head {
  position: relative;
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.f168-auth-head__back {
  position: absolute;
  top: 0.5rem;
  left: 0;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
}

.f168-auth-head__back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  color: var(--f168-text-dark);
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 0.3s linear;
}

.f168-auth-head__back-link:hover {
  color: var(--f168-text-dark);
}

.f168-auth-head__back-link.ui-arrow svg {
  width: 5em;
  height: 5em;
}

.f168-auth-head__logo {
  margin-bottom: 0.75rem;
}

.f168-auth-head__logo a {
  display: inline-block;
}

.f168-auth-head__logo-img {
  max-width: min(200px, 100%);
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.f168-auth-head__slogan {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
}

.f168-auth-head__slogan-text {
  flex-shrink: 0;
  text-align: left;
}

.f168-auth-head__title {
  font-size: 14px;
  color: var(--f168-text-dark);
  line-height: 1.4;
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.f168-auth-head__slogan section {
  font-size: var(--text-base, 0.875rem);
  font-weight: 400;
  color: var(--f168-text-dark);
}

.f168-auth-head__signature {
  flex-shrink: 0;
}

.f168-auth-head__signature img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.f168-auth-head__signature--placeholder {
  width: 80px;
  height: 28px;
  background: linear-gradient(90deg, transparent 0%, var(--f168-text-dark) 50%, transparent 100%);
  opacity: 0.4;
  border-radius: 2px;
}

/* 选项卡 – 类似 F168：胶囊导航 (圆角 .35rem)，激活状态 ::after，带阴影 */
.f168-auth-tabs.ui-tabs__nav--line {
  display: flex;
  position: relative;
  height: 2.5rem;
  padding: 0;
  margin-bottom: 1.5rem;
  background-color: var(--f168-accent-secondary);
  border-radius: 9999px;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.f168-auth-tabs .ui-tab--line,
.f168-auth-tabs .f168-auth-tab {
  margin-left: 0;
  margin-right: 0;
}

.f168-auth-tab {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--f168-bg-page);
  text-decoration: none;
  transition: color 0.2s;
  z-index: 1;
}

.f168-auth-tab:hover {
  color: var(--f168-bg-page);
}

.f168-auth-tab__label {
  position: relative;
  z-index: 1;
  color: var(--f168-bg-page);
}

/* 激活态：::after 转为橙色胶囊 (F168)，登录或注册选项卡激活时均使用橙色背景 */
.f168-auth-tab.ui-tab--active::after {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: block;
  content: "";
  background-color: hsl(var(--main, 37 100% 50%));
  border-radius: 9999px;
  z-index: 0;
  transition: left 0.25s ease, right 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 登录标签激活态 (登录页) */
.f168-auth-tab.ui-tab--active:first-child::after {
  width: calc(100% + 6px);
  right: -6px;
  left: 0;
  border-radius: 9999px;
}

/* 注册标签激活态 (注册页)：使用 nth-child(2) 因为2个标签后面还有一个 .ui-tabs__line */
.f168-auth-tab.ui-tab--active:nth-child(2)::after {
  width: calc(100% + 6px);
  left: -6px;
  right: 0;
  border-radius: 9999px;
}

.f168-auth-tabs__line {
  display: none;
}

/* Form wrap */
.f168-auth-form-wrap {
  background: var(--f168-bg-page);
  border-radius: 16px;
  padding: 0rem;

}

.f168-auth-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
  border: 1px solid var(--f168-accent);
  border-radius: 0.5rem;
  background: var(--f168-bg-page);
  overflow: hidden;
}

.f168-auth-field__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: hsl(var(--main));
  font-size: 1.5rem;
}

.f168-auth-field__star-sign {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--f168-status-error);
  font-size: 1rem;
  height: 44px;
  padding: 0 2px;
}

.f168-auth-field__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 1rem 0 0;
  border: 0;
  background: transparent;
  font-size: var(--text-base, 0.875rem);
  color: var(--f168-text-dark);
  outline: none;
}

.f168-auth-field__input::placeholder {
  color: var(--f168-text-muted);
}

.f168-auth-field__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--f168-text-muted);
  cursor: pointer;
  font-size: 2.2rem;
}

.f168-auth-field__toggle:hover {
  color: hsl(var(--main));
}

.f168-auth-field--phone .f168-auth-field__prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  flex-shrink: 0;
  color: var(--f168-text-muted);
  font-size: var(--text-sm);
}

.f168-auth-field__flag {
  width: 24px;
  height: auto;
  display: block;
}

.f168-auth-field--phone .f168-auth-field__input {
  padding-left: 0.5rem;
}

.f168-auth-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.f168-auth-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--f168-border);
  border-radius: 4px;
  background: var(--f168-bg-page);
  color: var(--f168-bg-page);
  vertical-align: middle;
}

.f168-auth-checkbox:checked {
  background: var(--f168-status-success);
  border-color: var(--f168-status-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.f168-auth-remember label,
.f168-auth-remember__label {
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1em 0.35em;
  min-width: 0;
}

.f168-auth-remember__phrase {
  white-space: nowrap;
  flex-shrink: 0;
}

.f168-auth-remember__label .f168-auth-link,
.f168-auth-remember label .f168-auth-link {
  display: inline;
  white-space: nowrap;
  flex-shrink: 0;
}

/* F168 提交按钮: ui-button (类似 commonChunk/Fragment) */
@keyframes f168-btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 139, 0, 0.35);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(252, 139, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(252, 139, 0, 0);
  }
}

@keyframes f168-btn-scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07998);
  }

  100% {
    transform: scale(1);
  }
}

.f168-auth-submit-wrap {
  margin-bottom: 1rem;
}

.f168-auth-form .ui-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 2.75rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  border-radius: 5rem;
  cursor: pointer;
  transition: opacity 0.2s;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: auto;
  color: var(--f168-bg-page);
  background: hsl(var(--main));
  border: 1px solid hsl(var(--main));
  overflow: visible;
  animation: f168-btn-scale 1.5s ease-in-out infinite;
}

.f168-auth-form .ui-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  border: none;
  pointer-events: none;
  animation: f168-btn-pulse 1.5s ease-in-out infinite;
}

.f168-auth-form .ui-button--primary {
  color: var(--f168-bg-page);
  background: hsl(var(--main));
  border-color: hsl(var(--main));
}

.f168-auth-form .ui-button--normal {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 1rem;
}

.f168-auth-form .ui-button--block {
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.f168-auth-form .ui-button:hover {
  opacity: 0.95;
}

.f168-auth-form .ui-button:active {
  opacity: 0.9;
}

.f168-auth-form .ui-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.f168-auth-form .ui-button__text {
  color: var(--f168-bg-page);
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.f168-auth-btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--f168-bg-page);
  background: hsl(var(--main));
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.05s;
  margin-bottom: 1rem;
}

.f168-auth-btn:hover {
  color: var(--f168-bg-page);
  opacity: 0.95;
}

.f168-auth-btn:active {
  transform: scale(0.99);
}

.f168-auth-btn--sm {
  display: inline-block;
  width: auto;
  padding: 0.5rem 1.25rem;
  margin-bottom: 0;
}

.f168-auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.25rem;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.f168-auth-links--row {
  justify-content: space-between;
}

.f168-auth-links--quick-entry {
  gap: 7rem;
  margin-top: 1rem;
  justify-content: center;
}

.f168-auth-links--quick-entry .f168-auth-links__item {
  flex: 0 0 auto;
}

.f168-auth-links__item {
  font-size: 13px;
  font-weight: 500;
}

.f168-auth-links__link {
  color: var(--f168-text-accent);
  text-decoration: none;
  display: block;
  font-size: 13px;
  text-align: center;
}

.f168-auth-links__link:hover {
  color: var(--f168-text-accent);
  text-decoration: underline;
}

.f168-auth-links__inner {
  display: inline-block;
  color: var(--f168-text-accent);
  font-size: 13px;
  text-align: center;
}

/* 登录页面: 直接使用 a 标签为列表项 */
.f168-auth-links>a.f168-auth-links__item {
  color: var(--f168-text-accent);
  text-decoration: none;
  font-size: 13px;
  text-align: center;
}

.f168-auth-links>a.f168-auth-links__item:hover {
  color: var(--f168-text-accent);
  text-decoration: underline;
}

.f168-auth-quick {
  text-align: center;
  margin: 1rem 0;
}

.f168-auth-quick__title {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.f168-auth-quick__label {
  position: relative;
  padding: 0 2.9rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--f168-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f168-auth-quick__label::before,
.f168-auth-quick__label::after {
  position: absolute;
  top: 50%;
  width: 2.7rem;
  height: 1px;
  background-color: var(--f168-border);
  transform: translateY(-50%);
  content: "";
}

.f168-auth-quick__label::before {
  left: 0;
}

.f168-auth-quick__label::after {
  right: 0;
}

[dir="rtl"] .f168-auth-quick__label::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .f168-auth-quick__label::after {
  right: auto;
  left: 0;
}

.f168-auth-quick__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.f168-auth-quick__list[data-align="center"] {
  width: 100%;
}

.f168-auth-quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.f168-auth-quick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--f168-border);
  background: var(--f168-bg-page);
  color: hsl(var(--main));
  font-size: 1.5rem;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px 0 var(--f168-shadow-soft);
}

.f168-auth-quick__icon:hover {
  border-color: hsl(var(--main) / 0.5);
  background: hsl(var(--main) / 0.06);
}

.f168-auth-quick__icon--webauthn {
  color: var(--f168-accent-secondary);
}

.f168-auth-quick__icon--webauthn:hover {
  border-color: var(--f168-accent-secondary);
  background: rgba(230, 126, 34, 0.08);
  color: var(--f168-text-accent);
}

.f168-auth-quick__icon--google {
  color: var(--f168-accent-secondary);
}

.f168-auth-quick__icon--google:hover {
  border-color: var(--f168-accent-secondary);
  background: rgba(66, 133, 244, 0.1);
}

.f168-auth-quick__icon--disabled {
  cursor: default;
  opacity: 0.65;
  pointer-events: none;
}

.f168-auth-quick__icon--disabled:hover {
  border-color: var(--f168-border);
  background: var(--f168-bg-page);
}

.f168-auth-quick__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* single quick icon (e.g. register page) */
.f168-auth-quick--single {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.f168-auth-quick--single .f168-auth-quick__icon {
  box-shadow: 0 2px 6px 0 var(--f168-shadow-soft);
}

/* Password strength */
/* 密码强度：标签 + 4个条形同行显示 (参考 f168 EntryLoginRegisterChunk) */
.f168-auth-strength {
  margin-bottom: 1rem;
}

.f168-auth-strength__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}

.f168-auth-strength__label {
  font-size: var(--text-xs);
  color: var(--f168-text-dark);
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.f168-auth-strength__bar {
  height: 0.3rem;
  min-width: 0.8rem;
  flex: 1;
  max-width: 2.8rem;
  background: var(--f168-border);
  border-radius: 1rem;
  transition: background 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}

.f168-auth-strength__bar--level-1 {
  background: var(--f168-status-error) !important;
  border-color: var(--pwd-strength_lump-border-1, transparent);
}

.f168-auth-strength__bar--level-2 {
  background: var(--f168-accent) !important;
  border-color: var(--pwd-strength_lump-border-2, transparent);
}

.f168-auth-strength__bar--level-3 {
  background: hsl(var(--main));
  border-color: var(--pwd-strength_lump-border-3, transparent);
}

.f168-auth-strength__bar--level-4 {
  background: var(--f168-status-success) !important;
  border-color: var(--pwd-strength_lump-border-4, transparent);
}

.f168-auth-note {
  font-size: var(--text-xs);
  color: var(--f168-status-error);
  margin: -0.5rem 0 1rem;
  padding: 0 0.25rem;
}

.f168-auth-note--image {
  padding: 0;
  margin: 0rem;
}

.f168-auth-note--image .lobby-form-item__explain-text {
  display: block;
}

.f168-auth-note__img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.f168-auth-link {
  color: hsl(var(--main));
  text-decoration: none;
  font-weight: 400;
}

.f168-auth-link:hover {
  text-decoration: underline;
}

.f168-auth-bound {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.f168-auth-bound__line {
  flex: 1;
  height: 1px;
  background: var(--f168-border);
}

.f168-auth-bound__text {
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  white-space: nowrap;
}

.f168-auth-have-account {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  margin-bottom: 1rem;
}

.f168-auth-have-account .f168-auth-link {
  margin-left: 0.25rem;
}

.f168-auth-disabled {
  text-align: center;
  padding: 2rem;
  color: var(--f168-text-muted);
}

.f168-auth-disabled__icon {
  font-size: 3rem;
  color: var(--f168-border);
  display: block;
  margin-bottom: 0.5rem;
}

/* Captcha in auth */
.f168-auth-form .form-group {
  margin-bottom: 1rem;
}

/* 页脚：页面底部的全宽图片 */
.f168-auth-footer {
  margin-top: auto;
  width: 100%;
  background: var(--f168-bg-page);
}

.f168-auth-footer__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
}

/* F168 app download banner: pill shape, orange border, yellow icons */
.f168-auth-app-banner {
  position: relative;
  display: flex;
  text-decoration: none;
  color: inherit;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  padding: 0rem;
  margin: 0rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 4.2rem;
  overflow: hidden;
  font-weight: 700;
  font-size: 0.7rem;
  /* 窄屏下 contain 留边时用浅色底，避免与表单白底反差过大 */

}

.f168-auth-app-banner__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 小宽度用 cover 会裁切左右图标；contain 整图缩放入内框 */
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

[dir="rtl"] .f168-auth-app-banner__bg {
  left: auto;
  right: 0;
}

.f168-auth-app-banner__text {
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.f168-auth-app-banner__title {
  font-size: clamp(0.62rem, 2.5vw, 0.7rem);
  font-weight: 700;
  color: var(--f168-accent-secondary);
  line-height: 1.2;
  padding-bottom: clamp(0.12rem, 0.5vw, 0.2rem);
  overflow: hidden;
  white-space: normal;
}

.f168-auth-app-banner__sub {
  font-size: clamp(0.52rem, 2vw, 0.6rem);
  font-weight: 400;
  color: var(--f168-text-muted);
  line-height: 1.25;
  overflow: hidden;
  white-space: normal;
}

/* 日期时间 (日期 + 时间前) 以白色显示 */
.date-time-cell {
  color: var(--f168-bg-page) !important;
}

/* ===== SIDEBAR POPUP (clone f1686s.com left drawer) ===== */

/* 页眉强制悬浮在遮罩层之上，避免变暗 */
.header.header-f168 {
  position: relative;
  z-index: 2003;
  position: fixed;
}

/* Backdrop — giới hạn trong shell 480px (desktop căn giữa) */
.sidebar-popup__backdrop {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc(50% - var(--f168-shell-half, 240px)));
  width: min(100vw, var(--f168-shell-width, 480px));
  background: rgba(0, 0, 0, 0.55);
  z-index: 2002;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-popup__backdrop.is-open {
  display: block;
  animation: sidebarFadeIn 0.22s ease;
}

/* 面板 — ẩn hoàn toàn khi chưa mở; chỉ hiện khi .is-open */
.sidebar-popup {
  position: fixed;
  top: 52px;
  left: max(0px, calc(50% - var(--f168-shell-half, 240px)));
  bottom: 0;
  width: 190px;
  max-width: min(88vw, var(--f168-shell-width, 480px));
  background: var(--f168-bg-page);
  z-index: 2004;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
  border-radius: 5px;
  overflow: hidden;
  outline: none;
}

.sidebar-popup.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/* 内部滚动（隐藏滚动条，仍可滚动） */
.sidebar-popup__inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-popup__inner::-webkit-scrollbar {
  display: none;
}

/* Search bar */
.sidebar-popup__search-board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--f168-bg-page), var(--f168-accent-12)), linear-gradient(to bottom, var(--f168-bg-surface), transparent);
  border-radius: 22px;
  padding: 6px;
  text-decoration: none;
  border: 1px solid var(--f168-bg-surface);
  margin-bottom: 2px;
  transition: border-color 0.15s;
}

.sidebar-popup__search-board:hover {
  border-color: var(--f168-accent);
}

.sidebar-popup__search-text {
  color: var(--f168-text-dark);
  font-size: 0.875rem;
  font-weight: 400;
}

.sidebar-popup__search-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Card wrapper */
.sidebar-popup__card {}

/* Section title */
.sidebar-popup__section-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--f168-text-muted);
  padding: 8px 12px 2px;
}

/* Menu list */
.sidebar-popup__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

/* Menu item */
.sidebar-popup__menu-item {
  position: relative;
}

.sidebar-popup__menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px 10px;
  text-decoration: none;
  gap: 1px;
  min-height: 55px;
  transition: background 0.15s;
  border-radius: 8px;
  border: .02rem solid transparent;
  background: linear-gradient(180deg, var(--f168-bg-page), var(--f168-accent-12)), linear-gradient(to bottom, var(--f168-bg-surface), transparent);

  background-origin: border-box;
  max-height: 17px;
  border: 0.1rem solid color-mix(in srgb, var(--f168-border) 55%, transparent);
}

.sidebar-popup__menu-link:hover {
  background: var(--f168-accent-07);
}

.sidebar-popup__menu-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-popup__menu-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sidebar-popup__menu-text {
  text-align: center;
}

.sidebar-popup__menu-text span {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--f168-text-muted);
  line-height: 1.3;
  word-break: break-word;
}

.sidebar-popup__menu-link:hover .sidebar-popup__menu-text span {
  color: var(--f168-accent);
}

/* 优惠中心（参考 f1686s：2列网格，背景图，白字，88% 徽章） */
.sidebar-popup__promo-list {
  grid-template-columns: 1fr 1fr;
  gap: 7px;


  background: transparent;
}

.sidebar-popup__promo-title {
  grid-column: 1 / -1;
  width: 100%;
  display: block;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--f168-text-dark);

  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.sidebar-popup__promo-item {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  max-height: 70px;
}

.sidebar-popup__promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  border-radius: 10px;
}

.sidebar-popup__promo-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 8px 6px 10px;
  text-decoration: none;
  gap: 0;
}

.sidebar-popup__promo-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.sidebar-popup__promo-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.sidebar-popup__promo-text {
  margin: 0;
  padding: 0 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--f168-bg-page) !important;

  word-break: break-word;
}

.sidebar-popup__promo-text span {
  color: inherit;
}

.sidebar-popup__promo-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--f168-accent-secondary);
  color: var(--f168-bg-page);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 徽章 (如有需要可用于其他地方) */
.sidebar-popup__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--f168-accent-secondary);
  color: var(--f168-bg-page);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 6px;
  z-index: 2;
  line-height: 1.3;
}

/* 其它列表 (VIP, 推荐朋友) */
/* VIP & 推荐朋友: 全宽, 上下排列, 渐变背景, 左图标右文字 */
.sidebar-popup__other-list {
  grid-template-columns: 1fr;
  gap: 5px;
  background: transparent;
  border: none;

}

.sidebar-popup__other-list .sidebar-popup__menu-item {
  margin: 0;
}

.sidebar-popup__other-list .sidebar-popup__menu-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  padding: 0px;
  gap: 12px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--f168-bg-page), var(--f168-accent-12)), linear-gradient(to bottom, var(--f168-bg-surface), transparent);
  border-radius: 10px;
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.sidebar-popup__other-list .sidebar-popup__menu-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin: 0;
}

.sidebar-popup__other-list .sidebar-popup__menu-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.sidebar-popup__other-list .sidebar-popup__menu-text {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.sidebar-popup__other-list .sidebar-popup__menu-text span {
  font-size: 12px;
  font-weight: 400;
  color: var(--f168-text-accent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.sidebar-popup__other-list .sidebar-popup__menu-link:hover .sidebar-popup__menu-text span {
  color: var(--f168-accent-secondary);
}

/* 品牌大使 (参照 f1686s: 图片) */
.sidebar-popup__brand {}

.sidebar-popup__brand-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  margin-bottom: 10px;
}

.sidebar-popup__brand-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0;
  min-width: 0;
}

.sidebar-popup__brand-details {
  flex-shrink: 0;
  min-width: 0;
}

.sidebar-popup__brand-name {
  display: block !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--f168-text-dark) !important;
  margin: 0 0 2px !important;
  line-height: 1.3;
}

.sidebar-popup__brand-details p {
  font-size: 11px !important;
  color: var(--f168-text-muted) !important;
  margin: 0 !important;
  line-height: 1.4;
}

.sidebar-popup__brand-sign {

  height: auto;
  max-height: 30px;
  object-fit: contain;
  object-position: right center;
  flex-shrink: 0;
  display: block;
}

@keyframes sidebarFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ===== PAGE TRANSITION (View Transitions API) ===== */
@view-transition {
  navigation: auto;
}

/* Forward navigation: old page slides out left, new page slides in from right */
::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 1, 1) both vt-slide-out-left;
}

::view-transition-new(root) {
  animation: 280ms cubic-bezier(0, 0, 0.2, 1) both vt-slide-in-right;
}

/* Back navigation: old page slides out right, new page slides in from left */
html.nav-back::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 1, 1) both vt-slide-out-right;
}

html.nav-back::view-transition-new(root) {
  animation: 280ms cubic-bezier(0, 0, 0.2, 1) both vt-slide-in-left;
}

@keyframes vt-slide-out-left {
  to {
    transform: translateX(-25%);
    opacity: 0;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes vt-slide-out-right {
  to {
    transform: translateX(100%);
  }
}

@keyframes vt-slide-in-left {
  from {
    transform: translateX(-25%);
    opacity: 0;
  }
}

/* ===== CAT SLOT PAGE (clone subgame lobby) ===== */
.cat-slot-page {
  min-height: 100vh;
  background: var(--f168-bg-page);
  color: var(--f168-bg-inverse-surface);
  max-width: var(--f168-shell-width, 480px);
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.cat-slot-page__header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  height: 60px;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-bg-surface);
}

.cat-slot-page__back,
.cat-slot-page__header-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cat-slot-page__back {
  color: var(--f168-accent);
  font-size: 28px;
  text-decoration: none;
}

.cat-slot-page__title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--f168-bg-inverse-surface);
}

.cat-slot-page__section-content {
  padding: 14px 12px 18px;
}

.cat-slot-page__search-layout {
  margin-bottom: 12px;
}

.cat-slot-page__search-bar {
  display: flex;
  align-items: center;
  height: 34px;
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-accent);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cat-slot-page__search-input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 14px;
  font-size: 14px;
  color: var(--f168-text-dark);
}

.cat-slot-page__search-input::placeholder {
  color: var(--f168-accent-secondary);
}

.cat-slot-page__search-icon {
  width: 42px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--f168-text-accent);
  font-size: 22px;
}

.cat-slot-page__core-content {
  min-height: calc(100vh - 122px);
}

.cat-slot-page__core-area {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.cat-slot-page__left {
  position: sticky;
  top: 74px;
}

.cat-slot-page__provider-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.cat-slot-page__provider-nav::-webkit-scrollbar {
  display: none;
}

.cat-slot-page__provider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 66px;
  width: 100%;
  padding: 10px 8px;
  border: 1px solid var(--f168-accent);
  border-radius: 12px;
  background: var(--f168-bg-page);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.cat-slot-page__provider-item.is-active {
  background: var(--f168-accent);
  border-color: var(--f168-accent);
  box-shadow: 0 6px 16px var(--f168-accent-25t);

}

.cat-slot-page__provider-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  padding: 0 4px;
  font-size: 23px;
  line-height: 1;
  font-weight: 800;
  color: var(--f168-bg-inverse);
  text-transform: uppercase;
}

.cat-slot-page__provider-item:not(.is-active) .cat-slot-page__provider-logo {
  font-size: 20px;
  color: var(--f168-text-dark);
}

.cat-slot-page__provider-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
}

.cat-slot-page__provider-logo-img {
  width: 48px;
  height: 32px;
  object-fit: contain;
  object-position: center;
}

.cat-slot-page__provider-logo--bg,
.cat-slot-page__provider-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  padding: 0 4px;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: var(--f168-text-dark);
  text-transform: uppercase;
}

.cat-slot-page__provider-item.is-active .cat-slot-page__provider-logo--fallback {
  color: var(--f168-text-dark);
}

.cat-slot-page__provider-logo--bg {
  width: 48px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
}

.cat-slot-page__provider-name {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--f168-bg-inverse-surface);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-slot-page__provider-item.is-active .cat-slot-page__provider-name {
  color: var(--f168-text-white);
  font-weight: 700;
}

.cat-slot-page__provider-more {
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--f168-text-accent);
  font-size: 22px;
}

.cat-slot-page__right {
  min-width: 0;
}

.cat-slot-page__right-header {
  margin-bottom: 14px;
}

.cat-slot-page__scene-tabs {
  display: flex;
  gap: 10px;
}

.cat-slot-page__scene-tab {
  min-width: 82px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--f168-accent);
  border-radius: 12px;
  font-size: 13px;
  background: var(--f168-bg-surface);
  color: var(--f168-text-dark);
  font-weight: 400;
}

.cat-slot-page__scene-tab.is-active {
  background: var(--f168-accent);
  border-color: var(--f168-accent);
  color: var(--f168-text-white);
}

.cat-slot-page__right-body {
  min-height: 520px;
}

.cat-slot-page__game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.cat-slot-page__game-card {
  min-width: 0;
}

.cat-slot-page__game-media {
  position: relative;
}

/* 类似主页: poster-box-core__thumb 包含 img + 热门标签 + 收藏图标 */
.cat-slot-page__game-media.poster-box-core__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.cat-slot-page__game-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.cat-slot-page__game-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}

.cat-slot-page__game-name {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--f168-text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 热门与收藏图标：类似主页 (show-game-list__label-hot + show-game-list__favorite-icon) */
.cat-slot-page__badge-hot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  border-radius: 12px 0 10px 0;
  background: linear-gradient(180deg, var(--f168-accent-grad-mid) 0%, var(--f168-accent) 100%);
  color: var(--f168-bg-page);
  font-size: 12px;
  box-shadow: 0 2px 4px var(--f168-accent-35t);
}

.cat-slot-page__game-media .cat-slot-page__badge-hot.show-game-list__label-hot {
  --label-icon-width: calc(var(--card-benchmark, 5rem) * 0.51);
  --label-icon-height: calc(var(--card-benchmark, 5rem) * 0.42);
  top: -0.06rem;
  left: -0.2rem;
  z-index: 8;
  width: var(--label-icon-width);
  height: var(--label-icon-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: transparent;
}

.cat-slot-page__favorite-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--f168-accent-secondary);
  font-size: 13px;
}

.cat-slot-page__game-media .cat-slot-page__favorite-btn.show-game-list__favorite-icon {
  top: 0.2rem;
  right: 0.2rem;
  z-index: 9;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.3);
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
}

.cat-slot-page__favorite-btn.is-active {
  color: var(--f168-text-accent);
}

.cat-slot-page__game-media .cat-slot-page__favorite-btn.show-game-list__favorite-icon.is-active {
  color: transparent;
  /* 收藏状态: 可使用不同的图片或保留背景图 */
}

.cat-slot-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
  color: var(--f168-text-muted);
  font-size: 14px;
}

.cat-slot-page__empty i {
  font-size: 30px;
  color: var(--f168-text-accent);
}

.cat-slot-page__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.cat-slot-page__footer.is-hidden {
  display: none;
}

.cat-slot-page__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-slot-page__page-dots {
  color: var(--f168-accent-secondary);
  font-size: 14px;
}

.cat-slot-page__page-btn,
.cat-slot-page__page-arrow {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--f168-accent);
  border-radius: 8px;
  background: var(--f168-bg-page);
  color: var(--f168-text-dark);
  font-size: 14px;
  transition: all 0.2s ease;
}

.cat-slot-page__page-btn.is-active {
  border-color: var(--f168-text-accent);
  background: var(--f168-text-accent);
  color: var(--f168-text-white);
}

.cat-slot-page__page-arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ============================================
   游戏全屏模态框 – 打开游戏时隐藏页眉和页脚
   ============================================ */
body.game-fullscreen-active .header,
body.game-fullscreen-active .header.header-f168,
body.game-fullscreen-active .footer-fix-bar {
  display: none !important;
}

/* 确保游戏模态框位于所有元素的最上层 */
#hotGameLaunchModal,
#apiGameLaunchModal,
#catSlotLaunchModal {
  z-index: 2100 !important;
}

#hotGameLaunchModal+.modal-backdrop,
#apiGameLaunchModal+.modal-backdrop,
#catSlotLaunchModal+.modal-backdrop {
  z-index: 2099 !important;
}

/* ============================================
   游戏浮动按钮 (FAB) – F168 样式
   收起态: 左边缘的小返回箭头
   展开态: 三个纵列按钮 (首页, 充值, 关闭)
   ============================================ */
.game-fab {
  position: fixed;
  top: 30px;
  left: 0;
  transform: none;
  z-index: 99999;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: none;
}

/* 仅当全屏游戏在运行时显示浮动操作按钮 (FAB) */
body.game-fullscreen-active .game-fab {
  display: block;
}

/* --- 收起态：小箭头按钮 --- */
.game-fab__collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 64px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0 32px 32px 0;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
  -webkit-tap-highlight-color: transparent;
  /* 通过透明边距增加点击区域 */
  padding: 8px 12px 8px 4px;
  box-sizing: content-box;
}

.game-fab__collapsed:hover {
  background: rgba(0, 0, 0, 0.6);
}

.game-fab__collapsed:active {
  background: rgba(0, 0, 0, 0.7);
}

.game-fab__collapsed svg {
  width: 18px;
  height: 18px;
  fill: var(--f168-bg-page);
  opacity: 0.85;
  transform: rotate(180deg);
  transition: transform 0.2s;
}

/* 折叠面板在展开面板出现时隐藏 */
.game-fab.is-expanded .game-fab__collapsed {
  display: none;
}

/* --- 展开态：3个垂直按钮 --- */
.game-fab__expanded {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 0 16px 16px 0;
  padding: 6px 4px 6px 2px;
  animation: gameFabSlideIn 0.2s ease-out;
}

.game-fab.is-expanded .game-fab__expanded {
  display: flex;
}

@keyframes gameFabSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- 展开菜单中的每一项 --- */
.game-fab__drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14px;
  opacity: 0.5;
  pointer-events: none;
}

.game-fab__drag-hint svg {
  width: 16px;
  height: 16px;
  fill: var(--f168-bg-page);
}

.game-fab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.game-fab__item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.game-fab__item:active {
  transform: scale(0.9);
}

.game-fab__item svg {
  width: 24px;
  height: 24px;
  fill: var(--f168-bg-page);
}

/* 高亮：主页按钮 */
.game-fab__item--home svg {
  fill: var(--f168-accent);
}

/* 高亮：关闭游戏按钮 (X) */
.game-fab__item--back svg {
  fill: var(--f168-status-error);
}

/* 折叠按钮（箭头） */
.game-fab__item--close svg {
  fill: var(--f168-bg-page);
}

/* 保留备用的旧 game-modal-close-btn 并将其隐藏 */
.game-modal-close-btn {
  display: none !important;
}

/* Back to Top — BO clone parity 789k.ing (shell 480px thay 487px) */
.c-back-to-top {
  position: fixed;
  right: 5px;
  bottom: 85px;
  z-index: 900;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
  transform: translateY(20px);
  cursor: pointer;
}

@media (min-width: 481px) {
  .c-back-to-top {
    right: calc(50% - var(--f168-shell-half, 240px) + 12px);
  }
}

.c-back-to-top.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.c-back-to-top ._floatBox_17fp6_45 {
  width: auto;
  height: 30px;
  padding: 5px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-back-to-top ._toTop_24tej_45 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--f168-accent-secondary);
}

.c-back-to-top ._iconWrap_24tej_60 {
  width: 18px;
  height: 18px;
  border-radius: 15px;
  background: hsl(var(--main));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-back-to-top ._iconWrap_24tej_60 svg {
  width: 12px;
  height: auto;
  color: var(--f168-bg-page);
}

.c-back-to-top ._title_24tej_72 {
  font-size: 9.3px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: var(--f168-bg-page);
}

/* ==========================================================================
   回到顶部按钮：滚动时向内缩进
   ========================================================================== */
body.is-scrolling .c-back-to-top.show {
  transform: translateY(0) translateX(65%);
  opacity: 0.72;
}

/* ==========================================================================
   报告页面 – 账户，投注历史，报告，找回余额
   ========================================================================== */

.report-page {
  background: var(--f168-bg-surface);
  min-height: 100vh;
}

.report-page__wrap {
  --rp-primary: var(--f168-accent);
  --rp-text: var(--f168-text-dark);
  --rp-text-secondary: var(--f168-text-muted);
  --rp-border: var(--f168-bg-surface);
  --rp-bg: var(--f168-bg-page);
  --rp-deposit: var(--f168-status-success);
  --rp-withdraw: var(--f168-status-error);
  --rp-promo: var(--f168-accent);
  background: var(--f168-bg-surface);
  min-height: 100vh;
}

.report-body {
  padding: 0;
}

/* ---- 信息卡（余额 + 回收按钮） ---- */
.rp-account__top {
  background: var(--f168-bg-page);
  padding: 14px 16px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rp-border);
}

.rp-account__info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.rp-account__balance-wrap {
  flex: 1;
}

.rp-account__balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rp-account__balance-label {
  font-size: 12px;
  color: var(--rp-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.rp-account__balance-value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-account__balance-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rp-primary);
  letter-spacing: 0.5px;
}

.rp-account__refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rp-primary);
  font-size: 1rem;
  animation: rp-spin 2s linear infinite;
}

@keyframes rp-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rp-account__recover-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rp-primary);
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.rp-account__recover-btn:hover {
  opacity: 0.75;
}

.rp-account__recover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  transform: scaleX(-1);
}

.rp-account__tips {
  font-size: 12px;
  color: var(--rp-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ---- 过滤器 ---- */
.rp-account__filters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* 始终单行 */
  gap: 8px;
  padding: 10px 12px;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--rp-border);
  overflow-x: auto;
  /* Scroll ngang */
  overflow-y: visible;
  /* 确保下拉菜单不被垂直剪切 */
  white-space: nowrap;
  scrollbar-width: none;
  /* 隐藏 Firefox 滚动条 */
  -ms-overflow-style: none;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll iOS */
}

.rp-account__filters::-webkit-scrollbar {
  display: none;
}

.rp-filter-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--rp-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--rp-text);
  background: var(--f168-bg-page);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.rp-filter-select:hover {
  border-color: var(--rp-primary);
  color: var(--rp-primary);
}

.rp-filter-select__label {
  font-size: 12px;
}

.rp-filter-select__arrow {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  color: var(--rp-text-secondary);
}

/* ---- Data list / Empty state ---- */
.rp-account__data-list {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--f168-bg-page);
  margin-bottom: 0;
  padding: 24px 16px;
}

.rp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.rp-empty-state__img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  opacity: 0.85;
}

.rp-empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--rp-text-secondary);
}

.rp-empty-state__date {
  font-weight: 500;
  color: var(--rp-text);
}

.rp-empty-state__more {
  color: var(--rp-primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- 页脚总结 ---- */
.rp-account__footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 16px;
  background: var(--f168-bg-page);
  border-top: 1px solid var(--rp-border);
  position: sticky;
  bottom: 70px;
  z-index: 10;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}

.rp-account__footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.rp-account__footer-item+.rp-account__footer-item {
  border-left: 1px solid var(--rp-border);
}

.rp-account__footer-label {
  font-size: 11px;
  color: var(--rp-text-secondary);
}

.rp-account__footer-value {
  font-size: 14px;
  font-weight: 600;
}

.rp-account__footer-value--deposit {
  color: var(--rp-deposit);
}

.rp-account__footer-value--withdraw {
  color: var(--rp-withdraw);
}

.rp-account__footer-value--promo {
  color: var(--rp-promo);
}

/* ---- Dropdown filter wrapper ---- */
.rp-filter-dropdown {
  position: relative;
  flex-shrink: 0;
}

/* 覆盖: 当有行数据时，data-list在table模式下不居中 */
.rp-account__data-list--table {
  display: block;
  padding: 0;
  min-height: 200px;
}

/* ---- Dropdown menu (pill select) ---- */
.rp-filter-menu {
  display: none;
  position: fixed;
  /* 跳出所有 overflow 父级限制 */
  min-width: 160px;
  background: var(--f168-bg-page);
  border: 1px solid var(--rp-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  /* 层级始终在一切上方 */
  overflow: hidden;
}

.rp-filter-menu.open {
  display: block;
}

.rp-filter-menu__item {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--rp-text);
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--f168-bg-surface);
}

.rp-filter-menu__item:last-child {
  border-bottom: none;
}

.rp-filter-menu__item:hover {
  background: var(--f168-accent-12);
  color: var(--rp-primary);
}

.rp-filter-menu__item.active {
  color: var(--rp-primary);
  font-weight: 600;
  background: var(--f168-accent-22);
}

/* ---- Transaction list ---- */
.rp-tx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rp-border);
  background: var(--f168-bg-page);
  gap: 12px;
  transition: background 0.12s;
}

.rp-tx-item:last-child {
  border-bottom: none;
}

.rp-tx-item:active {
  background: var(--f168-bg-surface);
}

.rp-tx-item__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.rp-tx-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.rp-tx-item__icon--deposit {
  background: var(--f168-bg-page);
  color: var(--f168-status-success);
}

.rp-tx-item__icon--withdrawal {
  background: var(--f168-bg-page)0ee;
  color: var(--f168-status-error);
}

.rp-tx-item__icon--promotion {
  background: linear-gradient(135deg, var(--f168-accent-22) 0%, var(--f168-accent-grad-mid) 100%);
  color: var(--f168-accent);
  box-shadow: 0 2px 8px var(--f168-accent-35t);
}

.rp-tx-item__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rp-tx-item__type {
  font-size: 13px;
  font-weight: 600;
  color: var(--rp-text);
}

.rp-tx-item__method {
  font-size: 11px;
  color: var(--rp-text-secondary);
}

.rp-tx-item__trx {
  font-size: 10px;
  color: var(--f168-accent-secondary);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.rp-tx-item__date {
  font-size: 11px;
  color: var(--f168-accent-secondary);
}

.rp-tx-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.rp-tx-item__amount {
  font-size: 15px;
  font-weight: 700;
}

.rp-tx-item__amount--deposit {
  color: var(--f168-status-success);
}

.rp-tx-item__amount--withdrawal {
  color: var(--f168-status-error);
}

.rp-tx-item__status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
}

.rp-tx-item__status--success {
  background: var(--f168-bg-page);
  color: var(--f168-status-success);
}

.rp-tx-item__status--pending {
  background: var(--f168-accent-12);
  color: var(--f168-text-accent);
}

.rp-tx-item__status--rejected {
  background: var(--f168-bg-page)0ee;
  color: var(--f168-status-error);
}
/* =============================================================================
   BO promote clone — /user/referral (F168 light theme, shell 480px)
   Layout clone 789k.ing; màu nền trắng + chữ tối theo asiagaming.bet
   ============================================================================= */

.bo-referral-page {
  --f168-accent__toRgbString: 255, 173, 0;
}

.bo-referral-page .bo-search-page__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0.8rem 1rem;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
}

.bo-referral-page .bo-search-page__header h3.bo-search-page__title {
  color: var(--f168-text-dark);
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1.2 !important;
}

.bo-referral-page .bo-search-page__back {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f168-text-muted);
  font-size: 1.25rem;
  display: inline-flex;
  text-decoration: none;
}

.bo-referral-page {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  background: var(--f168-bg-page);
  color: var(--f168-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, Roboto,
    'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

.bo-referral-page *,
.bo-referral-page *::before,
.bo-referral-page *::after {
  box-sizing: border-box;
}

/* Header: reuse .bo-search-page__header / __back / __title (search.blade.php) */

.bo-referral-page__tabs.ui-tabs__wrap {
  position: relative;
  padding: 0px;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
}

.bo-referral-page__tabs ._main_pjnd2_56 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 7px 10px;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bo-referral-page__tabs ._main_pjnd2_56::-webkit-scrollbar {
  display: none;
}

.bo-referral-page__tabs .ui-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px 4px;
  color: var(--f168-text-muted);
  cursor: pointer;
  user-select: none;
}

.bo-referral-page__tabs ._title_nd9o8_68 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bo-referral-page__tabs ._name_nd9o8_68 {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  white-space: nowrap;
}

.bo-referral-page__tabs .ui-tab.ui-tab--active {
  color: var(--f168-accent);
}

.bo-referral-page__tabs .ui-tabs__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 2px;
  border-radius: 999px;
  background: var(--f168-accent);
  transform: translateX(38px) translateX(-50%);
  transition: transform 0.3s ease, width 0.3s ease;
}

.bo-referral-page__panels {
  display: block;
}

.bo-referral-page__panel[hidden] {
  display: none !important;
}

/* Empty tabs — BO ui-list + ui-empty (promote) */
.bo-referral-page__empty-wrap.ui-list {
  position: relative;
  min-height: clamp(200px, 52vw, 260px);
  padding: 10px;
  box-sizing: border-box;
}

.bo-referral-page__empty-wrap.ui-list__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(200px, 52vw, 260px);
}

.bo-referral-page__empty-wrap .ui-list__container {
  width: 100%;
}

.bo-referral-page__empty-wrap .ui-list__end {
  height: 0;
  pointer-events: none;
}

.bo-referral-page__empty-wrap .ui-empty.ui-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bo-referral-page__empty-wrap .ui-empty__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bo-referral-page__empty-wrap .ui-empty__image--normal {
  display: block;
  width: clamp(108px, 28vw, 136px);
  height: auto;
  margin-top: clamp(8px, 2.5vw, 13px);
  margin-bottom: clamp(8px, 2.5vw, 13px);
  object-fit: contain;
}

.bo-referral-page__empty-wrap .ui-empty__text--normal {
  margin: 0 0 clamp(16px, 4.5vw, 24px);
  text-align: center;
  max-width: min(100%, 320px);
}

.bo-referral-page__empty-wrap ._noContent_1lqgo_45 {
  display: inline-flex;
  align-items: center;
  line-height: 1.45;
  font-size: clamp(14px, 3.6vw, 17px);
  color: var(--f168-text-muted);
}

.bo-referral-page__empty-wrap ._noContent_1lqgo_45 ._retry_1lqgo_51 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: clamp(6px, 1.8vw, 8px);
  font-size: clamp(16px, 4vw, 18px);
  color: var(--f168-accent);
  cursor: pointer;
  vertical-align: middle;
}

.bo-referral-page__empty-wrap ._noContent_1lqgo_45 ._retry_1lqgo_51 svg {
  display: block;
  width: 1em;
  height: 1em;
}

.bo-referral-page__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bo-referral-page__card {
  background: var(--f168-bg-surface);
  border-radius: 10px;
  border: 1px solid var(--f168-border);
}

/* Summary card — BO _agent-info_1g6ox (scale 750→487, ~64.93px/rem) */
.bo-referral-page__summary {
  padding: 0;
  border: none;
  background: transparent;
}

.bo-referral-page__summary ._agent-info-container_1g6ox_45 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  background-color: var(--f168-bg-page);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bo-referral-page__summary ._agent-info-content_1g6ox_67 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.bo-referral-page__summary ._agent-info-content-login_1g6ox_72 {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--f168-border);
}

.bo-referral-page__summary ._agent-level_fpulo_45 {
  position: relative;
  flex: 0 0 65px;
  margin-right: 3px;
}

.bo-referral-page__summary ._agent-level_fpulo_45 img {
  display: block;
  width: 60px;
  height: auto;
}

.bo-referral-page__summary ._agent-level_fpulo_45 ._qu_fpulo_51 {
  position: absolute;
  top: 0;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--f168-accent);
  color: var(--f168-bg-page);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Grid 2×2 bên phải medal — BO width 5.5rem */
.bo-referral-page__summary ._promote-info_1g6ox_96 {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: calc(100% - 68px);
  min-width: 0;
  margin-left: 13px;
}

.bo-referral-page__summary ._promote-info_1g6ox_96 > p {
  box-sizing: border-box;
  width: 50%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 14px;
  line-height: 1.2;
  color: var(--f168-text-muted);
}

.bo-referral-page__summary ._promote-info_1g6ox_96 > p:nth-child(1),
.bo-referral-page__summary ._promote-info_1g6ox_96 > p:nth-child(2) {
  margin-bottom: 6px;
}

.bo-referral-page__summary ._promote-info_1g6ox_96 label {
  flex: 0 0 auto;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--f168-text-muted);
  max-width: 154px;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-referral-page__summary ._commission-settle-duration_1g6ox_155 {
  flex-direction: column;
  align-items: flex-start;
}

.bo-referral-page__summary ._commission-settle-duration_1g6ox_155 label {
  max-width: 100%;
  margin-bottom: 2px;
}

.bo-referral-page__summary ._platformId_1g6ox_129 {
  max-width: 81px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--f168-accent);
}

.bo-referral-page__summary ._clickable_1g6ox_142 {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bo-referral-page__summary ._promote-info_1g6ox_96 ._number-column_sadkg_45 {
  color: var(--f168-text-dark);
  font-size: 14px;
  font-weight: 400;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
}

.bo-referral-page__summary ._agent-mode-name_1g6ox_80 {
  display: inline-block;
  max-width: 172px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(var(--f168-accent__toRgbString), 0.3);
  background: rgba(var(--f168-accent__toRgbString), 0.1);
  color: var(--f168-text-dark);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bo-referral-page__summary ._commission-settle-duration_1g6ox_155 span {
  font-size: 14px;
  font-weight: 400;
  color: var(--f168-text-dark);
}

.bo-referral-page__summary ._event-list-item_1g6ox_158 {
  padding-bottom: 0;
}

.bo-referral-page__summary ._title_1g6ox_180 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.bo-referral-page__summary ._commission-title_1g6ox_192 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--f168-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.bo-referral-page__summary ._commission-title_1g6ox_192 > span:first-child {
  display: block;
  margin-right: 0;
  margin-bottom: 2px;
  color: var(--f168-text-dark);
  font-size: 14px;
  font-weight: 700;
}

.bo-referral-page__summary ._count-down_1pp8f_45,
.bo-referral-page__summary ._count-down_1g6ox_200 {
  display: block;
  align-items: center;
  vertical-align: baseline;
  color: var(--f168-text-muted);
  font-size: 13px;
  line-height: 14px;
  white-space: nowrap;
}

.bo-referral-page__summary ._count-down_1pp8f_45 > span {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
}

.bo-referral-page__summary ._count-down_1pp8f_45 i {
  font-style: normal;
  line-height: 14px;
}

.bo-referral-page__summary ._count-down_1pp8f_45 i:first-child {
  margin-right: 3px;
}

.bo-referral-page__summary ._arrow_1g6ox_210 {
  flex: 0 0 65px;
  width: 65px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--f168-text-muted);
}

.bo-referral-page__summary ._arrow_1g6ox_210 .ui-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.3s linear;
}

/* BO: symbol #ui-arrow-418a3a hướng trái; --right xoay 180deg */
.bo-referral-page__summary ._arrow_1g6ox_210 .ui-arrow.ui-arrow--right {
  transform: rotate(180deg);
}

/* Hàng số liệu — cột cố định 2.65rem như BO */
.bo-referral-page__summary ._row_1g6ox_218 {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.bo-referral-page__summary ._row_1g6ox_218:not(:last-child) {
  margin-bottom: 13px;
}

.bo-referral-page__summary ._col_1g6ox_226 {
  flex: 0 0 130px;
  width: 130px;
  max-width: 48%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  font-size: 14px;
  color: var(--f168-text-muted);
}

.bo-referral-page__summary ._col_1g6ox_226 label {
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 3px;
  padding: 0;
  font-size: 14px;
  line-height: 1.2;
  color: var(--f168-text-muted);
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.bo-referral-page__summary ._col-no-wrap_1g6ox_266 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.bo-referral-page__summary ._unclaimed_1g6ox_245 {
  flex: 0 0 136px;
  width: 136px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.bo-referral-page__summary ._unclaimed_1g6ox_245 label {
  flex: 0 0 100%;
}

.bo-referral-page__summary ._value_1g6ox_239,
.bo-referral-page__summary ._col_1g6ox_226 ._number-column_sadkg_45 {
  margin-right: 2px;
  color: var(--f168-text-dark);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  word-break: break-word;
}

.bo-referral-page__summary ._number-column-yellow_sadkg_52 {
  color: var(--f168-accent) !important;
}

.bo-referral-page__summary .ui-button {
  flex: 0 0 65px;
  width: 65px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 5px;
  line-height: 26px;
}

.bo-referral-page__summary .ui-button--success:not(.ui-button--disabled) {
  background: var(--f168-accent);
  color: var(--f168-bg-page);
}

.bo-referral-page__summary .ui-button--disabled {
  background: var(--f168-border);
  color: var(--f168-bg-page);
  opacity: 1;
  cursor: not-allowed;
}

.bo-referral-page__summary .ui-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bo-referral-page__summary .ui-button__text {
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bo-referral-page__copy {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--f168-accent);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.bo-referral-page__copy--field {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--f168-accent);
  color: var(--f168-bg-page);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bo-referral-page__claim {
  border: 0;
  border-radius: 6px;
  background: var(--f168-text-dark);
  color: var(--f168-border);
  font-size: 12px;
  font-weight: 600;
  min-width: 48px;
  height: 28px;
  padding: 0 8px;
}

.bo-referral-page__claim:disabled {
  opacity: 0.95;
  cursor: not-allowed;
}

.bo-referral-page__ticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--f168-accent-secondary) 0%, var(--f168-accent-secondary) 45%, var(--f168-status-error) 100%);
  box-shadow: 0 0 0 1px rgba(255, 180, 60, 0.55), 0 0 12px rgba(255, 120, 0, 0.35);
}

.bo-referral-page__ticker::before,
.bo-referral-page__ticker::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--f168-accent), var(--f168-status-error), transparent);
  opacity: 0.85;
}

.bo-referral-page__ticker::before {
  top: 0;
}

.bo-referral-page__ticker::after {
  bottom: 0;
}

.bo-referral-page__ticker-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bo-referral-page__ticker-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bo-referral-page__ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--f168-text-dark) 6%, var(--f168-text-dark) 94%, transparent);
}

.bo-referral-page__ticker-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: bo-referral-ticker 28s linear infinite;
}

.bo-referral-page__ticker-track span {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--f168-bg-page);
  white-space: nowrap;
}

@keyframes bo-referral-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.bo-referral-page__invite {
  padding: 12px;
}

.bo-referral-page__invite-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.bo-referral-page__invite-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--f168-text-dark);
}

.bo-referral-page__invite-head p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  color: var(--f168-text-muted);
  text-align: right;
}

.bo-referral-page__invite-head p strong {
  color: var(--f168-text-dark);
  font-size: 14px;
  font-weight: 700;
}

.bo-referral-page__invite-body {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
}

.bo-referral-page__qr img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px 6px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--f168-bg-page);
  display: block;
  padding:5px;
}

.bo-referral-page__qr button {
  margin-top: 0px;
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 0px 0px 6px 6px;
  background: var(--f168-accent);
  color: var(--f168-bg-page);
  font-size: 11px !important;
  font-weight: 400;
}

.bo-referral-page__link {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 4px 0 8px;
  border-radius: 8px;
  background: var(--f168-bg-surface);
  border: 1px solid var(--f168-border);
}

.bo-referral-page__link input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--f168-text-dark);
  font-size: 11px;
}

.bo-referral-page__link input:focus {
  outline: 0;
}

.bo-referral-page__link-caret {
  border: 0;
  background: transparent;
  color: var(--f168-text-muted);
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}

.bo-referral-page__social {
  display: flex;
  gap: 15px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bo-referral-page__social::-webkit-scrollbar {
  display: none;
}

.bo-referral-page__social-item {
  flex: 0 0 auto;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: clamp(12px, 3.7vw, 14px);
  color: var(--f168-text-muted);
  text-align: center;
  line-height: 1.15;
}

.bo-referral-page__social-item:not(.is-share) {
  gap: clamp(4px, 1.7vw, 7px);
}

.bo-referral-page__social-icon {
  width: clamp(42px, 12.7vw, 45px);
  height: clamp(42px, 12.7vw, 45px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--f168-bg-surface);
}

.bo-referral-page__social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* BO _shareIcon_1jeu6_61 — circle border + primary icon (not filled mint bg) */
.bo-referral-page__social-item.is-share {
  gap: 0;
}

.bo-referral-page__share-icon {
  width: clamp(42px, 12.7vw, 45px);
  height: clamp(42px, 12.7vw, 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--f168-accent);
  border: 1px solid var(--f168-border);
  box-sizing: border-box;
  background: transparent;
}

.bo-referral-page__share-icon-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bo-referral-page__share-icon-inner svg {
  width: clamp(20px, 6.4vw, 23px);
  height: auto;
  display: block;
}

.bo-referral-page__share-text {
  color: var(--f168-text-muted);
  font-size: 11px;
  line-height: 1.15;
  margin-top: clamp(4px, 1.7vw, 7px);
  text-align: center;
  word-wrap: break-word;
  display: inline-block;
  max-width: clamp(65px, 20vw, 71px);
}

.bo-referral-page__social-icon.is-youtube {
  background: var(--f168-status-error);
  color: var(--f168-bg-page);
  font-size: 18px;
}

.bo-referral-page__social-icon.is-zalo {
  background: var(--f168-accent-secondary);
  color: var(--f168-bg-page);
  font-size: 12px;
  font-weight: 700;
}

.bo-referral-page__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bo-referral-page__action {
  min-height: 42px;
  padding: 0 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.bo-referral-page__action-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bo-referral-page__action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bo-referral-page__action-text {
  flex: 1;
  min-width: 0;
}

.bo-referral-page__action i {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}

.bo-referral-page__action.is-green {
  background: linear-gradient(90deg, var(--f168-status-success) 0%, var(--f168-status-success) 100%);
  color: var(--f168-bg-inverse-surface);
}

.bo-referral-page__action.is-orange {
  background: linear-gradient(90deg, var(--f168-accent) 0%, var(--f168-status-error) 100%);
  color: var(--f168-bg-inverse-surface);
}

.bo-referral-page__reward {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.bo-referral-page__reward p {
  margin: 0;
  max-width: 55%;
  font-size: 11px;
  color: var(--f168-text-muted);
  line-height: 1.35;
}

.bo-referral-page__reward-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bo-referral-page__reward-right strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--f168-accent);
}

.bo-referral-page__summary ._agent-info-container_1g6ox_45 {
  border: 1px solid var(--f168-border);
}

.bo-referral-page__summary ._agent-level_fpulo_45 ._qu_fpulo_51 {
  background-color: var(--f168-accent);
  color: var(--f168-bg-page);
}

.bo-referral-page__summary .ui-button--success:not(.ui-button--disabled) {
  background: var(--f168-accent);
  color: var(--f168-bg-page);
}

.bo-referral-page__claim {
  background: var(--f168-border);
  color: var(--f168-text-muted);
}

.bo-referral-page__reward-right strong {
  color: var(--f168-accent);
}

.bo-referral-page__action.is-green {
  background: linear-gradient(90deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%);
  color: var(--f168-bg-page);
}

.bo-referral-page__action.is-orange {
  background: linear-gradient(90deg, var(--f168-accent) 0%, var(--f168-accent) 100%);
  color: var(--f168-bg-inverse-surface);
}

.bo-referral-page__body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}


/* =============================================================================
   BO user/profile-setting — F168 light theme, shell 480px
   Layout clone 789k.ing; nền trắng + chữ tối
   ============================================================================= */

.bo-profile-page .bo-search-page__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0.8rem 1rem;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
}

.bo-profile-page .bo-search-page__header h3.bo-search-page__title {
  color: var(--f168-text-dark);
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1.2 !important;
}

.bo-profile-page .bo-search-page__back {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f168-text-muted);
  font-size: 1.25rem;
  display: inline-flex;
  text-decoration: none;
}

.bo-profile-page {
  --bo-prof-bg: var(--f168-bg-page);
  --bo-prof-surface: var(--f168-bg-page);
  --bo-prof-border: var(--f168-border);
  --bo-prof-lead: var(--f168-text-dark);
  --bo-prof-muted: var(--f168-text-muted);
  --bo-prof-muted-3: var(--f168-text-muted);
  --bo-prof-accent: var(--f168-accent);
  --bo-prof-fs-section: clamp(14px, 3.35vw, 15px);
  --bo-prof-fs-id: clamp(16px, 3.85vw, 18px);
  --bo-prof-fs-label: clamp(12px, 2.85vw, 13px);
  --bo-prof-fs-input: clamp(13px, 3.05vw, 14px);
  --bo-prof-fs-hint: clamp(11px, 2.55vw, 12px);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  background: var(--bo-prof-bg);
  color: var(--bo-prof-lead);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, Roboto,
    'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

.bo-profile-page *,
.bo-profile-page *::before,
.bo-profile-page *::after {
  box-sizing: border-box;
}

.bo-profile-page__content {
  padding: 8px 10px 96px;
  color: var(--bo-prof-muted);
}

.bo-profile-form {
  margin: 0;
}

.bo-profile-page .theme-box-shadow {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bo-profile-card {
  border-radius: 8px;
  border: 1px solid var(--bo-prof-border);
  background: var(--bo-prof-surface);
  padding: 11px 10px;
}

.bo-profile-card__avatar-area {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bo-profile-card__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: clamp(50px, 12.5vw, 56px);
  height: clamp(50px, 12.5vw, 56px);
}

.bo-profile-card__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--f168-border);
}

.bo-profile-card__avatar-edit {
  position: absolute;
  right: -1px;
  top: -1px;
  width: clamp(16px, 4vw, 18px);
  height: clamp(16px, 4vw, 18px);
  border-radius: 50%;
  background: var(--bo-prof-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bo-prof-surface);
}

.bo-profile-card__avatar-edit img {
  width: 11px;
  height: 11px;
  filter: brightness(0) invert(1);
}

.bo-profile-card__vip-badge {
  position: absolute;
  left: 0;
  bottom: -6px;
  min-width: 38px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--f168-status-success);
  color: var(--bo-prof-lead);
  font-size: var(--bo-prof-fs-hint);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.bo-profile-card__meta {
  min-width: 0;
  flex: 1;
}

.bo-profile-card__line {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 4px;
  line-height: 1.3;
}

.bo-profile-card__line + .bo-profile-card__line {
  margin-top: 5px;
}

.bo-profile-card__label {
  color: var(--bo-prof-muted);
  font-size: var(--bo-prof-fs-label);
  font-weight: 400;
}

.bo-profile-card__value {
  color: var(--bo-prof-lead);
  font-size: var(--bo-prof-fs-id);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bo-profile-card__line--id {
  align-items: center;
}

.bo-profile-card__id-text {
  color: var(--bo-prof-muted);
  font-size: var(--bo-prof-fs-label);
  font-weight: 400;
  letter-spacing: 0;
}

.bo-profile-copy {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--bo-prof-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 3.2vw, 16px);
  padding: 0;
  margin-left: 2px;
}

.bo-profile-card__line--nick {
  align-items: center;
  line-height: 1;
}

.bo-profile-card__line--nick .bo-profile-card__label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.bo-profile-card__placeholder {
  color: var(--bo-prof-muted);
  font-size: var(--bo-prof-fs-label);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bo-profile-card__placeholder i {
  color: var(--bo-prof-accent);
  font-size: clamp(12px, 2.9vw, 13px);
}

.bo-profile-card__nick-input {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
  margin-bottom: 0px;
}

.bo-profile-card__nick-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--bo-prof-muted);
  font-size: var(--bo-prof-fs-label);
  font-weight: 400;
  line-height: 1;
  height: 1em;
  min-height: 0;
  outline: none;
  padding: 0;
  margin: 0;
}

.bo-profile-card__nick-input input::placeholder {
  color: var(--bo-prof-muted-3);
}

.bo-profile-card__nick-input i {
  color: var(--bo-prof-accent);
  font-size: clamp(12px, 2.9vw, 13px);
  flex-shrink: 0;
}

.bo-profile-card__nick-check {
  font-size: clamp(12px, 2.9vw, 13px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.bo-profile-input__select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--bo-prof-muted);
  font-size: var(--bo-prof-fs-input);
  font-weight: 400;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
}

.bo-profile-input__select option {
  color: var(--f168-bg-inverse);
  background: var(--f168-bg-page);
}

.bo-profile-input input[type="date"] {
  color-scheme: light;
}

.bo-profile-page__small-title,
.bo-profile-page__group-title,
.bo-profile-page__birthday-title {
  margin: 12px 0 7px;
  color: var(--bo-prof-lead);
  font-size: var(--bo-prof-fs-section);
  font-weight: 700;
  line-height: 1.3;
}

.bo-profile-page__small-title {
  margin-top: 10px;
}

.bo-profile-page__birthday-title span {
  color: var(--bo-prof-muted-3);
  font-size: var(--bo-prof-fs-hint);
  font-weight: 400;
}

.bo-profile-input-list {
  display: grid;
  gap: 7px;
}

.bo-profile-input {
  display: flex;
  align-items: center;
  min-height: clamp(40px, 10vw, 44px);
  border-radius: 8px;
  border: 1px solid hsl(var(--main));
  background: var(--bo-prof-surface);
  color: var(--bo-prof-lead);
  padding: 0 10px;
  margin-bottom: 5px;
}

.bo-profile-input input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--bo-prof-muted);
  font-size: var(--bo-prof-fs-input);
  font-weight: 400;
  outline: none;
}

.bo-profile-input input::placeholder {
  color: var(--bo-prof-muted-3);
  font-weight: 400;
}

.bo-profile-input__prefix {
  margin-right: 6px;
  color: var(--bo-prof-muted);
  font-weight: 400;
  font-size: var(--bo-prof-fs-input);
  flex-shrink: 0;
}

.bo-profile-input--select input[readonly] {
  color: var(--bo-prof-muted);
}

.bo-profile-input--display {
  cursor: default;
}

.bo-profile-input__prefix--user {
  color: var(--bo-prof-muted-3);
  font-size: clamp(16px, 3.8vw, 18px);
}

.bo-profile-input__display-value {
  color: var(--bo-prof-lead);
  font-weight: 400;
  pointer-events: none;
}

.bo-profile-input__suffix {
  margin-left: auto;
  padding-left: 6px;
  color: var(--bo-prof-muted-3);
  font-size: clamp(14px, 3.2vw, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bo-profile-input--social {
  cursor: text;
}

.bo-profile-input__social {
  width: clamp(22px, 5.4vw, 24px);
  height: clamp(22px, 5.4vw, 24px);
  border-radius: 50%;
  margin-right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2.9vw, 14px);
  color: var(--f168-bg-page);
  flex-shrink: 0;
}

.bo-profile-input__social--wechat {
  background: var(--f168-status-success);
}

.bo-profile-input__social--whatsapp {
  background: var(--f168-status-success);
}

.bo-profile-input__social--facebook {
  background: var(--f168-accent-secondary);
}

.bo-profile-input__social--telegram {
  background: var(--f168-accent-secondary);
}

.bo-profile-input--select input[readonly] {
  cursor: default;
}

.bo-profile-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--f168-shell-width, 480px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 9px 10px 12px;
  background: color-mix(in srgb, var(--bo-prof-bg) 94%, transparent);
  border-top: 1px solid var(--bo-prof-border);
  z-index: 30;
}

.bo-profile-btn {
  min-height: clamp(40px, 10vw, 42px);
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: clamp(14px, 3.25vw, 15px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bo-profile-btn--default {
  border-color: var(--f168-accent);
  color: var(--f168-accent);
  background: transparent;
}

.bo-profile-btn--primary {
  border-color: var(--f168-accent);
  background: var(--f168-accent);
  color: var(--f168-bg-page);
}

.bo-profile-page .theme-box-shadow {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bo-profile-card__avatar-edit img {
  filter: brightness(0) invert(1);
}

.bo-profile-btn--default {
  background: var(--f168-bg-page);
}

.bo-profile-btn--primary:hover,
.bo-profile-btn--default:hover {
  opacity: 0.9;
}

.bo-profile-actions {
  background: color-mix(in srgb, var(--f168-bg-page) 96%, transparent);
  backdrop-filter: blur(6px);
}


/* =============================================================================
   BO user/coupon — F168 light theme, shell 480px
   Layout clone 789k.ing; nền trắng + chữ tối
   ============================================================================= */

.bo-coupon-page {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  background: var(--f168-bg-page);
  color: var(--f168-text-muted);
}

.bo-coupon-page *,
.bo-coupon-page *::before,
.bo-coupon-page *::after {
  box-sizing: border-box;
}

.bo-coupon-page ._base-layout_1ha3p_45 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bo-coupon-page .lobby-base-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 51px;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
  padding: 0.8rem 1rem;
  flex: 0 0 auto;
}

.bo-coupon-page .lobby-base-header__section {
  display: flex;
  align-items: center;
}

.bo-coupon-page .lobby-base-header__section--left {
  min-width: 2.75rem;
}

.bo-coupon-page .lobby-base-header__section--center {
  flex: 1;
  min-width: 0;
  justify-content: center;
  color: var(--f168-text-dark);
  text-align: center;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
}

.bo-coupon-page .lobby-base-header__section--right {
  min-width: 2.5rem;
}

.bo-coupon-page .lobby-base-header__back {
  width: 2.75rem;
  height: 100%;
  margin-left: -0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
  text-decoration: none;
}

.bo-coupon-page .lobby-base-header__back .ui-arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.05rem;
  transition: transform 0.3s linear;
}

.bo-coupon-page .lobby-base-header__back .ui-arrow svg {
  display: block;
}

.bo-coupon-page ._section-content_1ha3p_69 {
  flex: 1 1 auto;
  min-height: 0;
}

.bo-coupon-page ._coupon_oia7v_45 {
  height: calc(100vh - 51px);
  display: flex;
  flex-direction: column;
}

.bo-coupon-page ._tabs_oia7v_58 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bo-coupon-page ._tabs_oia7v_58 .ui-tabs__wrap {
  background-color: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
  flex: 0 0 auto;
}

.bo-coupon-page .bo-coupon-page__tabs-nav {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  max-height: 40px;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bo-coupon-page .bo-coupon-page__tabs-nav::-webkit-scrollbar {
  display: none;
}

.bo-coupon-page ._tabs_oia7v_58 .ui-tab {
  position: relative;
  z-index: 1;
  flex: none;
  margin: 0 10px;
  padding: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-dark);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.bo-coupon-page ._tabs_oia7v_58 .ui-tab:not(.ui-tab--active) {
  color: var(--f168-text-muted);
}

.bo-coupon-page ._tabs_oia7v_58 .ui-tab.ui-tab--active {
  color: var(--f168-accent);
}

.bo-coupon-page ._tabs_oia7v_58 .ui-tabs__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  height: 2px;
  border-radius: 999px;
  background: var(--f168-accent);
  transform: translateX(52px) translateX(-50%);
  transition: transform 0.3s ease, width 0.3s ease;
}

.bo-coupon-page ._tabs_oia7v_58 .ui-tabs__content {
  flex: 1 1 auto;
  min-height: 0;
}

.bo-coupon-page .bo-coupon-page__swipe {
  height: 100%;
  overflow: hidden;
}

.bo-coupon-page .bo-coupon-page__swipe-track {
  display: flex;
  height: 100%;
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: 300ms;
}

.bo-coupon-page .ui-tab__panel-wrapper {
  flex: 0 0 auto;
  height: 100%;
}

.bo-coupon-page .ui-tab__panel {
  height: 100%;
}

.bo-coupon-page ._list_j04ff_45 {
  width: 100%;
  height: 100%;
}

.bo-coupon-page .ui-list.ui-list__center {
  min-height: calc(100vh - 142px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.bo-coupon-page .ui-empty.ui-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bo-coupon-page .ui-empty__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bo-coupon-page .ui-empty__image--normal {
  display: block;
  width: clamp(118px, 32vw, 148px);
  height: auto;
  object-fit: contain;
}

.bo-coupon-page .ui-empty__text--normal {
  margin-top: 12px;
  color: var(--f168-text-muted);
  line-height: 1.35;
  max-width: 240px;
}

.bo-coupon-page ._empty-text_l4shk_45 {
  font-size: 14px;
}

.bo-coupon-page ._empty-text_l4shk_45 ._more_l4shk_48 {
  color: var(--f168-accent);
}

/* =============================================================================
   BO user/security/phone — F168 light theme, shell 480px
   ============================================================================= */

.bo-phone-bind-page .bo-search-page__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0.8rem 1rem;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
}

.bo-phone-bind-page .bo-search-page__header h3.bo-search-page__title {
  color: var(--f168-text-dark);
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1.2 !important;
}

.bo-phone-bind-page .bo-search-page__back {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f168-text-muted);
  font-size: 1.25rem;
  display: inline-flex;
  text-decoration: none;
}

.bo-phone-bind-page {
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 88px;
  background: var(--f168-bg-page);
}

.bo-phone-bind-page .bo-search-page__header {
  border-bottom: 1px solid var(--f168-border);
}

.bo-phone-bind-page__content {
  padding: clamp(12px, 3.4vw, 14px) clamp(14px, 3.8vw, 16px);
}

.bo-phone-bind-page__label {
  margin: clamp(12px, 3.6vw, 16px) 0 clamp(8px, 2.6vw, 10px);
  font-size: 14px;
  color: var(--f168-text-dark) !important;
}

.bo-phone-bind-field {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.2vw, 10px);
  padding: clamp(10px, 2.9vw, 12px) clamp(12px, 3.2vw, 14px);
  border-radius: clamp(10px, 2.9vw, 12px);
  border: 1px solid hsl(var(--main));
  background: var(--f168-bg-page);
  overflow: visible;
}

.bo-phone-bind-field__prefix {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.8vw, 8px);
  flex-shrink: 0;
  padding-left: clamp(4px, 1.2vw, 6px);
  margin-left: 0;
  color: var(--f168-text-muted);
}

.bo-phone-bind-flag-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 7.5vw, 32px);
  min-width: clamp(28px, 7.5vw, 32px);
  height: clamp(20px, 5.5vw, 22px);
  overflow: visible;
}

.bo-phone-bind-flag {
  display: block;
  width: clamp(26px, 7vw, 30px);
  height: auto;
  max-height: clamp(17px, 4.9vw, 21px);
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
}

.bo-phone-bind-dial {
  font-size: clamp(13px, 3.4vw, 14px);
  font-weight: 600;
}

.bo-phone-bind-divider {
  width: 1px;
  height: clamp(20px, 5.8vw, 22px);
  background: var(--f168-border);
  flex-shrink: 0;
}

.bo-phone-bind-field__wrap {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.bo-phone-bind-input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: clamp(14px, 3.5vw, 15px);
  color: var(--f168-text-dark);
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  padding-inline-start: clamp(4px, 1.2vw, 6px);
}

.bo-phone-bind-input::placeholder {
  color: var(--f168-text-muted);
  text-align: left;
  opacity: 1;
}

.bo-phone-bind-footer-spacer {
  flex: 1 1 auto;
  min-height: clamp(140px, 36vw, 180px);
}

.bo-phone-bind-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--f168-shell-width, 480px));
  padding: 10px clamp(12px, 3.6vw, 14px) max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--f168-bg-page) 94%, transparent) 82%,
    transparent
  );
  z-index: 30;
}

.bo-phone-bind-submit {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: clamp(42px, 11vw, 46px);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(14px, 3.55vw, 15px);
  color: var(--f168-bg-page);
  cursor: pointer;
  background: hsl(var(--main));
}
.bo-phone-verify__hint {
  font-size: clamp(13px, 3.4vw, 14px);
  line-height: 1.35;
  color: var(--f168-text-muted);
  margin-bottom: clamp(14px, 4vw, 18px);
}

.bo-phone-verify-form .cmn-btn {
  width: 100%;
  min-height: clamp(42px, 11vw, 46px);
  border-radius: clamp(22px, 6.2vw, 24px);
  border: none;
  font-weight: 700;
  font-size: clamp(14px, 3.55vw, 15px);
  color: var(--f168-bg-page);
  background: hsl(var(--main));
}

.bo-phone-verify-form .verification-code-wrapper label {
  color: var(--f168-text-dark);
}

.bo-phone-verify-footer {
  margin-top: clamp(16px, 4.5vw, 20px);
}

.bo-phone-verify-resend {
  text-align: center;
  margin-top: 10px;
  color: var(--f168-text-muted);
}

.bo-phone-verify-resend a {
  color: hsl(var(--main));
}

/* =============================================================================
   BO user/notice — F168 light theme, shell 480px
   ============================================================================= */

.bo-user-notice-page {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  background: var(--f168-bg-page);
  color: var(--f168-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, Roboto,
    'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

.bo-user-notice-page *,
.bo-user-notice-page *::before,
.bo-user-notice-page *::after {
  box-sizing: border-box;
}

.bo-user-notice-page .bo-search-page__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0.8rem 1rem;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
  flex: 0 0 auto;
}

.bo-user-notice-page .bo-search-page__header h3.bo-search-page__title {
  color: var(--f168-text-dark);
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1.2 !important;
}

.bo-user-notice-page .bo-search-page__back {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f168-text-muted);
  font-size: 1.25rem;
  display: inline-flex;
  text-decoration: none;
}

.bo-user-notice-page ._base-layout_1ha3p_45 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bo-user-notice-page ._section-content_1ha3p_69 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bo-user-notice-page .global-views-notice._main_iuxq6_45 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bo-user-notice-page .global-notice-tabs {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.bo-user-notice-page .global-notice-tabs > .ui-tabs__wrap {
  background-color: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
  flex: 0 0 auto;
}

.bo-user-notice-page .bo-user-notice-page__tabs-nav {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  max-height: 40px;
  padding: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bo-user-notice-page .bo-user-notice-page__tabs-nav::-webkit-scrollbar {
  display: none;
}

.bo-user-notice-page .global-notice-tabs a.ui-tab.tab-item {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bo-user-notice-page .global-notice-tabs a.ui-tab.tab-item,
.bo-user-notice-page .global-notice-tabs a.ui-tab.tab-item:visited {
  color: var(--f168-text-muted);
}

.bo-user-notice-page .global-notice-tabs a.ui-tab.tab-item.ui-tab--active,
.bo-user-notice-page .global-notice-tabs a.ui-tab.tab-item.ui-tab--active:visited {
  color: hsl(var(--main));
}

.bo-user-notice-page .global-notice-tabs .ui-tab.tab-item {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-width: max-content;
  margin: 0 8px;
  padding: 0 4px 2px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.bo-user-notice-page .global-notice-tabs .ui-tab.ui-tab--active {
  color: hsl(var(--main));
}

.bo-user-notice-page .global-notice-tabs .ui-tabs__line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: hsl(var(--main));
  transition: transform 0.3s ease, width 0.3s ease;
}

.bo-user-notice-page .global-notice-tabs .ui-badge__wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font: inherit;
}

.bo-user-notice-page .global-notice-tabs > .ui-tabs__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bo-user-notice-page .bo-user-notice-page__panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bo-user-notice-page .bo-user-notice-page__panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bo-user-notice-page .bo-user-notice-page__panel-scroll:has(.bo-notice-help-center) {
  padding: 0 10px 12px;
}

.bo-user-notice-page .bo-user-notice-page__panel-placeholder {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  color: var(--f168-text-muted);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.bo-user-notice-page .bo-notice-help-center._radius-box_1mzhz_52,
.bo-user-notice-page .bo-notice-help-center ._radius-box_1mzhz_52 {
  background-color: var(--f168-bg-surface);
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.bo-user-notice-page .bo-notice-help-center ._normal-question-and-hot-question_1wmc0_45 {
  margin: 13px 0;
  padding: 13px;
}

.bo-user-notice-page .bo-notice-help-center ._search-box_1wmc0_75 {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  justify-content: space-between;
  gap: 8px;
}

.bo-user-notice-page .bo-notice-help-center ._help-title_1wmc0_81 {
  flex: 0 0 auto;
  width: clamp(120px, 36vw, 156px);
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: 600;
  color: var(--f168-text-dark);
  line-height: 1.2;
}

.bo-user-notice-page .bo-notice-help-center ._search-bar_1wmc0_87 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 273px;
  height: 39px;
  padding: 0 13px;
  align-items: center;
  border-radius: 19px;
  display: flex;
  border: 1px solid var(--f168-border);
  background: var(--f168-bg-page);
  justify-content: space-between;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.bo-user-notice-page .bo-notice-help-center ._search-info_1wmc0_99 {
  color: var(--f168-text-muted);
  font-size: 12px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bo-user-notice-page .bo-notice-help-center ._search-icon_1wmc0_107 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--main));
  font-size: 18px;
}

.bo-user-notice-page .bo-notice-help-center ._search-icon_1wmc0_107 svg {
  display: block;
  width: 1em;
  height: 1em;
}

.bo-user-notice-page .bo-notice-help-center__tabs .ui-tabs__wrap {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.bo-user-notice-page .bo-notice-help-center__tabs-nav {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 36px;
  padding: 0 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: none;
}

.bo-user-notice-page .bo-notice-help-center__tabs-nav::-webkit-scrollbar {
  display: none;
}

.bo-user-notice-page .bo-notice-help-center__tabs-nav .ui-tabs__line {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.bo-user-notice-page .bo-notice-help-center ._tab-title_1wmc0_49 {
  flex: 0 0 auto;
  margin-right: 10px;
  padding: 0;
  color: var(--f168-text-dark);
}

.bo-user-notice-page .bo-notice-help-center ._tab-title_1wmc0_49:last-of-type {
  margin-right: 0;
}

.bo-user-notice-page .bo-notice-help-center ._tab-button_1wmc0_54 {
  min-width: 91px;
  height: 36px;
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 500;
  padding: 0 10px;
  width: auto;
  border-radius: 999px;
  border: 1px solid hsl(var(--main));
  background: hsl(var(--main));
  color: var(--f168-bg-page);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.bo-user-notice-page .bo-notice-help-center ._tab-button_1wmc0_54.ui-button--plain {
  background: transparent;
  border-color: var(--f168-border);
  color: var(--f168-text-muted);
}

.bo-user-notice-page .bo-notice-help-center .ui-tab--active ._tab-button_1wmc0_54:not(.ui-button--plain) {
  background: hsl(var(--main));
  border-color: hsl(var(--main));
  color: var(--f168-bg-page);
}

.bo-user-notice-page .bo-notice-help-center ._tab-button_1wmc0_54 .ui-button__content,
.bo-user-notice-page .bo-notice-help-center ._tab-button_1wmc0_54 .ui-button__text {
  display: inline-flex;
  align-items: center;
  line-height: 1.33;
  white-space: nowrap;
  gap: 0;
  margin-top: 3px;
}

.bo-user-notice-page .bo-notice-help-center ._icon_1wmc0_69 {
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: inherit;
}

.bo-user-notice-page .bo-notice-help-center ._icon_1wmc0_69._normal_1wmc0_45 {
  color: var(--f168-text-muted);
}

.bo-user-notice-page .bo-notice-help-center ._icon_1wmc0_69 img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  display: block;
  opacity: 0.85;
}

.bo-user-notice-page .bo-notice-help-center ._icon_1wmc0_69 svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
}

.bo-user-notice-page .bo-notice-help-center .ui-tab--active ._tab-button_1wmc0_54 ._icon_1wmc0_69,
.bo-user-notice-page .bo-notice-help-center .ui-tab--active ._tab-button_1wmc0_54 ._icon_1wmc0_69 svg {
  color: var(--f168-bg-page);
}

.bo-user-notice-page .bo-notice-help-center__swipe {
  overflow: hidden;
  width: 100%;
}

.bo-user-notice-page .bo-notice-help-center__swipe-track {
  display: flex;
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: 300ms;
}

.bo-user-notice-page .bo-notice-help-center .ui-tab__panel-wrapper {
  flex: 0 0 auto;
}

.bo-user-notice-page .bo-notice-help-center .ui-tab__panel {
  min-height: 120px;
}

.bo-user-notice-page .bo-notice-help-center ._sub-category_1km7a_45 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bo-user-notice-page .bo-notice-help-center ._sub-category_1km7a_45 li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--f168-border);
  cursor: pointer;
  color: var(--f168-text-dark);
}

.bo-user-notice-page .bo-notice-help-center ._sub-category_1km7a_45 li:last-child {
  border-bottom: none;
}

.bo-user-notice-page .bo-notice-help-center ._left-box_1km7a_63 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  height: 36px;
  gap: 0;
}

.bo-user-notice-page .bo-notice-help-center ._left-box_1km7a_63 > div:first-child {
  flex: 0 0 auto;
  margin-right: 2px;
}

.bo-user-notice-page .bo-notice-help-center ._title_1km7a_69 {
  flex: 0 1 auto;
  margin-right: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 325px;
  min-width: 0;
  font-weight: 400;
}

.bo-user-notice-page .bo-notice-help-center ._hot_1km7a_48 {
  flex: 0 0 auto;
  align-self: center;
  background: var(--f168-status-error);
  color: var(--f168-bg-page);
  height: 17px;
  min-width: 17px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.bo-user-notice-page .bo-notice-help-center ._enter_1km7a_95 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
  font-size: 14px;
  transform: rotate(180deg);
}

.bo-user-notice-page .bo-notice-help-center ._enter_1km7a_95 svg {
  display: block;
  width: 1em;
  height: 1em;
}

.bo-notice-help-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2009;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bo-notice-help-popup-overlay.isShowFrostedGlassEffect {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bo-notice-help-popup-overlay[data-hidden="0"] {
  opacity: 1;
  visibility: visible;
}

.bo-notice-help-popup-overlay[data-hidden="0"] .bo-notice-help-popup {
  animation: boNoticeHelpPopupSlideUp 0.3s ease;
}

@keyframes boNoticeHelpPopupSlideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.bo-notice-help-popup-open {
  overflow: hidden;
}

.bo-notice-help-popup._drag-service-popup_1dnhc_45 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  max-height: min(88vh, 720px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--f168-bg-page);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  outline: none;
}

.bo-notice-help-popup ._header_1dnhc_54 {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 44px;
  border-bottom: 1px solid var(--f168-border);
}

.bo-notice-help-popup ._btn-close_1dnhc_59 {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--f168-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bo-notice-help-popup ._btn-close_1dnhc_59 svg {
  display: block;
  width: 1em;
  height: 1em;
}

.bo-notice-help-popup ._title_1dnhc_72 {
  margin: 0;
  padding: 0;
  color: var(--f168-text-dark);
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bo-notice-help-popup__scroll._scroll_1dnhc_83 {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 20px;
}

.bo-notice-help-popup__answer._question-answer_1dnhc_90 {
  min-height: 120px;
  color: var(--f168-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.bo-notice-help-popup__answer img {
  max-width: 100%;
  height: auto;
}

.bo-notice-help-popup__answer a {
  color: hsl(var(--main));
}

/* CSKH popup — nội dung FAQ (strip inline BO dark → F168 light cards) */
.bo-notice-help-popup__answer--f168 {
  color: var(--f168-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__heading {
  margin: 0 0 14px;
  padding: 0;
  text-align: center;
  color: var(--f168-text-dark);
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  text-shadow: none !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__heading span {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__card {
  background: var(--f168-bg-surface) !important;
  border: 1px solid var(--f168-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
  color: var(--f168-text-muted) !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__card:last-child {
  margin-bottom: 0 !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__card-title {
  margin: 0 0 8px;
  color: var(--f168-text-dark) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__card > div:not(.bo-notice-help-answer__card-title):not(.bo-notice-help-answer__callout) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--f168-text-muted);
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__em,
.bo-notice-help-popup__answer--f168 span.bo-notice-help-answer__em {
  color: hsl(var(--main)) !important;
  font-weight: 700 !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__callout {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 173, 0, 0.35) !important;
  border-left: 4px solid hsl(var(--main)) !important;
  background: rgba(255, 173, 0, 0.1) !important;
  color: var(--f168-text-dark) !important;
  font-weight: 600;
  line-height: 1.55;
  box-shadow: none !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__shell > .bo-notice-help-answer__callout {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__footer-note {
  margin: 16px 0 0 !important;
  padding: 0 8px !important;
  text-align: center !important;
  color: var(--f168-text-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.bo-notice-help-popup__answer--f168 .bo-notice-help-answer__cta-wrap {
  margin: 14px 0 4px !important;
  padding: 0 !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.bo-notice-help-popup__answer--f168 a.bo-notice-help-cskh-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--f168-accent-secondary) 0%, hsl(var(--main)) 100%) !important;
  color: var(--f168-bg-page) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 173, 0, 0.32) !important;
  border: none !important;
  cursor: pointer;
}

.bo-notice-help-popup__answer--f168 a.bo-notice-help-cskh-link:hover,
.bo-notice-help-popup__answer--f168 a.bo-notice-help-cskh-link:focus {
  color: var(--f168-bg-page) !important;
  filter: brightness(1.04);
}

.bo-notice-help-cskh-link__icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}

.bo-notice-help-popup__answer--f168 a.bo-notice-help-cskh-link img {
  display: none !important;
}

.bo-notice-help-popup__answer--f168 img {
  border-radius: 8px;
}

.bo-notice-help-popup__answer--f168 strong,
.bo-notice-help-popup__answer--f168 b {
  color: var(--f168-text-dark);
  font-weight: 700;
}

.bo-notice-help-content-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px 16px;
  color: var(--f168-text-muted);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.bo-notice-help-content-placeholder p {
  margin: 0;
}

/* =============================================================================
   BO /home/search — F168 light theme, shell 480px
   ============================================================================= */

body.body:has([data-bo-game-search-page]) #main-scrollbar {
  overflow: visible;
}

body.body:has([data-bo-game-search-page]) {
  overflow-x: clip;
}

.bo-search-page {
  --search-icon-color: hsl(var(--main));
  box-sizing: border-box;
  width: 100%;
  max-width: var(--f168-shell-width, 480px);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  background: var(--f168-bg-page);
  color: var(--f168-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, Roboto,
    'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  overflow: visible;
  position: relative;
  z-index: 0;
}

.bo-search-page__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  background: var(--f168-bg-page);
  border-bottom: 1px solid var(--f168-border);
  padding: 0.8rem 1rem;
}

.bo-search-page__header h3.bo-search-page__title {
  color: var(--f168-text-dark);
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1.2 !important;
}

.bo-search-page__back {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f168-text-muted);
  font-size: 1.25rem;
  display: inline-flex;
  text-decoration: none;
}

.bo-search-page__content {
  padding: 0.85rem;
  color: var(--f168-text-muted);
  overflow: visible;
}

.bo-search-page__search-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.45rem;
  border-radius: 1.25rem;
  border: 1px solid var(--f168-border);
  background: var(--f168-bg-surface);
  padding: 0 0.9rem 0 0;
  overflow: visible;
  z-index: 1;
}

.bo-search-page__filter-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 6.3rem;
  overflow: visible;
  z-index: 2;
}

.bo-search-page__filter-wrap.is-open {
  z-index: 40;
}

.bo-search-page__filter-btn {
  height: 2.35rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.03rem;
  text-align: left;
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bo-search-page__filter-btn .caret {
  font-size: 0.9rem;
  color: var(--f168-text-muted);
  transition: transform 0.2s ease;
}

.bo-search-page__filter-wrap.is-open .bo-search-page__filter-btn .caret {
  transform: rotate(180deg);
}

.bo-search-page__dropdown {
  position: absolute;
  top: calc(100% + 0.06rem);
  left: 0;
  width: 160px;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  border-radius: 0 0 0.72rem 0.72rem;
  background: var(--f168-bg-page);
  border: 1px solid var(--f168-border);
  border-top: 0;
  display: none;
  z-index: 41;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.bo-search-page__filter-wrap.is-open .bo-search-page__dropdown {
  display: block;
}

.bo-search-page__dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bo-search-page__dropdown button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font-size: 1.05rem;
  padding: 0.62rem 0.92rem;
}

.bo-search-page__dropdown button.is-active {
  color: hsl(var(--main));
}

.bo-search-page__divider {
  width: 1px;
  align-self: stretch;
  margin: 0.5rem 0;
  background: var(--f168-border);
}

.bo-search-page__input-wrap {
  position: relative;
  flex: 1 1 auto;
}

.bo-search-page__input {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.06rem;
  line-height: 1.3;
  padding: 0.6rem 0.7rem;
  outline: none;
}

.bo-search-page__input:not(:placeholder-shown) {
  color: var(--f168-text-dark);
}

.bo-search-page__input::placeholder {
  color: var(--f168-text-muted);
}

.bo-search-page__search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--search-icon-color);
  font-size: 1.35rem;
  padding: 0 0 0 0.3rem;
  line-height: 1;
  cursor: pointer;
}

.bo-search-page__search-submit .ui-input__suffix-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.bo-search-page__search-submit .ui-input__suffix-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  color: var(--f168-text-muted);
}

.bo-search-page__empty-wrap {
  min-height: calc(100vh - 12rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.bo-search-page__search-result-area {
  margin-top: 0.9rem;
}

.bo-search-page__search-result-area ._layout-headline_3asv0_45 {
  margin-bottom: 0.55rem;
}

.bo-search-page__search-result-area ._title_1rjzc_45 {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--f168-text-dark);
}

.bo-search-page__search-result-area ._search-icon-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--f168-text-muted);
}

.bo-search-page__search-result-area ._title-text_1rjzc_51 {
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 700;
}

.bo-search-page__game-grid {
  --list-ordinary-width: 2.26rem;
  --list-ordinary-height: 1.42rem;
  --list-ordinary-left-right-spacing: 0.2rem;
  --list-ordinary-top-bot-spacing: 0.2rem;
  --list-ordinary-left-right-spacing-adapt: 0.01rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.bo-search-page__game-card {
  cursor: pointer;
  min-width: 0;
}

.bo-search-page__game-poster {
  width: 100%;
  aspect-ratio: 226 / 142;
  border-radius: 0.34rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--f168-border);
}

.bo-search-page__game-name {
  margin-top: 0.24rem;
  color: var(--f168-text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bo-search-page__load-more {
  text-align: center;
  margin-top: 0.55rem;
  color: var(--f168-text-muted);
  font-size: 0.82rem;
}

.bo-search-page__load-more[hidden] {
  display: none !important;
}

.bo-search-page__load-more ._trigger-text_jm7c7_52 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: hsl(var(--main));
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
}

.bo-search-page__load-more ._trigger-text_jm7c7_52[hidden] {
  display: none !important;
}

.bo-search-page__load-more-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bo-search-page__empty-wrap .ui-empty.ui-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bo-search-page__empty-wrap .ui-empty__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  max-width: 100%;
}

.bo-search-page__empty-wrap .ui-empty__image--normal {
  display: block;
  width: 120px;
  height: auto;
  max-width: min(72vw, 200px);
  max-height: min(72vw, 200px);
  object-fit: contain;
}

.bo-search-page__empty-wrap .ui-empty__text--normal {
  font-size: 15px !important;
  line-height: 1.4;
  color: var(--f168-text-muted) !important;
  margin: 0;
  text-align: center;
}