/* project.css — style dùng chung cho các trang dự án (dh3g, dhpg, …) */
:root{
  --ink:#1a2b3c;--muted:#5f6f7e;--line:#e2e8ee;--bg:#f4f6f8;--card:#fff;
  --green:#1f7a4d;--green-d:#155c39;--green-soft:#e8f4ee;
  --gold:#c8862b;--gold-soft:#fbf2e1;--navy:#123a5e;--navy-soft:#e9f0f6;--red:#c0392b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--green);text-decoration:none}
img{max-width:100%}
/* hero */
.phero{background:linear-gradient(135deg,var(--green-d),var(--green) 55%,#2c9d68);color:#fff;padding:56px 24px 48px;text-align:center}
.phero .code{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;font-weight:800}
.phero h1{font-size:34px;line-height:1.12;font-weight:800;margin:10px 0 8px}
.phero .tag{font-size:17px;opacity:.95;max-width:640px;margin:0 auto;font-weight:500}
.phero .pills{margin-top:18px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.phero .pills span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:600}
/* layout */
.pwrap{max-width:940px;margin:0 auto;padding:8px 24px 70px}
.psec{margin-top:36px}
.psec h2{font-size:22px;color:var(--navy);font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.psec h2::before{content:"";width:5px;height:22px;background:var(--gold);border-radius:3px;flex:none}
.psec p{margin-bottom:10px}
.lead{font-size:17px;color:var(--ink)}
.quote{font-style:italic;color:var(--green-d);font-weight:600;font-size:18px;border-left:4px solid var(--green);padding:4px 0 4px 16px;margin:12px 0}
.muted{color:var(--muted)}
/* stat row */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat .n{font-size:24px;font-weight:800;color:var(--green)}
.stat.navy .n{color:var(--navy)}.stat.gold .n{color:var(--gold)}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:3px}
/* bullet chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips span{background:var(--green-soft);color:var(--green-d);border-radius:20px;padding:5px 13px;font-size:13.5px;font-weight:600}
/* 4 vòng tròn diagram */
.vtron{display:flex;justify-content:center;margin:10px 0 18px}
.vtron svg{width:100%;max-width:360px;height:auto}
.vlabel{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.vtron-wrap{position:relative;width:100%;max-width:360px;margin:0 auto}
/* 4 columns */
.cols4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:8px}
.col{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;border-top:4px solid var(--green)}
.col.c1{border-top-color:var(--navy)}.col.c2{border-top-color:#2c9d68}.col.c3{border-top-color:var(--gold)}.col.c4{border-top-color:var(--green-d)}
.col h3{font-size:15px;color:var(--navy);margin-bottom:2px}
.col .cs{font-size:12px;color:var(--muted);margin-bottom:9px}
.col ol{margin-left:18px;font-size:13.5px}
.col ol li{margin-bottom:4px}
/* callout box */
.callout{background:var(--gold-soft);border:1px solid #f0dfbd;border-radius:14px;padding:18px 20px;margin-top:14px}
.callout h3{font-size:15.5px;color:var(--gold);margin-bottom:8px}
.callout ul{margin-left:18px;font-size:14px}
.callout li{margin-bottom:5px}
.callout .em{font-style:italic;color:var(--green-d);font-weight:600;margin-top:8px}
/* contact */
.contact{background:var(--navy);color:#e6eef5;border-radius:14px;padding:20px 24px;margin-top:24px;text-align:center}
.contact b{color:#fff}
.contact a{color:#9fc7b3}
/* EN block */
.enblock{background:var(--navy-soft);border:1px solid #caddec;border-radius:14px;padding:18px 20px;margin-top:14px}
.enblock .flag{font-size:12px;font-weight:800;color:var(--navy);letter-spacing:.05em;margin-bottom:6px}
.enblock p{color:#33475b;margin-bottom:6px}
/* footer */
.pfooter{border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;text-align:center;padding:22px}
.back{display:inline-block;margin:18px 0 0;font-weight:700}
@media(max-width:560px){.phero h1{font-size:26px}}