/* Bài 1 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.65;
  color: #203047;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem;
}

/* Bài 2 */
.intro { font-size: 1.125rem; color: #425a73; }
.card h3 { color: #173957; }
.card a { text-decoration-thickness: 0.12em; }
.site-nav > a { color: #125a82; }

/* Bài 3 */
.notice { color: #1d4ed8; }
.notice.is-important { color: #9f1239; }
/* Dòng sau vẫn không thắng selector có hai class ở trên. */
.notice { color: #166534; }

/* Bài 4 */
*, *::before, *::after { box-sizing: border-box; }
.sample-box {
  width: 240px;
  max-width: 100%;
  padding: 20px;
  border: 4px solid #247c9c;
  margin-block: 1rem;
  background: #e9f5fb;
}

/* Bài 5 */
.measure-box {
  width: min(100%, 32rem);
  padding: 1rem;
  border: 1px solid #a8bfd1;
  margin-block: 1rem;
}
.measure-box p { margin-block: 0 1em; }

/* Bài 6 */
.reading, .type-sample { max-width: 65ch; }
.type-sample { font-size: 1.125rem; line-height: 1.75; }
.type-sample h3 { line-height: 1.25; margin-block: 1.5em 0.5em; }
button, input, select, textarea { font: inherit; }

/* Bài 7 */
.hero { background: #e9f4ff; border: 1px solid #b8d6ee; border-radius: 1rem; padding: 1.5rem; }
.eyebrow { color: #145b7c; font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.card { border: 1px solid #cbd8e5; border-radius: .75rem; padding: 1rem; background: #fff; }
.color-sample { padding: 1rem; color: #123c54; background: #dff2f1; border-left: .35rem solid #19746e; }