:root {
  --nen: #f4f6f6; --mat: #ffffff; --chu: #15211f; --phu: #56635f; --vien: #d6dedb;
  --nhan: #0f6b5c; --nhan-chu: #ffffff; --nhan-nhat: #e1f0ec;
  --tot: #1f7a46; --tot-nen: #e1f2e7; --cu: #8a5a00; --cu-nen: #fbefd2; --hong: #a3352a; --hong-nen: #f8e1dd;
  --f: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0f1615; --mat: #161f1e; --chu: #e2eae7; --phu: #9aa9a4; --vien: #2a3734;
    --nhan: #5cc2ad; --nhan-chu: #0b1514; --nhan-nhat: #173430;
    --tot: #6fd19a; --tot-nen: #173325; --cu: #e6b45a; --cu-nen: #3a2c10; --hong: #f08f83; --hong-nen: #3d1d19;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nen); color: var(--chu); font: 15px/1.55 var(--f); }
[hidden] { display: none !important; }
.dau { background: var(--mat); border-bottom: 1px solid var(--vien); }
.dau-trong, .than { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.dau-trong { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.thuong-hieu { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .01em; }
.dau-cham { width: 12px; height: 12px; border-radius: 3px; background: var(--nhan); }
.ai { color: var(--phu); font-size: 13px; overflow-wrap: anywhere; }
.ai-khung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nut-nho { padding: 4px 10px; font-size: 13px; }
.dong-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.dong-form label { width: 100%; font-size: 13px; color: var(--phu); }
.dong-form input { font: inherit; color: var(--chu); background: var(--mat); border: 1px solid var(--vien); border-radius: 6px; padding: 8px 10px; min-width: 0; flex: 1 1 200px; }
.dong-form input:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.than { padding-block: 24px 48px; display: grid; gap: 20px; }
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; text-wrap: balance; }
.phu { color: var(--phu); margin: 0; }
.khoi-thong-bao { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; padding: 20px; max-width: 640px; display: grid; gap: 8px; }
.khoi-thong-bao p { margin: 0; }
.tieu-de-trang { margin-bottom: 16px; }
.loc { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 14px; }
.loc label { display: grid; gap: 4px; font-size: 13px; color: var(--phu); }
.loc input { font: inherit; color: var(--chu); background: var(--mat); border: 1px solid var(--vien); border-radius: 6px; padding: 7px 9px; min-width: 0; }
.nut { font: inherit; font-weight: 600; border: 1px solid var(--nhan); background: var(--nhan); color: var(--nhan-chu); border-radius: 6px; padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.nut-phu { background: transparent; color: var(--nhan); }
.nut:focus-visible, .loc input:focus-visible, a:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
#tai-them { margin-top: 12px; }
.khung-bang { overflow-x: auto; background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; }
.bang { width: 100%; border-collapse: collapse; font-size: 14px; }
.bang th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--phu); padding: 10px 12px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang td { padding: 9px 12px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang tr:last-child td { border-bottom: 0; }
.bang .so, .thoi-diem { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bang .so { text-align: right; }
.noi-dung { max-width: 520px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cau-truc { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--phu); }
.anh-nho { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vien); display: block; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.chip.tot { background: var(--tot-nen); color: var(--tot); }
.chip.cu { background: var(--cu-nen); color: var(--cu); }
.chip.hong { background: var(--hong-nen); color: var(--hong); }