/* stock-mobile.css — trải nghiệm điện thoại trang /co-phieu/<MÃ> (agent M · 09/10/2026). Đi kèm stock-mobile.js.
   Nạp SAU mobile.css. Chỉ dùng biến màu moats.css. Mọi phần tử mới ẩn ở ≥720px (riêng thanh giá dính: <1024px). */

/* ---------- phần tử mới: mặc định ẩn (desktop giữ nguyên) ---------- */
.spm-bar,.m-fold__bar,.m-fold__end,.m-sub__chev,.spm-share2{display:none}
.spm-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:90;max-width:calc(100vw - 32px)}
.spm-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 1. thanh giá dính (<1024px) ---------- */
@media (max-width:1023px){
  .sp-tabs{background:var(--bg);transition:top .2s ease}
  .spm-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:4px;max-height:0;overflow:hidden;opacity:0;transition:max-height .2s ease,opacity .15s ease}
  .sp-tabs.spm-stuck .spm-bar{max-height:56px;opacity:1;border-bottom:1px solid var(--line)}
  .spm-id{display:flex;align-items:baseline;gap:8px;min-width:0;min-height:48px;border:0;background:none;padding:0;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
  .spm-id b{font-size:18px;font-weight:800;letter-spacing:-.01em}
  .spm-id span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .spm-q{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;margin-right:4px;font-variant-numeric:tabular-nums}
  .spm-p{font-size:17px;font-weight:800}
  .spm-c{font-size:13px;font-weight:700}
  .spm-ic{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);border-radius:12px;padding:0;cursor:pointer}
  .spm-ic:active{background:var(--hover)}
  .spm-star svg{fill:none}
  .spm-star[aria-pressed="true"]{color:var(--warn)}
  .spm-star[aria-pressed="true"] svg{fill:currentColor}
}

