/* CỔNG QUẢN TRỊ SocialLife, admin.css (đồng bộ nhận diện với trang khảo sát) */
:root{
  /* ===== HỆ MÀU HỢP NHẤT, gom hai bộ token về MỘT nguồn (solatic-brand.css) =====
     Các biến quản trị (--primary/--ink/--accent...) nay là BÍ DANH của biến --sol-*,
     nên ba phân hệ (định lượng, định tính, bản đồ) dùng chung một bảng màu thương hiệu.
     Vai trò chịu tương phản (nút, chữ teal, tiêu đề) ánh xạ sang teal đậm để đạt WCAG AA. */
  --ink:var(--sol-ink,#16261F); --ink-soft:var(--sol-muted,#5E6B63);
  --paper:var(--sol-paper,#FBFAF5); --card:var(--sol-cloud,#fff); --surface-2:#EEF3F1; --line:var(--sol-mist,#E5DFD0);
  --primary:var(--sol-teal-deep,#0E5F55); --primary-d:var(--sol-teal-darkest,#15352C); --primary-soft:var(--sol-light,#EAF2EF);
  --accent:var(--sol-coral,#C75B3F); --clay:var(--sol-coral,#C75B3F); --amber:var(--sol-amber,#A8843A);
  --teal-tint:var(--sol-light,#EAF2EF); --teal-line:var(--sol-mist,#E5DFD0);
  --ok:#1f7a4d; --err:#b23b3b; --warn:#9a6a14;
  --radius:var(--sol-radius,14px); --radius-sm:var(--sol-radius-sm,10px); --maxw:1200px;
  --shadow:var(--sol-shadow,0 1px 2px rgba(19,33,30,.06),0 8px 24px rgba(19,33,30,.06)); --shadow-lg:0 10px 30px rgba(14,74,66,.14);

  /* Chiều cao thật của thanh tiêu đề dính, KỂ CẢ VIỀN DƯỚI.
     Đọc bằng ResizeObserver trong qual.js rồi ghi đè lên :root.

     CON SỐ DƯỚI ĐÂY CHỈ LÀ LƯỚI AN TOÀN, KHÔNG PHẢI SỰ THẬT. Sự thật là
     số mà ResizeObserver ghi vào. Nó nằm đây để nếu đoạn đọc không chạy
     được thì scroll-margin-top vẫn có một giá trị hợp lý chứ không rơi
     về 0 và để thanh che mất dòng đầu của biểu mẫu.

     115 là số đo được ngày 02/09/2026 ở một cửa sổ rộng, đã đăng nhập.
     ĐỪNG tin nó là hằng số: chiều cao thanh đổi theo bề rộng cửa sổ, theo
     trạng thái đăng nhập, và theo độ dài chữ mà JavaScript điền vào
     #whoami. Đó là lý do phải đọc thật chứ không gõ. */
  --cao-thanh:115px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}
.row{display:flex;align-items:center;gap:10px}
.row.between,.between{justify-content:space-between}
.row.gap{gap:10px;flex-wrap:wrap}

.site-header{background:var(--primary);color:#fff;padding:16px 0}
.site-header .brand{font-size:12px;opacity:.9}
.site-header h1{margin:4px 0 0;font-size:20px;font-weight:700}
.who{font-size:14px;display:flex;align-items:center;gap:10px}

main{padding:20px 0 60px}
.toolbar{margin:6px 0 16px}
.toolbar label{font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:16px 0}
.card h2{margin:0 0 14px;font-size:17px;color:var(--primary-d)}
.card h3.sub{margin:18px 0 6px;font-size:14px;color:var(--ink-soft);font-weight:600}
.muted{color:var(--ink-soft)}

.login{max-width:380px;margin:40px auto}
.fld{display:block;width:100%;font:inherit;padding:10px 12px;margin:8px 0;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.fld.inline{display:inline-block;width:auto;min-width:220px;margin:0}

.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kpi{background:#eef3f1;border-radius:10px;padding:12px 18px;min-width:130px}
.kpi-n{font-size:26px;font-weight:700;color:var(--primary-d)}
.kpi-l{font-size:13px;color:var(--ink-soft)}

.chart-wrap{position:relative;max-width:760px}
canvas{max-width:100%}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.tbl th{background:#eef3f1;color:var(--primary-d);font-weight:600}

.btn-primary{background:var(--primary);color:#fff;border:0;border-radius:10px;font:inherit;font-weight:700;
  padding:11px 18px;min-height:44px;cursor:pointer}
.btn-primary:hover{background:var(--primary-d)}
.btn-primary:disabled{opacity:.55}
.btn-ghost{background:#fff;color:var(--primary-d);border:1.5px solid var(--primary);border-radius:10px;
  font:inherit;font-weight:600;padding:10px 16px;min-height:44px;cursor:pointer}
.btn-ghost.sm{padding:5px 12px;min-height:0;font-size:13px;color:#fff;border-color:rgba(255,255,255,.6);background:transparent}

.notice{padding:13px 15px;border-radius:var(--radius);margin:14px 0;background:#eef3f1}
.notice.err{background:#fbeceb;color:var(--err)}
.notice code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:6px}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:2px}

/* trang liệt kê khảo sát */
.srow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;justify-content:space-between;
  padding:12px 0;border-top:1px solid var(--line,#e4e7e7)}
.srow:first-child{border-top:0}
.srow .muted{font-size:13px}
#nav{margin-bottom:12px}

/* phân tích phân tổ */
.infer-result{margin-top:12px}
.infer-result .note,.note{font-size:12px;color:var(--ink-soft);margin:6px 0 0;line-height:1.5}
.infer-result .pct,.pct{font-size:12px;color:var(--ink-soft)}
.tbl tr.tot td{font-weight:700;background:#f6f9f8}
select.fld.inline{min-width:160px;max-width:280px}

/* tạo biểu mẫu */
textarea.fld{width:100%;box-sizing:border-box;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;font:inherit}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.45}
.notice.warn{background:#fff7e6;border:1px solid #f0c869;color:#7a5500;padding:8px 12px;border-radius:8px;margin-top:8px}
.notice.ok{background:#e9f7ef;border:1px solid #8fd3ad;color:#1c6b43;padding:8px 12px;border-radius:8px;margin-top:8px}
.notice.err{background:#fdecec;border:1px solid #e2a3a3;color:#9b1c1c;padding:8px 12px;border-radius:8px;margin-top:8px}
.notice ul{margin:6px 0 0 18px}
/* Khung xem trước và chỉnh sửa trực tiếp.

   Sửa 18/08/2026 theo báo cáo của Huy: khung cũ cao 420 điểm ảnh, mà mỗi
   câu trong trình soạn chiếm khoảng 300 tới 400 điểm ảnh vì có ô mã, ô
   loại, ô nội dung, ô điều kiện hiện và bảng phương án. Thành ra chỉ nhìn
   được một câu, muốn so hai câu cạnh nhau phải cuộn qua cuộn lại.

   Nay lấy theo chiều cao màn hình để máy nào cũng vừa: khoảng ba phần tư
   màn hình, không dưới 520 và không quá 1100 điểm ảnh. Thêm thanh kéo
   dọc luôn hiện để người dùng biết còn nội dung phía dưới, và cho phép
   kéo mép dưới nếu muốn cao hơn nữa. */
.outline-wrap{max-height:min(76vh,1100px);min-height:520px;overflow:auto;resize:vertical;border:1px solid rgba(19,33,30,.08);border-radius:10px;padding:8px}
.outline-wrap::-webkit-scrollbar{width:11px}
.outline-wrap::-webkit-scrollbar-thumb{background:rgba(19,33,30,.22);border-radius:8px}
.outline h4{margin:12px 0 4px;color:var(--primary-d)}
.outline .ol-q{margin:0 0 0 18px}
.outline .ol-o{margin:2px 0 6px 18px;color:var(--ink-soft)}
.outline .qc{font-weight:700}
.outline .qt{color:var(--clay,#c2603a);font-size:12px}
.outline .intro-prev{background:#f6f9f8;border-left:3px solid var(--primary,#1f6f54);padding:8px 12px;margin:8px 0;font-size:13px;color:var(--ink-soft)}
.outline .cond{display:inline-block;margin-left:6px;font-size:12px;background:#fff3e0;border:1px solid #f0c869;border-radius:6px;padding:0 6px;color:#7a5500}
.help{margin:8px 0;border:1px solid var(--line,#dfe6e3);border-radius:8px;padding:6px 10px;background:#fafcfb}
.help summary{cursor:pointer;font-size:13px;color:var(--primary,#1f6f54);font-weight:600}
.help .muted{margin-top:6px;line-height:1.7;font-size:13px}
.help code{background:#eef3f1;border:1px solid #dfe6e3;border-radius:4px;padding:0 4px;font-size:12px}

/* Trình chỉnh sửa bộ hỏi trực quan */
.editor .small{font-size:12px}
.editor .grow{flex:1;min-width:160px}
.editor .mini{width:84px}
.seccard{border:1px solid #cfe0d9;border-radius:10px;padding:12px;margin:12px 0;background:#fbfdfc}
.sechead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.sectag{font-weight:700;color:var(--primary,#1f6f54);font-size:12px;letter-spacing:.05em}
.spacer{flex:1}
.qcard{border:1px solid #e3e9e7;border-radius:8px;padding:10px;margin:8px 0;background:#fff}
.qhead{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.qnum{font-weight:700;color:var(--ink)}
.qreq{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--ink-soft)}
.qtext{width:100%;resize:vertical}
.opts{margin:6px 0 2px;padding-left:8px;border-left:2px solid #e3e9e7}
.opt-row{display:flex;align-items:center;gap:6px;margin:4px 0}
.rel{margin-top:6px;align-items:center}
.lbl{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.row-center{margin:12px 0;text-align:center}
.btn-mini{border:1px solid #cfd8d5;background:#fff;color:var(--ink);font:inherit;font-size:13px;padding:3px 9px;border-radius:6px;cursor:pointer}
.btn-mini:hover{background:#f1f5f3}
.btn-mini.danger{border-color:#e6b3b3;color:#9b1c1c}

/* Khối phiếu (giới thiệu/cảm ơn) và điều kiện cấp phần */
.seccard.meta{background:#eef3f7;border-color:#cdd9e3}
.secrel{margin:2px 0 8px;align-items:center}
.editor details.help{margin:8px 0;background:#f7faf9;border:1px dashed #cfd8d5;border-radius:8px;padding:8px 10px}
.editor details.help textarea{margin-top:6px}
.editor details.help summary{cursor:pointer;font-weight:600;color:var(--primary,#1f6f54)}

/* Bộ dựng điều kiện nhảy bằng cách chọn */
.relbuild{align-items:center;flex-wrap:wrap;margin-top:6px;background:#f7faf9;border:1px dashed #cfd8d5;border-radius:8px;padding:6px 8px}
.relbuild .chip{background:#eef3f7;border:1px solid #cdd9e3;border-radius:12px;padding:2px 10px;font-size:13px}
.valmulti{display:flex;flex-wrap:wrap;gap:8px}
.valchk{display:inline-flex;align-items:center;font-size:13px}

/* Khung xem trước phiếu (như người trả lời) */
.pv-overlay{position:fixed;inset:0;background:rgba(20,40,35,.45);display:flex;align-items:flex-start;justify-content:center;padding:24px;z-index:1000;overflow:auto}
.pv-panel{background:#fff;max-width:680px;width:100%;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);max-height:92vh;display:flex;flex-direction:column}
.pv-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #e3e9e7}
.pv-body{padding:16px;overflow:auto}
.pv-intro{background:#f3f7f5;border-radius:8px;padding:10px 12px;margin-bottom:14px}
.pv-section{margin-bottom:16px}
.pv-sectitle{color:var(--primary,#1f6f54);margin:8px 0}
.pv-q{margin:10px 0;padding-bottom:8px;border-bottom:1px dashed #eef1f0}
.pv-qtext{font-weight:600;margin-bottom:6px}
.pv-req{color:#c0392b}
.pv-opts{display:flex;flex-direction:column;gap:4px}
.pv-opt,.pv-scalept{display:flex;align-items:center;gap:6px;font-weight:400}
.pv-scale{display:flex;flex-wrap:wrap;gap:10px}
.pv-note{color:var(--ink-soft);font-size:13px;margin-top:8px}
/* Nhãn mã câu và loại câu ở màn xem trước · thêm 17/08/2026.
   Chỉ người soạn phiếu thấy, người trả lời không thấy. Để nhạt và nhỏ
   hơn nội dung câu hỏi, vì nó là chú thích kỹ thuật chứ không phải một
   phần của phiếu. */
.pv-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-2px 0 6px}
.pv-meta code{background:#f3f5f4;color:var(--ink-soft);border-radius:4px;padding:1px 6px;font-size:12px}
.pv-type{background:var(--sol-nhat,#e6f2f0);color:var(--sol-dam,#0f766e);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600}
.pv-foot{background:#fafbfb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.pv-foot .pv-note{margin-top:0}

/* Thư viện khối dựng sẵn */
.libbody{margin:4px 0}
.libcat{margin-top:8px;color:var(--ink-soft)}
.blkrow{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px dashed #eef1f0}
.blkrow .grow{flex:1}

/* Cảnh báo hợp lệ trực tiếp trên thẻ câu/phần */
.qwarn{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px}
.qwarn-item{color:#a15c00;background:#fff7e6;border:1px solid #f0d9a0;border-radius:6px;padding:1px 8px;font-size:12px}

.tbl td.r,.tbl th.r{text-align:right}
.tbl h3{margin:10px 0 4px}
.tnote{font-size:12px;color:var(--ink-soft);margin:6px 0 2px;line-height:1.5}

/* =====================================================================
   CHỦ ĐỀ CHUYÊN NGHIỆP (Phase 1, workbench v40)
   Ghi đè token + tinh chỉnh thành phần dùng chung; giữ nguyên tên lớp.
   ===================================================================== */
/* (Token đã gom về :root đầu tệp; dưới đây chỉ giữ phần tinh chỉnh thành phần.) */
body{font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:linear-gradient(180deg,#e7ece9 0%,var(--paper) 240px) fixed}
.wrap{padding:0 22px}

/* Thanh tiêu đề cố định */
.site-header{position:sticky;top:0;z-index:60;padding:0;
  background:linear-gradient(180deg,#0f5f5a,#0c524d);
  border-bottom:2px solid var(--accent);box-shadow:0 2px 12px rgba(8,40,36,.18)}
.site-header .wrap{min-height:62px}
.site-header .brand{font-size:11px;letter-spacing:.10em;text-transform:uppercase;opacity:.82}
.site-header h1{font-size:18px;font-weight:700;letter-spacing:.2px}
.who{font-size:13px}
#appver{display:inline-block;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.28);
  padding:2px 9px;border-radius:999px;color:#eafffb !important;font-size:11px !important}

/* Vùng nội dung + thanh điều hướng */
main{padding:22px 0 72px}
#nav{display:flex;align-items:center;gap:10px;margin:4px 0 16px;flex-wrap:wrap}

/* Thẻ */
.card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:18px 0;
  box-shadow:var(--shadow)}
.card h2{position:relative;padding-left:13px;margin:0 0 16px;font-size:16px;font-weight:700;
  letter-spacing:.2px;color:var(--primary-d)}
.card h2::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--primary),var(--accent))}

/* Nút */
.btn-primary{border-radius:var(--radius-sm);font-weight:600;padding:10px 18px;min-height:42px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);transition:background .12s,transform .04s,box-shadow .12s}
.btn-primary:hover{box-shadow:var(--shadow)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border-radius:var(--radius-sm);border-width:1.5px;padding:9px 15px;min-height:42px;
  transition:background .12s,border-color .12s}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-mini{border-radius:7px;border:1px solid var(--line);background:#fff;transition:background .12s,border-color .12s}
.btn-mini:hover{background:var(--surface-2);border-color:var(--primary)}
.btn-mini.danger{border-color:#e6b3b3;color:#9b1c1c}
.btn-mini.danger:hover{background:#fdecec}
.btn-danger{background:#fff;color:#9b1c1c;border:1.5px solid #e0a3a3;border-radius:var(--radius-sm);
  font:inherit;font-weight:600;padding:9px 15px;min-height:42px;cursor:pointer}
.btn-danger:hover{background:#fdecec;border-color:#c97a7a}

/* Biểu mẫu */
.fld{border:1.5px solid var(--line);border-radius:var(--radius-sm);transition:border-color .12s,box-shadow .12s}
.fld:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
select.fld.inline{min-width:170px}

/* KPI */
.kpi{background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.kpi-n{color:var(--primary-d)}

/* Bảng dữ liệu trên màn hình (không ảnh hưởng bản xuất APA) */
.tbl{font-size:13.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{border:0;border-bottom:1px solid var(--line);padding:8px 11px}
.tbl th{background:var(--surface-2);color:var(--ink-soft);font-weight:600;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid #c4cfca;white-space:nowrap}
.tbl tbody tr:hover td,.tbl tr:hover td{background:#fafcfb}
.tbl tr.tot td{background:var(--surface-2)}

/* Danh sách (khảo sát / dữ liệu) theo dòng */
.srow{padding:13px 12px;border-top:1px solid var(--line);border-radius:8px;transition:background .12s}
.srow:hover{background:var(--surface-2)}
.srow .stitle{font-weight:600;color:var(--ink)}

/* Nhãn trạng thái pill (dùng cho danh mục, các phase sau) */
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:2px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pill.open{background:#e6f4ee;color:#136c44;border-color:#bfe3d0}
.pill.ended{background:#eef1f4;color:#46586a;border-color:#d3dbe2}
.pill.draft{background:#fbf2e4;color:#8a5a12;border-color:#ecd6ab}
.pill.data{background:var(--primary-soft);color:var(--primary-d);border-color:#bfe0db}

/* Thông báo */
.notice{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-sm)}
.notice.err{background:#fdecec;border-color:#e2a3a3;color:#9b1c1c}

/* Thanh công cụ phụ trong thẻ */
.subbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);margin:0 0 14px}
.tnote{font-size:12px;color:var(--ink-soft);background:var(--surface-2);
  border-left:3px solid var(--primary);padding:8px 12px;border-radius:0 6px 6px 0;margin:8px 0 2px;line-height:1.55}

/* Hàng danh mục kiểu catalog (v42) */
.srow{display:block;border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:14px 16px;margin:10px 0;box-shadow:var(--shadow);transition:box-shadow .12s,border-color .12s}
.srow:hover{background:#fff;border-color:#bcccc7;box-shadow:var(--shadow-lg)}
.srow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 18px;
  flex-wrap:wrap;margin-bottom:11px}
.sident{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;min-width:0}
.scode{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:13px;
  color:var(--primary-d);background:var(--primary-soft);border:1px solid #bfe0db;
  border-radius:6px;padding:2px 9px;letter-spacing:.02em}
.stitle{font-weight:600;color:var(--ink);font-size:15px;line-height:1.35}
.smeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.metric{font-size:12px;color:var(--ink-soft);background:var(--surface-2);
  border:1px solid var(--line);border-radius:6px;padding:2px 9px;white-space:nowrap}
.metric b{color:var(--ink);font-weight:700}
.srow-actions{gap:8px;flex-wrap:wrap;margin:0}
.srow-actions .btn-primary,.srow-actions .btn-ghost{min-height:34px;padding:6px 13px;
  font-size:13px;font-weight:600;border-radius:7px}

/* Lưới biểu đồ tổng quan (v44) */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:8px}
.chart-cell{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;box-shadow:var(--shadow)}
.chart-cell-title{font-size:13px;font-weight:600;color:var(--primary-d);margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-cell-canvas{position:relative;height:180px}
.chart-cell-canvas canvas{width:100% !important;height:100% !important}

/* =====================================================================
   HỆ THIẾT KẾ SocialLife (v49), đồng bộ với trang khảo sát.
   Chỉ CSS, giữ nguyên class & logic. Quy tắc sau cùng → thắng.
   ===================================================================== */
/* (Token đã gom về :root đầu tệp; chỉ giữ tinh chỉnh thành phần bên dưới.) */
body{ background:var(--paper); color:var(--ink); }

/* ----- Top bar trắng mang logo ----- */
.site-header{ background:#fff; color:var(--ink); padding:0; border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,40,40,.03); position:sticky; top:0; z-index:30; }
.site-header .wrap{ display:flex; align-items:center; min-height:66px; padding-top:10px; padding-bottom:10px; }
.site-header .wrap.between{ justify-content:space-between; }
.hdr-left{ display:flex; align-items:center; gap:14px; }
.brand-logo{ height:38px; width:auto; display:block; }
.site-header .brand{ color:var(--ink-soft); font-size:12px; opacity:1; letter-spacing:.02em; }
.site-header h1{ color:var(--ink); font-size:19px; font-weight:700; margin:2px 0 0; }
.site-header .who{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:13px; }
@media (max-width:560px){ .brand-logo{ height:30px; } .site-header h1{ font-size:16px; } }

/* ----- Chỗ dừng của phép cuộn tới trình soạn -----
   Mọi khối mang data-soan đều là đích của denTrinhSoan trong qual.js.
   Bộ chọn theo thuộc tính bắt đúng bốn khối ấy và không bắt gì khác, nên
   không phải liệt kê bốn lớp riêng và không sót khi thêm khối thứ năm.

   Vì sao cần: scrollIntoView không biết gì về thanh dính, nên canh 'start'
   đưa mép trên khối về đúng toạ độ 0 và cho nó chui xuống dưới thanh.
   scroll-margin-top bảo trình duyệt dừng sớm đúng bằng ngần này.

   12px là khoảng thở, chọn theo nhịp khoảng cách sẵn có của trang (10, 12,
   14). Không có gì trong mã phụ thuộc vào con số ấy, đổi được tự do. */
[data-soan]{ scroll-margin-top:calc(var(--cao-thanh) + 12px); }

/* ----- Thẻ ----- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(20,40,40,.04); padding:18px 20px; }
.card h2{ position:relative; color:var(--ink); font-size:1.06rem; font-weight:700; padding-left:12px; }
.card h2::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px; border-radius:3px; background:var(--primary); }

/* ----- Nút ----- */
.btn-primary{ background:var(--primary); color:#fff; border:0; border-radius:10px; font-weight:700;
  padding:10px 16px; cursor:pointer; transition:background .15s; }
.btn-primary:hover{ background:var(--primary-d); }
.btn-ghost{ background:#fff; color:var(--primary-d); border:1.5px solid var(--teal-line); border-radius:10px;
  padding:9px 14px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s; }
.btn-ghost:hover{ border-color:var(--primary); background:var(--teal-tint); }
.btn-ghost.sm{ padding:6px 11px; font-size:.85rem; }
.btn-danger{ background:#fff; color:var(--err); border:1.5px solid #e7c3c3; border-radius:10px;
  padding:9px 14px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; }
.btn-danger:hover{ background:#fbeded; border-color:var(--err); }

/* ----- Bảng kiểu báo cáo ----- */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl th{ background:var(--teal-tint); color:var(--primary-d); font-weight:600; text-align:left; }
.tbl th, .tbl td{ padding:9px 12px; border-bottom:1px solid var(--line); }
.tbl tbody tr:nth-child(even) td{ background:#fafcfb; }
.tbl tbody tr:hover td{ background:var(--teal-tint); }

/* ----- Chỉ số ----- */
.kpi{ background:var(--teal-tint); border:1px solid var(--teal-line); border-radius:12px; padding:14px 16px; }
.kpi-n{ color:var(--primary-d); font-weight:800; font-size:26px; }
.kpi-l{ color:var(--ink-soft); font-size:13px; }

/* ----- Pill trạng thái ----- */
.pill{ font-size:.78rem; font-weight:700; padding:4px 11px; border-radius:999px; display:inline-block; }
.pill.open{ background:#e2f1ea; color:#1f7a4d; }
.pill.ended{ background:#eef2f1; color:var(--ink-soft); }
.pill.draft{ background:#fbeadb; color:#b9701f; }
.pill.data{ background:var(--teal-tint); color:var(--primary-d); }

/* ----- Dòng khảo sát (catalog) ----- */
.srow{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  box-shadow:0 1px 2px rgba(20,40,40,.04); transition:border-color .15s, box-shadow .15s; }
.srow:hover{ border-color:var(--teal-line); box-shadow:0 4px 16px rgba(20,90,90,.09); }
.scode{ background:var(--teal-tint); color:var(--primary-d); border-radius:8px; padding:2px 9px;
  font-weight:700; font-size:.8rem; letter-spacing:.02em; }
.stitle{ color:var(--ink); font-weight:700; }
.metric{ color:var(--ink-soft); font-size:.86rem; }

/* ----- Ô nhập ----- */
.fld input, .fld select, .fld textarea,
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
  border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; background:#fff; color:var(--ink); }
.fld input:focus, .fld select:focus, .fld textarea:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, select:focus, textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(46,142,142,.16); outline:none; }

/* ----- Thông báo ----- */
.notice{ border-radius:12px; }
.notice.err{ background:#fbeded; color:#8f2f2f; }
.notice.ok{ background:#e7f3ec; color:#1f6f4a; }

/* v54, tăng tương phản cụm phải top bar (phiên bản, ai đang đăng nhập, đăng xuất) */
.site-header .who { color: var(--ink-soft); }
.site-header .who #appver { color: #fff; font-weight: 500; opacity: 1; }
.site-header .who #whoami { color: var(--ink); font-weight: 600; }
.site-header .who #signout,
.site-header .who .btn-ghost {
  color: var(--primary-d); background: var(--teal-tint);
  border: 1.5px solid var(--primary); font-weight: 600;
}
.site-header .who #signout:hover { background: #dcebe8; }

/* ===== Dashboard v100: thẻ, accordion, bảng cuộn/xổ ===== */
.card{box-shadow:0 1px 3px rgba(28,43,51,.06),0 4px 14px rgba(28,43,51,.04)}
.kpis{gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:10px;padding:12px 18px;min-width:140px;box-shadow:0 1px 3px rgba(28,43,51,.05)}
.kpi-n{font-size:26px;font-weight:700;color:var(--primary-d)}

/* accordion kết quả (sec) */
details.sl-acc{margin:10px 0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
details.sl-acc>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;padding:9px 14px;background:#f2f6f4;font-weight:600;color:var(--primary-d);user-select:none}
details.sl-acc>summary::-webkit-details-marker{display:none}
details.sl-acc>summary:hover{background:#e8efec}
details.sl-acc .sl-acc-chev{font-size:12px;color:var(--ink-soft);transition:transform .15s ease}
details.sl-acc[open] .sl-acc-chev{transform:rotate(180deg)}
details.sl-acc .sl-acc-body{padding:10px 14px 14px}

/* bảng số liệu: zebra + hover + đầu bảng dính trong khối cuộn */
.tbl tr:nth-child(even) td{background:#f8faf9}
.tbl tr:hover td{background:#eef5f2}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.b{font-weight:700}
.tbl tr.pm-total td{background:#eef3f1;font-weight:600;border-top:2px solid var(--primary)}

.tbl-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:8px 0;background:#fff;
  box-shadow:0 1px 3px rgba(28,43,51,.05)}
.tbl-card .tbl-scroll{max-height:340px;overflow:auto;transition:max-height .2s ease}
.tbl-card.open .tbl-scroll{max-height:none;overflow:visible}
.tbl-card .tbl{margin:0;border:0}
.tbl-card .tbl th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
.tbl-card .tbl th,.tbl-card .tbl td{border-left:0;border-right:0}
.tbl-card .tbl tr:first-child th{border-top:0}
.tbl-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 12px;background:#f2f6f4;border-top:1px solid var(--line)}
.tbl-count{font-size:12px;color:var(--ink-soft)}
.tbl-toggle{background:none;border:0;font:inherit;font-size:13px;font-weight:600;
  color:var(--primary-d);cursor:pointer;padding:3px 8px;border-radius:6px}
.tbl-toggle:hover{background:#e2ebe7}

/* hàng phương trình SEM đường dẫn */
.pm-eq select{font-size:13px;padding:5px 8px}

/* ===== v101: mọi mục trang quản trị gập/mở được ===== */
details.sl-card>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;cursor:pointer;user-select:none;margin:-18px -18px 0;padding:14px 18px;border-radius:var(--radius)}
details.sl-card[open]>summary{margin-bottom:14px;border-bottom:1px solid var(--line);
  border-bottom-left-radius:0;border-bottom-right-radius:0}
details.sl-card>summary::-webkit-details-marker{display:none}
details.sl-card>summary:hover{background:#f2f6f4}
details.sl-card>summary h2{margin:0}
.sl-card-chev{font-size:12px;color:var(--ink-soft);transition:transform .15s ease;flex:none}
details.sl-card[open] .sl-card-chev{transform:rotate(180deg)}

/* --- Responsive header (v116): tránh tràn ngang khi có thêm nút công cụ) --- */
/* who-responsive-v116 */
@media (max-width:820px){
  .site-header .wrap.row.between{ flex-wrap:wrap; row-gap:6px; }
  .who{ flex-wrap:wrap; justify-content:flex-end; gap:6px; width:100%; }
  .who #appver{ display:none; }
  .who #whoami{ display:inline-block; max-width:58vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; font-size:12px; }
}

/* v125, gom nhóm hành động thẻ khảo sát */
.btn-outline{background:var(--primary-soft,#e8f1ee);color:var(--primary-d);border:1.5px solid var(--primary);border-radius:var(--radius-sm,10px);font:inherit;font-weight:600;padding:9px 15px;min-height:42px;cursor:pointer}
.btn-outline:hover{background:#dcebe6}
.btn-warn{background:#fff;color:#9a5a00;border:1.5px solid #e3b769;border-radius:var(--radius-sm,10px);font:inherit;font-weight:600;padding:9px 15px;min-height:42px;cursor:pointer}
.btn-warn:hover{background:#fff6e8;border-color:#d79a2e}
.srow-spacer{flex:1 1 auto;min-width:8px}
.srow-more{position:relative;display:inline-block}
.srow-more-trig{min-height:42px}
.srow-more-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:none;min-width:212px;background:#fff;border:1px solid var(--line,#d9e3df);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:6px}
.srow-more.open .srow-more-pop{display:block}
.srow-more-item{display:block;width:100%;text-align:left;background:#fff;border:0;border-radius:8px;padding:10px 12px;min-height:0;font:inherit;font-size:14px;color:var(--ink,#16261F);cursor:pointer}
.srow-more-item:hover{background:var(--primary-soft,#eef3f1)}

/* v125, biểu tượng Solatic dẫn đầu header (đồng bộ 3 mặt) */
.site-header .sol-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.12);flex:0 0 auto}
.site-header .sol-icon svg{width:28px;height:28px;display:block}

/* Khối hướng dẫn thu/xổ cho phân hệ định lượng (đồng bộ phong cách với GIS) */
.sl-guide{border:1px solid #d6e6e4;background:#f3faf9;border-radius:10px;padding:4px 10px;margin:0 0 12px}
.sl-guide>summary{cursor:pointer;font-weight:700;color:var(--primary-d);font-size:13.5px;padding:6px 0;list-style:none;user-select:none}
.sl-guide>summary::-webkit-details-marker{display:none}
.sl-guide>summary::before{content:"\25B8 ";color:var(--primary-d)}
.sl-guide[open]>summary::before{content:"\25BE "}
.sl-guide .sl-guide-bd{font-size:12.5px;color:var(--ink-soft);line-height:1.55;padding:2px 0 8px}
.sl-guide .sl-guide-bd p{margin:6px 0}

/* Dải thông báo nổi, luôn thấy dù đang cuộn ở giữa trang; bấm để đóng */
.notice-float{ position:fixed; top:78px; left:50%; transform:translateX(-50%);
  z-index:1200; width:max-content; max-width:min(680px,92vw);
  box-shadow:0 12px 32px rgba(14,74,66,.20); cursor:pointer; animation:slNoteIn .18s ease }
@keyframes slNoteIn{ from{ opacity:0; transform:translate(-50%,-8px) } to{ opacity:1; transform:translate(-50%,0) } }

/* Quality floor, tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ── Nhận diện Hàn lâm đương đại ── */
:root{--primary:#1E8E80;--primary-d:#0E5F55;--primary-soft:#EAF2EF;--accent:#A8843A;--amber:#A8843A;--clay:#C75B3F;--paper:#FBFAF5;--card:#FFFFFF;--surface-2:#F3EFE6;--ink:#16261F;--ink-soft:#5E6B63;--line:#E5DFD0;--teal-tint:#EAF2EF;--teal-line:#D7CFBC}
body{font-family:'Inter','Be Vietnam Pro',system-ui,sans-serif}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,'Times New Roman',serif;letter-spacing:-.005em}