.elementor-25883 .elementor-element.elementor-element-d9ba820{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--border-radius:0px 0px 0px 0px;}.elementor-25883 .elementor-element.elementor-element-d9ba820.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-25883 .elementor-element.elementor-element-2ca8fae{width:100%;max-width:100%;}.elementor-25883 .elementor-element.elementor-element-2ca8fae.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-25883 .elementor-element.elementor-element-d9ba820{--width:50%;}}@media(max-width:1366px) and (min-width:768px){.elementor-25883 .elementor-element.elementor-element-d9ba820{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-25883 .elementor-element.elementor-element-d9ba820{--width:100%;}}@media(max-width:1366px){.elementor-25883 .elementor-element.elementor-element-d9ba820{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:0px 0px 15px 15px;}.elementor-25883 .elementor-element.elementor-element-d9ba820.e-con{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-25883 .elementor-element.elementor-element-2ca8fae{width:100%;max-width:100%;}}@media(max-width:1024px){.elementor-25883 .elementor-element.elementor-element-d9ba820{--justify-content:space-evenly;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:0px 0px 10px 10px;}.elementor-25883 .elementor-element.elementor-element-2ca8fae{width:100%;max-width:100%;}}@media(max-width:767px){.elementor-25883 .elementor-element.elementor-element-d9ba820{--flex-wrap:nowrap;--border-radius:0px 0px 10px 10px;}.elementor-25883 .elementor-element.elementor-element-2ca8fae{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-2ca8fae *//* =========================================================
   01. 主题变量与基础隔离
========================================================== */
.bp-bayani-header,
.bp-bayani-header * {
  box-sizing: border-box;
}

.bp-bayani-header {
  --bayani-red: #e6002d;
  --bayani-red-dark: #b90023;
  --bayani-blue: #0546a8;
  --bayani-blue-deep: #063476;
  --bayani-gold: #f5b72e;
  --bayani-gold-light: #ffe09a;
  --bayani-ink: #242126;

  position: relative;
  z-index: 9999;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding:
    max(8px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    10px
    max(14px, env(safe-area-inset-left));

  background:
    radial-gradient(circle at 50% -62%, rgba(245,183,46,.22), transparent 50%),
    linear-gradient(112deg, rgba(5,70,168,.045), transparent 35% 65%, rgba(230,0,45,.045)),
    rgba(255,255,255,.975);
  border-bottom: 1px solid rgba(5,70,168,.11);
  box-shadow: 0 9px 30px rgba(16,37,76,.075), 0 2px 8px rgba(230,0,45,.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

/* 菲律宾太阳光芒：纯装饰，不影响点击 */
.bp-bayani-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px;
  left: 50%;
  width: 190px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(245,183,46,.10) 0 7deg,
    transparent 7deg 22.5deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 23% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 0 22%, #000 23% 66%, transparent 67%);
  pointer-events: none;
}

/* 蓝—金—红英雄日底线 */
.bp-bayani-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bayani-blue) 18%,
    var(--bayani-gold) 43% 57%,
    var(--bayani-red) 82%,
    transparent 100%
  );
  opacity: .88;
  pointer-events: none;
}

/* =========================================================
   02. 四列自适应布局
========================================================== */
.bp-bayani-header__inner {
  width: min(100%, 1180px);
  min-height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns:
    minmax(148px, 1fr)
    54px
    clamp(180px, 22vw, 238px)
    54px;
  align-items: center;
  gap: clamp(12px, 3vw, 42px);
}

.bp-bayani-header__inner > * { min-width: 0; }

/* =========================================================
   03. 品牌 Logo 与主题胶囊
========================================================== */
.bp-bayani-brand {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 54px;
  color: var(--bayani-blue-deep);
  border-radius: 14px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bp-bayani-brand > img {
  display: block;
  width: clamp(132px, 15vw, 174px);
  max-width: 100%;
  height: auto;
  max-height: 57px;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.bp-bayani-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -3px 0 0 4px;
  padding: 2px 7px 2px 4px;
  max-width: 100%;
  color: var(--bayani-blue-deep);
  background: linear-gradient(90deg, rgba(5,70,168,.08), rgba(245,183,46,.12), rgba(230,0,45,.07));
  border: 1px solid rgba(245,183,46,.32);
  border-radius: 999px;
  font: 800 8.5px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bp-bayani-kicker i {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--bayani-gold-light) 0 19%, var(--bayani-gold) 20% 42%, transparent 44%),
    repeating-conic-gradient(var(--bayani-gold) 0 8deg, transparent 8deg 22.5deg);
  filter: drop-shadow(0 1px 2px rgba(126,79,0,.2));
}

/* =========================================================
   04. 下载与搜索按钮
========================================================== */
.bp-bayani-action {
  position: relative;
  justify-self: center;
  width: 54px;
  height: 54px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--bayani-ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,249,255,.98)) padding-box,
    linear-gradient(135deg, rgba(5,70,168,.42), rgba(245,183,46,.58), rgba(230,0,45,.38)) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(6,52,118,.09), inset 0 1px 0 #fff;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.bp-bayani-action::before {
  content: "";
  position: absolute;
  inset: auto 7px 5px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--bayani-blue), var(--bayani-gold), var(--bayani-red));
  opacity: .7;
}

