/* Bàn Tính: kiểu "phiếu lương" sáng, chữ xanh than, tô vàng như bút dạ quang, thêm màu nhấn cho từng công cụ. */
:root {
  --paper: #F6F7F4;
  --surface: #FFFFFF;
  --ink: #16202E;
  --muted: #4A5565;
  --faint: #8A94A3;
  --line: #DDE1E6;
  --soft: #EEF0EC;
  --accent: #0B6B5D;
  --accent-ink: #084C42;
  --marker: #FFD84D;
  --marker-soft: #FFF6CC;
  --c-net: #22C493;
  --c-ins: #3B82F6;
  --c-tax: #F59E0B;
  --mark-from: 58%;
  --figure-ink: var(--ink);
  --today-tone: #6D28D9;
  --seg-on-bg: #16202E;
  --seg-on-ink: #FFFFFF;
  --input-border: #C5CBD3;
  --input-bg: #FFFFFF;
  --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  /* Chữ đều độ rộng cho nhãn và cột số; dùng font sẵn của máy để không tải thêm. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --kpi-bg: #FBFBF9;
  --c-warn: #B45309;
  --c-up: #0B6B5D;
  color-scheme: light;
}
/* Chế độ tối: theo máy người xem, trừ khi họ bấm chọn sáng; hoặc khi họ bấm chọn tối.
   Ở nền tối, số kết quả chuyển sang chữ vàng, vạch tô chỉ còn một dải mỏng bên dưới để chữ không chìm. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10151C; --surface: #171E27; --ink: #E6EAF0; --muted: #A3ADBB; --faint: #7C8796;
    --line: #2A3340; --soft: #1F2731; --accent: #43C59E; --accent-ink: #7BDDBF;
    --marker: rgba(255, 216, 77, .38); --marker-soft: rgba(255, 216, 77, .12); --mark-from: 84%; --figure-ink: #FFD84D;
    --today-tone: #C4B5FD; --seg-on-bg: #E6EAF0; --seg-on-ink: #10151C; --input-border: #2A3340; --input-bg: #10151C;
    --kpi-bg: #121922; --c-warn: #FBBF24; --c-up: #43C59E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #10151C; --surface: #171E27; --ink: #E6EAF0; --muted: #A3ADBB; --faint: #7C8796;
  --line: #2A3340; --soft: #1F2731; --accent: #43C59E; --accent-ink: #7BDDBF;
  --marker: rgba(255, 216, 77, .38); --marker-soft: rgba(255, 216, 77, .12); --mark-from: 84%; --figure-ink: #FFD84D;
  --today-tone: #C4B5FD; --seg-on-bg: #E6EAF0; --seg-on-ink: #10151C; --input-border: #2A3340; --input-bg: #10151C;
  --kpi-bg: #121922; --c-warn: #FBBF24; --c-up: #43C59E;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--font);
  font-variant-numeric: tabular-nums;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }
mark { background: linear-gradient(transparent var(--mark-from), var(--marker) var(--mark-from), var(--marker) 94%, transparent 94%); color: inherit; padding: 0 .08em; }

/* Đầu trang */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; padding-top: .8rem; padding-bottom: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.2rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: .5rem; background: #16202E; color: #FFD84D; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.brand { order: 1; }
.top nav { order: 2; margin-left: auto; display: flex; gap: .25rem; font-size: .95rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.theme-toggle { order: 3; flex: none; width: 2.4rem; height: 2.4rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-toggle:hover { background: var(--soft); }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { color: var(--muted); text-decoration: none; padding: .45rem .75rem; border-radius: .5rem; white-space: nowrap; }
.top nav a:hover { color: var(--ink); background: var(--soft); }
.top nav a[aria-current] { color: var(--ink); background: var(--soft); font-weight: 600; }

/* Tiêu đề */
main { padding: 2.5rem 0 4rem; }
h1 { font-size: clamp(1.9rem, 5.2vw, 3.1rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .7rem; font-weight: 800; }
h2 { font-size: 1.45rem; line-height: 1.3; margin: 2.75rem 0 .7rem; letter-spacing: -.015em; }
h3 { font-size: 1.1rem; margin: 1.75rem 0 .4rem; }
.lede { color: var(--muted); margin: 0 0 1.75rem; max-width: 38rem; font-size: 1.08rem; }
.eyebrow { margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
p, li { max-width: 42rem; }

/* Trang chủ */
.hero { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; justify-content: space-between; }
.hero > div { flex: 1 1 32rem; min-width: 0; }
.hero .lede { margin-bottom: 0; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; flex: 0 1 19rem; font-size: .95rem; }
.trust li { display: flex; gap: .6rem; align-items: center; }
.trust svg { color: var(--accent); flex: none; }
.tools-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; }
.tools-list li { max-width: none; }
.tool-card { height: 100%; display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tool-card:hover { color: var(--ink); border-color: var(--tone); box-shadow: 0 6px 18px rgba(22, 32, 46, .08); transform: translateY(-2px); }
.tool-card .ic { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.tool-card strong { font-size: 1.05rem; }
.tool-card span:last-child { font-size: .9rem; line-height: 1.5; color: var(--muted); }
.home-bottom { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; align-items: flex-start; }
.home-bottom > div { flex: 2 1 28rem; min-width: 0; }
.posts-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.posts-list li { border-bottom: 1px solid var(--line); max-width: none; }
.posts-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.posts-list a:hover { color: var(--accent); }
.posts-list .meta { margin: 0; white-space: nowrap; font-weight: 400; }
.today { flex: 1 1 16rem; margin-top: 2.75rem; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--today-tone); border-radius: 1rem; padding: 1.1rem 1.25rem; }
.today p { margin: 0; }
.today .eyebrow { color: var(--today-tone); margin-bottom: .3rem; }
.today-date { font-weight: 700; font-size: 1.1rem; }
.today-lunar { color: var(--muted); font-size: .95rem; margin-top: .2rem !important; }

/* Công cụ */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.4rem; box-shadow: 0 2px 0 var(--line); }
.seg { display: inline-flex; background: var(--soft); border-radius: .7rem; padding: 4px; margin-bottom: 1.1rem; flex-wrap: wrap; }
.seg label { position: relative; padding: .5rem 1rem; border-radius: .55rem; cursor: pointer; font-size: .93rem; font-weight: 600; color: var(--muted); }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--seg-on-bg); color: var(--seg-on-ink); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem 1rem; }
.fields[hidden] { display: none; }
.f { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.f.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink); font-size: .95rem; font-weight: 400; }
input, select {
  font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: .6rem; padding: .65rem .8rem; width: 100%;
  font-variant-numeric: tabular-nums;
}
input.money { font-weight: 700; }
.f.check input { width: auto; }
.more { margin-top: 1rem; }
.more summary { font-size: .92rem; }
.more .fields { margin-top: .9rem; }

/* Kết quả: con số chính tô như bút dạ quang trên phiếu lương */
.result { display: block; margin-top: 1.5rem; }
/* Thẻ kết quả: nhãn chữ máy in hoa, số lớn, huy hiệu so sánh, dòng ngữ cảnh, thanh màu */
.kpi { background: var(--kpi-bg); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.15rem 1.1rem; margin-bottom: 1rem; }
.kpi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.hero-label { margin: 0; color: var(--muted); font: 600 .74rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.badge { display: inline-flex; align-items: center; padding: .14rem .55rem; border-radius: 999px; font: 600 .76rem/1.5 var(--mono);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); white-space: nowrap; }
.badge.warn { color: var(--c-warn); background: color-mix(in srgb, var(--c-warn) 12%, transparent); border-color: color-mix(in srgb, var(--c-warn) 30%, transparent); }
.badge.up { color: var(--c-up); }
.kpi-sub { margin: 0 0 .9rem; color: var(--muted); font-size: .88rem; }
.figure { margin: .25rem 0 .35rem; font-size: clamp(2.1rem, 8vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--figure-ink); }
.figure .fx { background: linear-gradient(transparent var(--mark-from), var(--marker) var(--mark-from), var(--marker) 94%, transparent 94%); padding: 0 .1em; }
.figure:last-child, .kpi-sub:last-child { margin-bottom: 0; }
.figure + .split { margin-top: .6rem; }
.kpi .legend { margin-bottom: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.note { color: var(--muted); font-size: .9rem; margin: .5rem 0 0; }
.split { display: flex; height: .75rem; border-radius: 999px; overflow: hidden; background: var(--soft); gap: 2px; }
.split span { flex: 1 1 0; min-width: 4px; }
.seg-net { background: var(--c-net); }
.seg-ins { background: var(--c-ins); }
.seg-tax { background: var(--c-tax); }
.legend { list-style: none; margin: .6rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.legend b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: .95em; }
.slip { margin: 0; }
.slip div { display: flex; align-items: baseline; gap: .5rem; padding: .32rem 0; }
.slip div::before { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--line); }
.slip dt { order: 0; color: var(--muted); }
.slip dd { order: 2; margin: 0; text-align: right; white-space: nowrap; font-family: var(--mono); font-size: .93em; }
.slip .sub dt, .slip .sub dd { color: var(--ink); font-weight: 600; }
.slip .child { padding-left: 1rem; font-size: .92rem; }
.slip .child dt, .slip .child dd { color: var(--muted); }
.slip .child dt::before { content: "· "; color: var(--c-ins); font-weight: 700; }
.slip .total { border-top: 2px solid var(--ink); margin-top: .35rem; padding-top: .6rem; font-weight: 800; font-size: 1.08rem; }
.slip .total dt { color: var(--ink); }
.slip .aside { font-size: .88rem; }
.brackets { margin: .4rem 0 .8rem; max-height: none; }
.brackets td:first-child { text-align: center; width: 3rem; }
.brackets th:nth-child(2), .brackets td:nth-child(2) { text-align: left; }
.brackets tr.on { background: var(--marker-soft); }
.brackets tr.on td:last-child { font-weight: 700; color: var(--ink); }
.brackets tr.off { color: var(--faint); }
details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.scroll { overflow-x: auto; margin-top: .5rem; max-height: 26rem; overflow-y: auto; border: 1px solid var(--line); border-radius: .7rem; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .45rem .65rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-weight: 600; }
th:first-child, td:first-child { text-align: left; }
.scroll td { font-family: var(--mono); font-size: .95em; }
.brackets td:nth-child(2) { font-family: var(--font); font-size: 1em; }
.posts { padding-left: 1.1rem; }
.posts li { margin: .35rem 0; }

/* Bài viết, nhật ký */
.meta { color: var(--muted); font-size: .9rem; margin: 0 0 1.5rem; }
.prose { line-height: 1.75; }
.prose table { margin: 1rem 0; }
.callout { border-left: 4px solid var(--marker); background: var(--surface); padding: .8rem 1rem; color: var(--muted); font-size: .95rem; margin: 2rem 0 0; border-radius: 0 .6rem .6rem 0; }
.log { list-style: none; padding: 0; border-left: 2px solid var(--line); margin-left: .3rem; }
.log li { position: relative; padding: 0 0 1.25rem 1.25rem; }
.log li::before { content: ""; position: absolute; left: -6px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.log time { display: block; color: var(--muted); font-size: .88rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; margin: 1.25rem 0 2rem; }
.stats div { background: var(--surface); padding: .9rem 1rem; }
.stats b { display: block; font-size: 1.35rem; }
.stats span { color: var(--muted); font-size: .85rem; }
.sources { font-size: .88rem; color: var(--muted); }

/* Giá xăng dầu */
.fuel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 1.25rem 0 .5rem; }
@media (max-width: 62rem) { .fuel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fuel-grid .kpi { padding: .9rem .95rem 1rem; min-width: 0; }
.fuel-grid .badge { white-space: normal; }
.scroll td:first-child { font-family: var(--font); }
.fuel-grid .kpi { margin: 0; background: var(--surface); }
.figure.sm { font-size: clamp(1.7rem, 5.5vw, 2.15rem); }
.fuel-summary { font-size: 1.02rem; margin: 1rem 0 0; }
.chart-box { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: .75rem .5rem .25rem; margin: .5rem 0 1rem; }
.fuel-chart { display: block; width: 100%; height: auto; }
.fuel-chart .g { stroke: var(--line); stroke-width: 1; }
.fuel-chart .ax { fill: var(--faint); font: 11.5px var(--mono); }
.fuel-chart .lg { fill: var(--muted); font: 600 12px var(--font); dominant-baseline: middle; }
.fuel-chart .mk { stroke: var(--faint); stroke-dasharray: 4 4; }
.fuel-chart polyline { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.fuel-chart .l1 { stroke: var(--c-net); fill: var(--c-net); }
.fuel-chart .l2 { stroke: var(--c-ins); fill: var(--c-ins); }
.fuel-chart .l3 { stroke: var(--c-tax); fill: var(--c-tax); }
.fuel-chart polyline.l1, .fuel-chart polyline.l2, .fuel-chart polyline.l3 { fill: none; }
.fuel-history { max-height: 34rem; }
.fuel-history td { line-height: 1.35; }
.dn-up { color: #C2410C; font-size: .85em; }
.dn-down { color: var(--accent); font-size: .85em; }
.meta-inline { color: var(--faint); font-size: .82em; font-family: var(--font); }
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 0; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 600; }

.foot { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.foot .wrap { padding-top: 1.4rem; padding-bottom: 2rem; }
.foot p { margin: .3rem 0; }

@media (max-width: 40rem) {
  .theme-toggle { order: 2; margin-left: auto; }
  .top nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .tool { padding: 1rem; }
  .figure { margin-bottom: .6rem; }
  .tools-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
  .tool-card { padding: .9rem; gap: .4rem; }
  .tool-card .ic { width: 2.4rem; height: 2.4rem; }
  .tool-card strong { font-size: .98rem; }
  .tool-card span:last-child { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Trang thuế hộ kinh doanh (hkd.mituz.app) */
.hint { font-weight: 400; font-size: .82rem; color: var(--faint); min-height: 1.2em; }
.tool tr.on { background: var(--marker-soft); }
.tool tr.on td:last-child { font-weight: 700; color: var(--ink); }
.duties { padding-left: 1.2rem; margin: .4rem 0 0; }
.duties li { margin: .3rem 0; }
.result h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.signup { margin: 2rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.signup h2 { margin-top: 0; }
.signup .fields { grid-template-columns: minmax(0, 28rem); }
.signup .f.check { margin-top: .8rem; }
.btn { font: inherit; font-weight: 700; color: #fff; background: var(--accent); border: 0; border-radius: .6rem; padding: .7rem 1.2rem; cursor: pointer; }
.btn:hover { background: var(--accent-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }