/* ═══ home page styles ═══ */
@media (max-width: 600px) {
      main { padding: 12px 0 60px !important; }
      header { padding: 0 12px; }
      .sv-brand-card { border-radius: 0; border-left: none; border-right: none; }
      .sv-brands-grid { gap: 0; }
      .sv-main-layout { gap: 6px; }
      .sv-shared-chart-wrap { border-radius: 0; border-left: none; border-right: none; }
      .sv-compact-section { margin-top: 16px; }
      .ticker-wrap { border-radius: 0; border-left: none; border-right: none; }
      .world-chart-card { border-radius: 0; border-left: none; border-right: none; }
      .world-charts-grid { gap: 0; }
      .sv-section-head { padding: 0 12px; }
      .sv-footnote { padding: 0 12px; }
    }

    /* PAGE HEADER */
    .page-header { margin-bottom: 32px; }
    .page-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 5px; }
    .page-header p  { font-size: 13px; color: var(--muted); }

    /* TICKER */
    .ticker-wrap {
      background: var(--bg2);
      border: 1px solid rgba(245,197,24,0.15);
      border-radius: var(--radius); overflow: hidden; margin-bottom: 28px;
    }
    .ticker-label {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 16px 7px; font-size: 11px; font-weight: 700;
      color: var(--gold2); text-transform: uppercase; letter-spacing: 0.1em;
      background: linear-gradient(90deg, rgba(245,197,24,0.08), transparent);
      border-bottom: 1px solid rgba(245,197,24,0.08);
    }
    .tradingview-widget-container.ticker-tv { width: 100%; min-height: 46px; }

    /* SECTION */
    .section-block { margin-bottom: 44px; }
    .section-head {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 20px;
    }
    .section-icon {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    .section-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
    .section-head p  { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

    /* TV CHARTS GRID */
    .tv-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media(max-width:960px) { .tv-charts-grid { grid-template-columns: 1fr; } }

    .tv-chart-card {
      border-radius: var(--radius); overflow: hidden;
      display: flex; flex-direction: column;
      border: 1px solid var(--border); background: var(--bg2);
      transition: border-color .25s, box-shadow .25s, transform .25s;
    }
    .tv-chart-card:hover { transform: translateY(-3px); }

    .card-gold   { border-color: rgba(245,197,24,0.22); box-shadow: 0 0 0 1px rgba(245,197,24,0.06); }
    .card-gold:hover { border-color: rgba(245,197,24,0.45); box-shadow: 0 10px 40px rgba(245,197,24,0.12); }
    .card-silver { border-color: rgba(176,190,197,0.22); box-shadow: 0 0 0 1px rgba(176,190,197,0.06); }
    .card-silver:hover { border-color: rgba(176,190,197,0.45); box-shadow: 0 10px 40px rgba(176,190,197,0.1); }

    .card-head {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 20px; border-bottom: 1px solid var(--border);
    }
    .card-gold   .card-head { background: linear-gradient(90deg, rgba(245,197,24,0.1), transparent); border-bottom-color: rgba(245,197,24,0.1); }
    .card-silver .card-head { background: linear-gradient(90deg, rgba(176,190,197,0.08), transparent); border-bottom-color: rgba(176,190,197,0.1); }

    .card-badge {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; flex-shrink: 0;
    }
    .badge-gold   { background:linear-gradient(135deg,rgba(245,197,24,.25),rgba(245,197,24,.08)); border:1px solid rgba(245,197,24,.3); }
    .badge-silver { background:linear-gradient(135deg,rgba(176,190,197,.2),rgba(176,190,197,.06)); border:1px solid rgba(176,190,197,.25); }

    .card-info { flex: 1; }
    .card-name { font-size: 16px; font-weight: 800; }
    .card-gold  .card-name { color: var(--gold2); }
    .card-silver .card-name { color: var(--silver2); }
    .card-symbol { font-size: 11px; color: var(--muted); margin-top: 3px; font-family:'JetBrains Mono',monospace; letter-spacing:.03em; }

    .card-powered { text-align: right; flex-shrink: 0; }
    .card-powered span { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
    .card-powered strong { font-size:12px; font-weight:700; color:var(--blue); }

    .card-chart { width:100%; height:600px; display:block; }
    .card-chart .tradingview-widget-container { width:100%; height:100%; }
    .card-chart .tradingview-widget-container__widget { width:100%; height:calc(100% - 32px); }

    /* ══════════════════════════════════
       SILVER PRICE SECTION
    ══════════════════════════════════ */
    .silver-section {
      background: var(--bg2);
      border: 1px solid rgba(176,190,197,0.18);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    /* Unit tabs */
    .sv-unit-tabs { display: flex; gap: 6px; }
    .sv-unit-btn, .ac-unit-btn, .dj-unit-btn {
      padding: 7px 16px; border-radius: var(--radius-sm);
      font-size: 12.5px; font-weight: 600;
      border: 1px solid var(--border); background: var(--bg3);
      color: var(--muted2); cursor: pointer;
      transition: all .2s; font-family: 'Inter', sans-serif;
    }
    .sv-unit-btn:hover, .ac-unit-btn:hover, .dj-unit-btn:hover { border-color: var(--border2); color: var(--text); }
    .sv-unit-btn.active, .ac-unit-btn.active, .dj-unit-btn.active {
      background: linear-gradient(135deg, #b0bec5, #78909c);
      color: #07090f; border-color: transparent;
      box-shadow: 0 2px 10px rgba(176,190,197,0.35);
    }

    /* Period buttons */
    .sv-period-btn, .ac-period-btn, .dj-period-btn {
      padding: 5px 13px; border-radius: 6px;
      font-size: 12px; font-weight: 600;
      border: 1px solid var(--border); background: var(--bg3);
      color: var(--muted2); cursor: pointer;
      transition: all .2s; font-family: 'Inter', sans-serif;
    }
    .sv-period-btn:hover, .ac-period-btn:hover, .dj-period-btn:hover { border-color: var(--border2); color: var(--text); }
    .sv-period-btn.active, .ac-period-btn.active, .dj-period-btn.active {
      background: linear-gradient(135deg, var(--blue), #6d28d9);
      color: #fff; border-color: transparent;
      box-shadow: 0 2px 8px rgba(79,122,248,0.35);
    }

    /* Loading / spinner */
    .sv-loading {
      display: flex; align-items: center; justify-content: center;
      height: 100%; color: var(--muted); font-size: 14px; gap: 10px;
    }
    .sv-spinner {
      width: 20px; height: 20px; border: 2px solid var(--border2);
      border-top-color: var(--silver); border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .sv-no-data {
      padding: 32px 24px; text-align: center;
      color: var(--muted); font-size: 13px;
    }
    .sv-no-data strong { color: var(--text2); display: block; margin-bottom: 6px; }

    .foot-note { text-align:center; margin-top:32px; font-size:12px; color:var(--muted); }

    /* ══ COMPACT SILVER BRAND SECTION ══ */
    .sv-compact-section { margin-top: 32px; }
    .sv-section-head {
      display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
    }
    .sv-section-head .sv-section-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: linear-gradient(135deg,#b0bec5,#546e7a);
      display:flex; align-items:center; justify-content:center;
      font-size:20px; flex-shrink:0;
    }
    .sv-section-head h2 { font-size:17px; font-weight:800; color:#e4e8f2; margin:0; }
    .sv-section-head p  { font-size:11.5px; color:var(--muted); margin:2px 0 0; }

    /* Layout 2 cột */
    .sv-main-layout {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
    }
    @media (max-width:1100px) { .sv-main-layout { grid-template-columns: 1fr; } }
    .sv-main-layout > * { min-width: 0; }

    .sv-brands-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    }
    @media (max-width:600px) { .sv-brands-grid { grid-template-columns: 1fr; } }

    .sv-brand-card {
      background: var(--bg2);
      border: 1px solid rgba(176,190,197,0.15);
      border-radius: var(--radius);
      padding: 14px 16px 12px;
      cursor: pointer;
      transition: border-color .2s, box-shadow .2s;
    }
    .sv-brand-card:hover { border-color: rgba(176,190,197,0.35); }
    .sv-brand-card.active {
      border-color: var(--blue);
      box-shadow: 0 0 0 1px var(--blue), 0 4px 20px rgba(79,122,248,0.12);
    }

    .sv-card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .sv-card-logo {
      width:32px; height:32px; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
      font-size:16px; flex-shrink:0;
    }
    .sv-card-name { font-size:13px; font-weight:700; color:var(--silver2); }
    .sv-card-sub  { font-size:10.5px; color:var(--muted); margin-top:1px; }

    .sv-card-tabs { display:flex; gap:5px; margin-bottom:10px; }
    .sv-tab {
      padding: 4px 10px; border-radius: 5px;
      font-size: 11.5px; font-weight: 600;
      border: 1px solid var(--border); background: var(--bg3);
      color: var(--muted2); cursor: pointer;
      transition: all .18s; font-family:'Inter',sans-serif;
    }
    .sv-tab:hover { border-color:var(--border2); color:var(--text); }
    .sv-tab.active {
      background: linear-gradient(135deg,#b0bec5,#78909c);
      color:#07090f; border-color:transparent;
      box-shadow:0 2px 8px rgba(176,190,197,0.3);
    }

    .sv-card-prices { display:flex; align-items:flex-end; gap:12px; }
    .sv-card-price-col { display:flex; flex-direction:column; gap:2px; }
    .sv-cprice-label   { font-size:10px; color:var(--muted); }
    .sv-cprice-buy {
      font-size: 20px; font-weight: 900;
      font-family:'JetBrains Mono',monospace;
      color:#f55252; letter-spacing:-0.5px; line-height:1;
    }
    .sv-cprice-sell {
      font-size: 20px; font-weight: 900;
      font-family:'JetBrains Mono',monospace;
      color:var(--green); letter-spacing:-0.5px; line-height:1;
    }

    @media (max-width: 1500px) {
      .sv-cprice-buy, .sv-cprice-sell { font-size: 16px; letter-spacing: -0.3px; }
      .sv-brand-card { padding: 12px 12px 10px; }
      .sv-card-prices { gap: 8px; }
    }
    .sv-card-pct {
      margin-left:auto; font-size:16px; font-weight:800;
      font-family:'JetBrains Mono',monospace;
    }
    .sv-card-pct.up   { color:var(--green); }
    .sv-card-pct.down { color:var(--red); }
    .sv-card-pct-days { font-size:10px; color:var(--muted); text-align:right; margin-top:2px; }

    .sv-card-bottom-row {
      display:flex; align-items:center; justify-content:space-between; margin-top:6px;
    }
    .sv-card-spread {
      font-size:11px; color:var(--muted2);
      display:flex; align-items:center; gap:4px;
    }
    .sv-card-spread .spread-val {
      font-family:'JetBrains Mono',monospace;
      font-size:11.5px; font-weight:700; color:var(--gold2);
    }

    /* Shared chart section */
    .sv-shared-chart-wrap {
      background: var(--bg2);
      border: 1px solid rgba(176,190,197,0.15);
      border-radius: var(--radius); overflow:hidden;
    }
    .sv-shared-chart-bar {
      display:flex; align-items:center; gap:10px;
      padding: 12px 16px 10px;
      border-bottom: 1px solid var(--border); flex-wrap:wrap;
    }
    .sv-chart-brand-tabs { display:flex; gap:5px; }
    .sv-chart-brand {
      padding: 5px 13px; border-radius:6px;
      font-size:12px; font-weight:600;
      border:1px solid var(--border); background:var(--bg3);
      color:var(--muted2); cursor:pointer;
      transition:all .18s; font-family:'Inter',sans-serif;
    }
    .sv-chart-brand:hover { border-color:var(--border2); color:var(--text); }
    .sv-chart-brand.active {
      background:linear-gradient(135deg,var(--blue),#6d28d9);
      color:#fff; border-color:transparent;
      box-shadow:0 2px 8px rgba(79,122,248,0.35);
    }
    .sv-chart-period-tabs { display:flex; gap:5px; margin-left:4px; }
    .sv-prd {
      padding: 5px 11px; border-radius:6px;
      font-size:11.5px; font-weight:600;
      border:1px solid var(--border); background:var(--bg3);
      color:var(--muted2); cursor:pointer;
      transition:all .18s; font-family:'Inter',sans-serif;
    }
    .sv-prd:hover { border-color:var(--border2); color:var(--text); }
    .sv-prd.active {
      background:rgba(79,122,248,0.18);
      color:var(--blue); border-color:rgba(79,122,248,0.4);
    }
    .sv-chart-unit-label { margin-left:auto; font-size:11px; color:var(--muted); }
    .sv-chart-unit-tabs { display:flex; gap:5px; margin-left:8px; }
    .sv-chart-unit-btn {
      padding: 4px 11px; border-radius:5px;
      font-size:11.5px; font-weight:600;
      border:1px solid var(--border); background:var(--bg3);
      color:var(--muted2); cursor:pointer;
      transition:all .18s; font-family:'Inter',sans-serif;
    }
    .sv-chart-unit-btn:hover { border-color:var(--border2); color:var(--text); }
    .sv-chart-unit-btn.active {
      background:linear-gradient(135deg,#b0bec5,#78909c);
      color:#07090f; border-color:transparent;
      box-shadow:0 2px 8px rgba(176,190,197,0.3);
    }
    .sv-shared-canvas-wrap {
      padding:12px 16px 16px; position:relative; height:320px;
    }
    .sv-shared-canvas-wrap canvas { width:100%!important; height:100%!important; }

    .sv-footnote {
      font-size:10.5px; color:var(--muted);
      text-align:center; margin-top:10px; padding:0 4px;
    }

    /* ══ WORLD CHARTS SECTION ══ */
    .world-charts-section { margin-bottom: 28px; }
    .wc-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
    .wc-header-icon {
      width:40px; height:40px; border-radius:10px;
      background:linear-gradient(135deg,#f59e0b,#d97706);
      display:flex; align-items:center; justify-content:center;
      font-size:20px; flex-shrink:0;
    }
    .wc-header h2 { font-size:17px; font-weight:800; color:#e4e8f2; margin:0; }
    .wc-header p  { font-size:11.5px; color:var(--muted); margin:2px 0 0; }

    .world-charts-grid {
      display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    }
    @media (max-width:700px) { .world-charts-grid { grid-template-columns:1fr; } }

    .world-chart-card {
      background: var(--bg2);
      border: 1px solid rgba(176,190,197,0.15);
      border-radius: var(--radius);
      padding: 12px 14px 10px; overflow: hidden;
    }
    .wc-card-label {
      display:flex; align-items:center; gap:7px;
      font-size:12px; font-weight:700; color:var(--silver2); margin-bottom:10px;
    }
    .wc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .wc-widget-wrap { height: 220px; border-radius: 8px; overflow: hidden; }
    .wc-widget-wrap .tradingview-widget-container,
    .wc-widget-wrap .tradingview-widget-container__widget { width:100%; height:100%; }