/* =====================================================================
   danh-sach.css — trang /danh-sach/ (danh sách cổ phiếu toàn sàn) · agent L 09/10/2026
   Nạp SAU moats.css. Tiền tố lớp: ds-. Màu chỉ dùng biến của moats.css.
   ===================================================================== */
.ds-main{padding-top:20px;padding-bottom:24px}
.ds-main > * + *,#ds-app > * + *{margin-top:14px}
#ds-app > .ds-head + *{margin-top:12px}
@media (min-width:1100px){.ds-c{white-space:nowrap}}
.ds-head h1{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ds-head p{color:var(--muted);font-size:var(--fs-md);margin-top:4px}

/* tóm tắt */
.ds-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ds-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;min-width:0}
.ds-kpi b{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.ds-kpi span{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.ds-kpi--ok b{color:var(--oktext)}
button.ds-kpi{font:inherit;text-align:left;cursor:pointer;min-height:44px}
button.ds-kpi:hover{border-color:var(--border-input)}

/* tìm kiếm */
.ds-find{position:relative}
.ds-find__box{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--border-input);border-radius:var(--radius);padding:0 14px;min-height:54px}
.ds-find__box:focus-within{border-color:var(--link);box-shadow:0 0 0 3px var(--infobg)}
.ds-find__box svg{flex:none;color:var(--muted)}
.ds-find input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;height:52px}
.ds-find input::placeholder{color:var(--muted)}
.ds-find input::-webkit-search-cancel-button,.ds-find input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ds-find__clr{flex:none;border:0;background:transparent;color:var(--muted);font-size:20px;width:44px;height:44px;cursor:pointer;border-radius:var(--radius-sm)}
.ds-find__clr:hover{color:var(--ink);background:var(--hover)}
.ds-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);list-style:none;margin:0;padding:6px;max-height:min(60vh,420px);overflow:auto}
.ds-sug[hidden]{display:none}
.ds-sug li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink)}
.ds-sug li[aria-selected="true"],.ds-sug li:hover{background:var(--hover)}
.ds-sug .s{font-weight:800;min-width:48px}
.ds-sug .n{flex:1;min-width:0;color:var(--ink2);font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-sug .e{font-size:var(--fs-xs);color:var(--muted)}

/* nhóm nhanh + bộ lọc */
.ds-chips{display:flex;flex-wrap:wrap;gap:8px}
.ds-chips .chip{min-height:40px;cursor:pointer;font:inherit;font-size:var(--fs-md)}
.ds-chips .chip small{font-size:var(--fs-xs);opacity:.8;font-variant-numeric:tabular-nums}
.ds-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ds-filters label{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs);color:var(--muted);min-width:0}
.ds-filters select{min-height:40px;border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-md);padding:0 10px;max-width:100%}
.ds-count{margin-left:auto;font-size:var(--fs-sm);color:var(--muted);align-self:flex-end;padding-bottom:10px}

