/* 7MODU — CSS dùng chung cho bộ công cụ (mồi câu link). Màu thương hiệu. */
:root{
  --xanh:#004B87; --xanh-dam:#033a68; --cam:#E65C00; --cam-dam:#c44d00;
  --xam:#8C8C8C; --nen:#f5f7fa; --trang:#ffffff; --line:#e3e8ef;
  --xanh-nhat:#e8f1f9; --cam-nhat:#fdece2; --xanh-lá:#1d9e75; --do:#d64545;
  --bóng:0 2px 14px rgba(3,58,104,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1c2733;background:var(--nen);line-height:1.6}
a{color:var(--xanh)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header.bar{background:var(--xanh);color:#fff}
header.bar .wrap{display:flex;align-items:center;gap:12px;padding:12px 16px}
header.bar .logo{font-weight:800;font-size:20px;letter-spacing:.5px;color:#fff;text-decoration:none}
header.bar .tag{font-size:13px;opacity:.85;margin-left:auto}
.hero{padding:28px 0 8px}
.hero h1{font-size:26px;line-height:1.25;margin:0 0 8px}
.hero p{color:#4a5a6a;margin:0 0 4px;font-size:16px}
.card{background:var(--trang);border:1px solid var(--line);border-radius:16px;box-shadow:var(--bóng);padding:20px;margin:18px 0}
label.fld{display:block;font-size:14px;color:#33485c;margin:14px 0 6px;font-weight:600}
input[type=range]{width:100%}
input[type=number],select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:#fff}
.rowval{display:flex;align-items:center;gap:10px}
.rowval .big{font-size:20px;font-weight:800;color:var(--xanh)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.opt{border:2px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;cursor:pointer;font-size:14px;font-weight:600;color:#33485c}
.opt.on{border-color:var(--xanh);background:var(--xanh-nhat);color:var(--xanh)}
.res{border-radius:14px;padding:16px;margin-top:14px}
.res h3{margin:0 0 6px;font-size:18px}
.res.ok{background:#e7f6ef;color:#0f6e56}
.res.warn{background:#fdf2dc;color:#854f0b}
.res.no{background:#fbe9e9;color:#a32d2d}
.res.info{background:var(--xanh-nhat);color:var(--xanh-dam)}
.kpi{display:inline-block;background:#fff;border-radius:10px;padding:8px 12px;margin-top:10px}
.kpi .lbl{font-size:12px;color:var(--xam)}
.kpi .num{font-size:20px;font-weight:800;color:var(--cam)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:13px 18px;font-weight:700;font-size:16px;text-decoration:none;border:none;cursor:pointer}
.btn.cam{background:var(--cam);color:#fff}
.btn.xanh{background:var(--xanh);color:#fff}
.btn.vien{background:#fff;color:var(--xanh);border:2px solid var(--xanh)}
.note{font-size:13px;color:var(--xam);margin-top:10px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0}
.tool-link{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:#1c2733;box-shadow:var(--bóng)}
.tool-link b{color:var(--xanh);font-size:16px}
.tool-link span{display:block;color:#5a6b7a;font-size:14px;margin-top:4px}
footer.ft{background:#0e2438;color:#c7d3df;margin-top:28px;padding:22px 0;font-size:14px}
footer.ft a{color:#fff}
@media(max-width:560px){.hero h1{font-size:22px}}