/* NHIP v2.68 — KHỐI THÔNG TIN MÃ Ở ĐẦU TRANG BIỂU ĐỒ + PHÂN TÍCH (PC, ≥801px)
   Một bộ quy tắc DUY NHẤT thay cho các lớp chồng nhau (trade-ui / pc-layout / pc-actions / pc-fixes / symbol-picker).
   Nguyên tắc:
   1) Luôn là 1 thẻ gọn, luôn đúng 2 hàng:  Hàng 1 = [thông tin mã] … [Mua|Bán]   Hàng 2 = [ô mã · Xem] [Theo dõi] [Hỏi AI]
   2) Thông tin mã = Mã ⌄ sàn·ngành │ giá + thay đổi │ Mở·Cao·Thấp·KL. Tự xuống dòng THEO ĐỘ RỘNG THỰC (kể cả khi menu trái
      chiếm chỗ); khi xuống dòng thì Mở·Cao·Thấp·KL thành 1 thanh ngang gọn, KHÔNG bao giờ xếp dọc kéo dài bảng.
   3) Không đổi điện thoại (≤800px) và biểu đồ nhúng trong Giao dịch. */
@media(min-width:801px){
  html body .cp:not(.cp-embed)>.cp-top{
    display:grid!important;position:static!important;
    grid-template-columns:minmax(0,1fr) minmax(104px,128px) minmax(104px,128px)!important;
    grid-template-rows:auto auto!important;
    gap:10px 10px!important;align-items:center!important;
    padding:12px 16px!important;margin:0 0 12px!important;
    background:var(--surface,#fff);border:1px solid var(--line,#dde3e8);border-radius:16px;
  }

  /* ---------- Hàng 1 trái: thông tin mã (tự xuống dòng gọn) ---------- */
  html body .cp:not(.cp-embed)>.cp-top>.cp-id{
    grid-column:1!important;grid-row:1!important;min-width:0;
    display:flex!important;flex-flow:row wrap;align-items:center;align-content:flex-start;gap:6px 16px;
  }
  html body .cp:not(.cp-embed)>.cp-top>.cp-id .eyebrow{display:none!important}
  /* mã + sàn/ngành: dính liền nhau, luôn cùng 1 nhóm */
  html body .cp:not(.cp-embed)>.cp-top>.cp-id h1#cp-sym{flex:none;margin:0!important;font-size:28px!important;line-height:1.1}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-sub{
    flex:0 1 auto;min-width:0;max-width:min(200px,100%);margin:0;
    display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;
  }
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-sub .cx-sector{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* giá + thay đổi */
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px{
    flex:none;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  }
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px .big{font-size:26px;line-height:1.05;font-variant-numeric:tabular-nums}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px>span{font-size:13px;font-weight:700;white-space:nowrap}

  /* Mở · Cao · Thấp · KL: 1 thanh ngang, không khung từng ô, chú thích 1 dòng nhỏ bên dưới */
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-ohlc{
    flex:1 1 290px;min-width:0;max-width:none;margin:0;
    display:flex;flex-direction:column-reverse;gap:3px;
    padding:5px 12px;border-radius:12px;background:var(--surface2,rgba(127,160,190,.10));
  }
  html body .cp:not(.cp-embed) .cp-ohlc .oh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px}
  html body .cp:not(.cp-embed) .cp-ohlc .oh{min-width:0;padding:0;border:0;background:transparent;border-radius:0;display:flex;flex-direction:column;gap:1px}
  html body .cp:not(.cp-embed) .cp-ohlc .oh span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text2,#5b7186)}
  html body .cp:not(.cp-embed) .cp-ohlc .oh b{font-size:14px;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .cp:not(.cp-embed) .cp-ohlc .oh-cap{
    display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;min-width:0;
    font-size:11px;font-weight:600;line-height:1.3;color:var(--text2,#5b7186);
  }
  html body .cp:not(.cp-embed) .cp-ohlc .oh-cap>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .cp:not(.cp-embed) .cp-ohlc .oh-cap .qchip{flex:none}

  /* ---------- Cụm nút: gỡ khung nhóm để mỗi nút vào đúng ô lưới ---------- */
  html body .cp:not(.cp-embed)>.cp-top>.cp-actions{display:contents!important}
  html body .cp:not(.cp-embed)>.cp-top .cp-actions .tp-bs{
    grid-column:2/4!important;grid-row:1!important;align-self:start!important;justify-self:stretch!important;
    width:auto!important;min-width:0!important;contain:inline-size;
  }
  html body .cp:not(.cp-embed)>.cp-top>.cp-search{
    grid-column:1!important;grid-row:2!important;min-width:0;display:flex;gap:8px;
  }
  html body .cp:not(.cp-embed)>.cp-top>.cp-search input{flex:1 1 auto;width:auto;min-width:0}
  html body .cp:not(.cp-embed)>.cp-top .cp-actions #aw{grid-column:2!important;grid-row:2!important;width:100%!important;min-width:0!important}
  html body .cp:not(.cp-embed)>.cp-top .cp-actions #ak{grid-column:3!important;grid-row:2!important;width:100%!important;min-width:0!important}
  html body .cp:not(.cp-embed)>.cp-top .cp-actions .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px!important;padding-right:8px!important}
}

/* Cửa sổ hẹp (801–1000px): rút gọn cỡ chữ/khoảng cách để vẫn đủ 2 hàng gọn */
@media(min-width:801px) and (max-width:1000px){
  html body .cp:not(.cp-embed)>.cp-top{padding:10px 12px!important;gap:8px 8px!important;grid-template-columns:minmax(0,1fr) minmax(96px,116px) minmax(96px,116px)!important}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id{gap:6px 14px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id h1#cp-sym{font-size:24px!important}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px .big{font-size:23px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px>span{font-size:12.5px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-ohlc{flex-basis:100%;padding:5px 12px}
  html body .cp:not(.cp-embed) .cp-ohlc .oh b{font-size:13.5px}
}