/* danh sách (một khối markup: bảng trên máy tính, thẻ trên điện thoại) */
.ds-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ds-row{position:relative;display:grid;grid-template-columns:44px minmax(150px,2.2fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,.8fr) minmax(118px,1.2fr) minmax(120px,1.4fr);align-items:center;gap:0 10px;padding:6px 12px 6px 4px;border-top:1px solid var(--line);font-size:var(--fs-md);color:var(--ink)}
.ds-row:first-child{border-top:0}
.ds-row:not(.ds-row--h):hover{background:var(--hover)}
.ds-row--h{font-size:var(--fs-xs);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;background:var(--card-2);min-height:40px}
.ds-row--h .r{cursor:default}
.ds-c{min-width:0;font-variant-numeric:tabular-nums}
.ds-c.r{text-align:right}
.ds-sym{display:flex;flex-direction:column;min-width:0}
.ds-sym a{font-weight:800;color:var(--ink);text-decoration:none;font-size:var(--fs)}
.ds-sym a::after{content:"";position:absolute;inset:0;z-index:1}
.ds-sym a:focus-visible{outline:none}
.ds-row:focus-within{box-shadow:inset 0 0 0 2px var(--link)}
.ds-sym .nm{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-star{position:relative;z-index:2;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer;border-radius:var(--radius-sm);line-height:1}
.ds-star:hover{background:var(--card-2);color:var(--ink)}
.ds-star[aria-pressed="true"]{color:var(--gold)}
.ds-v{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.ds-v .pill{font-size:var(--fs-xs);padding:2px 8px}
.ds-dw{background:var(--warnbg);color:var(--warn)}
.ds-lb{display:none}
.ds-more{display:flex;justify-content:center;padding:4px 0}
.ds-more button{min-height:44px;padding:0 22px;border-radius:var(--radius-pill);border:1px solid var(--border-input);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.ds-more button:hover{background:var(--hover)}
.ds-empty{padding:28px 16px;text-align:center;color:var(--muted)}
.ds-note{font-size:var(--fs-sm);color:var(--muted)}
.ds-note a{color:var(--link)}
.ds-meta{display:contents}
.ds-sp{display:none}

/* máy tính bảng: bỏ P/B, ROE */
@media (max-width:1099px){
  .ds-row{grid-template-columns:44px minmax(120px,2fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.2fr) minmax(110px,1.3fr)}
  .ds-c--pb,.ds-c--roe{display:none}
}
/* điện thoại: thẻ */
@media (max-width:719px){
  .ds-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-kpi b{font-size:var(--fs-lg)}
  .ds-filters label{flex:1 1 calc(50% - 8px)}
  .ds-filters label.ds-f-sort{flex-basis:100%}
  .ds-filters select{width:100%}
  .ds-count{margin-left:0;padding-bottom:0;width:100%}
  .ds-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .ds-chips::-webkit-scrollbar{display:none}
  .ds-chips .chip{flex:none;min-height:44px}
  .ds-row--h{display:none}
  .ds-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"st sy pr" "st vd ch" ". mt mt";gap:2px 8px;padding:10px 12px 10px 2px;align-items:start}
  .ds-row:nth-child(2){border-top:0}
  .ds-star{grid-area:st;align-self:start}
  .ds-sym{grid-area:sy;padding-top:2px}
  .ds-c--p{grid-area:pr;font-weight:700;font-size:var(--fs);padding-top:2px}
  .ds-c--ch{grid-area:ch}
  .ds-v{grid-area:vd;justify-content:flex-start}
  .ds-meta{grid-area:mt;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-sm);color:var(--ink2);margin-top:4px}
  .ds-meta .ds-c{text-align:left}
  .ds-c--pb,.ds-c--roe{display:block}
  .ds-lb{display:inline;color:var(--muted);margin-right:3px}
}

/* =====================================================================
   FINTECH 09/10 (agent U) — mật độ kiểu sàn (Binance Markets/TradingView):
   hàng 44px, mã + tên trên 1 dòng, tiêu đề cột 12px viết hoa xám bấm để sắp, mũi tên ▲▼.
   Điện thoại: list 2 dòng (mã/tên trái · giá/% phải) giữ như cũ, gọn hơn.
   ===================================================================== */
.ds-sx{border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:3px;min-height:32px;white-space:nowrap}
.ds-sx:hover{color:var(--ink)}
.ds-sx::after{content:"↕";font-size:10px;color:var(--faint);opacity:.8}
.ds-sx[data-dir="asc"]::after{content:"▲";color:var(--brand-ink);opacity:1}
.ds-sx[data-dir="desc"]::after{content:"▼";color:var(--brand-ink);opacity:1}
.ds-sx[data-dir]{color:var(--ink)}
.ds-c.r .ds-sx{justify-content:flex-end;width:100%}
@media (min-width:720px){
  .ds-row{padding-top:0;padding-bottom:0;min-height:44px;font-size:var(--fs-md)}
  .ds-row--h{min-height:36px;font-size:12px;letter-spacing:.04em;position:sticky;top:var(--sticky-top,56px);z-index:3}
  .ds-star{width:36px;height:36px;font-size:16px;color:var(--faint)}
  .ds-row:hover .ds-star{color:var(--muted)}
  .ds-sym{flex-direction:row;align-items:baseline;gap:8px}
  .ds-sym a{font-size:var(--fs-md);font-weight:700;flex:none;min-width:40px}
  .ds-sym .nm{font-size:12.5px}
  .ds-v .pill{padding:1px 8px}
  .ds-list{overflow:visible}
  .ds-row--h{border-radius:var(--radius) var(--radius) 0 0}
}
@media (max-width:719px){
  .ds-row{padding-top:8px;padding-bottom:8px}
  .ds-sym a{font-size:var(--fs)}
  .ds-c--ch{justify-self:end;font-weight:600;font-size:var(--fs-sm);padding:1px 8px;border-radius:6px}
  .ds-c--ch.up{background:var(--up-bg)} .ds-c--ch.down{background:var(--down-bg)} .ds-c--ch.flat,.ds-c--ch.ref{background:var(--ref-bg)} .ds-c--ch.ceil{background:var(--ceil-bg)} .ds-c--ch.floor{background:var(--floor-bg)}
}

/* ===== UX 09/10 (anh Cường: "chỗ tìm kiếm mã làm sao nổi bật dễ quan sát hơn, đỡ bị chìm") =====
   Thứ tự mới: tiêu đề → Ô TÌM (to, viền xanh nhấn, nút Tìm) → nhóm nhanh → dải số tóm tắt gọn → bộ lọc.
   Dải số trước đây là 4 thẻ to đứng TRƯỚC ô tìm, giành sự chú ý; nay thu thành 1 hàng nhỏ (2 số vùng mua vẫn bấm được). */
.ds-find{margin-top:18px}
.ds-find__box{min-height:62px;padding:0 6px 0 18px;gap:12px;border:2px solid color-mix(in srgb,var(--brand,#4F9CF9) 55%,var(--line));
  background:linear-gradient(0deg,color-mix(in srgb,var(--brand,#4F9CF9) 7%,var(--card)),color-mix(in srgb,var(--brand,#4F9CF9) 7%,var(--card)));
  border-radius:14px;box-shadow:0 6px 24px -12px color-mix(in srgb,var(--brand,#4F9CF9) 55%,transparent);transition:border-color .15s,box-shadow .15s}
.ds-find__box:hover{border-color:color-mix(in srgb,var(--brand,#4F9CF9) 80%,var(--line))}
.ds-find__box:focus-within{border-color:var(--brand,#4F9CF9);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand,#4F9CF9) 22%,transparent),0 8px 28px -12px color-mix(in srgb,var(--brand,#4F9CF9) 60%,transparent)}
.ds-find__box svg{color:var(--brand,#4F9CF9);width:22px;height:22px}
.ds-find input{font-size:18px;font-weight:500;height:58px}
.ds-find input::placeholder{color:color-mix(in srgb,var(--muted) 85%,transparent);font-weight:400}
.ds-find__kbd{flex:none;font:600 12px/1 inherit;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--card)}
.ds-find__box:focus-within .ds-find__kbd{display:none}
.ds-find__go{flex:none;height:48px;padding:0 22px;border:0;border-radius:10px;background:var(--brand,#4F9CF9);color:var(--bg,#fff);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.ds-find__go:hover{filter:brightness(1.08)}
.ds-find__go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#ds-app > .ds-find + .ds-chips{margin-top:12px}
/* dải số tóm tắt gọn, sau nhóm nhanh */
.ds-sum.ds-sum--mini{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;align-items:baseline}
.ds-sum--mini .ds-kpi{display:inline-flex;align-items:baseline;gap:6px;background:transparent;border:0;padding:0;min-height:0;border-radius:0}
.ds-sum--mini .ds-kpi b{display:inline;font-size:var(--fs-md);font-weight:800}
.ds-sum--mini .ds-kpi span{display:inline;margin:0;font-size:var(--fs-sm)}
.ds-sum--mini button.ds-kpi{min-height:32px;padding:0 2px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent);text-underline-offset:3px}
.ds-sum--mini button.ds-kpi:hover span{color:var(--ink)}
@media (max-width:719px){
  .ds-find{margin-top:14px}
  .ds-find__box{min-height:56px;padding-left:14px}
  .ds-find input{font-size:16px;height:52px}
  .ds-find__kbd{display:none}
  .ds-find__go{height:42px;padding:0 16px;font-size:15px}
  /* điện thoại: số tóm tắt đã có sẵn trên các nút nhóm (Tất cả 1.522 · Vùng mua 30 · Gần vùng mua 8) → ẩn để danh sách lên sớm */
  .ds-sum.ds-sum--mini{display:none}
}

/* ===== 09/10 tối: điện thoại kiểu app như Simplize — 1 hàng trên (Cổ phiếu · Lọc · 🔍), tab nhóm chữ, hàng: Mã/KLGD · Giá/Thay đổi · ô % màu ===== */
.ds-top,.ds-mv,.ds-mc,.ds-hm,.ds-hp{display:none}
@media (max-width:719px){
  html.dsm .site-header,html.dsm .tape{display:none}
  .ds-main{padding-top:0}
  .ds-top{display:flex;align-items:center;gap:2px;position:sticky;top:0;z-index:30;height:54px;margin:0 -16px;padding:0 8px 0 16px;background:var(--bg)}
  .ds-top__t{flex:1;margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
  .ds-top__b{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}
  .ds-top__b[aria-expanded="true"]{background:var(--card-2,var(--card));color:var(--brand-ink,var(--brand))}
  #ds-app > .ds-head{display:none}
  #ds-app:not(.ds-open-find) > .ds-find{display:none}
  #ds-app.ds-open-find > .ds-find{margin-top:4px}
  #ds-app:not(.ds-open-filt) > .ds-filters{display:none}
  .ds-find__box{min-height:48px}.ds-find input{height:46px}.ds-find__go{height:38px}
  /* nhóm nhanh = tab chữ */
  .ds-chips{gap:18px;border-bottom:1px solid var(--line);margin-top:2px!important}
  .ds-chips .chip{min-height:40px;padding:0 0 6px;border:0!important;border-radius:0;background:transparent!important;color:var(--muted);font-size:15px;font-weight:600;border-bottom:2px solid transparent!important;box-shadow:none}
  .ds-chips .chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--brand)!important}
  .ds-chips .chip small{font-size:11px;color:var(--faint);font-weight:500}
  /* danh sách */
  .ds-list{border:0!important;background:transparent!important;margin-top:4px}
  .ds-row--h{display:grid!important;grid-template-columns:minmax(0,1fr) auto 92px;gap:0 12px;padding:8px 0!important;font-size:12px;color:var(--muted);border:0!important;background:transparent!important;position:sticky;top:54px;z-index:3;background:var(--bg)!important}
  .ds-row--h > span:first-child,.ds-row--h .ds-meta,.ds-row--h > .ds-c:not(.ds-hch):not(.ds-hm),.ds-row--h .ds-hd{display:none}
  .ds-row--h .ds-hm{display:flex;align-items:center;gap:3px}
  .ds-row--h .ds-hp{display:block;text-align:right;align-self:center}
  .ds-row--h .ds-hch{display:block;text-align:right}
  .ds-row--h .ds-sx{min-height:24px}
  .ds-row:not(.ds-row--h){display:grid;grid-template-columns:minmax(0,1fr) auto 92px;grid-template-areas:"sy pr ch" "mv mc ch";gap:2px 12px;padding:9px 0!important;border:0!important;border-bottom:1px solid var(--line-2,var(--line))!important;background:transparent!important;align-items:center}
  .ds-row .ds-star,.ds-row .ds-meta,.ds-row .ds-v,.ds-row .ds-sym .nm{display:none!important}
  .ds-row .ds-sym{grid-area:sy;padding:0}
  .ds-row .ds-sym a{font-size:16px;font-weight:700;color:var(--ink)}
  .ds-row .ds-sym a::after{content:'';position:absolute;inset:0} /* cả hàng bấm được */
  .ds-row:not(.ds-row--h){position:relative}
  .ds-mv{display:block;grid-area:mv;font-size:13px;color:var(--muted)}
  .ds-row .ds-c--p{grid-area:pr;font-size:16px;font-weight:600;padding:0;text-align:right}
  .ds-mc{display:block;grid-area:mc;font-size:13px;font-weight:600;text-align:right}
  .ds-mc.up{color:var(--up-t,var(--up))}.ds-mc.down{color:var(--down-t,var(--down))}.ds-mc.ceil{color:var(--ceil,#B65CFF)}.ds-mc.floor{color:var(--floor,#22B8CF)}.ds-mc.flat{color:var(--ref,#E0A30A)}
  .ds-row .ds-c--ch{grid-area:ch;justify-self:stretch;align-self:center;display:flex;align-items:center;justify-content:center;height:36px;border-radius:8px;font-size:15px;font-weight:700;color:#fff!important;padding:0}
  .ds-row .ds-c--ch.up{background:#22B573}.ds-row .ds-c--ch.down{background:#E5484D}.ds-row .ds-c--ch.flat{background:#C9A227}.ds-row .ds-c--ch.ceil{background:#B65CFF}.ds-row .ds-c--ch.floor{background:#1BA8C4}
  .ds-count{font-size:12px}
}
@media (max-width:719px){.ds-row .ds-sym{position:static}.ds-row .ds-sym a{position:static}}
@media (max-width:719px){.ds-list{display:block!important}.ds-row--h{position:relative!important;top:auto!important}}