/* ============================================================
 * HP Performance tab — thiết kế cao cấp, tinh tế (trung tính + 1 accent)
 * ============================================================ */
.hp-perf {
  --pf-ink: var(--ink);
  --pf-muted: var(--muted);
  --pf-line: color-mix(in srgb, var(--ink) 9%, transparent);
  --pf-line-soft: color-mix(in srgb, var(--ink) 5%, transparent);
  --pf-surface: var(--bg);
  --pf-fill: #2f3645;            /* than chì — thanh điểm trung tính, không trẻ con */
  --pf-fill-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --pf-accent: var(--red);
  --tier-basic: #8a93a3;
  --tier-entry: #5b86c4;
  --tier-mid:   #2f9e8f;
  --tier-high:  #d08a2c;
  --tier-flagship: var(--red);
  font-size: 15px; line-height: 1.5;
}
[data-theme="dark"] .hp-perf {
  --pf-fill: #c4ccda;
  --pf-line: color-mix(in srgb, #fff 12%, transparent);
  --pf-line-soft: color-mix(in srgb, #fff 7%, transparent);
  --pf-surface: var(--bg-2);
}

/* Heading SEO ẩn thị giác nhưng vẫn crawlable + đọc bằng screen-reader */
.hp-perf-srhead {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Câu tóm tắt keyword-rich (SEO + TL;DR cho khách) */
.hp-perf-sum {
  margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--pf-muted);
}
.hp-perf-sum strong { color: var(--pf-ink); font-weight: 650; }
h3.chip-name { margin-top: 0; }

/* Note */
.hp-perf__note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.55; color: var(--pf-muted);
  background: var(--pf-line-soft); border: 1px solid var(--pf-line);
  border-radius: 12px; padding: 11px 15px; margin-bottom: 22px;
}
.hp-perf__note i { color: var(--pf-accent); margin-top: 2px; opacity: .85; }

/* ---- Hàng 2: CPU + GPU ---- */
.hp-perf-bench {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-bottom: 18px;
}
.hp-perf-chip {
  position: relative; background: var(--pf-surface);
  border: 1px solid var(--pf-line); border-radius: 18px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(16,18,22,.03), 0 8px 24px -18px rgba(16,18,22,.18);
}

.chip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chip-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pf-muted); display: inline-flex; align-items: center; gap: 8px;
}
.chip-eyebrow i { font-size: 13px; opacity: .9; }
.hp-perf-chip--cpu .chip-eyebrow i { color: var(--tier-entry); }
.hp-perf-chip--gpu .chip-eyebrow i { color: var(--pf-accent); }
.chip-q {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--pf-line);
  background: transparent; color: var(--pf-muted); cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .25s, border-color .25s, background .25s;
}
.chip-q:hover { color: var(--pf-accent); border-color: color-mix(in srgb, var(--pf-accent) 45%, transparent); background: color-mix(in srgb, var(--pf-accent) 7%, transparent); }

.chip-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--pf-ink); margin: 0 0 12px; line-height: 1.25; }
.chip-igpu {
  font-size: 10px; font-weight: 600; vertical-align: middle; padding: 2px 7px; margin-left: 4px;
  border-radius: 6px; background: var(--pf-fill-soft); color: var(--pf-muted); letter-spacing: .06em; text-transform: uppercase;
}
.chip-note { font-size: 13px; color: var(--pf-muted); font-style: italic; }

.chip-tier {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); margin-bottom: 14px;
}
.chip-tier .dot { width: 8px; height: 8px; border-radius: 50%; }
.tier--basic    .dot, .ladder-name.tier--basic::before    { background: var(--tier-basic); }
.tier--entry    .dot { background: var(--tier-entry); }
.tier--mid      .dot { background: var(--tier-mid); }
.tier--high     .dot { background: var(--tier-high); }
.tier--flagship .dot { background: var(--tier-flagship); }

.chip-bar { height: 4px; border-radius: 4px; background: var(--pf-fill-soft); overflow: hidden; margin-bottom: 20px; }
.chip-bar > span {
  display: block; height: 100%; border-radius: 4px; background: var(--pf-fill);
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}

