/* Khám sức khỏe toàn dân — xã Phú Hòa Đông
   Hướng thiết kế: "sổ khám" — nền giấy lạnh, mực xanh y tế, dòng kẻ, số dạng bảng. */

:root{
  --paper:#EDF2EF;
  --card:#fff;
  --ink:#0C231F;
  --ink2:#4B635B;
  --ink3:#7C9189;
  --line:#D5E0DA;
  --line2:#E6EDE9;
  --teal:#12A594;
  --teal-d:#0A5F57;
  --do:#E0342B;
  --vang:#E08A1E;
  --a1:#95E0D6;
  --a2:#35BCAC;
  --a3:#E0A02E;
  --a4:#0E8578;
  --a5:#0B4A44;
  --r:10px;
  --sh:0 1px 2px rgba(12,35,31,.05), 0 8px 24px -16px rgba(12,35,31,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Bricolage Grotesque','Be Vietnam Pro',sans-serif;font-weight:700;letter-spacing:-.02em;margin:0}
a{color:var(--teal-d)}
button{font:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.num,.n{font-variant-numeric:tabular-nums}

/* ================= Đăng nhập ================= */

body.auth{
  display:grid;place-items:center;min-height:100dvh;padding:24px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--line2) 31px 32px),
    var(--paper);
}
.gate-card{
  width:min(420px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 30px 26px;box-shadow:var(--sh);
}
.gate-mark{color:var(--teal);margin-bottom:18px;line-height:0}
.gate-eyebrow{
  margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);
}
.gate-title{font-size:27px;line-height:1.15;margin:0 0 10px}
.gate-sub{margin:0 0 24px;color:var(--ink2);font-size:14px}
.fld{display:block;margin:0 0 14px}
.fld span{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.fld input{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  background:#FBFDFC;color:var(--ink);font:inherit;
}
.fld input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.gate-form button{
  width:100%;padding:12px;border:0;border-radius:8px;background:var(--teal-d);color:#fff;
  font-weight:600;cursor:pointer;letter-spacing:.01em;
}
.gate-form button:hover{background:#084A44}
.gate-form button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gate-err{
  margin:0 0 14px;padding:9px 12px;border-radius:8px;font-size:13.5px;
  background:#FDEDEC;color:#9B2018;border:1px solid #F6D3D0;
}
.gate-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line2);font-size:12px;color:var(--ink3)}

/* ================= Khung ứng dụng ================= */

.top{background:var(--card);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.brand{margin:0;font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.01em}
.brand span{margin:0 7px;color:var(--ink3)}
.out{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--ink2)}
.out:hover{color:var(--do)}

.foot{padding:26px 20px 40px;font-size:12px;color:var(--ink3)}
.foot p{margin:0;max-width:70ch}

/* ---- Hero ---- */

.hero{padding:38px 0 26px}
.eyebrow{
  margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal-d);
}
.hero h1{font-size:inherit;line-height:1.05}
.hero-big{
  display:block;font-size:clamp(52px,11vw,92px);line-height:.94;
  letter-spacing:-.035em;color:var(--teal-d);font-variant-numeric:tabular-nums;
}
.hero-tail{
  display:block;font-size:clamp(21px,3.4vw,33px);line-height:1.14;
  letter-spacing:-.02em;max-width:24ch;text-wrap:balance;margin-top:2px;
}
.hero-meta{margin:14px 0 0;color:var(--ink2);font-size:14px}
.hero-meta b{color:var(--ink);font-weight:600}

/* Lược đồ 57 vạch — xem trước hình dạng phân bố */
.comb{display:flex;align-items:flex-end;gap:2px;height:64px;margin:26px 0 0}
.comb i{
  flex:1;min-width:2px;background:var(--a2);border-radius:1px 1px 0 0;
  transition:background .15s;
}
.comb i[data-xa="Phú Hòa Đông"]{background:var(--a4)}
.comb i[data-xa="Tân Thạnh Tây"]{background:var(--do)}
.comb-cap{margin:8px 0 0;font-size:11.5px;color:var(--ink3)}

