/* mt-video — nền chung. Tối giản, nền sáng, không đặt nền phía dưới chữ. */
:root {
  --giay: #ffffff;
  --nen: #f6f7f9;
  --vien: #e3e6ea;
  --chu: #14181d;
  --chu-mo: #5c6673;
  --nhan: #1268d1;
  --nhan-dam: #0d4ea3;
  --tot: #0f8a5f;
  --canh: #b26a00;
  --hong: #c4341f;
  --bong: 0 1px 2px rgba(20, 24, 29, 0.05), 0 8px 24px -12px rgba(20, 24, 29, 0.12);
  --tron: 10px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --giay: #171a1f;
    --nen: #0f1114;
    --vien: #2a2f36;
    --chu: #e9ecf0;
    --chu-mo: #9aa4b0;
    --nhan: #5aa5f7;
    --nhan-dam: #8cc2ff;
    --tot: #45c08c;
    --canh: #e0a244;
    --hong: #f0705a;
    --bong: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--chu);
  background: var(--nen);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--nhan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: 30px; font-weight: 680; }
h2 { font-size: 20px; font-weight: 640; }
h3 { font-size: 16px; font-weight: 620; }
p { margin: 0 0 12px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
pre {
  background: var(--giay);
  border: 1px solid var(--vien);
  border-radius: var(--tron);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 14px;
}
code:not(pre code) {
  background: color-mix(in srgb, var(--nhan) 10%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
}

.khung { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
.hep { max-width: 560px; }
.the {
  background: var(--giay);
  border: 1px solid var(--vien);
  border-radius: var(--tron);
  padding: 18px;
  box-shadow: var(--bong);
}
.luoi { display: grid; gap: 14px; }
@media (min-width: 720px) { .luoi.c2 { grid-template-columns: 1fr 1fr; } .luoi.c3 { grid-template-columns: repeat(3, 1fr); } }

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--nhan);
  background: var(--nhan);
  color: #fff;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, transform 0.08s;
}
.nut:hover { background: var(--nhan-dam); border-color: var(--nhan-dam); }
.nut:active { transform: translateY(1px); }
.nut:disabled { opacity: 0.5; cursor: not-allowed; }
.nut.phu { background: var(--giay); color: var(--chu); border-color: var(--vien); }
.nut.phu:hover { background: var(--nen); border-color: var(--chu-mo); }
.nut.do { background: var(--hong); border-color: var(--hong); }
.nut.nho { min-height: 32px; padding: 0 11px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

label { display: block; font-size: 13px; font-weight: 560; color: var(--chu-mo); margin-bottom: 5px; }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--vien);
  border-radius: 8px;
  background: var(--giay);
  color: var(--chu);
  font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--nhan); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nhan) 18%, transparent); }
.o { margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--vien); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--chu-mo); font-weight: 600; }
td.so, th.so { text-align: right; font-variant-numeric: tabular-nums; }

.nhan-nho {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--vien);
  color: var(--chu-mo);
}
.nhan-nho.tot { color: var(--tot); border-color: color-mix(in srgb, var(--tot) 40%, transparent); }
.nhan-nho.canh { color: var(--canh); border-color: color-mix(in srgb, var(--canh) 40%, transparent); }
.nhan-nho.hong { color: var(--hong); border-color: color-mix(in srgb, var(--hong) 40%, transparent); }

.mo { color: var(--chu-mo); }
.nho { font-size: 13px; }
.giua { text-align: center; }
.hang { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.day { flex: 1 1 auto; }

.bao {
  border-radius: var(--tron);
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--vien);
  background: var(--giay);
  margin-bottom: 14px;
}
.bao.loi { border-color: color-mix(in srgb, var(--hong) 45%, transparent); color: var(--hong); }
.bao.tot { border-color: color-mix(in srgb, var(--tot) 45%, transparent); color: var(--tot); }
.bao.canh { border-color: color-mix(in srgb, var(--canh) 45%, transparent); color: var(--canh); }

.thanh { height: 6px; border-radius: 999px; background: var(--vien); overflow: hidden; }
.thanh > i { display: block; height: 100%; background: var(--nhan); border-radius: 999px; }
.thanh > i.canh { background: var(--canh); }
.thanh > i.hong { background: var(--hong); }

header.dau {
  border-bottom: 1px solid var(--vien);
  background: var(--giay);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.dau .khung { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.hieu { font-weight: 700; letter-spacing: -0.02em; font-size: 16px; color: var(--chu); }
.hieu span { color: var(--nhan); }
nav.men { display: flex; gap: 4px; flex-wrap: wrap; }
nav.men a { padding: 6px 10px; border-radius: 7px; font-size: 14px; color: var(--chu-mo); font-weight: 540; }
nav.men a:hover { background: var(--nen); text-decoration: none; color: var(--chu); }
nav.men a[aria-current='page'] { color: var(--nhan); background: color-mix(in srgb, var(--nhan) 10%, transparent); }