:root {
  color-scheme: light;
  --mau-navy: #00143e;
  --mau-xanh: #0068fe;
  --mau-xanh-dam: #0852e8;
  --mau-xanh-troi: #0db3fe;
  --mau-nhan: #005ad8;
  --nen: #f6f9ff;
  --nen-noi: #ffffff;
  --chu: #071a38;
  --chu-phu: #52627a;
  --vien: #d8e4f5;
  --nen-mem: #eaf3ff;
  --nguy-hiem: #a52a2a;
  --thanh-cong: #11623e;
  --bong: 0 18px 55px rgb(0 20 62 / 10%);
  --ban-kinh: 18px;
  --do-doc: 1.6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--chu);
  background: var(--nen);
  line-height: var(--do-doc);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --nen: #07152b;
    --nen-noi: #0e213e;
    --chu: #f5f8ff;
    --chu-phu: #b8c5d9;
    --vien: #29405e;
    --nen-mem: #142b4d;
    --mau-nhan: #8cc5ff;
    --nguy-hiem: #ffb4b4;
    --thanh-cong: #7ee2b1;
    --bong: 0 18px 55px rgb(0 0 0 / 28%);
  }
}