/* ============================================================
   Giá Vàng Hôm Nay - 移动端优先样式 v2（更美观 / 平滑 / 流畅）
   红涨绿跌（越南习惯）：涨=红 #d32f2f，跌=绿 #2e7d32
   ============================================================ */
:root{
  --bg:#f3f5f9;
  --bg-grad:linear-gradient(180deg,#f7f8fb 0%,#eef1f6 100%);
  --card:#ffffff;
  --card-soft:#f8fafc;
  --border:#e5e9f0;
  --border-strong:#d7dce6;
  --text:#14181f;
  --muted:#667085;
  --brand:#2563eb;
  --brand-2:#4f8dff;
  --brand-dark:#1d4ed8;
  --brand-grad:linear-gradient(135deg,#2563eb,#4f8dff);
  --up:#d32f2f;      /* 涨-红 */
  --down:#1d8a4e;    /* 跌-绿 */
  --gold:#b8860b;
  --silver:#7d8694;
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px -12px rgba(16,24,40,.12);
  --shadow-lg:0 4px 12px rgba(16,24,40,.06),0 22px 48px -18px rgba(16,24,40,.22);
  --ring:0 0 0 4px rgba(37,99,235,.13);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg-grad);background-attachment:fixed;color:var(--text);line-height:1.6;
  font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--brand-dark)}
.container{max-width:860px;margin:0 auto;padding:0 16px}
::selection{background:rgba(37,99,235,.18)}

/* ---------- 头部（毛玻璃）---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(229,233,240,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.logo{display:flex;flex-direction:column;line-height:1.12;color:var(--text);transition:opacity .2s var(--ease)}
.logo:hover{text-decoration:none;opacity:.85}
.logo-mark{font-weight:800;font-size:19px;letter-spacing:-.2px;
  background:linear-gradient(120deg,#1d4ed8,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-sub{font-size:11px;color:var(--muted);letter-spacing:.6px}
.main-nav{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
  padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:color .2s var(--ease),background .2s var(--ease);
}
.main-nav a.active{background:rgba(37,99,235,.1);color:var(--brand)}
.main-nav a:hover{background:var(--card-soft);color:var(--text);text-decoration:none}

/* ---------- 主区 ---------- */
main{padding:22px 0 10px}
.hero{padding:8px 0 18px;animation:riseIn .45s var(--ease) both}
.hero-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.hero h1{font-size:25px;line-height:1.3;letter-spacing:-.3px;font-weight:800}
.hero-sub{color:var(--muted);font-size:15px}
.updated-at{margin-top:10px;font-size:13px;color:var(--muted)}
.updated-at time{color:var(--text);font-variant-numeric:tabular-nums}

.notice{background:#fffbeb;border:1px solid #fde68a;color:#92600a;padding:13px 15px;border-radius:var(--radius);margin-bottom:18px;font-size:14px}

/* ---------- 实时指示器 ---------- */
.live-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#15803d;background:rgba(220,252,231,.85);border:1px solid #bbf7d0;padding:4px 12px;border-radius:20px;white-space:nowrap;box-shadow:0 1px 2px rgba(34,197,94,.12)}
.live-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;display:inline-block;animation:liveBlink 1.1s infinite;box-shadow:0 0 0 0 rgba(34,197,94,.45)}
.live-dot.live-tick{animation:liveBlink 1.1s infinite,liveTick .45s ease}
@keyframes liveBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@keyframes liveTick{0%{transform:scale(1)}45%{transform:scale(1.7)}100%{transform:scale(1)}}