.chip-metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chip-metrics li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 11px 0; border-bottom: 1px solid var(--pf-line-soft);
}
.chip-metrics li:last-child { border-bottom: 0; }
.chip-metrics .m-label { color: var(--pf-muted); }
.chip-metrics .m-val { font-weight: 700; color: var(--pf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip-metrics .m-val em { font-style: normal; font-weight: 500; color: var(--pf-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-left: 2px; }

/* ---- Use-case ---- */
.hp-perf-uses {
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 1px 2px rgba(16,18,22,.03), 0 8px 24px -18px rgba(16,18,22,.18);
}
.hp-perf-uses__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.hp-perf-uses__head h4 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--pf-ink); display: inline-flex; align-items: center; gap: 9px; }
.hp-perf-uses__head h4 i { color: var(--pf-accent); font-size: 15px; }
.hp-perf-uses__hint { font-size: 12px; color: var(--pf-muted); }

.hp-perf-uselist { list-style: none; margin: 8px 0 0; padding: 0; }
.use-row {
  display: grid; grid-template-columns: minmax(160px, 1fr) auto; align-items: center; gap: 18px;
  padding: 14px 12px; border-radius: 12px; border-bottom: 1px solid var(--pf-line-soft);
  transition: background .2s;
}
.use-row:last-child { border-bottom: 0; }
.use-row.is-match { background: color-mix(in srgb, var(--pf-accent) 4%, transparent); }
.use-name { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; color: var(--pf-ink); }
.use-svg { width: 20px; height: 20px; color: var(--pf-muted); flex: 0 0 auto; }
.use-row.is-match .use-svg { color: var(--pf-accent); }
.use-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pf-accent); border: 1px solid color-mix(in srgb, var(--pf-accent) 35%, transparent);
  padding: 2px 8px; border-radius: 999px;
}

/* Thanh điểm 10 vạch (thay sao vàng) */
.hp-perf-score { display: inline-flex; align-items: center; gap: 14px; }
.score-segs { display: inline-flex; gap: 3px; }
.score-segs .seg {
  width: 14px; height: 8px; border-radius: 2px; background: var(--pf-fill-soft);
}
.score-segs .seg.is-on { background: var(--pf-fill); }
.score-segs .seg.is-half { background: linear-gradient(90deg, var(--pf-fill) 50%, var(--pf-fill-soft) 50%); }
.score-num { font-size: 15px; font-weight: 700; color: var(--pf-ink); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.score-num span { color: var(--pf-muted); font-weight: 500; font-size: 12px; }

/* ---- Popup ---- */
.hp-perf-pop {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12,14,18,.5); backdrop-filter: blur(6px);
  animation: hpPerfFade .3s ease;
}
.hp-perf-pop[hidden] { display: none; }
.hp-perf-panel[hidden] { display: none; }
@keyframes hpPerfFade { from { opacity: 0; } to { opacity: 1; } }
.hp-perf-pop__card {
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 20px;
  max-width: 480px; width: 100%; max-height: 84vh; overflow-y: auto;
  box-shadow: 0 32px 80px -24px rgba(12,14,18,.4); padding: 26px 28px;
  animation: hpPerfPop .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes hpPerfPop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.hp-perf-pop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.hp-perf-pop__head h4 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--pf-ink); }
.hp-perf-pop__x {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--pf-line); background: transparent; color: var(--pf-muted);
  cursor: pointer; font-size: 14px; flex: 0 0 auto; transition: color .2s, border-color .2s;
}
.hp-perf-pop__x:hover { color: var(--pf-accent); border-color: color-mix(in srgb, var(--pf-accent) 45%, transparent); }
.hp-perf-pop__intro { font-size: 14px; line-height: 1.65; color: var(--pf-muted); margin: 0 0 20px; }

.hp-perf-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.hp-perf-ladder li {
  padding: 14px 0 14px 22px; border-bottom: 1px solid var(--pf-line-soft); position: relative;
}
.hp-perf-ladder li:last-child { border-bottom: 0; }
.hp-perf-ladder li::before {
  content: ""; position: absolute; left: 4px; top: 18px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pf-fill-soft);
}
.hp-perf-ladder li.is-here::before { background: var(--pf-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-accent) 14%, transparent); }
.ladder-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.ladder-name { font-weight: 700; font-size: 14px; color: var(--pf-ink); }
.ladder-here { display: none; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-accent); border: 1px solid color-mix(in srgb, var(--pf-accent) 35%, transparent); padding: 2px 9px; border-radius: 999px; }
.hp-perf-ladder li.is-here .ladder-here { display: inline-block; }
.hp-perf-ladder li.is-here .ladder-name { color: var(--pf-accent); }
.hp-perf-ladder li p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--pf-muted); }

/* ---- Tab Gaming: panel theo biến thể + icon tab ---- */
.hp-game-panel[hidden] { display: none; }
.hp-perf--game .hp-perf-games { margin-top: 0; }
.pdp-tabs .tab .use-svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; color: inherit; }
.pdp-tabs .tab.active .use-svg { color:var(--red-ink); }