/* ---------- điện thoại ---------- */
@media (max-width:719px){
  /* header site tự ẩn khi cuộn xuống → thanh tab dính sát mép trên */
  .site-header{transition:transform .22s ease}
  html.spm-hd-hide .site-header{transform:translateY(-100%)}
  html.spm-hd-hide .sp-tabs{top:0!important}

  /* đầu trang gọn */
  .sp-main{padding-top:12px}
  .sp-head{gap:8px}
  .sp-id__row{gap:6px 8px}
  .sp-id__row h1{font-size:26px}
  .sp-name{font-size:14px;margin-top:2px}
  .sp-price{font-size:34px}
  .sp-chg{font-size:16px}
  .sp-actions{display:flex;flex-wrap:nowrap;gap:8px}
  .sp-actions .btn{flex:1 1 auto;min-height:44px;font-size:14px;padding-left:10px;padding-right:10px;white-space:nowrap;min-width:0}
  .sp-actions .spm-share2{display:inline-flex;flex:0 0 44px;width:44px;padding:0;justify-content:center;align-items:center}

  /* thanh tab: không bắt dính từng nút (để tab tự vào giữa mượt), chữ 15px, vùng chạm 44px */
  .sp-tabs .tabs{scroll-snap-type:none;scroll-behavior:smooth;padding:0 4px}
  .sp-tabs .tabs button{min-height:46px;font-size:15px;padding:12px 12px}
  .sp-tabs::after{top:auto;height:46px}
  .panel{padding-top:12px}
  .panel.spm-in-l{animation:spmInL .22s ease}
  .panel.spm-in-r{animation:spmInR .22s ease}

  /* biểu đồ giá: 220px, nút khung/khoảng thời gian thành 1 dải chip cuộn ngang */
  .pchart{height:340px} /* 09/10: biểu đồ gọn (ẩn RSI/MA) → cao hơn, dễ nhìn như app */
  .pc-indt{display:none}
  .chart-card .ctl{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;margin-left:-16px;margin-right:-16px;padding:0 16px 2px;mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
  .chart-card .ctl::-webkit-scrollbar{display:none}
  .chart-card .ctl .seg{flex:none;flex-wrap:nowrap;overflow:visible;max-width:none}
  .chart-card .ctl .seg button{min-height:38px;padding:6px 11px}
  .chart-card .ctl .tgl{flex:none;min-height:38px}
  .chart-card .foot-note{font-size:13px}

  /* Chỉ số chính: lưới 2 cột kiểu ô số (nhãn nhỏ trên, số to dưới) */
  .kstats{grid-template-columns:1fr 1fr!important;gap:0 14px}
  .kstats > div{flex-direction:column;align-items:flex-start;gap:2px;padding:9px 0}
  .kstats dt{font-size:13px;white-space:normal;line-height:1.3}
  .kstats dd{font-size:16px;text-align:left}

  /* ---- thẻ thu gọn ---- */
  .m-fold:not(.is-open) > :not(.card-head):not(.x3-p__head):not(.ff-ch):not(.m-fold__bar):not(h2):not(h3){display:none!important}
  .m-fold__h{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .m-fold__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:10px;padding:10px 12px;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  .m-fold__bar:active{background:var(--hover)}
  .m-fold__sum{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.45;color:var(--ink2,var(--ink));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .m-fold__sum:empty{display:none}
  .m-fold__more{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--link);white-space:nowrap}
  .m-fold__more svg{transition:transform .2s}
  .m-fold.is-open > .m-fold__bar{margin-bottom:6px}
  .m-fold.is-open > .m-fold__bar .m-fold__sum{display:none}
  .m-fold.is-open > .m-fold__bar{justify-content:flex-end;border:0;background:transparent;min-height:40px;padding:0;margin-top:2px}
  .m-fold.is-open > .m-fold__bar .m-fold__more svg{transform:rotate(180deg)}
  .m-fold__end{display:none}
  .m-fold.is-open > .m-fold__end{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;margin-top:14px;border:0;border-top:1px solid var(--line);background:none;color:var(--link);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
  .m-fold__end svg{transform:rotate(180deg)}
  /* thẻ dạng bộ chọn (Tài chính/Chỉ số): 1 dòng tóm tắt kỳ + nút Đổi */
  .m-fold--ctl > .m-fold__bar{margin-top:0;border:0;background:transparent;padding:4px 0;min-height:44px}
  .m-fold--ctl.is-open > .m-fold__bar{border:0;justify-content:space-between}
  .m-fold--ctl.is-open > .m-fold__bar .m-fold__sum{display:-webkit-box}
  .m-fold--ctl > .m-fold__bar .m-fold__sum{font-weight:600}
  .m-fold--ctl > .m-fold__bar .m-fold__more{background:var(--neubg);color:var(--ink);border-radius:999px;padding:8px 14px}
  /* mục con (cơ cấu kinh doanh: SIPOC, ưu/nhược…) */
  .m-sub > h3[role=button]{position:relative;min-height:44px;padding-right:36px;cursor:pointer;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}
  .m-sub__chev{display:inline-flex;position:absolute;right:4px;top:50%;margin-top:-8px;color:var(--muted);transition:transform .2s}
  .m-sub.is-open .m-sub__chev{transform:rotate(180deg)}
  .m-sub:not(.is-open) > :not(h3){display:none!important}

  /* bảng rộng: cuộn ngang trong khung, bóng mờ gợi ý còn cột bên phải, cột đầu dính */
  .panel .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    background:linear-gradient(90deg,var(--card) 30%,transparent) left center/24px 100% no-repeat local,
      linear-gradient(270deg,var(--card) 30%,transparent) right center/24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(14,23,38,.18),transparent) left center/10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(14,23,38,.18),transparent) right center/10px 100% no-repeat scroll}
  .panel .scroll-x > table > * > tr > :first-child{position:sticky;left:0;z-index:1;background:var(--card)}
  .panel .scroll-x > table > * > tr.peer-me > :first-child{background:var(--okbg)}
  .panel .scroll-x > table > thead > tr > :first-child{z-index:2}

  /* Tài chính / Chỉ số: biểu đồ 220px (chạm để xem giá trị — ECharts) */
  #panel-tai-chinh .ff-chart,#panel-chi-so .ff-chart{height:220px!important}
  .ff-tbl{font-size:13px}
  .ff-tbl .lab{min-width:150px;max-width:172px}
  .ff-tbl th,.ff-tbl td{padding:8px 10px}

  #panel-tai-chinh .ff-bar2 .seg,#panel-chi-so .ff-bar2 .seg{flex-wrap:nowrap!important;overflow-x:auto;max-width:100%}
  #panel-tai-chinh .ff-bar2 .seg button{flex:none}
  /* tin tức: tóm tắt 3 dòng cho dễ lướt */
  .news3 .sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* chữ phụ tối thiểu 13px cho dễ đọc */
  .foot-note,.x3-mini,.card-sub{font-size:13px}
}
@keyframes spmInL{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes spmInR{from{opacity:.4;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.spm-in-l,.panel.spm-in-r{animation:none}.spm-bar,.site-header{transition:none}}

/* =====================================================================
   FINTECH 09/10 (agent U) — đầu trang mã kiểu Google/Yahoo Finance + Binance:
   máy tính: trái = mã · giá to + % · tham chiếu/trần/sàn · nút; phải = lưới thống kê 2 cột (.sp-stats)
   điện thoại: giá to → thống kê list 2 cột → nút → thanh tab dính
   ===================================================================== */
.sp-stats{margin:0}
.sp-stats > div{padding:7px 0;font-size:13.5px;border-bottom-color:var(--line-2)}
.sp-stats dt{color:var(--muted)}
.sp-stats dd{font-weight:600;color:var(--ink)}
@media (min-width:960px){
  main[data-page="stock"] .sp-head{grid-template-columns:minmax(0,1fr) minmax(380px,1.05fr);grid-template-areas:"id stats" "quote stats" "act stats";align-items:start;gap:8px 48px}
  main[data-page="stock"] .sp-id{grid-area:id}
  main[data-page="stock"] .sp-quote{grid-area:quote;align-items:flex-start;margin-top:4px}
  main[data-page="stock"] .sp-quote__row{gap:14px}
  main[data-page="stock"] .sp-price{font-size:40px}
  main[data-page="stock"] .sp-sub{display:flex;flex-wrap:wrap;gap:2px 10px;max-width:620px}
  main[data-page="stock"] .sp-ranges{max-width:440px}
  main[data-page="stock"] .sp-actions{grid-area:act;grid-column:auto;margin-top:6px;align-self:end}
  main[data-page="stock"] .sp-stats{grid-area:stats;align-self:start;grid-template-columns:1fr 1fr;gap:0 28px;padding:4px 0 0;border-top:1px solid var(--line-2)}
}
@media (min-width:720px) and (max-width:959px){
  main[data-page="stock"] .sp-head{grid-template-columns:minmax(0,1fr)}
  main[data-page="stock"] .sp-quote{align-items:flex-start}
  main[data-page="stock"] .sp-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:719px){
  main[data-page="stock"] .sp-head{grid-template-areas:"id" "quote" "stats" "act"}
  main[data-page="stock"] .sp-id{grid-area:id}
  main[data-page="stock"] .sp-quote{grid-area:quote}
  main[data-page="stock"] .sp-actions{grid-area:act}
  main[data-page="stock"] .sp-stats{grid-area:stats;grid-template-columns:1fr 1fr!important;gap:0 16px;margin-top:2px}
  main[data-page="stock"] .sp-stats > div{flex-direction:row;justify-content:space-between;align-items:baseline;padding:7px 0;gap:6px}
  main[data-page="stock"] .sp-stats dt{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  main[data-page="stock"] .sp-stats dd{font-size:13.5px;text-align:right;white-space:nowrap}
  /* nhãn rút gọn trên điện thoại (thứ tự hàng theo headStats() trong stock.js — 09/10 thêm CP lưu hành…: 2 = CP lưu hành, 12 = Thấp–cao 52 tuần, 13 = Sở hữu NN/room) */
  main[data-page="stock"] .sp-stats > div:nth-child(2) dt,main[data-page="stock"] .sp-stats > div:nth-child(12) dt,main[data-page="stock"] .sp-stats > div:nth-child(13) dt{font-size:0}
  main[data-page="stock"] .sp-stats > div:nth-child(2) dt::before{content:"Số CP";font-size:12.5px}
  main[data-page="stock"] .sp-stats > div:nth-child(12) dt::before{content:"52 tuần";font-size:12.5px}
  main[data-page="stock"] .sp-stats > div:nth-child(13) dt::before{content:"NN / room";font-size:12.5px}
}
@media (min-width:960px){main[data-page="stock"] .sp-sub,main[data-page="stock"] .sp-sub.lv-sub{justify-content:flex-start;text-align:left}}

/* ===== 09/10 tối (anh Cường "đẩy biểu đồ lên trên như Simplize"): điện thoại — đầu trang gọn, chỉ 4 chỉ số + nút mở thêm ===== */
.sp-more{display:none}
@media (max-width:719px){
  main[data-page="stock"] .sp-head{grid-template-areas:"id" "quote" "stats" "more" "act"}
  main[data-page="stock"] .sp-head:not(.sp-exp) .sp-stats > div:nth-child(n+5){display:none}
  main[data-page="stock"] .sp-head:not(.sp-exp) .sp-ranges{display:none}
  main[data-page="stock"] .sp-head:not(.sp-exp) .sp-sub{font-size:12.5px}
  .sp-more{grid-area:more;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:2px 0 0;padding:6px 0;border:0;background:transparent;color:var(--link,var(--brand-ink,var(--brand)));font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .sp-more span{transition:transform .15s}
  .sp-exp .sp-more span{transform:rotate(180deg)}
  main[data-page="stock"] .sp-actions{margin-top:2px}
  main[data-page="stock"] .sp-actions .btn{min-height:40px}
  .ov-top--first .chart-card{margin-top:-4px}
}
/* máy tính: biểu đồ + chỉ số chính đứng đầu tab Tổng quan, khớp lệnh ngay dưới */
.ov > #sp-book{margin:0}
@media (max-width:719px){
  main[data-page="stock"] .sp-head:not(.sp-exp) .sp-sub{display:none}
  main[data-page="stock"] .sp-id .pill{font-size:11px;padding:2px 7px}
  main[data-page="stock"] .sp-name{font-size:13px}
  main[data-page="stock"] .sp-head{row-gap:6px}
  main[data-page="stock"] .ov-top--first section[aria-labelledby="ks-t"]{display:none} /* trùng lưới chỉ số đầu trang (đã có nút "Thêm chỉ số"); chỉ số đầy đủ ở tab Chỉ số */
}

.pc-sm{display:none}
@media (max-width:719px){
  .pc-lg{display:none}.pc-sm{display:inline}
  main[data-page="stock"] .chart-card .card-head{display:none}
  main[data-page="stock"] .chart-card .ctl{margin-left:0;margin-right:0;padding:0;mask-image:none;overflow:visible}
  main[data-page="stock"] .chart-card .ctl .seg button{padding:6px 10px}
  main[data-page="stock"] .chart-card{padding-top:12px}
}

/* ===== 09/10 tối: điện thoại — bỏ header site + dải chỉ số trên trang mã, thay bằng thanh app 1 hàng (‹ · mã · 🔍 ☆ chia sẻ) ===== */
.spm-top{display:none}
@media (max-width:719px){
  html.spm .site-header,html.spm .tape{display:none}
  html.spm.spm-search .site-header{display:block;position:fixed;top:0;left:0;right:0;z-index:90;transform:none!important}
  .spm-top{display:flex;align-items:center;gap:2px;position:sticky;top:0;z-index:40;height:52px;padding:0 6px 0 2px;background:var(--bg);border-bottom:1px solid var(--line)}
  .spm-top .spm-ic{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);border-radius:10px;padding:0;cursor:pointer}
  .spm-top .spm-ic:active{background:var(--line-2,var(--line))}
  .spm-top .spm-star[aria-pressed="true"]{color:#F5B301}.spm-top .spm-star[aria-pressed="true"] svg{fill:currentColor}
  .spm-top .spm-star svg{fill:none}
  .spm-tid{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;padding:0 4px;cursor:pointer;overflow:hidden;white-space:nowrap}
  .spm-tid > b{font-size:18px;font-weight:800;letter-spacing:.01em}
  .spm-tn{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0}
  .spm-tq{display:none;margin-left:auto;font-size:14px;font-weight:700}
  .spm-top.is-stuck .spm-tn{display:none}
  .spm-top.is-stuck .spm-tq{display:inline}
  .spm-tq .up{color:var(--up)}.spm-tq .down{color:var(--down)}.spm-tq .ref{color:var(--ref,#E0A30A)}.spm-tq .ceil{color:var(--ceil,#B65CFF)}.spm-tq .floor{color:var(--floor,#22B8CF)}
  html.spm .sp-tabs{top:52px!important}
  html.spm .sp-tabs .spm-bar{display:none!important}
  main[data-page="stock"] .sp-head h1{display:none} /* mã đã ở thanh trên */
  main[data-page="stock"] .sp-head{padding-top:6px}
}