/* ============================================================
   base.css — reset, chữ, nền trang, vùng đang chọn bằng bàn phím.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--n-nen);
  color: var(--ch-chinh);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--cc-4);
  line-height: var(--dc-thuong);
  font-weight: var(--dam-thuong);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--dc-chat);
  font-weight: var(--dam-manh);
  color: var(--ch-chinh);
}

h1 { font-size: var(--cc-7); }
h2 { font-size: var(--cc-6); }
h3 { font-size: var(--cc-5); }
h4 { font-size: var(--cc-3); font-weight: var(--dam-vua); color: var(--ch-phu); }

p { margin: 0 0 var(--kc-5); max-width: 78ch; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ch-lien-ket);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }

ul, ol { margin: 0 0 var(--kc-5); padding-left: var(--kc-7); }
li { margin-bottom: var(--kc-2); }

img, svg { max-width: 100%; }

hr {
  border: 0;
  border-top: var(--vien) solid var(--v-nhat);
  margin: var(--kc-8) 0;
}

code, .so-ky-thuat {
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 0.92em;
}

/* Vùng đang chọn bằng bàn phím — hiện rõ, không tắt outline */
:focus-visible {
  outline: 2px solid var(--v-tieu-diem);
  outline-offset: 1px;
  border-radius: var(--bo-1);
}

::selection {
  background: var(--tt-tin-nen);
  color: var(--ch-chinh);
}

/* --- Chữ số đều bề ngang cho mọi cột số ---------------------------- */
.so,
td.so,
th.so,
input[type="number"],
.bang td.so,
.bang th.so {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Lớp trợ giúp --------------------------------------------------- */
.chu-phu { color: var(--ch-phu); }
.chu-mo { color: var(--ch-mo); }
.chu-nho { font-size: var(--cc-2); }
.chu-nho-hon { font-size: var(--cc-1); }
.dam-vua { font-weight: var(--dam-vua); }
.don-vi { color: var(--ch-mo); font-size: var(--cc-2); margin-left: 2px; }
.an { display: none !important; }
.chi-doc-man-hinh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Biểu tượng.
   Thuộc tính nét phải đặt trên chính thẻ <svg> dùng icon: nội dung của
   <use> được nhân bản vào thẻ này, không thừa kế từ file sprite. */
.ico {
  width: 16px; height: 16px;
  flex: none;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-14 { width: 14px; height: 14px; }
.ico-18 { width: 18px; height: 18px; }
.ico-20 { width: 20px; height: 20px; }
.ico-28 { width: 28px; height: 28px; }