/* ---- Thẻ số liệu ---- */

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px}
.kpi dt{margin:0 0 5px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.kpi dd{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:29px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi small{display:block;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;font-weight:400;color:var(--ink2);letter-spacing:0;margin-top:3px}

/* ---- Khối chung ---- */

.sec{margin:40px 0 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.sec-h h2{font-size:20px}
.sec-h p{margin:0;font-size:12.5px;color:var(--ink3);max-width:56ch}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}

/* ---- Sổ 57 ấp ---- */

.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 4px}
.tools input[type=search]{
  flex:1 1 190px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);font:inherit;font-size:13.5px;color:var(--ink);
}
.tools input[type=search]:focus{outline:2px solid var(--teal);outline-offset:1px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.seg button{
  border:0;background:transparent;padding:8px 12px;font-size:13px;font-weight:500;
  color:var(--ink2);cursor:pointer;white-space:nowrap;
}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--teal-d);color:#fff;font-weight:600}
.btn-csv{
  padding:8px 13px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;
}
.btn-csv:hover{border-color:var(--teal);color:var(--teal-d)}

.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 6px;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:2.5px;flex:none}

.ledger{list-style:none;margin:0;padding:0}
.band{
  margin:20px 0 6px;padding:0 0 5px;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
}
.band:first-child{margin-top:6px}
.row{
  display:grid;grid-template-columns:30px minmax(120px,1.15fr) minmax(0,2.4fr) 62px 52px;
  align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2);
}
.row:hover{background:#F7FAF8}
.rank{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;text-align:right}
.nm{font-size:13.5px;font-weight:600;line-height:1.3}
.nm em{
  display:block;font-style:normal;font-size:11px;font-weight:400;color:var(--ink3);
}
.bar{display:flex;height:15px;border-radius:3px;overflow:hidden;background:var(--line2)}
.bar i{height:100%;display:block}
.n{text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pct{text-align:right;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* ---- Biểu đồ phụ ---- */

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hbars{list-style:none;margin:0;padding:0}
.hbars li{display:grid;grid-template-columns:1fr 58px;gap:10px;align-items:center;padding:6px 0}
.hbars .lab{font-size:13px;line-height:1.35}
.hbars .track{height:8px;border-radius:4px;background:var(--line2);margin-top:5px;overflow:hidden}
.hbars .track i{display:block;height:100%;background:var(--teal)}
.hbars .val{text-align:right;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}

.months{display:flex;align-items:flex-end;gap:8px;height:150px;margin:6px 0 0}
.months div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.months .col{width:100%;background:var(--teal);border-radius:3px 3px 0 0;min-height:2px}
.months .mv{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2)}
.months .ml{font-size:11px;color:var(--ink3)}

.split{display:flex;height:34px;border-radius:6px;overflow:hidden;margin:2px 0 10px}
.split i{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12.5px;font-weight:600}

.note{
  margin:14px 0 0;padding:13px 15px;border-radius:var(--r);font-size:13px;line-height:1.5;
  background:#FFF8EC;border:1px solid #F2E0C2;color:#7A5310;
}
.note b{color:#5E3F09}

/* ================= Màn hình nhỏ ================= */

@media (max-width:860px){
  .kpis{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* Hai hàng: [số thứ tự | tên ấp | số lượt] rồi thanh màu bên dưới. */
  .row{grid-template-columns:22px minmax(0,1fr) auto;gap:9px;row-gap:6px;padding:9px 0}
  .rank{grid-area:1/1}
  .nm{grid-area:1/2}
  .n{grid-area:1/3}
  .bar{grid-area:2/2/2/4;height:12px}
  .pct{display:none}
  .comb{height:48px}
  .hero{padding:28px 0 20px}
  .months{gap:5px;height:120px}
  .months .mv{font-size:10.5px}
}

/* ================= In ================= */

@media print{
  body{background:#fff;font-size:11px}
  .top,.foot,.tools,.btn-csv,.out{display:none!important}
  .panel,.kpi{box-shadow:none;border-color:#bbb}
  .sec{break-inside:avoid;margin-top:18px}
  .row{break-inside:avoid;padding:3px 0}
  .hero-big{color:#000}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}