/* site.css — style dùng chung cho các trang bộ nhận diện THCS Hợp Thịnh Số 3 */
:root{
  --nen:#F7F4EC; --the:#FFFFFF; --muc:#29343A; --muc-nhat:#5A6B74;
  --xanh:#155A78; --la:#2D8875; --vang:#C69A45; --vang-dam:#8F6A27;
  --do:#A33A3A; --ke:#C5D6DD; --nen-nhat:#E7EEF1;
  --body:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--muc);font-family:var(--body);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
.khung{max-width:920px;margin:0 auto;padding:0 28px 72px}
@media (max-width:680px){.khung{padding:0 16px 56px}}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--xanh);font-weight:600;margin:44px 0 10px}
h1{font-size:clamp(28px,5vw,40px);font-weight:800;line-height:1.12;margin:0 0 14px;color:var(--xanh);text-wrap:balance}
h2{font-size:21px;font-weight:700;color:var(--xanh);margin:48px 0 8px;text-wrap:balance}
p{max-width:70ch}
.sub{color:var(--muc-nhat);margin:0 0 22px;max-width:66ch}
.badge{display:inline-block;background:var(--vang-dam);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.06em;padding:4px 12px;border-radius:3px}
.the-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.the{background:var(--the);border:1px solid var(--ke);border-radius:6px;padding:20px 22px;
  text-decoration:none;color:var(--muc);display:block}
a.the:hover{border-color:var(--xanh);box-shadow:0 2px 10px rgba(21,90,120,.12)}
.the h3{margin:0 0 6px;font-size:16px;color:var(--xanh)}
.the p{font-size:13.5px;color:var(--muc-nhat);margin:0;max-width:none}
.the .mono{font-family:var(--mono);font-size:12px;color:var(--muc-nhat)}
.o-logo{background:var(--the);border:1px solid var(--ke);border-radius:6px;padding:26px;
  display:flex;align-items:center;justify-content:center}
.o-logo img{max-width:100%;height:auto;display:block}
.o-toi{background:#29343A}
.nut{display:inline-block;background:var(--xanh);color:#F7F4EC;text-decoration:none;font-weight:600;
  font-size:13.5px;padding:9px 18px;border-radius:4px;margin:4px 6px 0 0}
.nut:hover{background:#124d67}
.nut.phu{background:var(--nen-nhat);color:var(--xanh)}
.ghichu{background:var(--nen-nhat);border-left:4px solid var(--vang-dam);border-radius:4px;
  padding:14px 18px;font-size:14px;color:var(--muc-nhat);margin-top:26px;max-width:none}
.ghichu b{color:var(--muc)}
table{border-collapse:collapse;width:100%;margin:18px 0;background:var(--the);font-size:14px}
th{background:var(--xanh);color:#fff;text-align:left;font-weight:600;padding:9px 14px}
td{border-bottom:1px solid var(--ke);padding:9px 14px;vertical-align:top}
td.so,th.so{font-family:var(--mono);font-size:13px;white-space:nowrap}
tr:nth-child(even) td{background:var(--nen-nhat)}
footer{margin-top:64px;border-top:1px solid var(--ke);padding-top:18px;font-size:12.5px;color:var(--muc-nhat)}
.bang-cuon{overflow-x:auto}