/* Khối riêng của 3 trang (so sánh 9999, bảng giá, vàng thế giới, ngoại tệ, biểu đồ).
   Token, base, header và component dùng chung nằm ở styles.css (nạp trước file này). */

/* ===== Khối trang (section card) ===== */
.sec {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-top: var(--space-grid);
}
.page-head + .sec {
  margin-top: 0;
}
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sec-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}
.sec-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
/* Khung nhiều tab (Biểu đồ giá: Trong ngày | Xu hướng) — nút tab dùng .seg */
.tab-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.panel-tools {
  display: flex;
  justify-content: flex-end;
}
.sub-h {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sec .note {
  margin: 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip b {
  color: var(--text);
}
.chip-line {
  background: transparent;
  border-color: var(--gold);
  color: var(--text);
}
.chip-btn {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.chip-btn:hover {
  border-color: var(--gold);
  color: var(--text);
}
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}
.btn-link {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--goldsoft);
  padding: 10px 0 0;
  cursor: pointer;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pickers {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 28rem);
  gap: 10px;
}
.pickers label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}
.pickers select {
  width: 100%;
  max-width: none;
}
/* Số cột = số ô (3 hoặc 4), chia đều */
.stats-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
}
.stat .s {
  font-size: 12px;
  color: var(--muted);
}
.chart-box .empty {
  position: absolute;
  inset: 0;
  height: auto;
}
.legend {
  flex-wrap: wrap;
  margin-top: 0;
}
.legend i.world {
  border-top: 2px solid var(--chart-world);
}

/* ===== So sánh 9999 (trang Giá vàng) ===== */
.cmp-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}
.cmp,
.board,
.fx-table {
  margin-inline: -20px;
  overflow-x: auto;
}
.cmp-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 7.4rem 7.4rem 4.6rem 5.4rem 5.4rem 4rem;
  gap: 10px;
  align-items: center;
  padding: var(--row-pad) 20px;
}
.cmp-row + .cmp-row {
  border-top: 1px solid var(--line);
}
.cmp-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-block: 4px 8px;
  white-space: nowrap;
}
.c {
  text-align: right;
}
.cmp-src {
  min-width: 0;
}
.cmp-src .nm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.cmp-src .nm .chip {
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 2px 8px;
}
.orig {
  font-size: 12px;
  color: var(--muted);
}
.cmp-row .buy {
  color: var(--muted);
}
.cmp-row .sell {
  font-weight: 600;
  color: var(--goldsoft);
}
.cmp-row .is-best {
  font-weight: 700;
  color: var(--goldsoft);
}
.cmp-row .sub {
  display: none;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}
.cmp-row.is-stale {
  opacity: 0.7;
}
.cmp-row.is-na {
  color: var(--muted);
}
.cmp-row .na-text {
  grid-column: 2 / -1;
  text-align: right;
  font-size: 13px;
}

/* ===== Bảng giá đầy đủ ===== */
.board details + details {
  border-top: 1px solid var(--line);
}
.board summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}
.board summary:hover,
.board details[open] summary {
  background: var(--surface2); /* tên nguồn tách hẳn khỏi các dòng giá bên dưới */
}
.board details[open] {
  padding-bottom: 8px;
}
.board summary::-webkit-details-marker {
  display: none;
}
.board summary::after {
  content: '\203A';
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s;
}
.board details[open] summary::after {
  transform: rotate(90deg);
}
.board summary h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
}
.board .cnt,
.board summary .chip {
  margin-left: auto;
}
.board .cnt {
  font-size: 13px;
  color: var(--muted);
}
.mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 7rem;
  gap: 10px;
  padding: var(--row-pad) 20px var(--row-pad) 28px;
  font-size: 14px;
  line-height: 1.45;
  align-items: center;
}
/* Kẻ dòng thay cho nền xen kẽ: nền xen kẽ ở theme tối gần như trùng màu thẻ */
.mini + .mini {
  border-top: 1px solid var(--line);
}
.mini:not(.mini-head):hover {
  background: var(--surface2);
}
.mini:not(.mini-head) > .c:last-child {
  font-weight: 600;
}
.mini .nmx {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mini-head {
  padding-block: 10px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.tag9 {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--goldsoft);
  vertical-align: 1px;
}

/* ===== Vàng thế giới ===== */
.world-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
}
.world-top .k {
  font-size: 12px;
  color: var(--muted);
}
.world-top .fx-big {
  margin-top: 4px;
}
.spark-plot svg {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible;
}
.spark-line {
  fill: none;
  stroke: var(--goldsoft);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.spark-fill {
  fill: var(--goldsoft);
  fill-opacity: 0.12;
}
.spark-hl {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
}
.world-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ===== Ngoại tệ ===== */
.fxrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 7.6rem 7rem;
  gap: 10px;
  align-items: center;
  padding: var(--row-pad) 20px;
}
.fxrow + .fxrow {
  border-top: 1px solid var(--line);
}
.fxrow[data-code] {
  cursor: pointer;
  transition: background 0.15s;
}
.fxrow[data-code]:hover {
  background: var(--surface2);
}
.fxrow.is-extra {
  display: none;
}
.fx-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.fxrow .code {
  font-weight: 700;
}
.fxrow .cname {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxrow .sell {
  font-weight: 600;
  color: var(--goldsoft);
}
.calc {
  display: grid;
  gap: 10px;
}
.calc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.calc input,
.calc output {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc output {
  display: block;
  color: var(--goldsoft);
  overflow-wrap: anywhere;
}
.calc select {
  max-width: 12rem;
}
.calc :disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .cmp-row {
    grid-template-columns: minmax(0, 1fr) 6.4rem 6.8rem;
    gap: 8px;
  }
  .cmp-row .x {
    display: none;
  }
  .cmp-row .sub {
    display: block;
  }
  .stats-row,
  .world-stats {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
  .stat .v .delta {
    font-size: 16px;
  }
  .world-top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .cmp,
  .board,
  .fx-table {
    margin-inline: -16px;
  }
  .cmp-row,
  .fxrow,
  .board summary {
    padding-inline: 16px;
  }
  .cmp-row {
    grid-template-columns: minmax(0, 1fr) 5.8rem 6.2rem;
    font-size: 13px;
  }
  .mini {
    grid-template-columns: minmax(0, 1fr) 5.8rem 5.8rem;
    padding-inline: 20px 16px;
    font-size: 13px;
  }
  .fxrow {
    grid-template-columns: minmax(0, 1fr) 5rem 5.4rem 5rem;
    gap: 6px;
    font-size: 13px;
  }
  .pickers {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  }
  .calc input,
  .calc output {
    font-size: 19px;
  }
  .calc select {
    max-width: 7.6rem;
  }
}