:root { --bg:#FFFAF6; --ink:#1C1730; --muted:#5E5970; --line:#F1E6DD; --accent:#EA580C; --accent2:#E11D48; --soft:#FFEBDD; --card:#fff; --err:#DC2626; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:15px; }
a { color:var(--accent); }
.hidden { display:none !important; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px 60px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand span { color:var(--accent); }
.topr { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hero h1 { font-size:36px; letter-spacing:-.03em; margin:22px 0 6px; }
.hero p { color:var(--muted); margin:0 0 18px; max-width:760px; line-height:1.6; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:10px 18px; font:600 14px inherit; font-family:inherit; cursor:pointer; text-decoration:none; min-height:40px; }
.btn.grad { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border:0; }
.btn.big { padding:13px 26px; font-size:16px; }
.btn.sm { padding:6px 12px; min-height:32px; font-size:13px; }
.btn.ghost:hover { border-color:var(--accent); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.pill { display:inline-block; padding:7px 14px; border-radius:999px; background:var(--soft); color:#9A3412; font-weight:700; font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; margin-bottom:18px; box-shadow:0 1px 2px rgba(40,20,10,.05),0 8px 24px -12px rgba(40,20,10,.14); }
.card h2 { margin:0 0 10px; font-size:19px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.num { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; font-size:13px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.grid2.tight { gap:22px; }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } .hero h1 { font-size:28px; } }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tabs button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 18px; font:600 14px inherit; font-family:inherit; cursor:pointer; color:var(--muted); }
.tabs button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.lbl { display:block; font-weight:700; font-size:13.5px; margin:14px 0 6px; }
.hint { color:var(--muted); font-size:12.5px; font-weight:400; line-height:1.5; }
.err { color:var(--err); font-size:13.5px; margin:8px 0 0; min-height:1px; }
textarea, input[type=text], input:not([type]), select { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; background:#fff; color:var(--ink); }
textarea { resize:vertical; line-height:1.55; }
select { width:auto; min-width:200px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chk { display:inline-flex; gap:6px; align-items:center; font-size:14px; cursor:pointer; }
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; background:#FFF3EA; border:1px solid var(--line); border-radius:999px; padding:4px; }
.seg button { border:0; background:transparent; border-radius:999px; padding:7px 13px; font:600 13.5px inherit; font-family:inherit; color:var(--muted); cursor:pointer; }
.seg button.on { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.bar { height:12px; background:#F4ECE6; border-radius:999px; overflow:hidden; margin:10px 0; }
.bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .6s; }
.empty { color:var(--muted); padding:30px; text-align:center; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px; border-radius:12px; font-size:14px; z-index:9; max-width:90vw; }
#gate { text-align:center; padding:40px; }
input[type=number] { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px 14px; }
.fgrid .lbl { margin-top:10px; }
.fgrid .wide { grid-column:1/-1; }
.fgrid select { width:100%; min-width:0; }
.two { display:flex; gap:6px; align-items:center; } .two input { min-width:0; }
.sp { flex:1; }
.kinds { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.kind { text-align:left; border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:14px 16px; cursor:pointer; font-family:inherit; color:var(--ink); }
.kind b { display:block; font-size:15px; margin:4px 0; } .kind span { color:var(--muted); font-size:12.5px; line-height:1.45; display:block; } .kind i { font-style:normal; font-size:22px; }
.kind.on { border-color:var(--accent); background:#FFF6EF; box-shadow:0 0 0 3px #FFE3D0; }
.catpick { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px; font:600 13px inherit; font-family:inherit; cursor:pointer; color:var(--ink); }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip small { color:var(--muted); font-weight:500; } .chip.on small { color:#ddd; }
.rhead { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.rhead h2 { margin:0; }
.pager { display:flex; gap:4px; } .pager button { border:1px solid var(--line); background:#fff; border-radius:8px; min-width:34px; height:32px; cursor:pointer; font-family:inherit; font-weight:600; }
.pager button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.tblwrap { overflow:auto; border:1px solid var(--line); border-radius:14px; max-height:72vh; }
.tbl { border-collapse:collapse; width:100%; font-size:13.5px; }
.tbl th { position:sticky; top:0; background:#FFF6EF; text-align:left; padding:9px 10px; font-size:12px; color:var(--muted); white-space:nowrap; z-index:1; cursor:pointer; }
.tbl td { padding:8px 10px; border-top:1px solid var(--line); vertical-align:middle; }
.tbl tr:hover td { background:#FFFBF7; cursor:pointer; }
.tbl td.n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl .nm { display:flex; gap:10px; align-items:center; min-width:240px; max-width:420px; }
.tbl .nm img, .tbl .nm .ph { width:44px; height:44px; border-radius:8px; object-fit:cover; background:#F4ECE6; flex:none; display:grid; place-items:center; font-weight:800; color:#9A3412; }
.tbl .nm span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.up { color:#15803D; } .down { color:var(--err); }
.mix { display:flex; height:8px; border-radius:99px; overflow:hidden; min-width:90px; background:#F4ECE6; }
.mix i:nth-child(1) { background:#E11D48; } .mix i:nth-child(2) { background:#EA580C; } .mix i:nth-child(3) { background:#F59E0B; }
.legend { font-size:12px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; }
.legend b { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
.modal { position:fixed; inset:0; background:rgba(28,23,48,.5); z-index:8; display:grid; place-items:center; padding:16px; }
.mbox { background:#fff; border-radius:20px; width:min(860px,100%); max-height:90vh; overflow:auto; padding:22px; position:relative; }
.mx { position:absolute; right:14px; top:12px; border:0; background:#F4ECE6; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:15px; }
.dhead { display:flex; gap:16px; align-items:flex-start; margin-bottom:14px; padding-right:30px; }
.dhead img { width:110px; height:110px; border-radius:14px; object-fit:cover; background:#F4ECE6; }
.dhead h3 { margin:0 0 6px; font-size:18px; line-height:1.35; }
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0; }
.kpi { background:#FFF8F2; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.kpi span { display:block; font-size:12px; color:var(--muted); } .kpi b { font-size:16px; }
.spark { width:100%; height:90px; display:block; margin:6px 0 4px; }
details.more { margin-top:12px; font-size:13px; } details.more summary { cursor:pointer; font-weight:700; }
details.more table { width:100%; border-collapse:collapse; margin-top:6px; } details.more td { border-top:1px solid var(--line); padding:5px 6px; vertical-align:top; word-break:break-word; }
details.more td:first-child { color:var(--muted); width:38%; }
.md { line-height:1.65; font-size:15px; }
.md h2 { font-size:19px; margin:22px 0 8px; padding-top:12px; border-top:1px solid var(--line); } .md h2:first-child { border:0; margin-top:0; padding-top:0; }
.md h3 { font-size:16px; margin:16px 0 6px; }
.md table { border-collapse:collapse; width:100%; font-size:13.5px; margin:10px 0; display:block; overflow-x:auto; }
.md th, .md td { border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top; }
.md th { background:#FFF6EF; }
.md ul, .md ol { padding-left:22px; } .md li { margin:3px 0; }
.md code { background:#F4ECE6; padding:1px 5px; border-radius:5px; }
.hlist { display:flex; flex-direction:column; }
.hrow { display:flex; gap:12px; align-items:center; padding:12px 4px; border-top:1px solid var(--line); cursor:pointer; }
.hrow:first-child { border-top:0; } .hrow:hover { background:#FFFBF7; }
.hrow b { flex:1; } .hrow .del { border:0; background:none; color:var(--muted); cursor:pointer; }
.tag { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--soft); color:#9A3412; white-space:nowrap; }
@media print {
  body { background:#fff; } .top, .hero, .tabs, section, .rhead .row, .toast, #gate { display:none !important; }
  #repOut { display:block !important; border:0; box-shadow:none; padding:0; }
}
@media (max-width:600px) { .fgrid { grid-template-columns:1fr 1fr; } .fgrid .two input { padding:10px 8px; } .kinds { grid-template-columns:1fr 1fr; } .kind span { display:none; } .dhead img { width:72px; height:72px; } .mbox { padding:16px; } }
@media (min-width:601px) and (max-width:900px) { .kinds { grid-template-columns:1fr 1fr; } }
/* báo cáo chuyên sâu */
.docwrap { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } .docwrap > article { min-width:0; }
.docwrap:has(.toc:not(.hidden)) { grid-template-columns:240px minmax(0,1fr); }
.toc { position:sticky; top:12px; align-self:start; max-height:calc(100vh - 24px); overflow:auto; font-size:13px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line); padding-right:12px; }
.toc b { font-size:13px; margin-bottom:6px; line-height:1.4; }
.toc a { color:var(--muted); text-decoration:none; padding:4px 6px; border-radius:8px; line-height:1.35; }
.toc a.sub { padding-left:18px; font-size:12.5px; }
.toc a:hover { background:#FFF6EF; color:var(--ink); }
@media (max-width:900px) { .docwrap:has(.toc:not(.hidden)) { grid-template-columns:minmax(0,1fr); } .toc { display:none !important; } }
.md p.scope { border-left:3px solid var(--accent); background:#FFF8F2; padding:10px 14px; border-radius:0 10px 10px 0; font-size:14px; }
.kpis.rep { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.kpis.rep .kpi b { font-size:19px; display:block; margin-top:4px; } .kpis.rep .kpi small { color:var(--muted); font-size:12px; }
figure.blk { margin:14px 0 18px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; }
figure.blk.plain { border:0; }
figure.blk figcaption { font-weight:700; font-size:14px; padding:12px 16px; border-bottom:1px solid var(--line); background:#FFFBF7; }
.blkb { padding:12px 14px; }
.tw { overflow-x:auto; }
table.rt { border-collapse:collapse; width:100%; font-size:13.5px; display:table; margin:0; }
table.rt th { background:#FFF6EF; text-align:left; padding:8px 10px; font-size:12.5px; color:var(--muted); white-space:nowrap; border:0; }
table.rt td { padding:8px 10px; border:0; border-top:1px solid var(--line); white-space:nowrap; }
table.rt .n { text-align:right; font-variant-numeric:tabular-nums; }
table.rt tr.hl td { font-weight:800; background:#FFF1E6; }
table.rt tr.avg td { font-weight:700; color:var(--muted); background:#FAFAF9; }
.legend1 { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.legend1 i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.cw { position:relative; overflow-x:auto; } .cw svg.chart { min-width:560px; }
svg.chart { width:100%; height:auto; display:block; overflow:visible; }
svg.chart .gl { stroke:#EEE7E1; stroke-width:1; } svg.chart .ax { font-size:11px; fill:#7A7486; font-family:inherit; } svg.chart .hlx { fill:var(--accent); font-weight:700; }
svg.chart .xh { stroke:#B8B2BF; stroke-dasharray:3 3; opacity:0; }
.cw .tip { position:absolute; display:none; pointer-events:none; background:#1C1730; color:#fff; border-radius:10px; padding:7px 10px; font-size:12px; white-space:nowrap; z-index:2; }
.cw .tip b { display:block; } .cw .tip span b { display:inline; }
.dns { display:flex; flex-wrap:wrap; gap:14px; }
.dn { flex:1 1 220px; border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dnt { font-weight:700; font-size:13.5px; align-self:flex-start; }
.dn ul { list-style:none; padding:0; margin:0; font-size:12.5px; align-self:stretch; } .dn li { display:flex; align-items:center; gap:6px; margin:2px 0; } .dn li b { margin-left:auto; } .dn li i { width:10px; height:10px; border-radius:3px; }
.pcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.pcard { display:flex; gap:10px; border:1px solid var(--line); border-radius:14px; padding:8px; text-decoration:none; color:var(--ink); }
.pcard.star { border-color:var(--accent); box-shadow:0 0 0 2px #FFE3D0; }
.pcard img, .pcard .noimg { width:72px; height:96px; object-fit:cover; border-radius:10px; flex:none; background:#F4ECE6; display:grid; place-items:center; }
.pcard b { font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.pcard span { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.vcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.vcard { border:1px solid var(--line); border-radius:14px; padding:12px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px; }
.vcard p { margin:0; font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vcard div { display:flex; gap:16px; } .vcard div span { font-size:11.5px; color:var(--muted); } .vcard div b { display:block; font-size:15px; color:var(--ink); }
.vcard small { color:var(--accent); }
@media print { .toc { display:none !important; } .docwrap { display:block; } figure.blk { break-inside:avoid; } }
/* icon nét mảnh */
svg.ic { flex:none; vertical-align:-3px; }
.btn svg.ic, .tabs button svg.ic { margin-right:2px; }
.tabs button { display:inline-flex; align-items:center; gap:7px; }
.kind .kic { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--soft); color:var(--accent); margin-bottom:6px; }
.kind.on .kic { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.tag svg.ic { vertical-align:-2px; }
.hrow .del { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; }
.hrow .del:hover { background:#FEE2E2; color:var(--err); }
.pcard .noimg { color:#B9A79A; }
.mx, #outClose { display:inline-grid; place-items:center; }
/* bảng: không cắt tên sản phẩm, xuống dòng khi dài */
table.rt td:not(.n) { white-space:normal; min-width:110px; max-width:380px; line-height:1.4; }
table.rt td.n { white-space:nowrap; }
@page { size:A4; margin:12mm; }
@media print {
  .tw, .cw { overflow:visible !important; }
  .cw svg.chart { min-width:0 !important; }
  table.rt { font-size:9.5px; width:100%; table-layout:auto; }
  table.rt th, table.rt td { padding:4px 5px !important; white-space:normal !important; min-width:0 !important; max-width:none !important; }
  table.rt thead { display:table-header-group; }
  table.rt tr { break-inside:avoid; }
  figure.blk { break-inside:auto !important; } figure.blk:has(.cw), figure.blk:has(.dns), figure.blk:has(.pcards), figure.blk:has(.vcards) { break-inside:avoid !important; }
  figure.blk figcaption { break-after:avoid; }
  .kpis.rep { grid-template-columns:repeat(4,1fr); }
  .pcards, .vcards { grid-template-columns:repeat(3,1fr); }
  .md { font-size:12px; } .md h2 { break-after:avoid; } .md h3 { break-after:avoid; }
  #outMeta { display:none; }
  .wrap { max-width:none; padding:0; }
}

/* chọn khoảng thời gian */
.drp-btn { display:inline-flex; align-items:center; gap:8px; width:100%; min-height:42px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:9px 12px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-align:left; }
.drp-btn:hover { border-color:var(--accent); } .drp-btn svg { color:var(--accent); flex:none; }
.drpop { position:absolute; z-index:60; display:flex; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px -12px rgba(40,20,10,.28); overflow:hidden; font-size:13.5px; }
.drside { display:flex; flex-direction:column; gap:2px; padding:14px 10px; background:#FFF8F2; border-right:1px solid var(--line); min-width:150px; }
.drside b { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:2px 10px 8px; }
.drside button { border:0; background:none; text-align:left; padding:9px 12px; border-radius:10px; font:600 13.5px inherit; font-family:inherit; color:var(--ink); cursor:pointer; }
.drside button:hover { background:var(--soft); } .drside button.on { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; }
.drmain { padding:12px 16px 14px; }
.drnav { display:flex; justify-content:space-between; align-items:center; margin-bottom:-26px; position:relative; z-index:1; }
.drnav button { border:0; background:none; width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--ink); display:grid; place-items:center; } .drnav button:hover:not(:disabled) { background:var(--soft); } .drnav button:disabled { opacity:.25; cursor:default; }
.drms { display:flex; gap:22px; }
.drh { text-align:center; font-weight:800; padding:6px 0 10px; }
.drg { display:grid; grid-template-columns:repeat(7,36px); row-gap:3px; }
.drg i { font-style:normal; text-align:center; font-size:11.5px; color:var(--muted); font-weight:700; padding-bottom:4px; }
.drg button, .drg .o { height:34px; border:0; background:none; font:600 13px inherit; font-family:inherit; color:var(--ink); cursor:pointer; }
.drg button:hover:not(:disabled) { outline:1.5px solid var(--accent); outline-offset:-2px; border-radius:9px; }
.drg button.x { color:#CFC8D6; cursor:default; }
.drg button.in { background:var(--soft); color:#9A3412; }
.drg button.st, .drg button.en { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border-radius:9px; }
.drg button.st:not(.en) { border-radius:9px 0 0 9px; } .drg button.en:not(.st) { border-radius:0 9px 9px 0; }
.drg button.td:not(.st):not(.en) { text-decoration:underline; text-underline-offset:3px; }
.drft { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.drft .sp { flex:1; }
@media (max-width:700px) {
  .drpop { flex-direction:column; }
  .drside { flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); min-width:0; }
  .drside b { width:100%; }
  .drside button { padding:7px 11px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:12.5px; }
  .drms .drm:first-child { display:none; }
  .drg { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .drmain { padding:10px 12px 12px; }
  .drft { flex-wrap:wrap; } .drft .hint { width:100%; }
}
@media print { .drpop { display:none !important; } }

/* ---- bảng xếp hạng kiểu Kalodata ---- */
.tbl th { vertical-align:bottom; line-height:1.3; white-space:normal; min-width:96px; max-width:150px; font-weight:600; }
.tbl th.rk, .tbl td.rk { width:38px; min-width:38px; text-align:center; color:var(--muted); position:sticky; left:0; background:#fff; z-index:2; }
.tbl th.rk { background:#FFF6EF; z-index:3; }
.tbl th.st, .tbl td.st { position:sticky; left:38px; z-index:2; background:#fff; box-shadow:1px 0 0 var(--line); min-width:260px; max-width:none; }
.tbl th.st { background:#FFF6EF; z-index:3; }
.tbl th span { display:inline; } .tbl th .ar { font-style:normal; margin-left:4px; color:#C9BFB6; font-size:11px; }
.tbl th.so:hover { color:var(--ink); } .tbl th.on { color:var(--accent); background:#FFE9DA; } .tbl th.on .ar { color:var(--accent); }
.tbl th.n { text-align:right; } .tbl th.tr, .tbl td.tr { min-width:132px; text-align:center; }
.tbl td { padding:10px; } .tbl td.sc { background:#FFF8F2; font-weight:700; }
.tbl tr:hover td, .tbl tr:hover td.rk, .tbl tr:hover td.st { background:#FFF7F0; }
.tbl .nm { min-width:240px; max-width:340px; } .tbl .nm small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.tbl .nm.rd img, .tbl .nm.rd .ph { border-radius:50%; }
.tbl .nm b.pr { color:var(--ink); font-size:12.5px; } .tbl .hd { color:#2563EB; font-weight:600; }
.tg { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; background:#F1F5F9; color:#475569; } .tg.ad { background:#FEF3C7; color:#92400E; }
.na { color:#C9BFB6; } .sps { width:120px; height:36px; display:block; margin:0 auto; }
.trbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 10px; } .chk { display:inline-flex; align-items:center; gap:6px; cursor:pointer; } .chk input { width:auto; }
/* nút chọn ngành */
.catbtn { width:100%; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-align:left; min-height:42px; }
.catbtn span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .catbtn .cv { font-style:normal; color:var(--muted); } .catbtn svg { color:var(--accent); flex:none; }
.catbtn:hover { border-color:var(--accent); }
.cbox { width:min(640px,100%); display:flex; flex-direction:column; max-height:86vh; }
.csearch { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:0 12px; color:var(--muted); } .csearch input { border:0; padding:10px 0; outline:none; }
.csel { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; min-height:30px; align-items:center; }
.ctree { overflow:auto; border:1px solid var(--line); border-radius:12px; padding:6px; flex:1; min-height:240px; max-height:52vh; }
.crow { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:8px; } .crow:hover { background:#FFF7F0; }
.crow label { display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; min-width:0; font-size:14px; } .crow label input { width:16px; height:16px; accent-color:var(--accent); flex:none; }
.crow .lv { color:var(--muted); font-size:11px; white-space:nowrap; }
.ctog { width:24px; height:24px; border:0; background:none; cursor:pointer; color:var(--muted); font-size:14px; border-radius:6px; flex:none; transition:transform .15s; } .ctog:hover { background:#FFE9DA; } .ctog.op { transform:rotate(90deg); color:var(--accent); } .ctog.sp0 { cursor:default; background:none; display:inline-block; }
.cfoot { display:flex; gap:8px; align-items:center; margin-top:12px; } .cfoot .sp { flex:1; }
/* chi tiết */
.mbox { width:min(960px,100%); }
.dhead .dph { width:96px; height:96px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; display:grid; place-items:center; font-size:38px; font-weight:800; flex:none; }
.dhead .dk { font-size:11.5px; font-weight:700; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; }
.dchips { display:flex; flex-wrap:wrap; gap:6px; } .dchips span { font-size:12px; background:#F7F1EC; color:var(--muted); border-radius:999px; padding:3px 10px; }
.dsec { font-weight:800; font-size:15px; margin:18px 0 8px; } .dsec small { font-weight:500; margin-left:6px; }
.kpis.dk2 { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); } .kpis.dk2 .kpi b { font-size:17px; }
.src { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; } .srct { font-size:12.5px; color:var(--muted); margin-bottom:8px; font-weight:600; }
.srcb { display:flex; height:12px; border-radius:99px; overflow:hidden; background:#F4ECE6; } .srcb i { display:block; height:100%; }
.srcl { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-size:13px; } .srcl b { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; } .srcl em { color:var(--muted); font-style:normal; }
@media (max-width:640px) { .tbl th.st, .tbl td.st { min-width:200px; } .tbl .nm { min-width:190px; } .dhead img, .dhead .dph { width:72px; height:72px; } }
.crow .cn { min-width:0; } .crow .cn small { display:block; font-size:11.5px; }

/* ---- trang chi tiết kiểu Kalodata ---- */
body.noscroll { overflow:hidden; }
.dpage { position:fixed; inset:0; z-index:40; background:#F6F1EC; overflow:auto; }
.dpin { max-width:1180px; margin:0 auto; padding:14px 20px 60px; }
.dtop { display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:5; background:#F6F1EC; padding:10px 0; }
.dtop .crumb { font-size:13.5px; color:var(--muted); } .dtop .crumb b { color:var(--accent); font-weight:600; } .dtop .sp { flex:1; }
.dtop .mx { position:static; }
.dcard { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:14px; }
.dh { display:flex; gap:18px; align-items:center; }
.dh img, .dh .dph { width:72px; height:72px; border-radius:12px; object-fit:cover; flex:none; border:1px solid var(--line); }
.dh .dph { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; display:grid; place-items:center; font-size:30px; font-weight:800; border:0; }
.dhm { flex:1; min-width:0; } .dhm h2 { margin:0 0 8px; font-size:22px; line-height:1.3; }
.dtags { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--muted); } .dtags span { white-space:nowrap; }
.dact { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:440px; }
.drow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; padding:12px 16px; }
.drow > .hint { margin-right:auto; font-weight:600; color:var(--ink); }
.drow .drp { width:auto; } .drow .drp-btn { min-width:230px; }
.dseg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.dseg button { border:0; border-left:1px solid var(--line); background:#fff; padding:8px 13px; font:600 13px inherit; font-family:inherit; color:var(--muted); cursor:pointer; }
.dseg button:first-child { border-left:0; } .dseg button.on { background:#FFEFE4; color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.dch { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; } .dch h3 { margin:0; font-size:17px; }
.core { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.cgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; align-content:start; }
.cm { border:1px solid transparent; border-radius:12px; padding:10px 10px 12px; }
.cm.on { border-color:var(--accent); background:#FFF7F1; }
.cm span { display:flex; align-items:flex-start; gap:4px; font-size:12.5px; color:var(--muted); line-height:1.35; min-height:34px; } .cm span svg { color:var(--accent); margin-top:2px; flex:none; }
.cm b { display:block; font-size:20px; letter-spacing:-.01em; margin-top:6px; white-space:nowrap; }
.cm small { display:block; font-size:11.5px; color:var(--accent); margin-top:3px; }
.cchart { border:1px solid var(--line); border-radius:12px; padding:6px 8px; min-width:0; display:flex; align-items:center; }
.cchart figure.blk { margin:0; border:0; width:100%; } .cchart .legend1 { display:none; }
.nochart { padding:30px; text-align:center; width:100%; }
.eq { display:flex; align-items:flex-start; gap:14px; padding:6px 0 4px; }
.eq + .eq { border-top:1px dashed var(--line); padding-top:14px; margin-top:8px; }
.eqt { min-width:150px; } .eqt b { display:block; font-size:24px; margin-top:4px; }
.eqop { font-size:24px; font-weight:700; color:var(--muted); padding-top:22px; }
.eqg { min-width:120px; } .eqb { display:flex; height:22px; border-radius:6px; overflow:hidden; margin:6px 0 8px; gap:2px; } .eqb i { display:block; height:100%; }
.eql { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); } .eql b { color:var(--ink); font-size:13.5px; } .eql span:last-child:not(:first-child) { text-align:right; }
.eql em { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.dbody { display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px; align-items:start; }
.dnav { background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px; display:flex; flex-direction:column; gap:2px; position:sticky; top:62px; }
.dnav button { display:flex; align-items:center; gap:9px; border:0; background:none; text-align:left; padding:10px 12px; border-radius:10px; font:600 14px inherit; font-family:inherit; color:var(--ink); cursor:pointer; }
.dnav button:hover { background:#FFF7F1; } .dnav button.on { background:#FFEFE4; color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.dmain { min-width:0; margin:0; } .dmain h4 { margin:0 0 10px; font-size:16px; } .dmain .tblwrap { max-height:none; }
@media (max-width:900px) {
  .core { grid-template-columns:1fr; } .cgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dh { flex-wrap:wrap; } .dact { max-width:none; justify-content:flex-start; }
  .dbody { grid-template-columns:1fr; } .dnav { flex-direction:row; overflow-x:auto; position:static; } .dnav button { white-space:nowrap; }
  .eq { flex-direction:column; align-items:stretch; gap:8px; } .eqg { flex:none !important; } .eqop { display:none; }
  .dpin { padding:8px 12px 50px; } .drow .drp-btn { min-width:0; }
}