/* Trang "Thống kê thị trường": P/E, P/B VNINDEX + vùng định giá rẻ/đắt theo độ lệch chuẩn,
   tái hiện lại đúng 4 biểu đồ trong file Excel gốc của người dùng (sheet "Chart PE PB"). */
.mstat-strip{grid-template-columns:1fr 1fr 1fr}
.mstat-strip .mstat-tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:20px;font:700 9px Manrope;letter-spacing:.04em}
.mstat-tag.cheap{background:rgba(2, 191, 200,.16);color:#05f0dd}
.mstat-tag.expensive{background:rgba(223,91,97,.16);color:#ff6b73}
.mstat-tag.neutral{background:rgba(217,164,65,.16);color:#d9a441}

.mstat-panel{margin-top:18px}
.mstat-panel .panel-head{margin-bottom:6px}

.mstat-exvin-toggle{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font:600 11px Manrope;color:var(--ink);cursor:pointer;user-select:none}
.mstat-exvin-toggle input{position:absolute;opacity:0;width:0;height:0}
.mstat-exvin-toggle b{font-weight:700;color:var(--muted)}
.mstat-switch{position:relative;width:34px;height:19px;border-radius:20px;background:#c8dcde;transition:background .15s;flex-shrink:0}
.mstat-switch:after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.mstat-exvin-toggle input:checked + .mstat-switch{background:var(--green2)}
.mstat-exvin-toggle input:checked + .mstat-switch:after{transform:translateX(15px)}
.mstat-exvin-toggle input:focus-visible + .mstat-switch{outline:2px solid var(--green2);outline-offset:2px}
.mstat-exvin-note{font-size:10.5px;color:var(--muted);line-height:1.6;margin:12px 2px 0;padding:10px 12px;background:var(--paper);border-radius:10px}

/* Nút chọn "Theo P/E" / "Theo P/B": mỗi khối chỉ hiện 1 biểu đồ (dùng kiểu .tabs của styles.css) */
.mstat-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:12px}
.mstat-controls .mstat-exvin-toggle{margin-top:0}
.mstat-metric{display:inline-flex}
.mstat-chart-block{margin-top:12px}
.mstat-chart-block[hidden]{display:none}
/* Lightweight Charts tự tạo <canvas> riêng bên trong và tự set kích thước bằng JS (theo
   ResizeObserver trong market-stats.js) - khung bọc chỉ cần height cố định + overflow ẩn, không
   được ép width/height canvas bằng CSS % (đè lên phép tính pixel/devicePixelRatio của thư viện
   sẽ làm biểu đồ bị mờ/méo). */
.mstat-chart-wrap{height:420px;position:relative;overflow:hidden}

.mstat-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;color:var(--muted);font-size:10px}
.mstat-legend span{display:flex;align-items:center;gap:6px}
.mstat-sw{display:inline-block;width:16px;height:8px;border-radius:2px}
.mstat-sw.cheap{background:rgba(2, 191, 200,.20)}
.mstat-sw.expensive{background:rgba(239,51,64,.16)}
.mstat-sw.close{background:#111;height:2px;border-radius:0}
.mstat-sw.line-black{background:#111;height:2px;border-radius:0}
[data-theme="dark"] .mstat-sw.line-black{background:#e8f4f5}
.mstat-sw.line-blue{background:#0898a8;height:2px;border-radius:0;background-image:linear-gradient(90deg,#0898a8 40%,transparent 40%);background-size:4px 2px}
.mstat-sw.line-dash{height:2px;border-radius:0;background:none;background-image:linear-gradient(90deg,#02a5ad 0 4px,transparent 4px 7px,#e0525c 7px 11px,transparent 11px 14px);background-size:14px 2px}
/* ---- Mùa vụ: bật/tắt năm (dùng chung cho biểu đồ năm + tháng) + tab tháng ---- */
.mstat-year-toggle{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 14px}
.mstat-year-toggle button{border:1px solid var(--line);background:var(--card);color:var(--muted);font:700 10px 'Space Grotesk';padding:5px 9px;border-radius:6px;cursor:pointer;transition:.12s}
.mstat-year-toggle button:hover{border-color:#a1c4c8}
.mstat-month-tabs{display:flex;gap:5px;overflow-x:auto;margin:2px 0 14px;padding-bottom:2px}
.mstat-month-tabs button{flex-shrink:0;border:1px solid var(--line);background:var(--card);color:var(--muted);font:700 11px Manrope;padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}
.mstat-month-tabs button.active{background:var(--green);color:var(--on-green,#fff);border-color:var(--green)}
.mstat-year-pick{display:flex;align-items:center;gap:8px;margin-bottom:14px;font:600 11px Manrope;color:var(--muted)}
.mstat-year-pick select{height:30px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:7px;padding:0 8px;font:600 11px Manrope;cursor:pointer}

/* ---- Bảng hiệu suất theo tháng (heatmap) ---- */
.mstat-season-table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:11px}
.mstat-season-table th{text-align:center;color:#829ea1;font-size:9px;letter-spacing:.06em;padding:8px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper)}
.mstat-season-table th:first-child,.mstat-season-table td:first-child{text-align:left;position:sticky;left:0;background:var(--paper);font-weight:700;z-index:1}
.mstat-season-table td{text-align:right;padding:7px 9px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.mstat-season-table td.mstat-yr-col{font-weight:700;border-left:2px solid var(--line)}
.mstat-season-table tbody tr:hover td{filter:brightness(.96)}
.mstat-season-table tfoot td{font-weight:600}
.mstat-season-table tfoot td:first-child{color:var(--green);font-weight:800}
.mstat-season-table tfoot tr.mstat-summary-first td{border-top:2px solid var(--line)}

@media(max-width:900px){
  .mstat-strip{grid-template-columns:1fr 1fr}
  .mstat-chart-wrap{height:300px}
}
@media(max-width:520px){
  .mstat-chart-wrap{height:260px}
  .mstat-legend{gap:10px 14px}
}

/* Điện thoại (12/10/2026): bảng hiệu suất theo tháng (13 cột) giữ dạng BẢNG cuộn ngang, cột Năm đứng yên bên trái — không chuyển thành thẻ (bảng này không có data-label nên mất nhãn tháng). */
@media(max-width:640px){
  .mstat-season-table{min-width:720px}
  .mstat-season-table th:first-child,.mstat-season-table td:first-child{position:sticky;left:0;z-index:3;background:var(--card,#111f27)}
}

/* ---- Tab "Định giá & Mùa vụ" (30/10/2026): bố cục kiểu trang Phái sinh, dùng chung cửa sổ .iws-* (intraday-ws.css, biến màu ở .iws) ----
   đầu tab = 1 khung: dải P/E, P/B, cập nhật (ô số kiểu .cards) + công tắc Vingroup của Định giá và Mùa vụ; 2 cửa sổ cạnh nhau + bảng rộng hết */
.msw .msw-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 12px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.msw .msw-top .mstat-strip{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:6px;margin:0;flex:1 1 420px;padding:0;background:none;border:0;box-shadow:none}
.msw .msw-top .mstat-strip>div{display:flex;flex-direction:column;gap:1px;padding:6px 10px;background:var(--panel2);border:0;border-radius:8px;min-width:0}
.msw .msw-top .mstat-strip small{font:600 10.5px Manrope;color:var(--muted);letter-spacing:0}
.msw .msw-top .mstat-strip b{font:700 16px/1.3 Manrope}
.msw .msw-top .mstat-tag{align-self:flex-start;margin-top:3px}
.msw .msw-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-left:auto}
.msw .msw-fld{display:flex;align-items:center;gap:8px;font-size:12px}
.msw .msw-fld>span{color:var(--muted);font-weight:600;white-space:nowrap}
.msw .mstat-exvin-toggle{margin:0}
.msw .msw-ctl{flex:0 0 380px;min-width:0}   /* bề rộng cố định: bật công tắc hiện ghi chú (xuống dòng) không làm 3 ô số co lại */
.msw .msw-sw{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%}
.msw .msw-sw .mstat-exvin-note{margin:0;padding:0;background:none;font-size:11px;line-height:1.5}
.msw #mstat-season-src[hidden]{display:none}
.msw #mstat-season-src-note:has(b){display:none}   /* câu "chỉ số tự tính" đã nằm dưới công tắc chung ở đầu tab; dòng báo lỗi tải (không có <b>) vẫn hiện */
.msw .msw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.msw .msw-grp[data-g="tbl"]{grid-column:1/-1}
.msw .msw-grp .iws-body{overflow:visible}
.msw .iws-pane[hidden]{display:none}   /* .iws-pane đặt display:flex nên phải ẩn lại tường minh */
.msw .msw-grp .iws-pane>section{padding:0 12px 12px}
.msw .mstat-panel .panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 -12px 10px;padding:7px 12px;border-bottom:1px solid var(--grid);min-height:42px}
.msw .mstat-panel .panel-head h2{display:none}
.msw .mstat-panel .panel-head:not(:has(.periods)):not(:has(button)){display:none}
.msw .mstat-controls{margin-top:0}
.msw .mstat-controls:not(:has(*)){display:none}
.msw .mstat-chart-block{margin-top:8px}
.msw .mstat-legend{margin-top:10px}
/* nút chọn kiểu .seg của trang Phái sinh: khoảng thời gian, Theo P/E|P/B, tháng, xem bảng, nguồn mùa vụ */
.msw .periods,.msw .mstat-metric,.msw .mstat-month-tabs{display:inline-flex;gap:0;padding:0;margin:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--btn);max-width:100%}
.msw .mstat-month-tabs{overflow-x:auto;margin:0 0 10px}
.msw .periods button,.msw .mstat-metric button,.msw .mstat-month-tabs button{height:26px;min-height:0;padding:0 10px;margin:0;border:0;border-radius:0;background:var(--btn);color:var(--text);font:700 11.5px Manrope;box-shadow:none;flex-shrink:0}
.msw .periods button+button,.msw .mstat-metric button+button,.msw .mstat-month-tabs button+button{border-left:1px solid var(--line)}
.msw .periods button.active,.msw .mstat-metric button.active,.msw .mstat-month-tabs button.active{background:var(--btn-on);color:var(--btn-on-text);border-color:var(--line)}
.msw .mstat-year-toggle{margin:6px 0 10px}
.msw .mstat-year-pick{margin-bottom:10px}
.msw .mstat-year-pick select{height:28px;border-radius:999px;background:var(--panel2)}
.msw .mstat-season-table th,.msw .mstat-season-table th:first-child,.msw .mstat-season-table td:first-child{background:var(--panel)}
@media(max-width:1100px){
  .msw .msw-grid{grid-template-columns:minmax(0,1fr)}
  .msw .msw-ctl{margin-left:0;flex:1 1 100%}
}