:root{
  --giay:#F2F3EF; --nen:#FAFBF9; --nen2:#E9ECE6;
  --muc:#191F1C; --muc2:#45514C; --muc3:#5E6B65;
  --ke:#D5DAD2; --ke2:#BDC4BB;
  --son:#A8301F; --son-nhat:#F1E1DD;
  --lam:#1360A8; --luc:#2C6B4B; --vang:#7E6210;
  --font:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --giay:#121715; --nen:#1A201E; --nen2:#222927;
    --muc:#E8EBE6; --muc2:#AAB5AF; --muc3:#8B968F;
    --ke:#2E3733; --ke2:#3E4945;
    --son:#E68873; --son-nhat:#33201C;
    --lam:#5A99D6; --luc:#5FAE82; --vang:#C9A748;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--giay);color:var(--muc);font-family:var(--font);font-size:15px;line-height:1.55}
a{color:var(--lam)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--son);outline-offset:2px}

header.thanh{background:var(--nen);border-bottom:1px solid var(--ke);position:sticky;top:0;z-index:10}
.thanh-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hieu{font-weight:600;letter-spacing:.01em;white-space:nowrap}
.hieu a{color:var(--muc);border:0}
.hieu a:hover{color:var(--son)}
nav.menu{display:flex;gap:16px;flex:1;flex-wrap:wrap;font-size:14px}
/* Menu và ô người dùng gói chung để màn hẹp thu cả hai vào một nút. */
.thanh-mo{display:flex;flex:1;gap:20px;align-items:center;min-width:0}
.nut-menu{display:none}
nav.menu a{color:var(--muc2);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
nav.menu a:hover,nav.menu a.hien{color:var(--son);border-bottom-color:var(--son)}
.ai{font-size:13px;color:var(--muc3);text-align:right;white-space:nowrap}
.ai b{display:block;color:var(--muc);font-weight:500}

main{max-width:1180px;margin:0 auto;padding:26px 20px 70px}
h1{font-size:26px;line-height:1.2;margin:0 0 4px;font-weight:600;letter-spacing:-.01em}
h2{font-size:18px;margin:32px 0 12px;font-weight:600}
.phu{color:var(--muc3);font-size:14px;margin:0 0 22px}

.the{background:var(--nen);border:1px solid var(--ke);border-radius:6px;padding:18px 20px;margin-bottom:18px}
.luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.the h3{margin:0 0 6px;font-size:16px}
.the p{margin:0 0 6px;color:var(--muc2);font-size:14px}

table{border-collapse:collapse;width:100%;font-size:14px}
.cuon{overflow-x:auto;border:1px solid var(--ke);border-radius:6px;background:var(--nen);margin-bottom:20px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--ke);vertical-align:top}
thead th{background:var(--nen2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muc2);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.so,th.so{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
caption{caption-side:bottom;text-align:left;padding:9px 12px;font-size:12.5px;color:var(--muc3);border-top:1px solid var(--ke)}

.nhan{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:10px;background:var(--nen2);color:var(--muc2);white-space:nowrap}
.nhan.son{background:var(--son-nhat);color:var(--son)}
.nhan.luc{background:color-mix(in srgb,var(--luc) 16%,transparent);color:var(--luc)}
.nhan.vang{background:color-mix(in srgb,var(--vang) 18%,transparent);color:var(--vang)}

input,select,textarea{font-family:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--ke2);
  border-radius:4px;background:var(--nen);color:var(--muc);width:100%}
label{display:block;font-size:13px;color:var(--muc2);margin-bottom:4px}
.hang{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.hang > div{flex:1;min-width:150px}
button,.nut{font-family:inherit;font-size:14px;padding:8px 16px;border-radius:4px;border:1px solid var(--son);
  background:var(--son);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
button.phu2,.nut.phu2{background:transparent;color:var(--muc2);border-color:var(--ke2)}
button:hover{filter:brightness(1.08)}

.canhbao{border-left:3px solid var(--son);background:var(--son-nhat);padding:12px 15px;border-radius:0 4px 4px 0;margin-bottom:18px;font-size:14px}
.trong{color:var(--muc3);font-style:italic;padding:20px 0}
form.gon{max-width:380px}
.chan{margin-top:40px;padding-top:16px;border-top:1px solid var(--ke);color:var(--muc3);font-size:12.5px}

/* ---------------------------------------------------- quản trị hệ thống */
.ok{border-left:3px solid var(--luc);background:color-mix(in srgb,var(--luc) 10%,transparent);
    padding:12px 15px;border-radius:0 4px 4px 0;margin-bottom:18px;font-size:14px}
.so-lieu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.so-lieu div{background:var(--nen);border:1px solid var(--ke);border-radius:6px;padding:12px 14px}
.so-lieu b{display:block;font-size:22px;font-family:var(--mono);font-variant-numeric:tabular-nums;
           letter-spacing:-.02em}
.so-lieu span{font-size:12.5px;color:var(--muc3)}
.the.gon{padding:14px 16px}
textarea.ma{font-family:var(--mono);font-size:12.5px;line-height:1.5;width:100%;min-height:340px;
            white-space:pre;overflow-wrap:normal;overflow-x:auto}
.gia-tri{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Dải số tổng hợp trên đầu một mục báo cáo. Chỉ dùng cho vài con số thật sự
   là kết luận của mục, không dùng làm trang trí — bốn ô số to trên mọi mục
   thì không ô nào còn nổi bật. */
.luoi-so{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.luoi-so>div{background:var(--nen2);border-radius:5px;padding:10px 14px;min-width:8em}
.luoi-so .nhan-so{display:block;font-size:11.5px;color:var(--muc3);margin-bottom:2px}
.luoi-so b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;font-weight:600}
.hang.chat{margin-bottom:0;gap:8px}
.hang.chat > div{min-width:110px}
.giai-thich{font-size:13px;color:var(--muc3);margin:2px 0 0;max-width:52ch}
form.trong-dong{display:inline}

/* ------------------------------------------------------------- báo cáo */
.bao-cao section.phan{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--ke)}
.bao-cao section.phan:first-child{border-top:none;padding-top:8px}
.bao-cao h2{font-size:19px;margin:0 0 6px}
.bao-cao h3{font-size:15px;margin:22px 0 8px;color:var(--muc2)}
.bao-cao svg{margin:14px 0 18px}
.bao-cao .ghi-chu{color:var(--muc3);font-size:13px;margin:6px 0 0}
.bao-cao dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:10px 0 18px;
               font-size:14px;align-items:baseline}
.bao-cao dl.kv dt{color:var(--muc2)}
.bao-cao dl.kv dd{margin:0;font-weight:500}
.bao-cao ol.khuyen{padding-left:20px;margin:10px 0 14px}
.bao-cao ol.khuyen li{margin-bottom:10px}
.bao-cao ol.khuyen .ghi-chu{display:block}

/* --------------------------------------------------------- bản in ra giấy */
body.ban-in{background:#fff}
body.ban-in main{max-width:900px;padding:28px 24px 60px}
.dau-in{border-bottom:2px solid var(--muc);padding-bottom:14px;margin-bottom:8px}
@media print{
  /* In luôn ra bảng màu sáng, kể cả khi màn hình đang ở nền tối:
     chữ sáng trên nền tối in ra giấy là một trang gần như trắng. */
  :root{
    --giay:#fff; --nen:#fff; --nen2:#E9ECE6;
    --muc:#191F1C; --muc2:#45514C; --muc3:#5E6B65;
    --ke:#D5DAD2; --ke2:#BDC4BB;
    --son:#A8301F; --son-nhat:#F1E1DD;
    --lam:#1360A8; --luc:#2C6B4B; --vang:#7E6210;
  }
  header.thanh,.chi-in,.hang,form,.nut,button{display:none!important}
  body{background:#fff;font-size:11pt}
  main{max-width:none;padding:0}
  .cuon{overflow:visible;border:none}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
  .bao-cao section.phan{page-break-inside:auto;break-inside:auto}
  .bao-cao h2{page-break-after:avoid}
  .bao-cao svg{page-break-inside:avoid;max-width:100%}
  a{color:inherit;text-decoration:none}
  .chan{position:running(chan)}
}

/* ------------------------------------------- thẻ nhập bằng biểu mẫu Excel */
/* Mỗi bước một hàng riêng, phần giải thích luôn xuống dòng dưới. Trước đây
   form nằm lồng trong một ô flex khác nên ô chọn tệp bị bóp lại và nhãn nút
   bị cắt mất chữ đầu; để giải thích nằm cùng dòng thì hàng lại vỡ làm ba. */
.mau-excel .buoc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
                 margin-top:14px;padding-top:14px;border-top:1px solid var(--ke)}
.mau-excel .buoc .stt{flex:0 0 24px;height:24px;border-radius:50%;
                      background:var(--nen2);color:var(--muc2);font-size:12.5px;
                      font-weight:600;display:inline-flex;align-items:center;
                      justify-content:center}
.mau-excel .buoc > .nut,.mau-excel .buoc > button{flex:0 0 auto;margin:0;white-space:nowrap}
.mau-excel .buoc input[type=file]{flex:0 1 300px;min-width:0;padding:6px 8px;
                                  background:var(--nen);border:1px dashed var(--ke2);
                                  border-radius:4px;font-size:13px}
.mau-excel .buoc .giai-thich{flex:1 0 100%;margin:2px 0 0;padding-left:34px}

/* ------------------------------------------ ô chọn hệ thống giáo dục */
.chon-nuoc{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 4px}
.chon-nuoc label{display:flex;align-items:center;gap:6px;margin:0;font-size:13.5px;
                 color:var(--muc);white-space:nowrap}
.chon-nuoc input{width:auto;margin:0}

/* ------------------------------------------------- menu gom theo nhóm */
/* Mở bằng :hover và :focus-within nên không cần JavaScript, và bàn phím
   vẫn đi được: nút nhận tiêu điểm thì thanh con mở ra. */
nav.menu .nhom{position:relative}
nav.menu .nhom > button{background:none;border:0;padding:0 0 2px;margin:0;font:inherit;
  font-size:14px;color:var(--muc2);cursor:pointer;border-bottom:2px solid transparent;
  border-radius:0}
nav.menu .nhom > button::after{content:"";display:inline-block;margin-left:5px;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
nav.menu .nhom > button:hover,nav.menu .nhom > button.hien{color:var(--son);
  border-bottom-color:var(--son);filter:none}
nav.menu .nhom .thang{position:absolute;left:-14px;top:calc(100% + 9px);z-index:30;
  min-width:230px;background:var(--nen);border:1px solid var(--ke);border-radius:6px;
  padding:8px 0;box-shadow:0 8px 24px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s,transform .12s}
nav.menu .nhom:hover .thang,nav.menu .nhom:focus-within .thang{opacity:1;visibility:visible;
  transform:none}
nav.menu .nhom .thang a{display:block;padding:7px 16px;border:0;color:var(--muc);
  white-space:nowrap}
nav.menu .nhom .thang a:hover{background:var(--nen2);color:var(--son)}
nav.menu .nhom .thang p{margin:6px 16px 2px;padding-top:8px;border-top:1px solid var(--ke);
  font-size:12.5px;line-height:1.45;color:var(--muc3);white-space:normal;max-width:250px}
/* Màn hẹp: thanh đầu trang không dính và menu thu vào nút "Menu". Đo trước
   khi sửa: ở 375 px thanh cao 190 px và dính suốt lúc cuộn, tức một phần tư
   màn hình điện thoại. Mở ra thì các nhóm bày hết, không thả xuống nữa. */
@media (max-width:960px){
  header.thanh{position:static}
  .thanh-in{gap:10px 14px;padding:10px 16px}
  header.thanh .nut-menu{display:inline-block;margin-left:auto;padding:5px 12px;font-size:13.5px;
    background:transparent;color:var(--muc);border-color:var(--ke2)}
  .thanh-mo{flex-basis:100%;flex-direction:column;align-items:stretch;gap:14px;padding:4px 0 8px}
  .js .thanh-mo{display:none}
  .js header.thanh.mo .thanh-mo{display:flex}
  nav.menu{flex-direction:column;gap:12px}
  nav.menu > a{align-self:flex-start}
  nav.menu .nhom > button{cursor:default;border-bottom:0;padding:0;font-weight:600;color:var(--muc)}
  nav.menu .nhom > button::after{display:none}
  nav.menu .nhom .thang{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--ke);border-radius:0;background:transparent;
    padding:0 0 0 12px;margin-top:4px;min-width:0}
  nav.menu .nhom .thang a{padding:4px 0;white-space:normal}
  nav.menu .nhom .thang a:hover{background:transparent}
  nav.menu .nhom .thang p{display:none}
  .ai{text-align:left;white-space:normal;padding-top:10px;border-top:1px solid var(--ke)}
  .ai b{display:inline;margin-right:6px}
}

/* Thanh tỉ trọng trong bảng phân bố */
.thanh-ti-le{display:inline-block;height:11px;min-width:2px;border-radius:2px;
             background:var(--son);opacity:.55;vertical-align:middle}

/* ------------------------------------------------------------------ trang chủ */
/* Trang chủ xem được cả khi chưa đăng nhập, nên nó phải tự giới thiệu được:
   một khối mở đầu có ô đăng nhập ngay cạnh, rồi tới các bảng dữ liệu. */
.bia{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;
     align-items:start;margin:14px 0 30px}
.bia h1{margin:0 0 10px;font-size:30px;letter-spacing:-.4px}
.bia .dan{margin:0;color:var(--muc2);font-size:16px;line-height:1.6;max-width:62ch}
.o-dangnhap{margin:0}
.o-dangnhap h3{margin:0 0 4px}
.o-dangnhap input{width:100%}
.o-dangnhap button{width:100%}
.o-dangnhap-cuoi{margin-top:26px;background:var(--nen2)}
.luoi-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.luoi-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Con số tiến độ in to vì đó là thứ duy nhất người đọc lướt sẽ dừng lại. */
.chi-so-lon{margin:0 0 8px;font-family:var(--mono);font-variant-numeric:tabular-nums;
            font-size:30px;line-height:1.1;color:var(--muc);font-weight:600}
.chi-so-lon span{font-size:14px;font-weight:400;color:var(--muc3);font-family:var(--font)}
.tien-do{height:9px;border-radius:5px;background:var(--nen2);border:1px solid var(--ke);
         overflow:hidden}
.tien-do span{display:block;height:100%;background:var(--son);opacity:.75}
.tien-do span.xong{background:var(--luc);opacity:.85}
/* Khu làm việc: danh sách việc còn dở, không phải danh sách đơn vị. */
.lam{margin:6px 0 30px}
.lam-dau{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
         flex-wrap:wrap;margin-bottom:14px}
.lam-dau h1{margin:0 0 2px}
.lam-tong{margin:0;color:var(--muc3);font-size:14px}
.lam-tong b{font-family:var(--mono);font-size:20px;color:var(--muc)}
.the.viec{margin-bottom:0}
.the.viec.gap{border-color:var(--son);background:var(--son-nhat)}
.viec-so{margin:0 0 2px;display:flex;align-items:baseline;gap:9px}
.viec-so b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;
           line-height:1.1;color:var(--muc)}
.viec-so span{font-size:15px;font-weight:600;color:var(--muc)}
.viec-muc{margin:0 0 10px;padding-left:17px;font-size:14px}
.viec-muc li{margin:3px 0;color:var(--muc2)}
.vua-lam{margin-top:16px;font-size:14px;color:var(--muc2)}
.vua-lam summary{cursor:pointer;color:var(--muc3);font-size:13px}
.vua-lam ul{margin:8px 0 0;padding-left:18px}
.vua-lam li{margin:3px 0}
/* Bảng thế giới và bảng trong nước đứng cạnh nhau: câu hỏi thật sự là
   "ta ở đâu so với họ", nên đặt hai bảng xa nhau là bắt người đọc tự nhớ. */
.doi-bang{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:0 26px}
.doi-bang h2{margin-top:22px}
@media (max-width:820px){
  .bia{grid-template-columns:1fr;gap:18px}
  .bia h1{font-size:25px}
  .doi-bang{grid-template-columns:1fr}
}

/* Ô tìm trường trên trang đối sánh: gập lại khi chưa dùng tới, mở sẵn khi
   đang có kết quả tìm hoặc đang so trực tiếp với ai đó. */
.tim-truong{padding:14px 18px}
.tim-truong summary{cursor:pointer;font-size:15px;color:var(--muc)}
.tim-truong summary b{font-weight:600}
.tim-truong[open] summary{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--ke)}
.tim-truong .nut{margin-right:6px}

/* Kho dữ liệu: bảng rộng, cuộn ngang trong khung của nó, đầu bảng dính lại
   để cuộn xuống vẫn biết đang đọc cột nào. */
.cuon.kho{max-height:74vh;overflow:auto}
.cuon.kho table{font-size:13.5px}
.cuon.kho thead th{position:sticky;top:0;z-index:2;background:var(--nen2)}
.cuon.kho thead th a{color:var(--muc2);border:0;white-space:nowrap}
.cuon.kho thead th a:hover{color:var(--son)}
.cuon.kho thead th a.dang-xep{color:var(--son);font-weight:700}
.cuon.kho td.ten{min-width:250px}
.cuon.kho caption{caption-side:bottom}
.trang-so{margin-top:12px;align-items:center}

/* ------------------------------------------------------ cổng đơn vị
   Một màn hình cho phía trường. Khác phần còn lại của hệ thống ở chỗ nó
   được đọc lướt chứ không đọc kỹ: trạng thái phải nhận ra bằng hình dạng
   và màu, trước khi người ta kịp đọc con số.                          */
.cong-dau{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding:20px 22px;background:var(--nen);border:1px solid var(--ke);
  border-radius:8px;margin-bottom:20px}
.cong-dau h1{font-size:24px;margin:0 0 2px}
.cong-dau .phu{margin:0}
.cong-dau .doi-dv{margin-left:auto;font-size:13px}

/* thẻ vị thế: một bảng xếp hạng một thẻ */
.vithe{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin-bottom:8px}
.vithe .o{background:var(--nen);border:1px solid var(--ke);border-radius:8px;
  padding:16px 18px 14px;display:flex;flex-direction:column;gap:2px}
.vithe .ten{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muc3)}
.vithe .hang{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.vithe .duoi{font-size:13px;color:var(--muc3)}
.vithe .doi{font-size:13px;font-weight:600}
.vithe .doi.len{color:var(--luc)} .vithe .doi.xuong{color:var(--son)}
.vithe .doi.yen{color:var(--muc3);font-weight:400}
.vithe .thanhvi{height:5px;border-radius:3px;background:var(--nen2);margin-top:8px;
  overflow:hidden}
.vithe .thanhvi b{display:block;height:100%;background:var(--lam)}

/* chỉ số phát triển */
.chiso{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.chiso .o{background:var(--nen);border:1px solid var(--ke);border-radius:8px;padding:14px 16px}
.chiso .nhanh{font-size:12.5px;color:var(--muc3);margin-bottom:6px;min-height:2.4em;
  display:block;line-height:1.3}
.chiso .gt{font-size:25px;font-weight:600;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chiso .gt span{font-size:13px;font-weight:400;color:var(--muc3);margin-left:3px;
  font-family:var(--font)}
.chiso .xu{font-size:12.5px;margin-top:3px;color:var(--muc3)}
.chiso .xu.tot{color:var(--luc)} .chiso .xu.xau{color:var(--son)}

/* cảnh báo */
.bao{border:1px solid var(--ke);border-left-width:4px;border-radius:6px;
  background:var(--nen);padding:13px 16px;margin-bottom:10px;
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.bao.gap{border-left-color:var(--son)} .bao.luu_y{border-left-color:var(--vang)}
.bao .noi{flex:1;min-width:240px}
.bao b{display:block;font-size:14.5px;font-weight:600}
.bao small{color:var(--muc3);font-size:13px}
.bao .nguon{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muc3)}

/* khu việc: thẻ có nút */
.viec{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.viec .o{background:var(--nen);border:1px solid var(--ke);border-radius:8px;
  padding:16px 18px;display:flex;flex-direction:column}
.viec .o h3{margin:0 0 5px;font-size:15px}
.viec .o p{flex:1;font-size:13.5px;color:var(--muc2);margin:0 0 12px}
.viec .o .di{font-size:13.5px}

.nut{display:inline-block;padding:6px 12px;border-radius:5px;background:var(--son);
  color:#fff;text-decoration:none;font-size:13.5px;border:0;cursor:pointer}
.nut:hover{filter:brightness(1.08)}
.nut.phu2{background:transparent;color:var(--lam);border:1px solid var(--ke2);padding:5px 10px}

/* trao đổi */
.tin{border:1px solid var(--ke);border-radius:8px;background:var(--nen);
  padding:13px 16px;margin-bottom:10px}
.tin.cua-tv{background:var(--nen2)}
.tin .ai-noi{font-size:12.5px;color:var(--muc3);margin-bottom:5px}
.tin .ai-noi b{color:var(--muc);font-weight:600}
.tin .noi{white-space:pre-wrap;font-size:14.5px}
.chu-de{display:flex;gap:14px;align-items:baseline;padding:11px 14px;
  border:1px solid var(--ke);border-radius:6px;background:var(--nen);margin-bottom:8px}
.chu-de a{font-weight:600;text-decoration:none}
.chu-de small{color:var(--muc3);font-size:12.5px}
.chu-de .moi{background:var(--son);color:#fff;border-radius:9px;padding:1px 7px;
  font-size:11.5px;font-weight:600}

/* Lộ trình hành động: bảng sửa được ngay trong ô. Ô nhập trong bảng phải gọn
   hơn ô nhập trong biểu mẫu, nếu không mỗi dòng cao gấp đôi và bảng hết tác
   dụng theo dõi. */



.lo-trinh tr.dong-them{background:var(--nen2)}

.lo-trinh form{margin:0}
.hd-chi-tiet{background:var(--nen);border:1px solid var(--ke);border-radius:6px;
             padding:12px 16px;margin-bottom:10px}
.hd-chi-tiet summary{cursor:pointer}
.hd-chi-tiet[open] summary{margin-bottom:10px;padding-bottom:8px;
                           border-bottom:1px solid var(--ke)}

/* Lộ trình hành động: bảng phải đọc hết được mà không kéo ngang, và nội dung
   hành động phải hiện đủ chứ không cắt cụt — đó là cột người ta đọc kỹ nhất. */
.lo-trinh-bang{overflow-x:auto}
.lo-trinh{table-layout:fixed;width:100%;min-width:0;font-size:13.5px}
.lo-trinh td,.lo-trinh th{vertical-align:top;padding:8px 9px;word-break:break-word}
.lo-trinh th:nth-child(1),.lo-trinh td:nth-child(1){width:30%}
.lo-trinh th:nth-child(2),.lo-trinh td:nth-child(2){width:12%}
.lo-trinh th:nth-child(3),.lo-trinh td:nth-child(3){width:12%}
.lo-trinh th:nth-child(4),.lo-trinh td:nth-child(4){width:21%}
.lo-trinh th:nth-child(5),.lo-trinh td:nth-child(5){width:10%}
.lo-trinh th:nth-child(6),.lo-trinh td:nth-child(6){width:8%}
.lo-trinh th:nth-child(7),.lo-trinh td:nth-child(7){width:7%}
.lo-trinh input,.lo-trinh select,.lo-trinh textarea{width:100%;padding:4px 6px;
  font-size:13px;margin:0;font-family:inherit}
/* Ô số vốn có white-space:nowrap để con số không gãy dòng. Trong bảng sửa
   được thì chính nó chặn các ô nhập xuống dòng, và ô thứ hai tràn ra ngoài
   cột — nhìn thành chồng lên cột bên cạnh. Trả lại cách xuống dòng bình
   thường cho hai ô có nhiều hơn một ô nhập. */
.lo-trinh td.o-nam,.lo-trinh td.o-tien{white-space:normal}
.lo-trinh .o-nam input,.lo-trinh .o-tien input{display:block}
.lo-trinh .o-nam > span{display:block;text-align:center}
.lo-trinh textarea{resize:vertical;line-height:1.4;margin-top:4px}
.lo-trinh textarea.phu-o{font-size:12px;color:var(--muc2)}
.lo-trinh .o-ma input{font-weight:600}
.lo-trinh .hang-ma{display:flex;gap:6px}
.lo-trinh .o-nam span{font-size:11.5px;color:var(--muc3);margin:2px 0}
.lo-trinh .o-tre,.lo-trinh .o-dat{display:block;margin-top:5px;font-size:11.5px;
  color:var(--muc3);font-weight:400}
/* Nhãn nằm trên, ô nhập xuống dòng: nhét "trễ [ ] tháng" trên một dòng thì ô
   bị bóp và cả cụm tràn ra khỏi cột. */
.lo-trinh .o-tre input,.lo-trinh .o-dat input{display:block;width:100%;margin-top:2px}
.lo-trinh button{width:100%;padding:6px 4px}
.lo-trinh .o-tien input.phu-o{margin-top:4px;font-size:12px}
.lo-trinh p{margin:3px 0 0}
.lo-trinh tr.dong-them{background:var(--nen2)}
.lo-trinh form{margin:0}
.lo-trinh caption{caption-side:bottom}
@media (max-width:900px){
  /* Hẹp quá thì cho cuộn ngang trong khung, nhưng vẫn giữ cột nội dung rộng. */
  .lo-trinh{table-layout:auto;min-width:820px}
}


/* Cột sản lượng theo lứa công bố ở cổng đơn vị. Cột dở dang gạch chéo: lứa
   của năm đang chạy mới đếm được phần năm đã qua, và một cột thấp không ghi
   chú gì trông y hệt một cú sụt sản lượng. */
.cot-nam{display:flex;gap:8px;align-items:flex-end;margin-bottom:22px;
  padding:0 2px;overflow-x:auto;max-width:100%}
.cot-nam .cot{flex:1 0 auto;min-width:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end}
/* Đường ray cao cố định là chỗ phần trăm chiều cao được phân giải. Để cột con
   ăn phần trăm của cả khối gồm cả nhãn thì mọi cột trên khoảng hai phần ba
   đều bị flex ép về cùng một chiều cao — biểu đồ trông như bảy năm không đổi
   trong khi sản lượng chênh nhau một phần ba. */
.cot-nam .ray{height:120px;width:100%;display:flex;align-items:flex-end;flex:none}
.cot-nam .cot i{display:block;width:100%;background:var(--lam);border-radius:3px 3px 0 0;
  min-height:2px;flex:none}
.cot-nam .dang-do i{background:repeating-linear-gradient(45deg,var(--lam),var(--lam) 4px,
  var(--nen) 4px,var(--nen) 8px)}
.cot-nam .tri{font-family:var(--mono);font-size:11.5px;color:var(--muc2);margin-bottom:3px;
  font-variant-numeric:tabular-nums}
.cot-nam .nam{font-family:var(--mono);font-size:11px;color:var(--muc3);margin-top:5px}
.cot-nam .phu-so{font-family:var(--mono);font-size:11px;color:var(--lam);
  font-variant-numeric:tabular-nums}
/* Công bố khoa học: dòng của lứa dở dang và dòng của cơ sở đang xem. */
tr.dong-mo td{opacity:.62}
tr.dong-toi{background:var(--son-nhat)}
tr.dong-toi td:first-child,tr.dong-toi a{font-weight:600}

/* ------------------------------------------------------------ dòng vết */
/* Nhóm › công cụ › trang, suy từ đường dẫn. Nhỏ và nhạt: nó trả lời "tôi
   đang ở đâu" cho người vừa vào sâu, không tranh chỗ với tiêu đề trang. */
nav.vet{font-size:13px;color:var(--muc3);margin:-8px 0 14px}
nav.vet ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:2px}
nav.vet li+li::before{content:"›";margin:0 7px;color:var(--ke2)}
nav.vet a{color:var(--muc2);text-decoration:none}
nav.vet a:hover{color:var(--son);text-decoration:underline}
nav.vet [aria-current]{color:var(--muc)}
.ten-goc{margin:0 0 8px;font-size:13px;color:var(--muc3)}

/* ----------------------------------------------------- danh sách dài */
/* Mỗi lần một danh sách, kèm số đếm để biết các danh sách kia có gì. Thay cho
   việc đổ mọi danh sách ra một trang dài 19–32 màn hình. */
.the-xem{display:flex;flex-wrap:wrap;gap:2px 4px;border-bottom:1px solid var(--ke);margin:0 0 14px}
.the-xem a{padding:7px 12px 8px;color:var(--muc2);text-decoration:none;font-size:14px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.the-xem a:hover{color:var(--muc)}
.the-xem a[aria-current]{color:var(--son);border-bottom-color:var(--son);font-weight:500}
.the-xem .dem{font-family:var(--mono);font-size:12px;color:var(--muc3);margin-left:6px}
.phan-trang{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13.5px;
  margin:-8px 0 22px}
.phan-trang .dem{color:var(--muc3);margin-right:auto}
.phan-trang a{text-decoration:none}
.phan-trang b{font-weight:500}
.hang > div.nut-o{flex:0 0 auto;min-width:0;align-self:flex-end}
details.gap-lai{margin:0 0 18px}
details.gap-lai > summary{cursor:pointer;font-size:14px;color:var(--muc2);width:max-content;max-width:100%}
details.gap-lai > summary:hover{color:var(--son)}
details.gap-lai[open] > summary{margin-bottom:10px}
details.the.gap-lai > summary{font-weight:600;font-size:15px;color:var(--muc)}
details.the.gap-lai{margin-bottom:12px}

/* Lời giải thích tầng ba: căn cứ phương pháp, gập lại dưới lời dẫn một dòng.
   Cảnh báo làm đổi kết luận không bao giờ nằm ở đây — nó ở .canhbao, luôn hiện. */
details.cach-doc{margin:-16px 0 22px;font-size:13.5px;color:var(--muc2);max-width:80ch}
details.cach-doc > summary{cursor:pointer;color:var(--muc3);font-size:13px;width:max-content}
details.cach-doc > summary:hover{color:var(--son)}
details.cach-doc[open] > summary{margin-bottom:6px}
details.cach-doc p{margin:0 0 8px}

/* Mục lục neo, tự sinh cho trang dài quá bốn màn hình (xem cuối base.html). */
.muc-luc{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:13px;
  padding:9px 14px;margin:18px 0 0;background:var(--nen);border:1px solid var(--ke);border-radius:6px}
.muc-luc b{font-weight:600;color:var(--muc3);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.muc-luc a{text-decoration:none}
main h2{scroll-margin-top:76px}
@media (max-width:960px){main h2{scroll-margin-top:12px}}

/* ------------------------------------------------------------ phiếu khai */
.tien-do-nhom{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0 0 16px}
.tien-do-nhom a{display:block;background:var(--nen);border:1px solid var(--ke);border-radius:6px;
  padding:8px 12px;text-decoration:none;color:var(--muc);font-size:13px}
.tien-do-nhom a:hover{border-color:var(--ke2)}
.tien-do-nhom b{float:right;margin-left:8px;font-family:var(--mono);font-weight:500;color:var(--muc2)}
.tien-do-nhom i{display:block;height:4px;border-radius:2px;background:var(--nen2);margin-top:6px;overflow:hidden}
.tien-do-nhom i::before{content:"";display:block;height:100%;width:var(--p);background:var(--luc)}
table.phieu tr.dong-nhom th{background:var(--nen2);font-size:13.5px;text-transform:none;letter-spacing:0;
  color:var(--muc);white-space:normal}
table.phieu tbody{scroll-margin-top:76px}
table.phieu td.o-gia-tri{min-width:120px}
table.phieu td.o-gia-tri input{text-align:right}
table.phieu td.o-nguon{min-width:180px}
.thanh-luu{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:10px 16px;background:var(--nen);border:1px solid var(--ke2);border-radius:6px;
  padding:10px 14px;margin-top:12px;box-shadow:0 -6px 18px rgba(0,0,0,.08);font-size:14px}
@media (max-width:700px){
  .tien-do-nhom{grid-template-columns:1fr 1fr;gap:6px}
  .tien-do-nhom a{padding:6px 9px;font-size:12.5px}
  table.phieu thead{display:none}
  table.phieu tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px;
    border-bottom:1px solid var(--ke)}
  table.phieu td{border:0;padding:0}
  table.phieu td.o-gia-tri,table.phieu td.o-nguon{min-width:0}
  table.phieu td:first-child{grid-column:1/-1}
  table.phieu td.so{text-align:left}
  table.phieu td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:11.5px;
    color:var(--muc3);margin-bottom:2px}
  table.phieu tr.dong-nhom{display:block;padding:0}
  table.phieu tr.dong-nhom th{display:block}
}

/* Thẻ công cụ chưa mở: nhạt đi, gom xuống cuối trang Tất cả công cụ. */
.viec .o.dong-lai{opacity:.62}