.bp-bayani-action > img {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 3px 5px rgba(6,52,118,.12));
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.bp-bayani-search { justify-self: end; }

.bp-bayani-action--app::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: var(--bayani-red);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(230,0,45,.12);
  animation: bpBayaniPulse 2s ease-in-out infinite;
}

/* =========================================================
   05. 英雄日促销横幅
========================================================== */
.bp-bayani-promo {
  position: relative;
  justify-self: stretch;
  width: 100%;
  max-width: 238px;
  height: 58px;
  min-width: 0;
  padding: 4px 7px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,224,154,.24), transparent 45%),
    linear-gradient(135deg, rgba(246,249,255,.99), #fff 48%, rgba(255,247,248,.99));
  border: 1px solid rgba(245,183,46,.45);
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(6,52,118,.10), 0 0 0 3px rgba(245,183,46,.07);
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.bp-bayani-promo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.bp-bayani-promo__live {
  position: absolute;
  right: 12px;
  bottom: 2px;
  padding: 1px 5px;
  color: #fff;
  background: linear-gradient(90deg, var(--bayani-blue), var(--bayani-red));
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(6,52,118,.2);
  font: 900 6.5px/1.25 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
}

.bp-bayani-promo::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -55%;
  left: -40%;
  width: 21%;
  height: 210%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.76), transparent);
  transform: rotate(20deg);
  animation: bpBayaniShine 5.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bpBayaniShine {
  0%, 64% { left: -40%; }
  84%, 100% { left: 122%; }
}

@keyframes bpBayaniPulse {
  0%, 100% { transform: scale(.88); opacity: .72; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* =========================================================
   06. Hover、点击、键盘焦点
========================================================== */
@media (hover: hover) and (pointer: fine) {
  .bp-bayani-brand:hover > img {
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.06);
  }

  .bp-bayani-action:hover {
    color: var(--bayani-red);
    box-shadow: 0 12px 26px rgba(6,52,118,.14), 0 0 0 4px rgba(245,183,46,.09);
    transform: translateY(-2px);
  }

  .bp-bayani-action:hover > img {
    transform: scale(1.06);
    filter: saturate(1.08) drop-shadow(0 4px 7px rgba(6,52,118,.16));
  }

  .bp-bayani-promo:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 13px 29px rgba(6,52,118,.14), 0 0 0 4px rgba(230,0,45,.055);
  }
}

.bp-bayani-brand:focus-visible,
.bp-bayani-action:focus-visible,
.bp-bayani-promo:focus-visible {
  outline: 3px solid rgba(5,70,168,.28);
  outline-offset: 3px;
}

.bp-bayani-action:active,
.bp-bayani-promo:active { transform: scale(.96); }

/* =========================================================
   07. H5 与平板
========================================================== */
@media (max-width: 767px) {
  .bp-bayani-header {
    padding:
      max(6px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      8px
      max(7px, env(safe-area-inset-left));
  }

  .bp-bayani-header__inner {
    min-height: 65px;
    grid-template-columns:
      minmax(86px, 1fr)
      44px
      minmax(108px, 138px)
      44px;
    gap: clamp(4px, 1.5vw, 9px);
  }

  .bp-bayani-brand > img {
    width: min(100%, 116px);
    max-height: 48px;
  }

  .bp-bayani-kicker {
    gap: 3px;
    margin: -2px 0 0 1px;
    padding: 1px 4px 1px 2px;
    font-size: clamp(6.3px, 1.8vw, 7.5px);
    letter-spacing: .02em;
  }

  .bp-bayani-kicker i { width: 10px; height: 10px; }

  .bp-bayani-action {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .bp-bayani-action > img { width: 38px; height: 38px; }
  .bp-bayani-action--app::after { top: 5px; right: 5px; }

  .bp-bayani-promo {
    max-width: 138px;
    height: 47px;
    padding: 3px 4px 4px;
  }

  .bp-bayani-promo__live {
    right: 7px;
    bottom: 1px;
    font-size: 5px;
  }
}

/* =========================================================
   08. 360px 以下小屏
========================================================== */
@media (max-width: 360px) {
  .bp-bayani-header { padding-right: 4px; padding-left: 4px; }

  .bp-bayani-header__inner {
    min-height: 60px;
    grid-template-columns:
      minmax(76px, 1fr)
      39px
      minmax(92px, 107px)
      39px;
    gap: 3px;
  }

  .bp-bayani-brand > img {
    width: min(100%, 91px);
    max-height: 43px;
  }

  .bp-bayani-kicker span { font-size: 5.9px; }
  .bp-bayani-kicker i { width: 8px; height: 8px; }

  .bp-bayani-action {
    width: 39px;
    height: 39px;
    border-radius: 13px;
  }

  .bp-bayani-action > img { width: 34px; height: 34px; }

  .bp-bayani-promo {
    max-width: 107px;
    height: 41px;
    padding: 2px 3px 3px;
  }

  .bp-bayani-promo__live { display: none; }
}

/* =========================================================
   09. 减少动态效果
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .bp-bayani-brand > img,
  .bp-bayani-action > img,
  .bp-bayani-action,
  .bp-bayani-promo { transition: none; }

  .bp-bayani-promo::before { display: none; animation: none; }
  .bp-bayani-action--app::after { animation: none; }
}

/* ================================
   BingoPlus 单行安全滚动公告
================================ */

.bp-security-ticker {
  --ticker-height: 38px;
  --ticker-speed: 30s;

  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ticker-height);
  overflow: hidden;

  color: #263142;
  background:
    linear-gradient(
      90deg,
      #f2f7ff 0%,
      #fff7f7 52%,
      #f2f7ff 100%
    );

  border-top: 1px solid #dce6f6;
  border-bottom: 1px solid #dce6f6;

  font-family: inherit;
  font-size: 12px;
  line-height: 1;
}

/* 左侧固定安全图标 */
.bp-security-ticker__shield {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0 10px 0 14px;

  color: #fff;
  background: #138267;
  border-radius: 50%;

  font-size: 13px;
  font-weight: 900;

  box-shadow: 0 2px 8px rgba(19, 130, 103, 0.22);
}

/* 滚动可视区域 */
.bp-security-ticker__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

/* 左右淡出效果 */
.bp-security-ticker__viewport::before,
.bp-security-ticker__viewport::after {
  position: absolute;
  top: 0;
  z-index: 1;

  width: 26px;
  height: 100%;

  pointer-events: none;
  content: "";
}

.bp-security-ticker__viewport::before {
  left: 0;
  background: linear-gradient(
    90deg,
    #f2f7ff,
    rgba(242, 247, 255, 0)
  );
}

.bp-security-ticker__viewport::after {
  right: 0;
  background: linear-gradient(
    270deg,
    #f2f7ff,
    rgba(242, 247, 255, 0)
  );
}

/* 无缝滚动轨道 */
.bp-security-ticker__track {
  display: flex;
  align-items: center;
  gap: 56px;

  width: max-content;
  min-width: 100%;
  height: 100%;

  will-change: transform;

  animation:
    bp-security-scroll
    var(--ticker-speed)
    linear
    infinite;
}

/* 单条公告 */
.bp-security-ticker__item {
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  color: #263142;

  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 安全重点 */
.bp-security-ticker__item strong {
  color: #a80f15;
  font-weight: 850;
}

/* 官方验证入口 */
.bp-security-ticker__item a,
.bp-security-ticker__link-copy {
  margin-left: 12px;
  color: #d71920;
  font-weight: 850;
  text-decoration: none;
}

.bp-security-ticker__item a:hover,
.bp-security-ticker__item a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 鼠标悬停或键盘操作时暂停 */
.bp-security-ticker:hover .bp-security-ticker__track,
.bp-security-ticker:focus-within .bp-security-ticker__track {
  animation-play-state: paused;
}

/* 无缝向左滚动 */
@keyframes bp-security-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 28px));
  }
}

/* ================================
   H5适配
================================ */

@media (max-width: 680px) {
  .bp-security-ticker {
    --ticker-height: 34px;
    --ticker-speed: 24s;

    font-size: 11px;
  }

  .bp-security-ticker__shield {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-left: 10px;

    font-size: 12px;
  }

  .bp-security-ticker__track {
    gap: 42px;
  }

  .bp-security-ticker__item a,
  .bp-security-ticker__link-copy {
    margin-left: 9px;
  }

  @keyframes bp-security-scroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-50% - 21px));
    }
  }
}

/* 用户关闭动画时改为手动横向查看 */
@media (prefers-reduced-motion: reduce) {
  .bp-security-ticker__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bp-security-ticker__viewport::-webkit-scrollbar {
    display: none;
  }

  .bp-security-ticker__track {
    animation: none;
  }

  .bp-security-ticker__item[aria-hidden="true"] {
    display: none;
  }
}/* End custom CSS */