/* ---- Block "Chơi game gì?" ---- */
.hp-perf-games {
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 18px;
  padding: 22px 26px; margin-top: 18px;
  box-shadow: 0 1px 2px rgba(16,18,22,.03), 0 8px 24px -18px rgba(16,18,22,.18);
}
.hp-perf-gamelist { list-style: none; margin: 10px 0 0; padding: 0; }
.game-row {
  display: grid; grid-template-columns: minmax(120px,1.1fr) minmax(70px,2fr) auto minmax(96px,auto);
  align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--pf-line-soft);
}
.game-row:last-child { border-bottom: 0; }
.game-name { font-weight: 650; font-size: 14.5px; color: var(--pf-ink); }
.game-bar { height: 7px; border-radius: 999px; background: var(--pf-fill-soft); overflow: hidden; }
.game-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.22,.61,.36,1); }
.gc--good .game-bar > span { background: #16a34a; }
.gc--ok   .game-bar > span { background: #d68a1e; }
.gc--bad  .game-bar > span { background: #dc2626; }
.game-fps { font-size: 12.5px; color: var(--pf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.game-fps b { font-size: 16px; font-weight: 750; }
.gc--good .game-fps b { color: #16a34a; }
.gc--ok   .game-fps b { color: #c47d18; }
.gc--bad  .game-fps b { color:var(--red-ink); }
.game-set { font-size: 11px; color: var(--pf-muted); white-space: nowrap; text-align: right; }
.hp-perf-games__note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--pf-muted); }
@media (max-width: 680px) {
  .game-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .game-bar { grid-column: 1 / -1; order: 3; }
  .game-set { order: 2; }
}

/* ---- Tab AI Local: panel theo biến thể + list model ---- */
.hp-ai-panel[hidden] { display: none; }
.hp-perf-ai {
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 18px;
  padding: 22px 26px; margin-top: 18px;
  box-shadow: 0 1px 2px rgba(16,18,22,.03), 0 8px 24px -18px rgba(16,18,22,.18);
}
.hp-perf-ailist { list-style: none; margin: 10px 0 0; padding: 0; }
.ai-row {
  display: grid; grid-template-columns: minmax(150px,1.3fr) minmax(70px,2fr) auto minmax(88px,auto);
  align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--pf-line-soft);
}
.ai-row:last-child { border-bottom: 0; }
.ai-name { font-weight: 650; font-size: 14.5px; color: var(--pf-ink); display: flex; flex-direction: column; }
.ai-name small { font-weight: 450; font-size: 11.5px; color: var(--pf-muted); margin-top: 1px; }
.ai-bar { height: 7px; border-radius: 999px; background: var(--pf-fill-soft); overflow: hidden; }
.ai-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.22,.61,.36,1); }
.aiv--great  .ai-bar > span { background: #16a34a; }
.aiv--well   .ai-bar > span { background: #d68a1e; }
.aiv--decent .ai-bar > span { background: #f97316; }
.aiv--meh    .ai-bar > span { background: #9ca3af; }
.ai-tps { font-size: 12.5px; color: var(--pf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-tps b { font-size: 16px; font-weight: 750; }
.aiv--great  .ai-tps b { color: #16a34a; }
.aiv--well   .ai-tps b { color: #c47d18; }
.aiv--decent .ai-tps b { color: #ea580c; }
.ai-verdict {
  font-size: 11px; font-weight: 650; white-space: nowrap; text-align: center;
  padding: 3px 10px; border-radius: 999px; justify-self: end;
}
.aiv--great  .ai-verdict { color: #15803d; background: rgba(22,163,74,.12); }
.aiv--well   .ai-verdict { color: #b45309; background: rgba(214,138,30,.14); }
.aiv--decent .ai-verdict { color: #c2410c; background: rgba(249,115,22,.13); }
.aiv--meh    .ai-verdict { color: var(--pf-muted); background: var(--pf-fill-soft); }
.hp-perf-ai .ai-row.is-more { display: none; }
.hp-perf-ai.show-all .ai-row.is-more { display: grid; }
.hp-ai-more {
  display: block; width: 100%; margin-top: 14px; padding: 9px 16px;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--pf-ink);
  background: var(--pf-fill-soft); border: 1px solid var(--pf-line); border-radius: 10px;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.hp-ai-more:hover { background: var(--pf-line-soft); border-color: var(--pf-line); }
.hp-ai-more[hidden] { display: none; } /* display:block ở trên đè UA [hidden] — không có dòng này nút không tắt sau khi bấm */
.hp-ai-more i { font-size: 11px; margin-left: 4px; opacity: .7; }
.hp-ai-more b { color: inherit; font-weight: 750; } /* main.css tô b màu đỏ — giữ số cùng màu nút */
@media (max-width: 680px) {
  .ai-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .ai-bar { grid-column: 1 / -1; order: 3; }
  .ai-verdict { order: 2; }
}

/* Tab spark — chỉ đỏ khi tab active; chưa active thì theo màu chữ tab */
.pdp-tabs .tab .tab-spark { color: inherit; margin-right: 6px; opacity: .85; }
.pdp-tabs .tab.active .tab-spark,
.pdp-tabs .tab[aria-selected="true"] .tab-spark { color:var(--red-ink); opacity: 1; }

/* Responsive */
@media (max-width: 680px) {
  .hp-perf-bench { grid-template-columns: 1fr; }
  .use-row { grid-template-columns: 1fr; gap: 10px; }
  .hp-perf-score { justify-content: space-between; width: 100%; }
  .chip-name { font-size: 18px; }
}