/* ---------- 行情卡片 ---------- */
.price-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.price-grid{grid-template-columns:1fr 1fr}}
.price-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;opacity:.85}
.price-card[data-metal="XAU"]::before{background:linear-gradient(90deg,#b8860b,#e6b84c)}
.price-card[data-metal="XAG"]::before{background:linear-gradient(90deg,#7d8694,#c2c9d4)}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-name{font-size:16px;font-weight:700;color:var(--text)}
.metal-badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;color:#fff;letter-spacing:.4px}
.badge-gold{background:linear-gradient(135deg,#a57a0c,#d4a72c)}
.badge-silver{background:linear-gradient(135deg,#6c7480,#a4adb9)}
.card-price{
  font-size:36px;font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums;
  display:inline-block;line-height:1.15;
}
.card-unit{font-size:13px;color:var(--muted)}
.card-change{margin-top:8px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;transition:color .25s var(--ease)}
.card-change.up{color:var(--up)}
.card-change.down{color:var(--down)}
.card-change.flat{color:var(--muted)}
.arrow{font-size:12px}
.card-vnd{
  margin-top:16px;padding-top:13px;border-top:1px dashed var(--border);
  display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)
}
.card-vnd strong{font-size:23px;color:var(--text);font-variant-numeric:tabular-nums}

/* ---------- 价格动态跳动与闪烁 ---------- */
@keyframes tickPop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes flashUp{0%{background:rgba(211,47,47,.26)}100%{background:transparent}}
@keyframes flashDown{0%{background:rgba(29,138,78,.26)}100%{background:transparent}}
.card-price.tick-up{animation:tickPop .5s var(--ease-bounce),flashUp 1.1s ease}
.card-price.tick-down{animation:tickPop .5s var(--ease-bounce),flashDown 1.1s ease}

/* ---------- 图表脉冲点 ---------- */
.pulse-dot{animation:pulseRing 1.6s ease-out infinite;transform-origin:center}
@keyframes pulseRing{0%{transform:scale(.75);opacity:.95}100%{transform:scale(2.4);opacity:0}}

.day-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.day-stats>div{background:var(--card-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}
.day-stats dt{font-size:12px;color:var(--muted)}
.day-stats dd{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- 面板 ---------- */
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin:20px 0;box-shadow:var(--shadow);
  animation:riseIn .4s var(--ease) both;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.panel-head h2{font-size:17px;letter-spacing:-.2px;font-weight:750}
.seg{
  display:inline-flex;background:#eef1f6;border-radius:12px;padding:4px;position:relative;
}
.seg-btn{
  border:0;background:transparent;padding:8px 18px;border-radius:9px;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease);
}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(16,24,40,.12)}
.chart-wrap{width:100%;overflow:hidden}
#chart{width:100%;height:auto;transition:opacity .4s ease}
#chart polyline,#chart polygon{transition:opacity .5s ease}

/* ---------- 换算工具 ---------- */
.tool-panel{margin-top:0}
.tool-form{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){.tool-form{grid-template-columns:repeat(3,1fr)}}
.field{display:flex;flex-direction:column;gap:7px}
.field span{font-size:14px;font-weight:600;color:var(--muted)}
.field select,.field input{
  width:100%;padding:13px 14px;font-size:16px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:#fff;color:var(--text);min-height:48px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  -webkit-appearance:none;appearance:none;font-variant-numeric:tabular-nums;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.field input:hover,.field select:hover{border-color:var(--border-strong)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.tool-result{margin-top:18px;background:linear-gradient(180deg,#f5f8ff,#f7f9fc);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.res-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);font-size:15px;color:var(--muted)}
.res-row strong{color:var(--text);font-variant-numeric:tabular-nums}
.res-total{border-bottom:0;color:var(--text);font-weight:650}
.res-total strong{font-size:24px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.equiv{margin-top:16px}
.equiv h3{font-size:15px;margin-bottom:9px;color:var(--muted)}
.equiv ul{list-style:none}
.equiv li{padding:7px 0;font-size:15px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}
.equiv li b{font-variant-numeric:tabular-nums}
.tool-note{margin-top:14px;font-size:13px;color:var(--muted)}

/* ---------- 历史表格 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);border:1px solid var(--border)}
.hist-table{width:100%;border-collapse:collapse;font-size:14px;min-width:660px;background:#fff}
.hist-table th,.hist-table td{padding:12px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.hist-table th{color:var(--muted);font-size:12.5px;font-weight:650;background:var(--card-soft);position:sticky;top:0}
.hist-table tbody tr{transition:background .18s ease}
.hist-table tbody tr:hover{background:#f2f6ff}
.hist-table td.strong{font-weight:700;font-variant-numeric:tabular-nums}
.hist-table tr[data-row="XAG"]{display:none}
.hist-table.show-silver tr[data-row="XAG"]{display:table-row;animation:riseIn .3s var(--ease) both}
.hist-table.show-silver tr[data-row="XAU"]{display:none}
.panel-hint{margin-top:12px;font-size:13px;color:var(--muted)}

/* ---------- 面包屑 ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin:6px 0 12px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb span{margin:0 4px;color:#c3c9d4}
.day-nav{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.day-nav a{padding:6px 12px;border:1px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);background:#fff;transition:all .2s var(--ease)}
.day-nav a:hover{border-color:var(--brand);color:var(--brand);background:#f2f6ff}

/* ---------- 按钮 ---------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:12px;font-size:15px;font-weight:700;border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 6px 16px -6px rgba(37,99,235,.55)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(37,99,235,.65)}
.btn-ghost{background:#fff;color:var(--brand);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand);background:#f2f6ff}
.btn-sm{padding:9px 13px;font-size:13px}

/* ---------- 页脚 ---------- */
.site-footer{background:rgba(255,255,255,.9);border-top:1px solid var(--border);margin-top:32px;padding:26px 0}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-bottom:14px}
.footer-nav a{color:var(--muted)}
.footer-nav a:hover{color:var(--brand)}
.disclaimer{font-size:13px;color:var(--muted);margin-bottom:8px;max-width:780px;line-height:1.7}
.copyright{font-size:12px;color:#98a2b3}
.ad-slot{min-height:60px;border:1px dashed var(--border);border-radius:10px;background:#fafbfc;margin-bottom:16px;display:none}

/* ---------- 越南本地 SJC 金价 ---------- */
.link-more{font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.link-more:hover{text-decoration:none}
.sjc-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.sjc-grid{grid-template-columns:1fr 1fr}}
.sjc-card{
  background:linear-gradient(180deg,#fffdf6,#fffaf0);border:1px solid #ecd9a3;border-radius:var(--radius);
  padding:16px;position:relative;overflow:hidden;transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.sjc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#b8860b,#e8c458)}
.sjc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sjc-card h3{font-size:15px;font-weight:750;color:#8a6d1a;margin-bottom:10px}
.sjc-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed #efe4c0;font-size:14px;color:var(--muted)}
.sjc-row strong{font-size:18px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.sjc-unit{font-size:12px;color:#a99b66;margin-top:7px}
.sjc-home .panel-head{align-items:center}
.source-note{margin-top:12px;font-size:12px;color:var(--muted)}

/* ---------- 国际 ↔ SJC 价差对比 ---------- */
.spread-box{background:var(--card-soft);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-top:8px}
.spread-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px dashed var(--border);font-size:14px;color:var(--muted)}
.spread-row:last-child{border-bottom:0}
.spread-row strong{color:var(--text);font-variant-numeric:tabular-nums}
.spread-row.up strong{color:var(--up)}
.spread-row.down strong{color:var(--down)}
.spread-note{margin-top:10px;font-size:12px;color:var(--muted)}
.spread-compact{margin-top:12px;padding:11px 15px;background:linear-gradient(180deg,#f5f8ff,#f7f9fc)}
.spread-compact .spread-row{border-bottom:0;padding:4px 0;font-size:14px}

/* ---------- 换算工具：本地金价参考 ---------- */
.tool-local{margin-top:14px;background:linear-gradient(180deg,#fffdf6,#fffaf0);border:1px solid #ecd9a3;border-radius:var(--radius);padding:13px 15px}
.tool-local h3{font-size:14px;color:#8a6d1a;margin-bottom:8px}
.tool-local-grid{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.tool-local-grid b{color:var(--text)}
.sjc-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.sjc-table th,.sjc-table td{padding:8px 11px;text-align:left;border-bottom:1px solid rgba(138,109,26,.15);white-space:nowrap}
.sjc-table th{color:#8a6d1a;font-weight:650;background:rgba(138,109,26,.05)}
.sjc-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:#8a6d1a}

/* ---------- 通用入场 / 交互动效 ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   黄金专版板块样式（v3）：世界金价大字卡 / 金条戒指卡 / 统计卡 / 对比表 / 大图
   ============================================================ */
/* 世界黄金价格（大字深金卡，突出） */
.world-gold{margin:2px 0 0;animation:riseIn .45s var(--ease) both}
.world-gold-card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(165deg,#2b2110 0%,#4a3410 55%,#6b4d12 100%);
  border:1px solid #7a5a18;box-shadow:0 6px 22px -8px rgba(120,80,10,.5);
  padding:22px 18px;color:#fff;
}
.world-gold-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0%,rgba(255,215,90,.28) 0%,transparent 55%);pointer-events:none}
.wg-head{display:flex;align-items:center;gap:10px;position:relative}
.wg-head h2{font-size:17px;font-weight:750;color:#fde9b0;letter-spacing:.2px}
.wg-unit{margin-left:auto;font-size:12px;color:#e8cf9a;font-weight:600}
.wg-price{
  position:relative;margin:12px 0 2px;font-size:52px;font-weight:800;letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;color:#ffe9a8;text-shadow:0 1px 2px rgba(0,0,0,.2);
  display:inline-block;line-height:1.1;
}
.wg-change{position:relative;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px}
.wg-change.up{color:#ff6b6b}.wg-change.down{color:#5ce08a}.wg-change.flat{color:#d9c9a0}
.wg-vnd{position:relative;margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,230,170,.25);display:flex;flex-direction:column;gap:3px;font-size:13px;color:#e8cf9a}
.wg-vnd strong{font-size:24px;color:#ffe9a8;font-variant-numeric:tabular-nums}
.world-gold-card .live-dot{background:#7CFC9A;box-shadow:0 0 0 0 rgba(124,252,154,.5)}
.wg-price.tick-up{animation:tickPop .5s var(--ease-bounce),flashUpGold 1.1s ease}
.wg-price.tick-down{animation:tickPop .5s var(--ease-bounce),flashDownGold 1.1s ease}
@keyframes flashUpGold{0%{background:rgba(255,107,107,.5)}100%{background:transparent}}
@keyframes flashDownGold{0%{background:rgba(92,224,138,.5)}100%{background:transparent}}

/* 金条 / 金戒指 卡 */
.gold-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
@media(min-width:640px){.gold-grid{grid-template-columns:1fr 1fr}}
.gold-type-card{
  border-radius:var(--radius);padding:18px;border:1px solid var(--border);box-shadow:var(--shadow);
  position:relative;overflow:hidden;animation:riseIn .45s var(--ease) both;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.gold-type-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.gold-type-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.gold-mieng{background:linear-gradient(180deg,#fffdf6,#fffaf0);border-color:#ecd9a3}
.gold-mieng::before{background:linear-gradient(90deg,#b8860b,#e8c458)}
.gold-nhan{background:linear-gradient(180deg,#fef6f6,#fdf3f3);border-color:#f0c8c8}
.gold-nhan::before{background:linear-gradient(90deg,#c98a7a,#e5b0a0)}
.gt-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.gt-head h2{font-size:18px;font-weight:800;letter-spacing:-.2px}
.gold-mieng .gt-head h2{color:#8a6d1a}
.gold-nhan .gt-head h2{color:#a5583f}
.gt-sub{font-size:12px;color:var(--muted)}
.gt-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--border);font-size:14px;color:var(--muted)}
.gt-price{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.gold-mieng .gt-price{color:#7a5a10}
.gold-nhan .gt-price{color:#b0674d}
.gt-unit{font-size:12px;color:var(--muted);margin-top:7px}
.gt-gap{margin-top:9px;font-size:13px;color:var(--muted)}
.gt-gap b{color:var(--text);font-variant-numeric:tabular-nums}

/* 统计卡 */
.stats-panel{margin-top:18px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{
  background:var(--card-soft);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 15px;display:flex;flex-direction:column;gap:3px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600}
.stat-value{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px;color:var(--text)}
.stat-value.up{color:var(--up)}
.stat-value.down{color:var(--down)}
.stat-value.flat{color:var(--text)}
.stat-value.stat-small{font-size:16px;line-height:1.35}
.stat-sub{font-size:12px;color:var(--muted)}
.stat-accent{background:linear-gradient(180deg,#fffdf6,#fffaf0);border-color:#ecd9a3}
.stat-accent .stat-value{color:#a57a0c}

/* 对比表 */
.compare-panel .panel-head{margin-bottom:6px}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);border:1px solid var(--border)}
.compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px;background:#fff}
.compare-table th,.compare-table td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.compare-table th{color:var(--muted);font-size:12.5px;font-weight:650;background:var(--card-soft);position:sticky;top:0}
.compare-table .num{text-align:right;font-variant-numeric:tabular-nums}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table tbody tr{transition:background .16s ease}
.compare-table tbody tr:hover{background:#f2f6ff}
.sys-name{font-weight:650}
.sys-name::first-letter{text-transform:uppercase}
.compare-table td.buy{color:var(--up);font-weight:650}
/* 比格：最划算高亮 */
.compare-table tr.row-best td{border-top:0;border-bottom:1px solid rgba(230,180,34,.16)}
.compare-table td.cell-best-buy{color:#059669;font-weight:800}
.compare-table td.cell-best-sell{color:#b45309;font-weight:800}
.badge{display:inline-block;font-size:10.5px;font-weight:700;line-height:1;padding:3px 7px;border-radius:12px;margin-left:6px;vertical-align:middle;letter-spacing:.2px}
.badge-buy{color:#047857;background:#ecfdf5;border:1px solid #a7f3d0}
.badge-sell{color:#b45309;background:#fffbeb;border:1px solid #fde68a}
.sys-name{display:flex;align-items:center;flex-wrap:wrap}
.compare-table td.sell{color:var(--down);font-weight:650}

/* 大走势图 */
.chart-large{padding-top:6px}
.chart-panel .chart-wrap{margin-top:4px}

/* ============================================================
   科技深色主题 v4（覆盖浅色主题 → 现代化背景，金色点缀）
   ============================================================ */
:root{
  --bg:#0a1420;
  --bg-grad:
    radial-gradient(900px 480px at 12% -6%,rgba(230,180,34,.16) 0%,transparent 55%),
    radial-gradient(820px 460px at 98% 8%,rgba(79,141,255,.10) 0%,transparent 55%),
    radial-gradient(760px 760px at 50% 118%,rgba(230,180,34,.10) 0%,transparent 60%),
    linear-gradient(180deg,#0a1220 0%,#0d1b2e 55%,#09111d 100%);
  --card:rgba(17,27,45,.66);
  --card-soft:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(230,180,34,.42);
  --text:#eaf0f8;
  --muted:#9fb0c8;
  --brand:#e6b422;
  --brand-2:#f2c94c;
  --brand-dark:#c08a13;
  --brand-grad:linear-gradient(135deg,#c08a13,#f2c94c);
  --up:#ff5f5c;
  --down:#37cf86;
  --gold:#e6b422;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lg:0 6px 16px rgba(0,0,0,.35),0 24px 52px -20px rgba(0,0,0,.6);
  --ring:0 0 0 4px rgba(230,180,34,.2);
}
body{background:var(--bg-grad);background-attachment:fixed;color:var(--text)}
a{color:#e6b422}a:hover{color:#f7d15c}
::selection{background:rgba(230,180,34,.3)}
/* 玻璃拟态通用 */
.panel,.price-card,.tool-panel,.gold-type-card,.stat-card,.compare-panel{
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
}
.site-header{background:rgba(8,14,26,.72);border-bottom:1px solid rgba(230,180,34,.16)}
.logo-mark{background:linear-gradient(120deg,#c08a13,#f2c94c);-webkit-background-clip:text;background-clip:text}
.logo-sub{color:#7f92ac}
.main-nav a.active{background:rgba(230,180,34,.14);color:#f2c94c}
.main-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.hero h1{color:#f4f7fb}
.hero-sub{color:#9fb0c8}
.updated-at time{color:#dbe4f0}
.notice{background:rgba(230,180,34,.08);border-color:rgba(230,180,34,.35);color:#f2c94c}
.live-badge{color:#4ade80;background:rgba(22,101,52,.55);border-color:rgba(74,222,128,.35)}
.panel,.price-card{background:var(--card);border-color:var(--border)}
/* 输入框 / 选择 */
.field select,.field input{background:rgba(9,16,30,.6);color:var(--text);border-color:var(--border)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb0c8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field input:hover,.field select:hover{border-color:var(--border-strong)}
.tool-result{background:rgba(9,16,30,.45);border-color:var(--border)}
.res-total strong{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 历史表 */
.hist-table{background:rgba(9,16,30,.45)}
.hist-table th{background:rgba(255,255,255,.05);color:#9fb0c8}
.hist-table tbody tr:hover{background:rgba(230,180,34,.07)}
/* seg */
.seg{background:rgba(255,255,255,.06)}
.seg-btn.active{background:rgba(230,180,34,.16);color:#f2c94c;box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* 按钮 */
.btn-primary{background:var(--brand-grad);color:#221a05;box-shadow:0 6px 16px -6px rgba(230,180,34,.5)}
.btn-primary:hover{box-shadow:0 10px 22px -8px rgba(230,180,34,.6)}
.btn-ghost{background:rgba(255,255,255,.05);color:#e6b422;border-color:rgba(230,180,34,.4)}
.btn-ghost:hover{background:rgba(230,180,34,.12);border-color:#e6b422}
/* 页脚 */
.site-footer{background:rgba(8,14,26,.8);border-top:1px solid rgba(230,180,34,.15)}
.footer-nav a{color:#9fb0c8}
.copyright{color:#6b7d96}
/* day-nav / breadcrumb */
.day-nav a{background:rgba(255,255,255,.05);color:#9fb0c8;border-color:var(--border)}
.day-nav a:hover{background:rgba(230,180,34,.12);border-color:#e6b422;color:#f2c94c}
.breadcrumb{color:#9fb0c8}.breadcrumb span{color:#5b6c84}
/* SJC / 金条 / 戒指 / 统计强调 金色浅底 → 深金玻璃 */
.sjc-card,.tool-local,.gold-mieng,.stat-accent{
  background:linear-gradient(180deg,rgba(38,28,6,.55),rgba(30,22,5,.4));
  border-color:rgba(230,180,34,.35);
}
.gold-nhan{background:linear-gradient(180deg,rgba(40,20,15,.6),rgba(30,14,10,.45));border-color:rgba(230,150,120,.3)}
.sjc-card h3{color:#f2c94c}.tool-local h3{color:#f2c94c}
.gold-mieng .gt-head h2,.gold-nhan .gt-head h2{color:#f2c94c}
.gold-mieng .gt-price{color:#f7d15c}.gold-nhan .gt-price{color:#f0b7a0}
.sjc-row strong,.gt-price,.tool-local-grid b{color:#f0e8d6}
.sjc-table th,.sjc-table td{border-bottom:1px solid rgba(230,180,34,.14)}
.sjc-table th{color:#9fb0c8;background:rgba(255,255,255,.04)}
.sjc-table td.num{color:#f2c94c}
.stat-accent .stat-value{color:#f2c94c}
/* 对比表 */
.compare-table{background:rgba(9,16,30,.5)}
.compare-table th{background:rgba(255,255,255,.05);color:#9fb0c8}
.compare-table tbody tr td{border-bottom:1px solid rgba(230,180,34,.16)}
.compare-table tbody tr:hover{background:rgba(230,180,34,.06)}
.compare-table tbody tr{background:linear-gradient(90deg,rgba(230,180,34,.14),rgba(230,180,34,0))}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table td.buy{color:#ff7b78}.compare-table td.sell{color:#4ade80}
.compare-table td.cell-best-buy{color:#5ff0a8}.compare-table td.cell-best-sell{color:#f7c96b}
.compare-table tr.row-best td{border-color:transparent;border-bottom:1px solid rgba(230,180,34,.16)}
.badge-buy{color:#7df4b0;background:rgba(16,86,54,.4);border-color:rgba(125,244,176,.35)}
.badge-sell{color:#f7c96b;background:rgba(92,64,6,.45);border-color:rgba(247,201,107,.35)}
/* 统计卡 */
.stat-card{background:rgba(255,255,255,.04)}
.stat-value{color:#f0f4fa}
/* 世界金价卡微调更亮对比 */
.world-gold-card{border-color:rgba(230,180,34,.5)}
/* LOGO 图标 + 字标（Vàng Hôm Nay） */
.logo{display:flex;align-items:center;gap:10px;flex-direction:row}
.logo-ico{width:34px;height:34px;flex:0 0 34px;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(230,180,34,.28);transition:transform .25s var(--ease)}
.logo:hover .logo-ico{transform:rotate(-4deg) scale(1.05)}
.logo-ico svg{width:100%;height:100%;display:block}
.logo-text{font-size:20px;font-weight:800;letter-spacing:-.3px;color:#f0e6cd;display:flex;align-items:baseline;white-space:nowrap}
.logo-text em{font-style:normal;background:linear-gradient(120deg,#c08a13,#f2c94c);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:2px}
.logo-sub{display:none}
/* 世界金价普通卡（VND 为主突出，不放大字，复用金条卡视觉） */
.gold-intl{background:linear-gradient(180deg,rgba(38,28,6,.5),rgba(30,22,5,.38));border-color:rgba(230,180,34,.4)}
.gold-intl::before{background:linear-gradient(90deg,#b8860b,#f2c94c)}
.gold-intl .gt-head h2{color:#f2c94c}
.gold-intl .gt-price{color:#f7d15c}
.gt-price-sub{font-size:14px!important;color:#c9d3e2!important;font-weight:600!important}
.gt-change{margin-top:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap;white-space:nowrap}
.gt-change span{white-space:nowrap;flex-shrink:0}
.gt-change .gt-label{color:var(--muted)}
.gt-unit-left{color:var(--muted);font-size:12px;line-height:1.5;white-space:nowrap}
.gt-change.up{color:var(--up)}.gt-change.down{color:var(--down)}.gt-change.flat{color:var(--muted)}
/* 移动端底部导航（App 式 Tab） */
.mobile-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(8,14,26,.92);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid rgba(230,180,34,.18);
  padding:6px 8px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(0,0,0,.35);
}
.mobile-tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 3px;border-radius:12px;color:#9fb0c8;font-size:11.5px;font-weight:600;
  text-align:center;white-space:nowrap;text-decoration:none;
  transition:color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
}
.mobile-tabbar a svg{width:22px;height:22px}
.mobile-tabbar a.active{color:#f2c94c;background:rgba(230,180,34,.14)}
.mobile-tabbar a:active{transform:scale(.96)}
@media(max-width:640px){
  .main-nav{display:none}
  .mobile-tabbar{display:flex}
  body{padding-bottom:68px}
}
/* 长文字 / 长数字换行防溢出 */
.gt-row,.spread-row,.res-row,.day-stats>div,.equiv li,.hero-title-row,.panel-head,.gt-head{flex-wrap:wrap}
.gt-head h2{min-width:0}
.gt-price,.stat-value,.card-price,.res-total strong,.wg-vnd strong,.sjc-row strong,.tool-local-grid b{white-space:normal;overflow-wrap:break-word}
.gt-price-sub{white-space:normal}
h1,h2,h3,p,span,strong,td,th,li,label{overflow-wrap:break-word}
.sys-name{white-space:normal;overflow-wrap:anywhere}
.compare-table .num{white-space:nowrap}
.hero h1{overflow-wrap:break-word}
/* 世界金价卡上方汇率条 */
.fx-strip{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12.5px;line-height:1.4;color:var(--muted,#8b93a7);padding:8px 0 6px;border-bottom:1px dashed var(--line,#232c3d);margin-bottom:10px}
.fx-strip strong{color:var(--gold,#d4af37);font-weight:600;white-space:normal;overflow-wrap:break-word}
.fx-strip span{color:var(--muted,#8b93a7)}

/* ===== 政策 / 关于 页 ===== */.page-head{padding:8px 0 14px}
.page-head h1{font-size:26px;color:var(--text);margin:0 0 4px}
.page-sub{color:var(--muted);font-size:15px;margin:0}
.text-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:6px 0 20px;line-height:1.8;color:var(--text);font-size:14.5px;box-shadow:var(--shadow-sm)}
.text-card h2{font-size:18px;color:#f0e8d6;margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.text-card h2:first-child{margin-top:0}
.text-card a{color:#f2c94c}
.text-card ul{margin:8px 0;padding-left:22px}
.text-card li{margin:6px 0}
.text-card strong{color:#f5efdf}
.page-foot-note{margin-top:18px;color:var(--muted);font-size:13px}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.chart-legend .lg{font-weight:650}