/* Trang chi tiết từng mã — vẫn nằm trong khuôn Modernist: phẳng, kẻ 2px,
 * bo góc 0. Chart tự vẽ bằng SVG chứ không nhúng thư viện ngoài, vì:
 *   - thư viện chart nào cũng mang theo phong cách riêng (bo góc, phông chữ)
 *     đá nhau với bộ thiết kế;
 *   - trang nhắm người xem toàn cầu, bớt được một tệp tải từ CDN là bớt một
 *     điểm chậm và một điểm hỏng.
 */

/* ───────── Đầu trang ───────── */
.dau-ma {
  display: flex; align-items: flex-end; gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 2px solid var(--vien-dam); flex-wrap: wrap;
}
.ma-ten {
  font-family: var(--font-heading); font-weight: 800; font-size: 34px;
  letter-spacing: -.03em; line-height: 1;
}
.ma-phu { font-size: 12px; color: var(--mo); margin-top: 6px; letter-spacing: .04em; text-transform: uppercase; }
.gia-lon { font-family: var(--font-heading); font-weight: 800; font-size: 38px; letter-spacing: -.03em; line-height: 1; }
.gia-doi { font-size: 14px; font-weight: 700; margin-top: 5px; }
.ma-gio { font-size: 11px; color: var(--mo); text-transform: uppercase; letter-spacing: .06em; }

/* ───────── Chart ───────── */
.khoi-chart { padding-top: var(--space-4); }
.thanh-chart { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
#chart-boc { border: 1px solid var(--vien); background: var(--color-neutral-100); }
#chart { display: block; width: 100%; height: 420px; }
.chu-thich { font-size: 11px; color: var(--mo); padding-top: var(--space-2); letter-spacing: .03em; }
.chu-thich b { color: var(--color-text); font-weight: 700; }

/* Nét vẽ trong chart */
.nen-len   { fill: var(--len);   stroke: var(--len); }
.nen-xuong { fill: var(--xuong); stroke: var(--xuong); }
.kl-len    { fill: var(--len);   opacity: .32; }
.kl-xuong  { fill: var(--xuong); opacity: .32; }
.duong-ma  { fill: none; stroke: #2b6cb0; stroke-width: 1.5; }
.luoi      { stroke: var(--vien); stroke-width: 1; }
.chu-truc  { font-size: 10px; fill: var(--mo); font-family: var(--font-body); }

/* ───────── Thống kê ───────── */
.luoi-tk {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--vien-dam); border-left: 1px solid var(--vien);
}
.o-tk { border-right: 1px solid var(--vien); border-bottom: 1px solid var(--vien); padding: var(--space-3) var(--space-4); }
.o-tk .nh { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mo); }
.o-tk .gt { font-size: 17px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ───────── Tóm tắt kỹ thuật ───────── */
.luoi-kt {
  display: grid; grid-template-columns: 1fr 1.2fr 1.2fr;
  border-top: 2px solid var(--vien-dam);
}
.o-kt { border-right: 1px solid var(--vien); padding: var(--space-4); }
.o-kt:last-child { border-right: 0; }
.nhan-kt { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mo); margin-bottom: var(--space-3); }
.phan-quyet { font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.thanh-do { height: 8px; background: var(--color-neutral-300); margin: var(--space-3) 0 var(--space-2); position: relative; }
.thanh-do span { position: absolute; top: 0; bottom: 0; }
.dem-kt { display: flex; gap: var(--space-4); font-size: 12px; margin-top: var(--space-3); }
.dem-kt div { flex: 1; }
.dem-kt .s { font-size: 20px; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.dem-kt .l { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mo); }
.pivot { font-size: 11px; color: var(--mo); margin-top: var(--space-4); line-height: 1.7; }
.pivot b { color: var(--color-text); }

table.bang-kt td, table.bang-kt th { padding: 6px 8px; font-size: 12.5px; }
table.bang-kt .tin-hieu { font-weight: 700; }

/* ───────── Màn hình nhỏ ───────── */
@media (max-width: 1100px) {
  .luoi-kt { grid-template-columns: 1fr; }
  .o-kt { border-right: 0; border-bottom: 1px solid var(--vien); }
  .luoi-tk { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .dau-ma { gap: var(--space-4); }
  .ma-ten { font-size: 26px; }
  .gia-lon { font-size: 30px; }
  .luoi-tk { grid-template-columns: repeat(2, 1fr); }
  #chart { height: 300px; }
  .ma-gio { flex: 1 0 100%; }
}

/* Chặn thêm một lớp cho chuỗi bất thường dài: chữ phải xuống dòng chứ không
   được đẩy khung ra ngoài màn hình. */
.ma-ten, .ma-phu { overflow-wrap: anywhere; max-width: 100%; }
.dau-ma .ma-lon { min-width: 0; max-width: 100%; }