.sector-strip{display:grid;grid-template-columns:1.3fr repeat(2,1fr);background:var(--navy);color:#fff;border-radius:15px;padding:18px 24px;margin-bottom:18px}
.sector-strip>div{padding:0 18px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:center}
.sector-strip>div:first-child{padding-left:0}
.sector-strip>div:last-child{border:0}
.sector-strip small{font-size:8px;letter-spacing:.13em;color:#629aa0;margin-bottom:7px}
.sector-strip strong{font:700 26px 'Space Grotesk'}
.sector-strip b{font:600 15px 'Space Grotesk'}
.sector-strip #sector-select{background:#04282b;color:#fff;border:1px solid #074246;border-radius:8px;padding:8px 10px;font:600 13px Manrope;cursor:pointer}
.sector-chart-panel .sector-chart-wrap{height:460px;width:100%;position:relative}
.sector-caveat{font-size:11px;color:var(--muted);margin:12px 2px 0;line-height:1.5}
.live-dot.down{background:#ef3340;box-shadow:0 0 0 5px rgba(239,51,64,.14)}
@media(max-width:900px){.sector-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sector-strip>div{border:0;padding:0;min-width:0}.sector-strip #sector-select{width:100%;min-width:0}.sector-chart-panel .sector-chart-wrap{height:360px}}
@media(max-width:520px){.sector-chart-panel .sector-chart-wrap{height:300px}}
.sector-cmp-panel{margin-top:18px}
.sector-cmp-sub{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.sector-cmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 10px;min-height:28px}
.sector-cmp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:4px 9px 4px 10px;font:600 11px Manrope;cursor:pointer}
.sector-cmp-chip i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.sector-cmp-chip b{font:600 11px 'Space Grotesk'}
.sector-cmp-chip span{color:var(--muted);font-size:14px;line-height:1}
.sector-cmp-chip:hover{border-color:var(--muted)}
.sector-cmp-hint{font-size:11px;color:var(--muted)}
.sector-cmp-panel .sector-cmp-chart{height:380px}
.sector-cmp-table-wrap{overflow-x:auto;margin-top:16px}
.sector-cmp-table{width:100%;border-collapse:collapse;font-size:12px}
.sector-cmp-table th{font:700 10px Manrope;letter-spacing:.06em;color:var(--muted);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.sector-cmp-table th:first-child{text-align:left}
.sector-cmp-table th small{font-weight:500;letter-spacing:0}
.sector-cmp-table th[data-sort]{cursor:pointer;user-select:none}
.sector-cmp-table th.sorted{color:var(--ink)}
.sector-cmp-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;font:600 12px 'Space Grotesk';white-space:nowrap}
.sector-cmp-table td:first-child{text-align:left;font:600 12px Manrope}
.sector-cmp-table td.cur{background:rgba(100, 145, 150,.09)}
.sector-cmp-table td.cmp-up{color:var(--green)}
.sector-cmp-table td.cmp-down{color:var(--red)}
.sector-cmp-table label{display:flex;align-items:center;gap:8px;cursor:pointer}
.sector-cmp-table input{width:14px;height:14px;margin:0;flex:none;cursor:pointer}
.sector-cmp-table tr.on td:first-child{font-weight:700}
@media(max-width:900px){.sector-cmp-panel .sector-cmp-chart{height:320px}}
@media(max-width:520px){.sector-cmp-panel .panel-head{flex-wrap:wrap;gap:10px}.sector-cmp-panel .sector-cmp-chart{height:280px}.sector-cmp-table th,.sector-cmp-table td{padding:7px 4px;font-size:11px}.sector-cmp-table td:first-child{white-space:normal;font-size:11px}.sector-cmp-table th small{display:none}}
/* Tab Ngành (31/10/2026): [Chỉ số ngành | So sánh hiệu suất] cạnh nhau, bảng hiệu suất riêng bên dưới */
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:14px;row-gap:0;align-items:stretch;margin-top:18px}
.sec-grid>.panel{margin:0;min-width:0}
.sec-grid .sector-chart-wrap,.sec-grid .sector-cmp-panel .sector-cmp-chart{height:400px}
.sector-cmp-table-panel{margin-top:14px}
.sector-cmp-table-panel .sector-cmp-table-wrap{margin-top:8px}
@media(max-width:1100px){.sec-grid{grid-template-columns:minmax(0,1fr)}}
.sector-cmp-panel .panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.sector-cmp-panel .panel-head .sector-cmp-pick{margin-left:auto;height:30px;max-width:230px;border:1px solid var(--line);background:var(--card,#111f27);color:var(--ink);border-radius:999px;padding:0 12px;font:600 12px Manrope,sans-serif;cursor:pointer}
.sector-cmp-panel .panel-head .sector-cmp-pick:disabled{opacity:.55;cursor:not-allowed}
.sector-cmp-panel .panel-head .sector-cmp-pick+.periods{margin-left:0}
/* Chỉ số ngành: danh sách chọn ngành thay tên ở đầu panel */
.sec-grid .sector-chart-panel #sector-chart-title{display:none}
.sec-grid .sector-chart-panel .sec-pick{height:34px;min-width:220px;max-width:100%;border:1px solid var(--line);background:var(--card,#111f27);color:var(--ink);border-radius:999px;padding:0 14px;font:700 15px 'Space Grotesk',Manrope,sans-serif;cursor:pointer}
#sector-strip.sec-strip-2>div:first-child{display:none}
#sector-strip.sec-strip-2{grid-template-columns:1fr 1fr}
#sector-strip.sec-strip-hidden{display:none}
.sec-grid .sector-chart-panel .panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.sec-grid .sector-chart-panel .sec-cur{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.sec-grid .sector-chart-panel .sec-cur small{font:700 9.5px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-grid .sector-chart-panel .sec-cur strong{font:700 22px 'Space Grotesk',sans-serif;color:var(--ink)}
.sec-grid .sector-chart-panel #sector-periods{margin-left:auto}
.sector-cmp-panel .panel-head .sector-cmp-pick-wrap{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:600 12px Manrope,sans-serif;color:var(--muted);white-space:nowrap}
.sector-cmp-panel .panel-head .sector-cmp-pick-wrap .sector-cmp-pick{margin-left:0;min-width:190px}
/* 2 biểu đồ thẳng hàng: 2 panel dùng chung 3 hàng (đầu | Chỉ số hiện tại / chú giải | biểu đồ) nhờ subgrid nên chú giải xuống dòng cũng không lệch */
.sec-grid>.panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.sec-grid>.panel>.panel-head{align-items:center;margin-bottom:0;align-content:center}
.sec-grid .sector-chart-panel .sec-cur{margin:8px 0;align-self:center}
.sec-grid .sector-cmp-panel .sector-cmp-legend{margin:8px 0;align-self:center}
.sec-grid .sector-chart-wrap{margin-top:0}
@media(max-width:1100px){.sec-grid>.panel{display:block}}
/* Panel So sánh: tiêu đề | So sánh với | khung thời gian luôn cùng một hàng (ô chọn co lại khi hẹp) */
.sec-grid .sector-cmp-panel>.panel-head{flex-wrap:nowrap;gap:10px}
.sec-grid .sector-cmp-panel>.panel-head>div:first-child{flex:none}
.sec-grid .sector-cmp-panel .sector-cmp-pick-wrap{flex:1 1 0;min-width:0;justify-content:flex-end}
.sec-grid .sector-cmp-panel .sector-cmp-pick-wrap .sector-cmp-pick{flex:1 1 0;min-width:0;max-width:230px}
.sec-grid .sector-cmp-panel #sector-cmp-periods{flex:none;margin-left:0}
/* Nhãn so sánh: ô màu bấm để đổi màu, bấm nhãn để ẩn / hiện, × để đóng */
.sector-cmp-chip .cmp-dot{position:relative;width:12px;height:12px;border-radius:3px;background:var(--c);flex:none;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.sector-cmp-chip .cmp-dot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.sector-cmp-chip.off{opacity:.5}
.sector-cmp-chip.off .cmp-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.sector-cmp-chip.off{text-decoration:line-through}
.sector-cmp-chip .cmp-x{padding:0 2px;border-radius:4px}
.sector-cmp-chip .cmp-x:hover{color:var(--ink);background:rgba(255,255,255,.12)}
/* ô chọn ngành so sánh: chữ gợi ý mờ; mục trong danh sách vẫn màu thường */
.sector-cmp-panel .panel-head .sector-cmp-pick{color:var(--muted)}
.sector-cmp-panel .panel-head .sector-cmp-pick option{color:var(--ink);background:var(--card,#111f27)}
/* ô chọn ngành sát bên tiêu đề (không đẩy sang sát nút khung thời gian) */
.sec-grid .sector-cmp-panel .sector-cmp-pick-wrap{flex:0 1 auto;justify-content:flex-start;margin-left:0}
.sec-grid .sector-cmp-panel .sector-cmp-pick-wrap .sector-cmp-pick{flex:0 1 220px;width:220px}
.sec-grid .sector-cmp-panel #sector-cmp-periods{margin-left:auto}
/* Tiêu đề 3 panel tab Ngành đồng bộ tiêu đề panel tab Tổng quan (Manrope 800 12px, hoa, giãn chữ .18em, màu xanh) */
.sec-grid .panel-head h2,.sector-cmp-table-panel .panel-head h2,.sec-grid .sector-chart-panel .sec-pick{font:800 12px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--green,#05f0dd)}
.sec-grid .panel-head h2,.sector-cmp-table-panel .panel-head h2{margin:0}
.sec-grid .sector-chart-panel .sec-pick option{font:600 13px Manrope,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink)}
/* bỏ dòng Chỉ số hiện tại (user 31/10); phần tử vẫn nằm trong DOM cho sector-strength.js, biểu đồ giữ hàng 3 để thẳng hàng với panel So sánh */
.sec-grid .sector-chart-panel .sec-cur{display:none}
.sec-grid .sector-chart-panel .sector-chart-wrap{grid-row:3}
/* panel Chỉ số ngành: tiêu đề + ô chọn ngành giống ô chọn của panel So sánh */
.sec-grid .sector-chart-panel .sec-ttl{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.sec-grid .sector-chart-panel .sec-ttl h2{white-space:nowrap}
.sec-grid .sector-chart-panel .sec-pick{height:30px;width:220px;min-width:0;max-width:230px;flex:0 1 220px;border:1px solid var(--line);background:var(--card,#111f27);color:var(--ink);border-radius:999px;padding:0 12px;font:600 12px Manrope,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer}