/* =====================================================================
   lists.css — Agent H (PHA 3). Trang chủ · /thi-truong/ · /loc/ · /nganh/
   · /so-sanh/ · /cong-cu/ · /pro/ · /theo-doi/. Nạp SAU moats.css.
   Tiền tố lớp: mk-  (không đụng lớp của C/E/F).
   ===================================================================== */
:root{
  --mk-up:#0B9E6B; --mk-down:#E5484D; --mk-ref:#C99A00; --mk-ceil:#A855F7; --mk-floor:#0891B2;
  --mk-upbg:#E6F6EF; --mk-downbg:#FDECEC; --mk-refbg:#FBF3D9;
  --mk-blue:#2563EB; --mk-soft:#F7F9FB; --mk-line2:#EEF1F4;
}
.mk-up{color:var(--mk-up)} .mk-down{color:var(--mk-down)} .mk-ref{color:var(--mk-ref)}
.mk-ceil{color:var(--mk-ceil)} .mk-floor{color:var(--mk-floor)}
.num,.mk-num{font-variant-numeric:tabular-nums}

.mk-main{padding-top:20px;padding-bottom:12px}
.mk-main > * + *{margin-top:16px}
.mk-pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px}
.mk-pagehead h1{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em}
.mk-pagehead p{color:var(--muted);font-size:14px;margin-top:4px}
.mk-asof{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.mk-asof::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mk-up);box-shadow:0 0 0 3px rgba(11,158,107,.18)}

/* thẻ */
.mk-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;min-width:0;box-shadow:0 1px 2px rgba(14,23,38,.03)}
.mk-card--flush{padding:0;overflow:hidden}
.mk-card > .mk-h{padding:0}
.mk-card--flush > .mk-h{padding:16px 20px 0}
.mk-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-bottom:12px}
.mk-h h2{font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.mk-h .mk-more{font-size:13px;font-weight:600;text-decoration:none;color:var(--mk-blue)}
.mk-sub{font-size:13px;color:var(--muted)}
.mk-grid{display:grid;gap:16px}
.mk-g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mk-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.mk-g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media (max-width:1023px){.mk-g21,.mk-g12,.mk-g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.mk-g2{grid-template-columns:minmax(0,1fr)}}

/* dải chỉ số */
.mk-idx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1023px){.mk-idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-idx__c{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:4px 10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;min-width:0;transition:border-color .15s,box-shadow .15s}
.mk-idx__c:hover{border-color:#C8D0DA}
.mk-idx__c[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.mk-idx__n{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.mk-idx__v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-idx__d{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.mk-idx__s{grid-row:1 / span 3;grid-column:2;width:96px;height:44px}
@media (max-width:480px){.mk-idx__c{grid-template-columns:minmax(0,1fr);padding:10px 12px}.mk-idx__s{grid-row:auto;grid-column:1;width:100%;height:28px}.mk-idx__v{font-size:17px}}

/* nút chuyển */
.mk-seg{display:inline-flex;gap:2px;background:#EEF1F4;border-radius:9px;padding:3px;flex-wrap:wrap}
.mk-seg button{border:0;background:transparent;border-radius:7px;padding:5px 11px;font-size:13px;font-weight:600;color:var(--muted);min-height:30px}
.mk-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,23,38,.1)}
.mk-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 -20px 0;padding:0 14px}
.mk-tabs::-webkit-scrollbar{display:none}
.mk-tabs button{flex:none;border:0;background:transparent;padding:10px 10px;font-size:14px;font-weight:600;color:var(--muted);box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.mk-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--mint)}

/* biểu đồ */
.mk-chart{width:100%;height:320px;position:relative}
.mk-chart--sm{height:240px} .mk-chart--lg{height:380px} .mk-chart--xl{height:460px}
@media (max-width:600px){.mk-chart{height:260px}.mk-chart--lg,.mk-chart--xl{height:320px}}
.mk-chartmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:8px}
.mk-chartmeta b{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-chartmeta span{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.mk-chartmeta small{font-size:13px;color:var(--muted)}
.mk-loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:14px}

/* độ rộng */
.mk-breadth__bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#EEF1F4;gap:2px}
.mk-breadth__bar span{display:block;height:100%}
.mk-breadth__lg{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:13px;flex-wrap:wrap}
.mk-breadth__lg b{font-size:18px;font-weight:800;display:block;font-variant-numeric:tabular-nums}
.mk-breadth__ex{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:6px 10px;margin-top:12px;font-size:13px}
.mk-breadth__ex .mk-breadth__bar{height:8px}
.mk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.mk-kpi{background:var(--mk-soft);border:1px solid var(--mk-line2);border-radius:12px;padding:10px 12px;min-width:0}
.mk-kpi .l{font-size:12px;color:var(--muted);font-weight:600}
.mk-kpi .v{font-size:19px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-kpi .d{font-size:12px;color:var(--muted);margin-top:2px}

/* bảng */
.mk-tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.mk-tbl th,.mk-tbl td{padding:9px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--mk-line2)}
.mk-tbl th:first-child,.mk-tbl td:first-child{text-align:left;padding-left:0}
.mk-tbl th:last-child,.mk-tbl td:last-child{padding-right:0}
.mk-tbl thead th{font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding-top:4px}
.mk-tbl tbody tr:hover{background:#FAFBFC}
.mk-tbl .l{text-align:left}
.mk-tbl a.mk-sym{font-weight:700;color:var(--ink);text-decoration:none}
.mk-tbl a.mk-sym:hover{color:var(--mk-blue)}
.mk-tbl .mk-nm{display:block;font-size:12px;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.mk-chg{display:inline-block;min-width:64px;padding:2px 6px;border-radius:6px;font-weight:700;text-align:right;font-size:13px}
.mk-chg.mk-up{background:var(--mk-upbg)} .mk-chg.mk-down{background:var(--mk-downbg)} .mk-chg.mk-ref{background:var(--mk-refbg)}
.mk-chg.mk-ceil{background:#F3E8FF} .mk-chg.mk-floor{background:#E0F5FA}
.mk-pad{padding:0 20px 14px}
.mk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mk-minibar{display:inline-block;height:6px;border-radius:3px;vertical-align:middle;margin-left:6px}

/* tin */
.mk-news{list-style:none;margin:0;padding:0}
.mk-news li{padding:10px 0;border-bottom:1px solid var(--mk-line2)}
.mk-news li:last-child{border-bottom:0}
.mk-news a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;line-height:1.4;display:block}
.mk-news a:hover{color:var(--mk-blue)}
.mk-news .m{font-size:12px;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 8px}
.mk-news .m b{color:var(--mk-blue);font-weight:600}

/* điều hướng nhanh */
.mk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.mk-tile{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.mk-tile:hover{border-color:#C8D0DA;color:var(--ink)}
.mk-tile b{display:block;font-size:15px}
.mk-tile span{display:block;font-size:13px;color:var(--muted);margin-top:4px}

/* bộ lọc */
.mk-loc{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1023px){.mk-loc{grid-template-columns:minmax(0,1fr)}}
.mk-filters{position:sticky;top:12px}
@media (max-width:1023px){.mk-filters{position:static}.mk-gridtbl{max-height:none}}
.mk-filters details > summary{list-style:none;cursor:pointer;font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.mk-filters details > summary::-webkit-details-marker{display:none}
.mk-fgrp{margin-top:14px}
.mk-fgrp > .t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.mk-rng{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center;margin-bottom:8px}
.mk-rng label{grid-column:1 / -1;font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.mk-rng label small{color:var(--muted);font-weight:400}
.mk-in{width:100%;min-width:0;border:1px solid #D5DBE3;border-radius:8px;padding:6px 8px;font-size:14px;background:#fff;font-variant-numeric:tabular-nums;min-height:34px}
.mk-in:focus{outline:2px solid var(--mint);outline-offset:0;border-color:transparent}
select.mk-in{padding-right:4px}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px}
.mk-chip{border:1px solid #D5DBE3;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--ink2);min-height:32px}
.mk-chip:hover{border-color:var(--muted)}
.mk-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mk-chip.mk-chip--pro[aria-pressed="true"]{background:#6B3A00;border-color:#6B3A00}
.mk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.mk-bar .l{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mk-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #D5DBE3;background:#fff;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink);min-height:34px;text-decoration:none;cursor:pointer}
.mk-btn:hover{border-color:var(--muted);color:var(--ink)}
.mk-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.mk-btn--dark:hover{color:#fff;background:var(--ink2)}
.mk-colpick{position:relative}
.mk-colpick > div{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(14,23,38,.16);padding:10px;width:240px;max-height:60vh;overflow:auto}
.mk-colpick label{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:14px;border-radius:6px;cursor:pointer}
.mk-colpick label:hover{background:#F3F5F7}
.mk-gridtbl{max-height:calc(100vh - 140px);overflow:auto}
.mk-gridtbl .mk-tbl thead th{position:sticky;top:0;background:#fff;z-index:2;cursor:pointer;user-select:none;padding:10px 8px}
.mk-gridtbl .mk-tbl thead th[data-sort]::after{content:" ↕";color:#C2C9D3;font-size:11px}
.mk-gridtbl .mk-tbl thead th[data-dir="asc"]::after{content:" ▲";color:var(--ink)}
.mk-gridtbl .mk-tbl thead th[data-dir="desc"]::after{content:" ▼";color:var(--ink)}
.mk-gridtbl .mk-tbl th:first-child,.mk-gridtbl .mk-tbl td:first-child{position:sticky;left:0;background:#fff;z-index:1;padding-left:16px}
.mk-gridtbl .mk-tbl thead th:first-child{z-index:3}
.mk-gridtbl .mk-tbl td:last-child,.mk-gridtbl .mk-tbl th:last-child{padding-right:16px}
.mk-star{border:0;background:transparent;color:#C2C9D3;font-size:16px;padding:0 6px 0 0;line-height:1;min-height:0}
.mk-star[aria-pressed="true"]{color:#F59E0B}
.mk-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap}
.mk-pager .b{display:flex;gap:6px;align-items:center}
.mk-note{font-size:13px;color:var(--warn);background:var(--warnbg);border-radius:10px;padding:8px 12px}
.mk-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);background:#EEF1F4;border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:middle}

/* so sánh */
.mk-cmpbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mk-cmpchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 6px 5px 12px;font-weight:700;font-size:14px;background:#fff;border:1px solid var(--line)}
.mk-cmpchip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mk-cmpchip button{border:0;background:#EEF1F4;border-radius:50%;width:22px;height:22px;line-height:20px;padding:0;font-size:14px;color:var(--muted)}
.mk-cmpadd{display:flex;gap:6px}
.mk-cmpadd .mk-in{width:150px;text-transform:uppercase}

/* công cụ */
.mk-calc{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.mk-calc{grid-template-columns:minmax(0,1fr)}}
.mk-field{display:block;margin-bottom:12px}
.mk-field > span{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:5px}
.mk-field > span small{color:var(--muted);font-weight:400}
.mk-field .mk-in{min-height:40px;font-size:15px}
.mk-field input[type=range]{width:100%;accent-color:var(--mint);margin-top:6px}
.mk-result{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.mk-result .mk-kpi.hl{background:var(--ink);border-color:var(--ink);color:#fff}
.mk-result .mk-kpi.hl .l,.mk-result .mk-kpi.hl .d{color:#B8C2D0}

/* pro */
.mk-prohero{background:linear-gradient(135deg,#0E1726 0%,#1C2738 60%,#173A33 100%);color:#fff;border-radius:18px;padding:36px 28px}
.mk-prohero h1{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.02em;max-width:760px}
.mk-prohero p{color:#C9D2DE;max-width:680px;margin-top:10px;font-size:16px}
.mk-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.mk-plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.mk-plan.hl{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.mk-plan .p{font-size:28px;font-weight:800;letter-spacing:-.02em}
.mk-plan ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink2);line-height:1.7}
.mk-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.mk-feat > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.mk-feat b{display:block;font-size:15px;margin-bottom:4px}
.mk-feat p{font-size:14px;color:var(--muted)}
.mk-faq details{border-bottom:1px solid var(--line);padding:12px 0}
.mk-faq summary{font-weight:600;cursor:pointer}
.mk-faq p{margin-top:8px;color:var(--ink2);font-size:14px}
.mk-yes{color:var(--mk-up);font-weight:700} .mk-no{color:#9AA4B2}

/* theo dõi */
.mk-add{display:flex;gap:8px;flex-wrap:wrap}
.mk-add .mk-in{width:180px;text-transform:uppercase;min-height:38px}
.mk-in::placeholder{text-transform:none}
.mk-rm{border:0;background:transparent;color:#9AA4B2;font-size:18px;line-height:1;padding:2px 4px}
.mk-rm:hover{color:var(--mk-down)}
.mk-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px}