:root{
  --green:#00a65a;
  --green-2:#00d084;
  --deep:#063b24;
  --light:#f2fff8;
  --gold:#ffd36a;
  --red:#ff3b3b;
  --text:#173527;
  --muted:#6d8074;
  --line:#dceee6;
  --card:#ffffff;
  --shadow:0 12px 35px rgba(0, 88, 45, .14);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Arial,"Helvetica Neue",sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(0,208,132,.14), transparent 28%),
    linear-gradient(180deg,#f5fff9 0%,#ffffff 38%,#f4fff8 100%);
  color:var(--text);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.page{max-width:1160px;margin:0 auto;padding:14px 14px 90px}
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);background:rgba(245,255,249,.86);border-bottom:1px solid rgba(0,166,90,.15)}
.topbar-inner{max-width:1160px;margin:auto;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--green),var(--green-2));color:#fff;font-weight:900;box-shadow:0 8px 22px rgba(0,166,90,.32)}
.brand-title{font-size:18px;font-weight:900;color:var(--deep);line-height:1.1}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:8px;align-items:center;overflow-x:auto}
.nav a{white-space:nowrap;padding:9px 12px;border-radius:999px;color:#0d5c38;background:#fff;border:1px solid rgba(0,166,90,.18);font-size:13px;font-weight:700}
.nav a.active{background:linear-gradient(90deg,var(--green),var(--green-2));color:#fff;border-color:transparent}
.hero{position:relative;overflow:hidden;margin-top:16px;border-radius:26px;min-height:250px;background:linear-gradient(110deg,rgba(1,59,35,.96),rgba(0,137,74,.92) 48%,rgba(0,208,132,.88)),radial-gradient(circle at 85% 20%,rgba(255,211,106,.55),transparent 28%);color:#fff;box-shadow:var(--shadow);padding:28px}
.hero::before{content:"";position:absolute;inset:-80px -40px auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 58%)}
.hero::after{content:"⚽";position:absolute;right:34px;bottom:10px;font-size:126px;line-height:1;opacity:.18;transform:rotate(-18deg)}
.hero-content{position:relative;z-index:2;max-width:680px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:800;margin-bottom:13px}
h1{font-size:40px;line-height:1.08;margin-bottom:10px;letter-spacing:-.5px}
.hero p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.88);max-width:580px}
.hero-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{border:0;cursor:pointer;border-radius:14px;padding:12px 18px;font-weight:900;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--gold),#fff2b8);color:#513500;box-shadow:0 10px 22px rgba(255,211,106,.28)}
.btn-white{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.28)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;max-width:560px}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:13px}
.stat strong{display:block;font-size:22px;color:#fff}
.stat span{font-size:12px;color:rgba(255,255,255,.75)}
.notice{display:flex;align-items:center;gap:12px;margin:14px 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px rgba(0,88,45,.06);padding:12px 14px;overflow:hidden}
.notice-label{flex:0 0 auto;color:#fff;background:linear-gradient(90deg,var(--green),var(--green-2));border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px}
.marquee{white-space:nowrap;overflow:hidden;color:#28573e;font-weight:700}
.marquee span{display:inline-block;padding-left:100%;animation:marquee 16s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.wide-card{margin-top:16px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.section-title h2{font-size:20px;color:var(--deep)}
.section-title small{color:var(--muted);font-weight:700}
.login-box{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.input{width:100%;padding:13px 14px;border-radius:13px;border:1px solid #cfe9dc;background:#fbfffd;outline:none;color:#173527}
.input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,166,90,.1)}
.hint{font-size:13px;color:var(--muted);line-height:1.6;margin-top:11px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:9px 13px;border-radius:999px;border:1px solid #cfe9dc;background:#fff;color:#17633e;cursor:pointer;font-weight:800;font-size:13px}
.tab.active{background:linear-gradient(90deg,var(--green),var(--green-2));color:#fff;border-color:transparent}
.match-list{display:grid;gap:12px}
.match{border:1px solid #dceee6;border-radius:18px;padding:14px;background:linear-gradient(180deg,#ffffff,#fafffc)}
.match-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:12px}
.league{color:#0a8f4e;background:#ecfff5;padding:5px 9px;border-radius:999px}
.locked{color:#a25a00;background:#fff4dd}
.teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.team{display:flex;align-items:center;gap:10px;min-width:0;font-weight:900}
.team.right{justify-content:flex-end;text-align:right}
.flag{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f5f5f5;border:1px solid #e4e4e4;font-size:20px;flex:0 0 auto}
.vs{width:56px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#073b25,#00a65a);color:#fff;font-weight:900;box-shadow:0 8px 16px rgba(0,166,90,.2)}
.predict-row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:13px;flex-wrap:wrap}
.pick{display:flex;align-items:center;gap:6px;color:#335d45;font-size:13px;font-weight:800}
.score{width:48px;padding:9px;text-align:center;border-radius:12px;border:1px solid #cfe9dc;outline:none;background:#fff}
.small-btn{border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(90deg,var(--green),var(--green-2));color:#fff;font-weight:900;cursor:pointer}
.small-btn.secondary{background:#eefbf4;color:#087b45;border:1px solid #caeadb}
.small-btn.danger{background:#fff0f0;color:#c62020;border:1px solid #ffd2d2}
.small-btn:disabled{opacity:.5;cursor:not-allowed}
.prize-list{display:grid;gap:10px}
.prize{display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:16px;padding:13px;background:linear-gradient(90deg,#f2fff8,#ffffff);border:1px solid #dceee6}
.rank{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#073b25;color:var(--gold);font-weight:900}
.prize-info{flex:1}
.prize-info b{display:block;color:#173527}
.prize-info span{font-size:12px;color:var(--muted)}
.money{font-weight:900;color:#0a8f4e}
.history-table,.admin-table{width:100%;border-collapse:separate;border-spacing:0 9px;font-size:13px}
.history-table th,.admin-table th{text-align:left;color:var(--muted);font-size:12px;padding:0 8px}
.history-table td,.admin-table td{background:#f8fffb;border-top:1px solid #dceee6;border-bottom:1px solid #dceee6;padding:12px 8px;font-weight:700;vertical-align:middle}
.history-table td:first-child,.admin-table td:first-child{border-left:1px solid #dceee6;border-radius:12px 0 0 12px}
.history-table td:last-child,.admin-table td:last-child{border-right:1px solid #dceee6;border-radius:0 12px 12px 0}
.status{display:inline-block;border-radius:999px;padding:5px 8px;background:#fff6df;color:#8a5e00;font-size:12px}
.rules{display:grid;gap:10px;color:#375f49;line-height:1.65;font-size:14px}
.rules li{margin-left:20px}
.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(560px,calc(100% - 28px));background:rgba(255,255,255,.93);border:1px solid rgba(0,166,90,.18);box-shadow:0 12px 35px rgba(0,88,45,.2);backdrop-filter:blur(12px);border-radius:22px;display:grid;grid-template-columns:repeat(4,1fr);padding:8px;z-index:30}
.bottom-nav a{text-align:center;color:#246447;font-size:12px;font-weight:800;padding:8px 4px;border-radius:15px}
.bottom-nav a.active{background:#ecfff5;color:#00a65a}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#073b25;color:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 12px 28px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:.25s;z-index:50;font-weight:800}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.admin-layout{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:#073b25;color:#fff;padding:18px;position:sticky;top:0;height:100vh}
.sidebar .logo{margin-bottom:14px}
.side-menu{display:grid;gap:8px;margin-top:18px}
.side-menu button{border:0;border-radius:13px;background:rgba(255,255,255,.1);color:#fff;text-align:left;padding:12px;font-weight:800;cursor:pointer}
.side-menu button.active{background:#00a65a}
.admin-main{padding:18px;max-width:1180px;width:100%;margin:0 auto}
.admin-section{display:none}
.admin-section.active{display:block}
.admin-form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.admin-form .full{grid-column:1/-1}
.admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.kpi strong{display:block;font-size:28px;color:#00a65a}
.kpi span{color:var(--muted);font-weight:800}
.login-panel{max-width:420px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.table-scroll{overflow-x:auto}
@media(max-width:900px){
  .admin-layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .admin-form{grid-template-columns:1fr 1fr}
  .admin-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .topbar-inner{align-items:flex-start;flex-direction:column}
  .nav{width:100%;padding-bottom:2px}
  .hero{padding:22px;min-height:230px;border-radius:22px}
  h1{font-size:30px}
  .hero p{font-size:14px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{padding:10px}
  .stat strong{font-size:18px}
  .grid{grid-template-columns:1fr}
  .login-box{grid-template-columns:1fr}
  .teams{grid-template-columns:1fr;gap:8px}
  .vs{width:100%;height:34px}
  .team.right{justify-content:flex-start;text-align:left;flex-direction:row-reverse}
  .history-wrap{overflow-x:auto}
  .history-table{min-width:520px}
}
@media(max-width:520px){
  .page{padding-left:10px;padding-right:10px}
  .brand-title{font-size:16px}
  .hero{margin-top:10px;padding:18px}
  h1{font-size:26px}
  .hero-actions .btn{width:100%}
  .card{padding:14px}
  .hero-stats{grid-template-columns:1fr}
  .predict-row{align-items:flex-start}
  .pick{width:100%;justify-content:center}
  .small-btn{width:100%}
  .admin-form{grid-template-columns:1fr}
  .admin-kpis{grid-template-columns:1fr}
}


.flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.admin-flag-img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.flag {
  background: transparent;
  border: none;
  width: 30px;
  height: 22px;
  border-radius: 0;
}
/* =========================
   比分预测最终修复样式
   用途：
   1. 恢复“预测比分”布局
   2. 移除旧的“预测胜负”样式残留
   3. 修正 Logo、国旗、顶部导航、手机端显示
   ========================= */

/* 隐藏旧版“预测队伍胜利 / 平局”的按钮区域，避免和比分输入框冲突 */
.winner-row,
.winner-label,
.winner-actions,
.winner-btn {
  display: none !important;
}

/* 比分预测区域：让比分输入框和提交按钮排列更稳定 */
.predict-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

/* “Dự đoán tỉ số”文字和比分输入框整体样式 */
.pick {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #174832 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* 比分输入框样式 */
.score {
  width: 58px !important;
  height: 42px !important;
  padding: 8px !important;
  text-align: center !important;
  border-radius: 12px !important;
  border: 1px solid #bfe6d3 !important;
  background: #ffffff !important;
  color: #073b25 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  outline: none !important;
}

/* 比分输入框聚焦效果 */
.score:focus {
  border-color: #00a65a !important;
  box-shadow: 0 0 0 4px rgba(0, 166, 90, .12) !important;
}

/* Logo 尺寸修正：避免 Logo 太大撑爆顶部导航 */
.logo-img-box {
  width: 132px !important;
  height: 54px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Logo 图片保持原比例，不拉伸变形 */
.logo-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* 顶部品牌区域：Logo 和文字对齐 */
.brand {
  align-items: center !important;
  gap: 10px !important;
}

/* 顶部主标题字体 */
.brand-title {
  font-size: 17px !important;
  line-height: 1.15 !important;
}

/* 顶部副标题字体 */
.brand-sub {
  font-size: 12px !important;
}

/* 国旗外层容器：避免圆形背景影响真实国旗图片 */
.flag {
  background: transparent !important;
  border: none !important;
  width: 30px !important;
  height: 22px !important;
  min-width: 30px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 真实国旗图片样式 */
.flag-img {
  width: 24px !important;
  height: 16px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  display: inline-block !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) !important;
}

/* 后台列表国旗：和文字垂直对齐 */
.admin-flag-img {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* 账号预测操作说明：醒目提示条 */
.hint {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #eafff3, #ffffff) !important;
  border: 1px solid #00b86b !important;
  border-left: 5px solid #00a65a !important;
  color: #006b3c !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(0, 166, 90, .12) !important;
}

/* 顶部“Trang Chủ / 官网”按钮：辅助入口，不抢当前页面主按钮 */
.topbar .nav a.home-link {
  background: #ecfff5 !important;
  color: #008f50 !important;
  border: 1px solid rgba(0, 166, 90, .25) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

/* 官网按钮悬停效果 */
.topbar .nav a.home-link:hover {
  background: #dffff0 !important;
  color: #006b3c !important;
}

/* =========================
   手机端适配
   ========================= */
@media (max-width: 768px) {
  /* 手机端 Logo 略微缩小，避免顶部拥挤 */
  .logo-img-box {
    width: 118px !important;
    height: 48px !important;
  }

  /* 顶部内容靠左排列 */
  .topbar-inner {
    align-items: flex-start !important;
  }

  /* 品牌区域占满一行 */
  .brand {
    width: 100% !important;
  }

  /* 手机端标题字号 */
  .brand-title {
    font-size: 15px !important;
  }

  /* 手机端副标题字号 */
  .brand-sub {
    font-size: 11px !important;
  }

  /* 手机端比分预测区域改为上下排列 */
  .predict-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 手机端比分输入区域居中 */
  .pick {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    font-size: 14px !important;
  }

  /* 手机端比分输入框尺寸 */
  .score {
    width: 60px !important;
    height: 42px !important;
  }

  /* 手机端提交按钮占满宽度 */
  .predict-row .small-btn {
    width: 100% !important;
  }

  /* 手机端队伍区域上下排列 */
  .teams {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 手机端队伍名称靠左，避免错乱 */
  .team,
  .team.right {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
  }

  /* 手机端 VS / 比分结果条占满宽度 */
  .vs {
    width: 100% !important;
    height: 34px !important;
  }
}
/* =========================
   手机端禁止页面横向拉动修复
   ========================= */

/* 全站禁止横向溢出 */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 所有大容器不允许超出屏幕 */
.page,
.topbar,
.topbar-inner,
.hero,
.card,
.wide-card,
.notice,
.grid,
.match-list,
.match,
.admin-main,
.admin-layout {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 图片、表格、输入框不撑破页面 */
img,
input,
select,
textarea,
button {
  max-width: 100% !important;
}

/* 顶部导航允许内部横向滑动，但不让整个页面横向滑动 */
.nav {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.nav::-webkit-scrollbar {
  display: none;
}

/* 手机端重点修复 */
@media (max-width: 768px) {
  .topbar-inner {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* logo 不要撑破顶部 */
  .logo-img-box {
    width: 110px !important;
    height: 46px !important;
    max-width: 40vw !important;
  }

  .brand {
    width: 100% !important;
    min-width: 0 !important;
  }

  .brand > div:last-child {
    min-width: 0 !important;
  }

  .brand-title,
  .brand-sub {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 比赛队伍名称允许换行，不撑宽 */
  .teams {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .team,
  .team.right {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
  }

  .team span {
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* VS 条不超宽 */
  .vs {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 比分输入区域不撑破 */
  .predict-row {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .pick {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* 表格只在表格内部滑动，不让整个页面滑动 */
  .history-wrap,
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .history-table,
  .admin-table {
    min-width: 620px !important;
  }

  /* 底部导航不超出屏幕 */
  .bottom-nav {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
  }
}
/* =========================
   手机端日期筛选折叠
   ========================= */

/* 默认电脑端不折叠，按钮隐藏 */
.date-fold-btn {
  display: none;
}

/* 手机端日期太多时折叠显示 */
@media (max-width: 768px) {
  .date-tabs {
    position: relative;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: hidden !important;
    transition: max-height .25s ease;
  }

  /* 折叠状态：只显示一行半左右 */
  .date-tabs.collapsed {
    max-height: 46px !important;
  }

  /* 展开状态：显示全部日期 */
  .date-tabs.expanded {
    max-height: 260px !important;
  }

  /* 展开/收起按钮 */
  .date-fold-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 12px;
    padding: 8px 14px;
    border: 1px solid rgba(0, 166, 90, .25);
    border-radius: 999px;
    background: #ecfff5;
    color: #008f50;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
  }

  .date-fold-btn:active {
    transform: scale(.98);
  }
}
/* =========================
   电脑端恢复正常布局
   作用：避免电脑端被手机端样式影响
   ========================= */

@media (min-width: 769px) {
  /* 电脑端顶部横向布局 */
  .topbar-inner {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* 电脑端品牌区域不要占满整行 */
  .brand {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* 电脑端导航横向显示 */
  .nav {
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  .nav a {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  /* 电脑端日期全部显示，不折叠 */
  .date-tabs,
  .date-tabs.collapsed,
  .date-tabs.expanded {
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* 电脑端隐藏展开/收起按钮 */
  .date-fold-btn {
    display: none !important;
  }

  /* 电脑端卡片恢复左右布局 */
  .grid {
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: 16px !important;
  }

  /* 电脑端比赛队伍恢复三列布局 */
  .teams {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .team {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
  }

  .team.right {
    justify-content: flex-end !important;
    text-align: right !important;
    flex-direction: row !important;
  }

  /* 电脑端 VS 恢复中间小按钮 */
  .vs {
    width: 56px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  /* 电脑端比分预测恢复左右排列 */
  .predict-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .pick {
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  .predict-row .small-btn {
    width: auto !important;
  }

  /* 电脑端表格不要强制手机宽度 */
  .history-table,
  .admin-table {
    min-width: 0 !important;
  }

  /* 电脑端 Logo 尺寸 */
  .logo-img-box {
    width: 132px !important;
    height: 54px !important;
    max-width: none !important;
  }
}
/* =========================
   电脑端恢复原始布局
   只影响 769px 以上电脑端
   手机端折叠和上下布局不受影响
   ========================= */

@media (min-width: 769px) {
  /* 页面宽度恢复 */
  .page {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 14px 14px 90px !important;
    overflow-x: visible !important;
  }

  /* 顶部恢复左右横向布局 */
  .topbar-inner {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* Logo + 标题恢复横向 */
  .brand {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: auto !important;
  }

  .brand > div:last-child {
    min-width: auto !important;
  }

  .brand-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  .brand-sub {
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  /* 电脑端 Logo 尺寸 */
  .logo-img-box {
    width: 132px !important;
    height: 54px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* 顶部导航恢复横向排列 */
  .nav {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
    white-space: normal !important;
  }

  .nav a {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
  }

  /* Hero 恢复电脑端尺寸 */
  .hero {
    margin-top: 16px !important;
    padding: 28px !important;
    min-height: 250px !important;
    border-radius: 26px !important;
  }

  .hero::after {
    font-size: 126px !important;
    right: 34px !important;
    bottom: 10px !important;
    opacity: .18 !important;
  }

  h1 {
    font-size: 40px !important;
    line-height: 1.08 !important;
  }

  .hero p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .hero-actions .btn {
    width: auto !important;
  }

  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* 两栏卡片恢复 */
  .grid {
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: 16px !important;
  }

  .card,
  .wide-card {
    padding: 18px !important;
    border-radius: var(--radius) !important;
    overflow: visible !important;
  }

  .section-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .section-title h2 {
    font-size: 20px !important;
  }

  .section-title small {
    font-size: 13px !important;
  }

  .login-box {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  /* 日期电脑端全部显示，不折叠 */
  .tabs,
  .date-tabs,
  .date-tabs.collapsed,
  .date-tabs.expanded {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .date-fold-btn {
    display: none !important;
  }

  /* 比赛卡片恢复左右队伍 + 中间 VS */
  .teams {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .team {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: inherit !important;
  }

  .team.right {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .team span {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .vs {
    width: 56px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: inherit !important;
  }

  /* 比分预测恢复横向 */
  .predict-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .pick {
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  .score {
    width: 58px !important;
    height: 42px !important;
  }

  .predict-row .small-btn,
  .small-btn {
    width: auto !important;
  }

  /* 表格电脑端不要被手机端 min-width 影响 */
  .history-table,
  .admin-table {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .history-wrap,
  .table-scroll {
    overflow-x: auto !important;
  }

  /* 底部导航恢复居中宽度 */
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    width: min(560px, calc(100% - 28px)) !important;
    max-width: min(560px, calc(100% - 28px)) !important;
    border-radius: 22px !important;
  }

  .bottom-nav a {
    font-size: 12px !important;
    padding: 8px 4px !important;
  }
}


/* =========================
   世界杯扩展预测模块
   包含：冠军队预测 / Top 32 / Top 16
   ========================= */

.tournament-card {
  margin-top: 16px;
  background:
    linear-gradient(180deg, #f2fff6 0%, #ffffff 38%, #eefff4 100%);
  border: 2px solid rgba(0, 208, 132, .22);
  overflow: hidden;
}

.tournament-title {
  align-items: center;
}

.tournament-count {
  padding: 9px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #00d084, #00a65a);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 166, 90, .18);
  white-space: nowrap;
}

.tournament-tabs {
  display: flex;
  gap: 14px;
  align-items: center;
  overflow-x: auto;
  padding: 4px 0 16px;
}

.tournament-tabs::-webkit-scrollbar {
  display: none;
}

.tournament-tab {
  min-width: 160px;
  border: 1px solid rgba(0, 166, 90, .22);
  border-radius: 18px;
  padding: 12px 20px;
  background: #dffff0;
  color: #7f9690;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 166, 90, .12);
}

.tournament-tab.active {
  background: linear-gradient(90deg, #00be45, #00e45f);
  color: #ffffff;
  border-color: #00b657;
  box-shadow: 0 8px 20px rgba(0, 166, 90, .20);
}

.tournament-panel {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(120deg, #eaffef, #f8fff9);
  border: 1px solid rgba(0, 166, 90, .18);
}

.tournament-ranking {
  min-width: 0;
}

.ranking-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 190px;
  margin-bottom: 14px;
}

.podium-item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  min-height: 150px;
  border-radius: 18px 18px 8px 8px;
  padding: 14px 8px;
  color: #ffffff;
  background: linear-gradient(180deg, #00c95a, #064d2d);
  text-align: center;
}

.podium-1 {
  min-height: 185px;
  order: 2;
}

.podium-2 {
  min-height: 155px;
  order: 1;
}

.podium-3 {
  min-height: 135px;
  order: 3;
}

.podium-medal {
  position: absolute;
  top: -14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffd36a;
  color: #064d2d;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 211, 106, .32);
}

.podium-flag {
  margin-bottom: 8px;
  transform: scale(1.25);
}

.podium-item b {
  font-size: 12px;
  text-transform: uppercase;
}

.podium-item span {
  margin-top: 8px;
  font-weight: 900;
}

.empty-ranking,
.empty-teams {
  display: grid;
  place-items: center;
  min-height: 110px;
  color: #6d8074;
  font-weight: 800;
}

.ranking-list {
  background: #ffffff;
  border: 1px solid rgba(0, 166, 90, .18);
  border-radius: 14px;
  overflow: hidden;
}

.rank-row {
  display: grid;
  grid-template-columns: 36px 1fr 70px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #e3f2eb;
  font-size: 14px;
}

.rank-row:last-child {
  border-bottom: 0;
}

.rank-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.muted-row {
  display: block;
  color: #6d8074;
  font-weight: 700;
}

.tournament-picker {
  min-width: 0;
}

.tournament-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.tournament-panel-head h3 {
  display: inline-block;
  padding: 10px 52px;
  background: linear-gradient(90deg, #35aa3a, #209f36);
  color: #ffffff;
  border-radius: 0;
  font-size: 17px;
  text-transform: uppercase;
}

.tournament-panel-head p {
  margin-top: 8px;
  color: #557160;
  font-weight: 700;
}

.selected-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #bfe6d3;
  color: #008f50;
  font-weight: 900;
}

.tournament-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 10px 0 16px;
}

.team-grid-predict {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
}

.team-card-predict {
  border: 1px solid #d8e7df;
  border-radius: 12px;
  background: #ffffff;
  min-height: 100px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  transition: .2s;
  font-weight: 900;
}

.team-card-predict:hover {
  transform: translateY(-1px);
  border-color: #00a65a;
  box-shadow: 0 8px 18px rgba(0, 166, 90, .12);
}

.team-card-predict.selected {
  border-color: #00a65a;
  background: #ecfff5;
  box-shadow: inset 0 0 0 2px rgba(0, 166, 90, .18);
}

.team-card-flag {
  transform: scale(1.7);
  min-height: 30px;
  display: grid;
  place-items: center;
}

.tournament-history {
  margin-top: 16px;
}

.tournament-history-title {
  font-weight: 900;
  color: #063b24;
  margin-bottom: 10px;
}

.tournament-history-list {
  display: grid;
  gap: 8px;
}

.tournament-history-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dceee6;
  font-size: 13px;
}

.tournament-history-item span {
  color: #375f49;
  font-weight: 700;
}

.tournament-history-item small {
  color: #6d8074;
  white-space: nowrap;
}

/* 后台扩展预测表格输入框 */
.table-input {
  min-width: 110px;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12px;
}

.small-number {
  min-width: 70px !important;
  width: 80px !important;
}

/* 手机端扩展预测模块 */
@media (max-width: 768px) {
  .tournament-title {
    align-items: flex-start !important;
  }

  .tournament-count {
    width: 100%;
    text-align: center;
  }

  .tournament-tabs {
    gap: 8px;
    padding-bottom: 12px;
  }

  .tournament-tab {
    min-width: 130px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .tournament-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px;
  }

  .ranking-podium {
    min-height: auto;
  }

  .podium-item,
  .podium-1,
  .podium-2,
  .podium-3 {
    min-height: 118px;
  }

  .tournament-panel-head {
    display: grid;
    gap: 10px;
  }

  .tournament-panel-head h3 {
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-size: 15px;
  }

  .selected-badge {
    width: 100%;
    text-align: center;
  }

  .tournament-search-row {
    grid-template-columns: 1fr;
  }

  .team-grid-predict {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 460px;
  }

  .team-card-predict {
    min-height: 92px;
    padding: 10px 8px;
    font-size: 13px;
  }

  .tournament-history-item {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* 电脑端保证扩展预测模块不受手机样式影响 */
@media (min-width: 769px) {
  .tournament-panel {
    grid-template-columns: 360px 1fr !important;
  }

  .team-grid-predict {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  }

  .bottom-nav {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* =========================
   模块合并显示修复
   作用：让冠军/32强/16强预测模块和比赛列表模块靠在一起
   ========================= */

.tournament-card,
.tournament-section,
.tournament-box {
  margin-bottom: 12px !important;
}

#matches.wide-card {
  margin-top: 12px !important;
}

.tournament-card,
.tournament-section,
.tournament-box,
#matches.wide-card {
  width: 100% !important;
  max-width: 100% !important;
}

.tournament-card {
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
}

@media (max-width: 768px) {
  .tournament-card,
  .tournament-section,
  .tournament-box {
    margin-bottom: 10px !important;
  }

  #matches.wide-card {
    margin-top: 10px !important;
  }
}

/* =========================
   电脑端恢复原始布局
   只影响 769px 以上电脑端，手机端折叠布局不受影响
   ========================= */

@media (min-width: 769px) {
  .page {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 14px 14px 90px !important;
    overflow-x: visible !important;
  }

  .topbar-inner {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .brand {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: auto !important;
  }

  .brand > div:last-child {
    min-width: auto !important;
  }

  .brand-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  .brand-sub {
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  .logo-img-box {
    width: 132px !important;
    height: 54px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .nav {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
    white-space: normal !important;
  }

  .nav a {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
  }

  .grid {
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: 16px !important;
  }

  .tabs,
  .date-tabs,
  .date-tabs.collapsed,
  .date-tabs.expanded {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .date-fold-btn {
    display: none !important;
  }

  .teams {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .team {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .team.right {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .vs {
    width: 56px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  .predict-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .pick {
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  .predict-row .small-btn,
  .small-btn {
    width: auto !important;
  }
}


/* =========================
   四合一预测模块标签
   排序：每场比赛预测 / 冠军预测 / Top 32 / Top 16
   ========================= */

.prediction-hub-card {
  margin-top: 16px !important;
}

.prediction-hub-title {
  margin-bottom: 12px !important;
}

.prediction-main-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 4px;
}

.prediction-main-tab {
  min-width: 142px;
  height: 46px;
  border: 1px solid rgba(0, 166, 90, .25);
  border-radius: 16px;
  background: #dffff0;
  color: #6c8276;
  font-weight: 900;
  cursor: pointer;
  transition: .2s;
  box-shadow: inset 0 -3px 0 rgba(0, 166, 90, .12);
}

.prediction-main-tab.active {
  background: linear-gradient(90deg, #00a65a, #00d084);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 166, 90, .22);
}

.prediction-main-tab:hover {
  transform: translateY(-1px);
}

.prediction-panel {
  display: none;
}

.prediction-panel.active {
  display: block;
}

/* 合并后内部模块不再需要大外边距 */
#predictionHub #matches,
#predictionHub #tournament {
  margin-top: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* 比赛列表标题在统一模块内更紧凑 */
#predictionHub #matches .section-title {
  margin-top: 4px !important;
}

/* 扩展预测模块在统一模块内不重复显示独立卡片阴影 */
#predictionHub .tournament-panel {
  margin-top: 8px !important;
}

/* 手机端四个按钮横向滑动，不撑破页面 */
@media (max-width: 768px) {
  .prediction-main-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
  }

  .prediction-main-tabs::-webkit-scrollbar {
    display: none;
  }

  .prediction-main-tab {
    flex: 0 0 auto;
    min-width: 118px;
    height: 42px;
    font-size: 13px;
    border-radius: 14px;
  }

  .prediction-hub-card {
    padding: 14px !important;
  }
}


/* =========================
   后台关闭模块前台彻底隐藏修复
   ========================= */

.prediction-main-tab[disabled] {
  display: none !important;
  pointer-events: none !important;
}


/* =========================
   Đội châu Á vào sâu nhất 标签适配
   ========================= */

#predictionTabAsiaDeep {
  min-width: 190px !important;
}

@media (max-width: 768px) {
  #predictionTabAsiaDeep {
    min-width: 155px !important;
  }
}


/* =========================
   亚洲队模块名称过长修复
   版本：asia-short-name-1
   作用：防止“Đội châu Á vào sâu nhất”这类长文字跑出按钮
   ========================= */

.prediction-main-tabs {
  align-items: center !important;
}

.prediction-main-tab {
  min-width: 128px !important;
  max-width: 180px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

#predictionTabAsiaDeep {
  min-width: 150px !important;
  max-width: 180px !important;
  font-size: 14px !important;
}

/* 电脑端稍微宽一点，但不允许文字溢出 */
@media (min-width: 769px) {
  #predictionTabAsiaDeep {
    width: 170px !important;
  }
}

/* 手机端横向滑动，按钮不撑破页面 */
@media (max-width: 768px) {
  .prediction-main-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .prediction-main-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .prediction-main-tab {
    flex: 0 0 auto !important;
    min-width: 108px !important;
    max-width: 150px !important;
    font-size: 13px !important;
  }

  #predictionTabAsiaDeep {
    min-width: 128px !important;
    max-width: 145px !important;
    font-size: 12px !important;
  }
}


/* =========================
   扩展预测模块截止时间样式
   版本：top8-1
   ========================= */

.deadline-note {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfff5;
  border: 1px solid rgba(0, 166, 90, .22);
  color: #008f50;
  font-size: 12px;
  font-weight: 900;
}

.deadline-note.expired {
  background: #fff1f1;
  border-color: rgba(255, 77, 77, .25);
  color: #d93025;
}

.team-card-predict.disabled,
.player-card-predict.disabled,
.tournament-search-row .small-btn.disabled,
.tournament-search-row .small-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: grayscale(.15) !important;
}

.team-card-predict:disabled,
.player-card-predict:disabled {
  pointer-events: none !important;
}

.deadline-input {
  min-width: 168px !important;
}

@media (max-width: 768px) {
  .deadline-note {
    font-size: 11px;
    padding: 3px 7px;
  }
}


/* =========================
   Top 8 / 8强预测模块标签
   版本：top8-1
   ========================= */

#predictionTabTop8 {
  min-width: 112px !important;
}

@media (max-width: 768px) {
  #predictionTabTop8 {
    min-width: 96px !important;
  }
}


/* =========================
   基础热度票数后台样式
   版本：prize-admin-edit-1
   ========================= */

#baseVoteRows b {
  color: #008f50;
  font-weight: 900;
}

#baseVoteVotes,
#baseVoteSort {
  min-width: 120px;
}


/* =========================
   奖励文案后台编辑样式
   版本：prize-admin-edit-1
   ========================= */

.prize-admin-form {
  grid-template-columns: 1fr 1.4fr .8fr !important;
  align-items: center !important;
}

.prize-admin-form .full {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .prize-admin-form {
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   球员卡片与排行榜最终整理版
   版本：style-clean-player-rank-avatar-2
   说明：
   - Vua phá lưới 右侧球员卡片显示头像，不显示国家
   - Vua phá lưới 左侧排行榜显示球员头像
   - 其他模块排行榜保留国家国旗
   - 不再全局隐藏排行榜图片
   ========================= */

/* ---------- 通用国旗：其他模块排行榜国旗正常 ---------- */
.flag,
.team-card-flag:not(.player-card-predict .team-card-flag),
.podium-flag {
  background: transparent;
  border: none;
}

.flag-img,
.admin-flag-img {
  display: inline-block !important;
  width: 24px !important;
  height: 16px !important;
  min-width: 24px !important;
  min-height: 16px !important;
  max-width: 24px !important;
  max-height: 16px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) !important;
  vertical-align: middle !important;
}

.tournament-ranking .flag-img,
.tournament-ranking img.flag-img,
.ranking-list .flag-img,
.rank-team .flag-img,
.podium-item .flag-img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---------- Vua phá lưới 左侧排行榜：显示球员头像 ---------- */

/* 排行榜图片全部恢复，避免旧 display:none 残留 */
.tournament-ranking img,
.tournament-ranking .player-img,
.tournament-ranking .player-avatar,
.tournament-ranking .team-card-flag,
.tournament-ranking .podium-flag,
.ranking-list img,
.rank-team img,
.podium-item img {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 排行榜普通列表头像尺寸 */
.tournament-ranking .rank-row .team-card-flag,
.tournament-ranking .rank-row .player-avatar,
.ranking-list .rank-row .team-card-flag,
.ranking-list .rank-row .player-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 2px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #eafff3, #ffffff) !important;
  border: 1px solid rgba(0,166,90,.22) !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

/* 排行榜普通列表真人头像 */
.tournament-ranking .rank-row .player-img,
.ranking-list .rank-row .player-img,
.tournament-ranking .rank-row img[src*="predictEx/players"],
.ranking-list .rank-row img[src*="predictEx/players"] {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f4fff8 !important;
  display: block !important;
}

/* 排行榜前三头像圆框 */
.tournament-ranking .podium-item .team-card-flag,
.tournament-ranking .podium-item .player-avatar,
.tournament-ranking .podium-item .podium-flag {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 3px !important;
  margin: 0 auto 7px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #eafff3, #ffffff) !important;
  border: 2px solid rgba(255,255,255,.75) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

/* 排行榜前三真人头像 */
.tournament-ranking .podium-item .player-img,
.tournament-ranking .podium-item img[src*="predictEx/players"] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f4fff8 !important;
  display: block !important;
}

/* 排行榜文字排版 */
.rank-team {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-width: 0 !important;
}

.rank-row {
  grid-template-columns: 36px minmax(0, 1fr) 70px !important;
}

.podium-item b {
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------- Vua phá lưới 右侧球员卡片 ---------- */
.team-grid-predict .player-card-predict {
  width: 100% !important;
  height: 158px !important;
  min-height: 158px !important;
  padding: 10px 8px 9px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #d8e7df !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.team-grid-predict .player-card-predict:hover {
  transform: translateY(-1px) !important;
  border-color: #00a65a !important;
  box-shadow: 0 8px 18px rgba(0,166,90,.12) !important;
}

.team-grid-predict .player-card-predict.selected {
  border-color: #00a65a !important;
  background: #ecfff5 !important;
  box-shadow: inset 0 0 0 2px rgba(0,166,90,.16) !important;
}

/* 右侧卡片头像圆框 */
.team-grid-predict .player-card-predict .team-card-flag {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  padding: 4px !important;
  margin: 0 auto 4px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #eafff3, #ffffff) !important;
  border: 3px solid rgba(0,208,132,.24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transform: none !important;
}

/* 右侧真人头像完整显示 */
.team-grid-predict .player-card-predict .player-img {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f4fff8 !important;
  display: block !important;
  margin: 0 !important;
}

/* 右侧无头像字母头像 */
.team-grid-predict .player-card-predict .player-avatar {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #00a65a, #00d084) !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 右侧球员名字 */
.team-grid-predict .player-card-predict > b {
  width: 100% !important;
  max-width: 100% !important;
  margin: 1px auto 0 !important;
  padding: 0 4px !important;
  color: #001b0e !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  text-align: center !important;
  letter-spacing: -.2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}

/* 右侧不显示国家 */
.team-grid-predict .player-card-predict > em {
  display: none !important;
}

.team-grid-predict {
  gap: 12px !important;
  align-items: start !important;
}

/* 电脑端 */
@media (min-width: 769px) {
  .team-grid-predict {
    grid-template-columns: repeat(4, minmax(138px, 1fr)) !important;
    max-height: 520px !important;
  }
}

/* 手机端 */
@media (max-width: 768px) {
  .team-grid-predict .player-card-predict {
    height: 140px !important;
    min-height: 140px !important;
    padding: 8px 6px 7px !important;
  }

  .team-grid-predict .player-card-predict .team-card-flag {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    padding: 3px !important;
  }

  .team-grid-predict .player-card-predict .player-img,
  .team-grid-predict .player-card-predict .player-avatar {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }

  .team-grid-predict .player-card-predict > b {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
}


/* =========================
   1440宽屏 + 左右侧横幅后台版
   版本：side-banner-admin-1440-1
   ========================= */

@media (min-width: 1024px) {
  .page,
  .topbar-inner,
  .admin-main {
    max-width: 1440px !important;
    width: 100% !important;
  }

  .page {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .topbar-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero {
    min-height: 285px !important;
    padding: 38px 42px !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 42px rgba(0, 88, 45, .16) !important;
  }

  .hero-content {
    max-width: 760px !important;
  }

  h1 {
    font-size: 44px !important;
    line-height: 1.08 !important;
  }

  .hero p {
    font-size: 17px !important;
    max-width: 660px !important;
  }

  .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
  }

  .prediction-hub-card {
    padding: 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0, 166, 90, .18) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(0, 208, 132, .10), transparent 24%),
      radial-gradient(circle at 88% 8%, rgba(255, 211, 106, .10), transparent 20%),
      linear-gradient(180deg, #ffffff 0%, #f2fff7 100%) !important;
    box-shadow: 0 18px 42px rgba(0, 88, 45, .12) !important;
  }

  .prediction-hub-title h2,
  .tournament-title h2 {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  .prediction-hub-title small,
  .tournament-title small {
    font-size: 14px !important;
  }

  .tournament-count {
    padding: 12px 24px !important;
    font-size: 17px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #13d86b 0%, #00b85a 100%) !important;
    box-shadow: 0 12px 26px rgba(0, 166, 90, .22) !important;
  }

  .prediction-main-tabs {
    gap: 15px !important;
    margin-bottom: 20px !important;
  }

  .prediction-main-tab {
    min-width: 150px !important;
    height: 50px !important;
    padding: 0 20px !important;
    border-radius: 17px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #e5fff1 0%, #d5f5e3 100%) !important;
    border: 1px solid #a9e2c1 !important;
    color: #5d7a6b !important;
    box-shadow: inset 0 -3px 0 rgba(0, 166, 90, .10) !important;
  }

  .prediction-main-tab.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, #00d66a 0%, #00a65a 100%) !important;
    border-color: #00a65a !important;
    box-shadow: 0 10px 22px rgba(0, 166, 90, .24) !important;
  }

  #predictionTabAsiaDeep {
    min-width: 175px !important;
  }

  #predictionTabTop8 {
    min-width: 130px !important;
  }

  .tournament-panel {
    grid-template-columns: 420px 1fr !important;
    gap: 32px !important;
    padding: 28px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(0, 208, 132, .08), transparent 26%),
      linear-gradient(180deg, #eefdf4 0%, #e9faef 100%) !important;
    border: 1px solid #b8e8c8 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  }

  .tournament-panel-head h3 {
    min-width: 360px !important;
    padding: 12px 56px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: center !important;
    color: #ffffff !important;
    background: linear-gradient(90deg, #24a838 0%, #2fb445 50%, #24a838 100%) !important;
    box-shadow: 0 8px 18px rgba(36, 168, 56, .16) !important;
  }

  .tournament-search-row {
    grid-template-columns: 1fr 160px !important;
    gap: 16px !important;
    margin: 14px 0 18px !important;
  }

  .tournament-search-row .input,
  .tournament-search-row .small-btn {
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  .team-grid-predict {
    grid-template-columns: repeat(4, minmax(165px, 1fr)) !important;
    gap: 16px !important;
    max-height: 580px !important;
  }

  .team-card-predict {
    border-radius: 16px !important;
    border-color: #d1e8da !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfffc 100%) !important;
    box-shadow: 0 8px 18px rgba(0, 120, 60, .05) !important;
  }

  .team-card-predict:hover {
    transform: translateY(-2px) !important;
    border-color: #00a65a !important;
    box-shadow: 0 14px 28px rgba(0, 166, 90, .10) !important;
  }

  .team-grid-predict .player-card-predict {
    height: 166px !important;
    min-height: 166px !important;
    border-radius: 16px !important;
    padding-top: 12px !important;
  }

  .team-grid-predict .player-card-predict .team-card-flag {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
  }

  .team-grid-predict .player-card-predict .player-img,
  .team-grid-predict .player-card-predict .player-avatar {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }

  .team-grid-predict .player-card-predict > b {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }
}

/* 左右侧世界杯竖向横幅：后台可开关/改文字 */
.side-wc-banner {
  position: fixed;
  top: 92px;
  bottom: 16px;
  width: 42px;
  z-index: 18;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 211, 106, .22), transparent 28%),
    linear-gradient(180deg, #00d074 0%, #008f50 52%, #00bd67 100%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow:
    0 12px 30px rgba(0, 88, 45, .24),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.side-wc-left {
  left: 0;
  border-radius: 0 14px 14px 0;
}

.side-wc-right {
  right: 0;
  border-radius: 14px 0 0 14px;
}

.side-wc-banner span,
.side-wc-banner b {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
  line-height: 1;
}

.side-wc-banner span {
  top: 150px;
  font-size: 13px;
}

.side-wc-banner b {
  top: 360px;
  font-size: 13px;
}

.side-wc-banner::before,
.side-wc-banner::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.9);
  font-size: 12px;
}

.side-wc-banner::before {
  top: 230px;
}

.side-wc-banner::after {
  top: 500px;
}

/* 桌面端给侧边横幅留空间 */
@media (min-width: 1024px) {
  body {
    padding-left: 46px !important;
    padding-right: 46px !important;
  }
}

/* 手机端等比例缩小一半，不挡主要内容 */
@media (max-width: 1023px) {
  body {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .side-wc-banner {
    top: 76px !important;
    bottom: 84px !important;
    width: 20px !important;
    border-radius: 0 8px 8px 0 !important;
    z-index: 12 !important;
    box-shadow: 0 6px 14px rgba(0, 88, 45, .16) !important;
  }

  .side-wc-right {
    border-radius: 8px 0 0 8px !important;
  }

  .side-wc-banner span {
    top: 95px !important;
    font-size: 7px !important;
    letter-spacing: .6px !important;
  }

  .side-wc-banner b {
    top: 235px !important;
    font-size: 7px !important;
    letter-spacing: .6px !important;
  }

  .side-wc-banner::before,
  .side-wc-banner::after {
    font-size: 6px !important;
  }

  .side-wc-banner::before {
    top: 145px !important;
  }

  .side-wc-banner::after {
    top: 315px !important;
  }
}

/* 后台侧边横幅设置 */
.side-banner-admin-form {
  grid-template-columns: .7fr 1.2fr 1.4fr !important;
}

.side-banner-admin-form .full {
  grid-column: 1 / -1 !important;
}

@media (max-width: 768px) {
  .side-banner-admin-form {
    grid-template-columns: 1fr !important;
  }
}
/* =========================
   左右悬浮横幅基础显示
   版本：side-banner-js-flow-1
   ========================= */

.side-wc-banner {
  overflow: hidden !important;
  background:
    linear-gradient(
      180deg,
      #00d074 0%,
      #008f50 35%,
      #00c96b 70%,
      #00d074 100%
    ) !important;
  background-size: 100% 240% !important;
  animation: sideBannerBgFlow 4s linear infinite !important;
}

@keyframes sideBannerBgFlow {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 240%;
  }
}

.side-wc-banner span,
.side-wc-banner b {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 1.3px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
  line-height: 1 !important;
}

.side-wc-banner span::after,
.side-wc-banner b::after {
  content: " " !important;
  color: #ffe38a !important;
}

@media (max-width: 1023px) {
  .side-wc-banner span,
  .side-wc-banner b {
    font-size: 7px !important;
    letter-spacing: .55px !important;
  }
}

/* =========================
   客服按钮高级动态翡翠版
   版本：float-service-emerald-orb-1
   设计：
   - 深绿玻璃底
   - 翡翠流动光圈
   - 内部渐变旋转
   - 斜向扫光
   - 轻微上下浮动
   ========================= */

.float-service-btn {
  position: fixed !important;
  right: 22px !important;
  bottom: 88px !important;
  z-index: 99 !important;

  width: 74px !important;
  height: 74px !important;
  border-radius: 20px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900 !important;

  isolation: isolate !important;
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    linear-gradient(145deg, #032f1f 0%, #00693f 48%, #00b96b 100%) !important;

  box-shadow:
    0 18px 42px rgba(0, 120, 70, .42),
    0 0 0 5px rgba(0, 208, 132, .10),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -14px 24px rgba(0, 38, 20, .34) !important;

  animation: serviceEmeraldFloat 3.2s ease-in-out infinite !important;
}

/* 外层旋转翡翠光圈，比普通渐变更高级 */
.float-service-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  z-index: -2 !important;
  border-radius: 26px !important;
  display: block !important;
  pointer-events: none !important;

  background:
    conic-gradient(
      from 0deg,
      rgba(0,255,146,0),
      rgba(0,255,146,.85),
      rgba(198,255,221,.95),
      rgba(0,200,107,.78),
      rgba(0,255,146,0)
    ) !important;

  animation: serviceEmeraldRing 2.4s linear infinite !important;
  filter: blur(.2px) !important;
}

/* 内部动态光纹：不用刺眼黄色，改翡翠高光 */
.float-service-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 0 !important;
  border-radius: 17px !important;
  display: block !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.20) 20%, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(0,255,166,.34) 0%, transparent 38%),
    linear-gradient(
      135deg,
      #005333 0%,
      #008f55 22%,
      #00d17a 42%,
      #00a461 62%,
      #004529 100%
    ) !important;

  background-size: 240% 240% !important;
  animation: serviceEmeraldInside 2.0s ease-in-out infinite !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -10px 18px rgba(0,40,20,.28) !important;
}

/* 文字图标 */
.float-service-btn .service-icon,
.float-service-btn .service-text {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
}

.float-service-btn .service-icon {
  font-size: 25px !important;
  line-height: 1 !important;
  transform-origin: center !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.26)) !important;
  animation: serviceIconPop 2.2s ease-in-out infinite !important;
}

.float-service-btn .service-text {
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .45px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}

/* 斜向玻璃扫光：用子元素阴影模拟，不抢 before/after */
.float-service-btn .service-text::before {
  content: "" !important;
  position: absolute !important;
  top: -62px !important;
  left: -88px !important;
  z-index: -1 !important;
  width: 38px !important;
  height: 145px !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.62),
    transparent
  ) !important;
  transform: rotate(24deg) !important;
  animation: serviceEmeraldShine 2.35s ease-in-out infinite !important;
}

.float-service-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow:
    0 24px 54px rgba(0, 145, 82, .52),
    0 0 0 8px rgba(0, 255, 146, .13),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -14px 24px rgba(0, 38, 20, .34) !important;
}

/* 光圈旋转 */
@keyframes serviceEmeraldRing {
  0% {
    transform: rotate(0deg);
    opacity: .86;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(360deg);
    opacity: .86;
  }
}

/* 内部渐变流动 */
@keyframes serviceEmeraldInside {
  0%, 100% {
    background-position: 0% 30%;
    filter: brightness(1) saturate(1.05);
  }

  50% {
    background-position: 100% 70%;
    filter: brightness(1.12) saturate(1.22);
  }
}

/* 玻璃扫光 */
@keyframes serviceEmeraldShine {
  0% {
    left: -95px;
    opacity: 0;
  }

  18% {
    opacity: .85;
  }

  54% {
    left: 85px;
    opacity: .55;
  }

  100% {
    left: 85px;
    opacity: 0;
  }
}

/* 轻微悬浮 */
@keyframes serviceEmeraldFloat {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }
}

/* 图标轻微缩放，增强动态但不乱 */
@keyframes serviceIconPop {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

/* Web端正方形大按钮 */
@media (min-width: 769px) {
  .float-service-btn {
    width: 96px !important;
    height: 96px !important;
    right: 28px !important;
    bottom: 92px !important;
    border-radius: 24px !important;
    gap: 6px !important;
  }

  .float-service-btn::before {
    inset: -6px !important;
    border-radius: 31px !important;
  }

  .float-service-btn::after {
    inset: 4px !important;
    border-radius: 20px !important;
  }

  .float-service-btn .service-icon {
    font-size: 34px !important;
  }

  .float-service-btn .service-text {
    font-size: 15px !important;
  }

  .float-service-btn .service-text::before {
    top: -80px !important;
    left: -110px !important;
    width: 48px !important;
    height: 190px !important;
  }

  @keyframes serviceEmeraldShine {
    0% {
      left: -116px;
      opacity: 0;
    }

    18% {
      opacity: .9;
    }

    54% {
      left: 112px;
      opacity: .62;
    }

    100% {
      left: 112px;
      opacity: 0;
    }
  }
}

/* 手机端缩小 */
@media (max-width: 768px) {
  .float-service-btn {
    width: 58px !important;
    height: 58px !important;
    right: 14px !important;
    bottom: 74px !important;
    border-radius: 17px !important;
    gap: 2px !important;
  }

  .float-service-btn::before {
    inset: -4px !important;
    border-radius: 22px !important;
  }

  .float-service-btn::after {
    inset: 3px !important;
    border-radius: 14px !important;
  }

  .float-service-btn .service-icon {
    font-size: 21px !important;
  }

  .float-service-btn .service-text {
    font-size: 10px !important;
  }

  .float-service-btn .service-text::before {
    top: -48px !important;
    left: -70px !important;
    width: 30px !important;
    height: 112px !important;
  }
}