/* NHIP · V2.57 — Bố cục PC: Cài đặt · Biểu đồ/Phân tích · Danh mục */

/* ===== 1) CÀI ĐẶT (PC): tab gọn như trên điện thoại — bỏ nhãn "Chung"/tên sàn trên tab; phạm vi áp dụng nằm ở bảng thông tin ngay dưới các tab ===== */
html body .st-nav button .st-sc{display:none!important}
/* mỗi tab một ô viền riêng (không còn viền bọc cả thanh); vạch ngăn giữa nhóm "dùng chung 3 sàn" và nhóm "riêng từng sàn" */
html body .st-nav button.st-grp{position:relative;margin-left:16px!important}
html body .st-nav button.st-grp::before{content:"";position:absolute;left:-11px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line2,var(--line,#cfd8df))}
@media(min-width:801px){
  html body #view .st-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  html body #view .st-grid>.st-nav{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;overflow:visible!important;position:static!important;width:100%;gap:8px!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  html body #view .st-grid>.st-nav button{flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:40px!important;height:auto!important;padding:0 16px!important;border:1px solid var(--line2,var(--line,#cfd8df))!important;border-radius:11px!important;background:var(--surface,transparent)!important;box-shadow:none!important;color:var(--text2)!important;font:600 13.5px/1 inherit;text-align:center!important;white-space:nowrap;justify-content:center;cursor:pointer}
  html body #view .st-grid>.st-nav button:hover{border-color:var(--brand-line,var(--brand,#2f9e7a))!important;color:var(--text)!important}
  html body #view .st-grid>.st-nav button.on{background:var(--brand-soft,var(--sel))!important;color:var(--brand-ink,var(--text))!important;border-color:var(--brand,#2f9e7a)!important;box-shadow:0 0 0 1px var(--brand,#2f9e7a) inset!important}
}

/* ===== 2) BIỂU ĐỒ + PHÂN TÍCH (PC ≥1101px): khối đầu trang gọn như mục Giao dịch =====
   Hàng 1: MÃ ⌄ · sàn · ngành | giá + thay đổi | Mở · Cao · Thấp · KL ............ [Mua][Bán]
   Hàng 2: [ô mã ............................ Xem] [Theo dõi] [Hỏi AI]                                  */
@media(min-width:1101px){
  html body .cp:not(.cp-embed)>.cp-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;grid-auto-flow:row;gap:10px 12px;align-items:center;padding:12px 16px;margin:0 0 12px;background:var(--surface,#fff);border:1px solid var(--line,#dde3e8);border-radius:16px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id{grid-column:1;grid-row:1;display:flex!important;flex-wrap:nowrap;align-items:center;gap:6px 22px;min-width:0}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id .eyebrow{display:none}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id h1#cp-sym{font-size:28px!important;margin:0!important;flex:none}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-sub{flex:0 1 auto;min-width:0;max-width:230px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin:0}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px .big{font-size:26px;line-height:1.05}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-px>span{font-size:13px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-id #cp-ohlc{flex:1 1 auto;min-width:0;max-width:none;margin:0;padding-left:20px;border-left:1px solid var(--line,#dde3e8)}
  /* ghi chú "Nến cuối · thay đổi so với nến trước" + "Nến cuối đang hình thành": thu thành 1 dòng nhỏ dưới bảng số */
  html body .cp:not(.cp-embed) .cp-ohlc{display:flex;flex-direction:column-reverse;gap:3px}
  html body .cp:not(.cp-embed) .cp-ohlc .oh-cap{margin:0;font-size:11px;font-weight:600;color:var(--text2,#5b7186)}
  html body .cp:not(.cp-embed) .cp-ohlc .oh-grid{grid-template-columns:repeat(4,minmax(64px,1fr));gap:6px 18px}
  html body .cp:not(.cp-embed) .cp-ohlc .oh{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;font-variant-numeric:tabular-nums}
  /* Hàng 2: ô mã + Xem | Theo dõi | Hỏi AI. Mua/Bán lên hàng 1 bên phải */
  html body .cp:not(.cp-embed)>.cp-top>.cp-actions{display:contents}
  html body .cp:not(.cp-embed)>.cp-top .cp-actions .tp-bs{grid-column:2/4;grid-row:1;justify-self:end;width:230px}
  html body .cp:not(.cp-embed)>.cp-top>.cp-search{grid-column:1;grid-row:2;display:flex;gap:8px;min-width:0}
  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;grid-row:2}
  html body .cp:not(.cp-embed)>.cp-top .cp-actions #ak{grid-column:3;grid-row:2}
}

/* ===== 3) DANH MỤC: thanh quản lý theo thứ tự KHÁCH HÀNG → DANH MỤC → hành động ===== */
.pf-mgr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:stretch;margin:0 0 12px}
.pf-grp{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;border:1px solid var(--line,#dde3e8);border-radius:14px;background:var(--surface,#fff)}
.pf-grp>.pf-lb{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text2,#6b7a89)}
.pf-grp>.pf-lb small{font-weight:600;letter-spacing:0;text-transform:none;margin-left:4px}
.pf-grp>select{width:100%;min-width:0}
.pf-grp>.pf-btns{display:flex;flex-wrap:wrap;gap:6px}
.pf-grp>.pf-btns .btn{min-height:34px;padding:0 12px;font-size:13px;white-space:nowrap}
.pf-grp #pf-del:not(:disabled){color:#c0392b}
/* nút AI phân tích danh mục: cùng hàng với tiêu đề, bên phải, thon gọn */
html body .view-h>#pf-ai{flex:none;align-self:center;height:36px;min-height:36px;padding:0 16px;font-size:13.5px;white-space:nowrap;border-radius:10px;margin-left:auto}
@media(max-width:640px){.pf-mgr{grid-template-columns:minmax(0,1fr)}}
.cu-ctx:empty{display:none}