/* NHIP · Sửa lỗi giao diện PC v1.12
   CHỈ áp dụng cho máy tính (chuột: hover + pointer:fine). Điện thoại/máy tính bảng cảm ứng KHÔNG bị ảnh hưởng.
   Nạp SAU CÙNG để ghi đè các quy tắc ≤900px vốn dành cho điện thoại. */

/* ===== (1) Khung gợi ý mã tự vẽ (thay hộp datalist mặc định của trình duyệt) ===== */
.nx-sg{position:fixed;z-index:200;box-sizing:border-box;min-width:220px;max-height:min(340px,50vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface,#fff);color:var(--text,#173b5d);border:1px solid var(--line,#e0eeef);border-radius:12px;
  box-shadow:0 14px 38px rgba(20,40,60,.18);padding:6px;scrollbar-width:thin}
.nx-sg[hidden]{display:none}
.nx-sg .nx-it{display:flex;align-items:baseline;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.nx-sg .nx-it b{flex:0 0 auto;min-width:48px;font-size:13.5px;font-weight:800;letter-spacing:.2px}
.nx-sg .nx-it span{flex:1;min-width:0;font-size:12px;color:var(--muted,#71879b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-sg .nx-it:hover,.nx-sg .nx-it.on{background:var(--sel,var(--brand-soft,#e4f8f2));color:var(--brand-ink,inherit)}
.nx-sg .nx-it.on span,.nx-sg .nx-it:hover span{color:inherit;opacity:.8}
.nx-sg .nx-empty{padding:10px;font-size:12px;color:var(--muted,#71879b)}
/* ẩn hộp datalist gốc của trình duyệt trên PC */
@media (hover:hover) and (pointer:fine){
  input[list]::-webkit-calendar-picker-indicator{display:none!important}
}

/* ===== (2) Thanh công cụ biểu đồ: luôn thấy đủ nút, tự xuống dòng thay vì bị cắt ===== */
@media (hover:hover) and (pointer:fine){
  .cx-bar{flex-wrap:wrap!important;overflow:visible!important;row-gap:6px}
  .cx-bar .tf{flex:0 1 auto!important;flex-wrap:wrap!important;overflow:visible!important;min-width:0;margin-left:0;padding:2px 0}
  .tf,.chips.tf,.st-nav{flex-wrap:wrap!important;overflow-x:visible!important}
  .cp-main,.cp-grid,.cp-top{min-width:0}
}

/* ===== (3) PC thu hẹp cửa sổ: giữ THANH BÊN, không đổi sang thanh dưới của điện thoại ===== */
@media (max-width:900px) and (hover:hover) and (pointer:fine){
  :root{--navh:0px}
  #mnav,#msheet{display:none!important}
  html.ms-open,html.ms-open body{overflow:visible!important}

  html[data-skin] .topbar{height:60px;padding:0 16px;gap:12px}
  .tagline{display:none}

  html[data-skin] .shell{display:grid!important;grid-template-columns:190px minmax(0,1fr);width:100%;min-height:calc(100vh - 60px);align-items:stretch}
  html[data-skin] .sidebar{display:flex!important;flex-direction:column!important;position:sticky!important;top:60px!important;bottom:auto!important;left:auto;right:auto;
    z-index:5;width:auto!important;height:calc(100vh - 60px)!important;min-height:0!important;overflow-y:auto;overflow-x:hidden;
    padding:18px 10px!important;gap:4px;border:0!important;border-right:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none}
  html[data-skin] .sidebar .side-label{display:block!important;padding:2px 10px 10px}
  html[data-skin] .sidebar .side-footer{display:block!important}
  html[data-skin] .sidebar .side-note{display:none!important}
  html[data-skin] .sidebar .nav{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;min-height:40px;font-size:13px;
    text-align:left;white-space:nowrap;border-radius:10px}
  html[data-skin] .sidebar .nav .ni{width:21px;height:21px}
  .main{padding:20px 18px 24px!important}
  footer{padding-bottom:20px!important}
  .ai-widget{bottom:24px;right:20px}
  .aiw{left:auto;right:18px;width:380px;bottom:96px;height:min(560px,72vh)}
  #toast{bottom:24px}
}

/* Cửa sổ rất hẹp: thu thanh bên thành cột biểu tượng (vẫn luôn hiển thị) */
@media (max-width:720px) and (hover:hover) and (pointer:fine){
  html[data-skin] .shell{grid-template-columns:64px minmax(0,1fr)}
  html[data-skin] .sidebar{padding:14px 8px!important;align-items:center}
  html[data-skin] .sidebar .side-label,html[data-skin] .sidebar .side-footer{display:none!important}
  html[data-skin] .sidebar .nav{position:relative;justify-content:center;width:44px;padding:10px 0}
  html[data-skin] .sidebar .nav span{display:none}
  html[data-skin] .sidebar .nav .al-badge{position:absolute;top:2px;right:0;transform:scale(.8)}
  .main{padding:16px 12px 20px!important}
  .aiw{left:auto;right:12px;width:min(380px,calc(100vw - 88px))}
}


/* ===== (4) HOVER THEO TỪNG THEME (PC) — v2 =====
   Nguyên nhân lỗi: extra.css có `.tbl tr.go:hover{background:#f3fbf8}` (màu sáng cứng) → ở theme Tối/Xanh đậm,
   chữ sáng nằm trên nền sáng nên không đọc được.
   Cách sửa: mọi hover trên PC lấy màu từ 3 biến theo theme (--hv-bg, --hv-bg2, --hv-line), tính từ --surface + màu thương hiệu,
   nên đổi theme (Sáng/Tối/Dịu/Xanh đậm) hay đổi màu thương hiệu đều tự đúng, không còn màu cứng. */
html[data-skin]{--hv-bg:var(--sel);--hv-bg2:var(--sel);--hv-line:var(--line2)}
@supports (background:color-mix(in srgb,red 10%,white)){
  html[data-skin]{--hv-line:color-mix(in srgb,var(--brand) 42%,var(--line))}
  html[data-skin="light"]{--hv-bg:color-mix(in srgb,var(--brand) 6%,var(--surface));--hv-bg2:color-mix(in srgb,var(--brand) 12%,var(--surface))}
  html[data-skin="soft"]{--hv-bg:color-mix(in srgb,var(--brand) 7%,var(--surface));--hv-bg2:color-mix(in srgb,var(--brand) 13%,var(--surface))}
  html[data-skin="dark"]{--hv-bg:color-mix(in srgb,var(--brand) 12%,var(--surface));--hv-bg2:color-mix(in srgb,var(--brand) 20%,var(--surface))}
  html[data-skin="blue"]{--hv-bg:color-mix(in srgb,var(--brand) 14%,var(--surface));--hv-bg2:color-mix(in srgb,var(--brand) 24%,var(--surface))}
}
html[data-hc="1"]{--hv-bg:var(--sel);--hv-bg2:var(--sel);--hv-line:var(--text)}

@media (hover:hover) and (pointer:fine){
  /* --- Hàng bảng (Theo dõi, Thị trường, Dashboard…): tô nền ô, GIỮ NGUYÊN màu chữ tăng/giảm --- */
  html[data-skin] .tbl tr.go,html[data-skin] .tbl tbody tr{transition:none}
  html[data-skin] .tbl tr.go:hover,html[data-skin] .tbl tbody tr:hover{background:transparent}
  html[data-skin] .tbl td,html[data-skin] .db-table td{transition:background-color .14s ease}
  html[data-skin] .tbl tr.go{cursor:pointer}
  html[data-skin] .tbl tr.go:hover>td,
  html[data-skin] .tbl tbody tr:has(>td):not(.tw-dr):hover>td,
  html[data-skin] .db-table tbody tr:hover>td{background:var(--hv-bg)}
  html[data-skin] .tw-tbl tr.tw-open>td{background:var(--hv-bg2)}
  html[data-skin] .tw-tbl tr.tw-open:hover>td{background:var(--hv-bg2)}
  html[data-skin] .tw-tbl tr.tw-dr:hover>td{background:transparent}
  html[data-skin] .tbl tr.go:hover>td:first-child,html[data-skin] .db-table tbody tr:hover>td:first-child{box-shadow:inset 3px 0 0 var(--brand)}

  /* --- Thanh bên: hover nhạt hơn mục đang chọn để phân biệt được 2 trạng thái --- */
  html[data-skin] .sidebar .nav:hover:not(.active){background:var(--hv-bg)!important;color:var(--text)!important}
  html[data-skin] .sidebar .nav.active:hover{background:var(--hv-bg2)!important;color:var(--brand-ink)!important}

  /* --- Thẻ / mục bấm được --- */
  html[data-skin] .newsitem:hover,html[data-skin] .nw-card:hover,html[data-skin] .focus-card:hover{
    background:var(--hv-bg)!important;border-color:var(--hv-line)!important}
  html[data-skin] .wl-row:hover,html[data-skin] .sg-row:hover{background:var(--hv-bg)}

  /* --- Nút nhỏ: khung giờ, công cụ biểu đồ, chip --- */
  html[data-skin] .cx-btn:hover:not(.on),html[data-skin] .tf button:hover:not(.on),html[data-skin] .chips button:hover:not(.on),
  html[data-skin] .cx-quick button:hover,html[data-skin] .cx-seg button:hover:not(.on){background:var(--hv-bg)!important;border-color:var(--hv-line)!important;color:var(--text)!important}
  html[data-skin] .cx-opt:hover,html[data-skin] .cx-add:hover,html[data-skin] .cx-rail button:hover{background:var(--hv-bg2)}
  html[data-skin] .nx-sg .nx-it:hover,html[data-skin] .nx-sg .nx-it.on{background:var(--hv-bg2);color:var(--text)}
  html[data-skin] .btn.pale:hover,html[data-skin] .btn.secondary:hover{background:var(--hv-bg2)!important;color:var(--brand-ink)!important;filter:none}
}