/* ============================================================
   VÀNG SJC — (tách từ style.css, dòng 1807-2055)
   ============================================================ */

  /* ===== Giá vàng SJC ===== */
  .gold-update { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
  .gold-update-label { color: var(--text-faint); font-size: 13px; }
  .gold-update-time { font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: .3px; }
  .gold-refresh { margin-left: auto; }
  .gold-table-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .gold-table-bar .gold-update-label { color: var(--text-faint); font-size: 12px; }
  .gold-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
  }
  @container (max-width: 960px) {
    .gold-grid { grid-template-columns: 1fr; }
  }
  .gold-card {
    background: var(--bg-card);
    border: 1px solid rgba(251,191,36,.22);
    border-radius: 16px;
    padding: 18px;
    box-shadow: none;
  }
  .gold-card-head {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fcd34d;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #gold-own-toggle { position: relative; cursor: pointer; }
  #gold-own-toggle .gold-own-toggle-arrow {
    margin-left: auto; color: #f6c453; font-size: 22px; font-weight: 700; line-height: 1;
    transition: transform .2s ease;
  }
  #gold-own-toggle.open .gold-own-toggle-arrow { transform: rotate(180deg); }
  #fund-detail-toggle { position: relative; cursor: pointer; }
  #fund-detail-toggle .fund-detail-toggle-arrow {
    margin-left: auto; color: #f6c453; font-size: 22px; font-weight: 700; line-height: 1;
    transition: transform .2s ease; pointer-events: none;
  }
  #fund-detail-toggle.open .fund-detail-toggle-arrow { transform: rotate(180deg); }
  .gold-calc { padding: 4px 2px; background: transparent; border: none; }
  .gold-calc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .gold-calc-title { font-weight: 700; font-size: 15px; color: #fbbf24; }
  .gold-chi-label { margin-left: auto; color: var(--text-faint); font-size: 13px; }
  .gold-select-wrap { position: relative; }
  .gold-select-wrap select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: rgba(251,191,36,0.12);
    color: var(--text);
    border: 1px solid rgba(255,215,0,.35);
    border-radius: 10px;
    padding: 10px 40px 10px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: none;
  }
  .gold-select-wrap select:hover { border-color: rgba(255,215,0,.6); box-shadow: none; }
  .gold-select-wrap select:focus { outline: none; border-color: #ffd700; box-shadow: none; }
  .gold-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffd700;
    font-size: 14px;
    pointer-events: none;
  }
  .gold-select-wrap select option { background: #1a1a24; color: var(--text); }
  .gold-calc-result { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .gold-result-card { padding: 16px; border-radius: 12px; text-align: center; }
  .gold-result-card.buy { background: transparent; border: none; }
  .gold-result-card.sell { background: transparent; border: none; border-left: 1px solid var(--hairline); }
  .gold-result-label { font-size: 12px; letter-spacing: 1px; opacity: .7; margin-bottom: 6px; }
  .gold-result-val { font-size: 24px; font-weight: 800; }
  .gold-result-card.buy .gold-result-val { color: #34d399; }
  .gold-result-card.sell .gold-result-val { color: #fb7185; }
  .gold-pick-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
  .gold-pick-select { display: flex; flex-direction: column; gap: 6px; }
  .gold-pick-label { font-size: 12px; color: var(--text-faint); }
  .gold-pick-result { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  /* Ép droplist vàng không tràn ngang trên mobile: co 100% + cắt bớt tên dài */
  .gold-pick-select .gold-select-wrap { width: 100%; max-width: 100%; }
  .gold-pick-select .gold-select-wrap select {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .gold-calc-note { margin-top: 12px; font-size: 12px; color: var(--text-faint); }

  /* Quản lý vàng sở hữu */
  .gold-own { margin-top: 6px; }
  .gold-own-add { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 2px 2px; background: transparent; border: none; border-top: 1px solid var(--hairline); border-radius: 0; }
  .gold-own-note { flex: 1; min-width: 180px; }
  .gold-own-wrap { margin-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .gold-own-chi { font-weight: 800; color: var(--text-main); }
  .gold-own-note-cell { font-size: 12px; color: var(--text-dim); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gold-own-total { display: flex; justify-content: flex-end; gap: 22px; padding: 10px 14px; background: transparent; border: none; border-top: 1px solid var(--hairline); border-radius: 0; font-size: 14px; color: var(--text-dim); }
  .gold-total-chi, .gold-total-val, .gold-total-pl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
  .gold-total-chi .gt-lab, .gold-total-val .gt-lab, .gold-total-pl .gt-lab { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
  .gold-total-chi b { color: var(--text-main); font-size: 16px; }
  .gold-total-val b { font-size: 16px; }
  .gold-empty { text-align: center; color: var(--text-faint); padding: 22px; }

  /* Tiền gửi ngân hàng */
  .dep-add { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px; background: var(--bg-card); border: 1px solid rgba(79,148,255,.22); border-radius: var(--radius-md); margin-bottom: 18px; }
  .dep-add[hidden] { display: none !important; }
  .dep-add .stock-field { flex: 1 1 170px; }
  .dep-add-btn { background: var(--cyan); color: #fff; border: none; padding: 11px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: none; transition: transform .15s, box-shadow .15s; }
  .dep-add-btn:hover { filter: brightness(1.1);; }
  .dep-wrap { overflow-x: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .dep-bank { font-weight: 800; color: var(--text-main); }
  .dep-date { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
  .dep-term { color: #93c5fd; font-weight: 700; white-space: nowrap; }
  .dep-maturity-hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
  .dep-rate { color: #60a5fa; font-weight: 700; }
  .dep-early { color: var(--text-dim); }
  .dep-rec-today { color: #fbbf24; font-weight: 700; white-space: nowrap; }
  .dep-rec-mat { color: #34d399; font-weight: 700; white-space: nowrap; }
  .dep-warn { color: #fb923c; font-weight: 800; }
  .dep-mat { color: #34d399; font-weight: 800; }
  .dep-total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 22px; padding: 10px 14px; background: transparent; border: none; border-top: 1px solid var(--hairline); border-radius: 0; font-size: 14px; color: var(--text-dim); }
  .dep-total b { color: var(--text-main); font-size: 15px; }

  /* Thuê bao: 3 ô gộp 1 card — phân tách bằng hairline mảnh */
  .sub-summary { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 6px 0; margin-bottom: 18px; }

  /* Lưới: cột 1 (tổng chi phí) chiếm 2 hàng, cột 2 chia 2 hàng */
  .sub-summary-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    position: relative;
  }
  .sub-card { background: transparent !important; border: none; border-radius: 0; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; }
  .sub-card-hero { grid-row: 1 / 3; align-items: flex-start; padding-left: 8px; }
  .sub-card-hero .sub-card-val { font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--cyan); }
  .sub-card-hero .sub-card-label { font-size: 11px; }
  /* Kẻ dọc giữa 2 cột (cột phải) + kẻ ngang giữa 2 hàng của cột phải */
  .sub-summary-grid .sub-card:nth-child(n+2) { border-left: 1px solid var(--hairline); }
  .sub-summary-grid .sub-card:nth-child(3) { border-top: 1px solid var(--hairline); }
  .sub-card-icon { font-size: 26px; }
  .sub-card-label { font-size: 11px; color: var(--text-faint); letter-spacing: .4px; }
  .sub-card-val { font-size: 20px; font-weight: 800; color: var(--text-main); margin-top: 3px; }
  .sub-add { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px; background: var(--bg-card); border: 1px solid rgba(167,139,250,.22); border-radius: 14px; margin-bottom: 18px; }
  .sub-add[hidden] { display: none !important; }
  .sub-add .stock-field { flex: 1 1 165px; }
  .sub-add-btn { background: var(--cyan); color: #fff; border: none; padding: 11px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: none; transition: transform .15s, box-shadow .15s; }
  .sub-add-btn:hover { filter: brightness(1.1);; }
  .sub-name { font-weight: 800; color: var(--text-main); word-break: break-word; }
  .sub-cat { font-size: 12px; color: var(--text-dim); }
  .sub-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--violet); background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.28); padding: 2px 6px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
  html[data-theme="light"] .sub-badge { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.24); }
  .sub-amt { color: #c084fc; font-weight: 700; white-space: nowrap; }
  .sub-cycle { font-size: 12px; color: var(--text-dim); }
  .sub-date { font-size: 11.5px; color: var(--text-dim); white-space: normal; }
  .sub-warn { color: #fb923c; font-weight: 800; }
  .sub-overdue { color: #f87171; font-weight: 800; }
  .sub-off { color: var(--text-faint); font-size: 11px; }
  .sub-inactive { opacity: .55; }
  .sub-note-cell { font-size: 12px; color: var(--text-dim); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sub-actions { white-space: nowrap; }
  .sub-actions .stock-note-edit { margin-right: 4px; }
  .detail-card .dc-actions button.sub-flag { background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); font-size: 12.5px; line-height: 1.4; padding: 7px 12px; margin-right: 0; border-radius: 8px; opacity: .95; filter: saturate(.9); transition: all .15s; vertical-align: middle; }
  .detail-card .dc-actions button.sub-flag:hover { border-color: var(--amber); background: rgba(251,191,36,.08); }
  .sub-flag.off { opacity: .3; filter: grayscale(1); }
  .sub-flag.off:hover { opacity: .85; filter: grayscale(.4); }
  .sub-total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 22px; padding: 10px 14px; background: transparent; border: none; border-top: 1px solid var(--hairline); border-radius: 0; font-size: 14px; color: var(--text-dim); }
  .sub-total b { color: var(--text-main); font-size: 15px; }
  .sub-year { color: #fbbf24; font-weight: 700; }
  .sl-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0;
  }
  .sl-count #sl-count {
    color: #93c5fd;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  /* Giấc ngủ + Monitor: 4 ô gộp 1 card — lưới 2×2 phân tách bằng hairline mảnh */
  .sl-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 6px;
    overflow: hidden;
  }
  .sl-summary .sl-card {
    background: transparent !important;   /* thắng [class*="card"] flat-override */
    border: none;
    border-radius: 0;
    padding: 14px 18px;
  }
  /* Vạch phân cách: cột phải = kẻ dọc trái; hàng dưới = kẻ ngang trên */
  .sl-summary .sl-card:nth-child(even) { border-left: 1px solid var(--hairline); }
  .sl-summary .sl-card:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .sl-card-icon { font-size: 20px; margin-bottom: 4px; }
  .sl-card-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 6px; }
  .sl-card-val { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: #c4b5fd; }
  .sl-chart { width: 100%; height: 271px; margin-bottom: 8px; }

  /* Gộp 3 khối (ngủ muộn / phân bố TG / thời lượng 30 đêm) thành 1 card,
     phân tách bằng hairline mảnh. Thời lượng ngủ nằm CUỐI card. */
  .sl-blocks-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 4px 18px;
    margin-bottom: 18px;
  }
  .sl-blocks-card > * { padding: 16px 0; }
  .sl-blocks-card > * + * { border-top: 1px solid var(--hairline); }
  .sl-blocks-card .sl-late {
    background: transparent; border: none; border-radius: 0;
    padding: 16px 0; margin-bottom: 0;
  }
  .sl-blocks-card .alloc-body { padding: 16px 0; }
  .sl-blocks-card .sl-hours-sec { display: flex; flex-direction: column; gap: 10px; }
  .sl-blocks-card .sl-hours-sec .sl-chart { margin-bottom: 0; }
    .sl-late { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 18px; }
    .sl-late-head { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--cyan); margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .sl-late-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .sl-late-rate { font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: var(--cyan); line-height: 1; min-width: 89px; }
    .sl-late-bar { flex: 1; min-width: 168px; height: 14px; background: rgba(148,163,184,.15); border-radius: 999px; overflow: hidden; }
    .sl-late-bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width .6s ease; }
    .sl-late-detail { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); white-space: nowrap; }