/* Góc học web — bản hoàn chỉnh của lộ trình CSS */
:root { --ink:#203047; --muted:#425a73; --brand:#125a82; --border:#cbd8e5; --surface:#f1f6fb; --radius:.75rem; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; padding:1rem; font-family:Arial,sans-serif; line-height:1.65; color:var(--ink); background:#fff; }
body > header,body > main,body > footer,body > .skip-link { max-width:68rem; margin-inline:auto; }
a { color:var(--brand); text-underline-offset:.2em; }
img { max-width:100%; height:auto; }
h1,h2,h3 { line-height:1.25; overflow-wrap:break-word; }
h1 { font-size:clamp(2rem,5vw,3.25rem); }
.skip-link { display:block; margin-block:.5rem; width:fit-content; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:1rem; border-bottom:1px solid var(--border); }
.brand { font-weight:bold; font-size:1.35rem; text-decoration:none; }
.site-nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.site-nav a { padding:.4rem; }
.hero { margin-block:1.5rem; padding:clamp(1rem,4vw,3rem); background:var(--surface); border-radius:var(--radius); }
.eyebrow { font-size:.8rem; font-weight:bold; letter-spacing:.08em; color:var(--brand); }
.intro { font-size:1.125rem; max-width:58ch; color:var(--muted); }
.button,button { display:inline-block; padding:.65rem 1rem; background:var(--brand); color:white; border:1px solid var(--brand); border-radius:.4rem; font:inherit; text-decoration:none; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:1rem; }
.card { min-width:0; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:.4rem; }
.card h3 { margin-block:1rem .5rem; }
.card p { color:var(--muted); }
.reading { max-width:68ch; }
.reading img { display:block; }
figure { margin-inline:0; }
figcaption,.help,.form-note { color:var(--muted); }
.contact-form { display:grid; gap:.6rem; max-width:40rem; }
.contact-form input,.contact-form textarea { width:100%; padding:.75rem; border:1px solid #8aa1b6; border-radius:.4rem; font:inherit; color:inherit; }
.contact-form button { justify-self:start; }
button:disabled { background:#e6ebf0; color:#526375; border-color:var(--border); cursor:not-allowed; }
:focus-visible { outline:3px solid #a64e00; outline-offset:3px; }
.site-footer { margin-top:3rem; padding-block:1.5rem; border-top:1px solid var(--border); color:var(--muted); }
@media(hover:hover) { .button:hover,button:not(:disabled):hover { background:#0c4261; } }