/* Giao diện dùng chung cho mọi trang (công cụ + hướng dẫn) theo kit TỐI GIẢN toàn danh mục
   (~/Projects/apps/thiet-ke/kit/toi-gian): một màu nhấn --chinh, không gradient, không bóng, nền #f9fafb,
   thẻ trắng viền mảnh, chữ #111827/#6b7280, nút cao 48px bo 12. Nạp sau /vendor/fonts.css và /tokens.css. */
* { box-sizing: border-box; }
html { background: var(--nen-phu); }
body {
  margin: 0; background: var(--nen-phu); color: var(--chu);
  font-family: var(--font); font-size: var(--chu-than); line-height: 1.6;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
main { max-width: 560px; margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-12); }
a { color: var(--chinh); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1 { font-size: var(--chu-tieu-de); line-height: 1.3; font-weight: 700; margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
h2 { font-size: var(--chu-muc); font-weight: 600; margin: 0 0 var(--s-3); }
p { margin: 0 0 var(--s-3); }
.lede { color: var(--chu-mo); margin: 0 0 var(--s-6); }
strong { font-weight: 600; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Đầu trang: thương hiệu + đường dẫn */
.brand { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); font-weight: 600; color: var(--chu-mo); font-size: var(--chu-phu); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.crumbs { font-size: var(--chu-nhan); color: var(--chu-mo); margin: 0 0 var(--s-2); }
.crumbs a { color: inherit; text-decoration: none; }

/* Thẻ */
.card { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-lon); padding: var(--s-4); margin-bottom: var(--s-4); }
.card h2 { margin-bottom: var(--s-3); }
.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }
.card ul, .card ol { padding-left: var(--s-5); margin: 0 0 var(--s-3); }
.card li + li { margin-top: var(--s-1); }
.answer { background: var(--nen); border: 1px solid var(--vien); border-left: 3px solid var(--chinh); border-radius: var(--bo); padding: var(--s-4); margin-bottom: var(--s-4); }
.answer p { margin: 0; }
.answer p + p { margin-top: var(--s-2); }
.note { font-size: var(--chu-phu); color: var(--chu-mo); }
.warn { background: var(--canh-bao-nhat); color: var(--canh-bao); border-radius: var(--bo); padding: var(--s-3) var(--s-4); font-size: var(--chu-phu); }
.bao { background: var(--loi-nhat); color: var(--loi); border-radius: var(--bo); padding: var(--s-3) var(--s-4); font-size: var(--chu-than); }
.bao p { margin: 0 0 var(--s-2); }

/* Biểu mẫu */
.field { margin-bottom: var(--s-4); }
.field:last-child { margin-bottom: 0; }
label, .flabel { display: block; font-weight: 500; font-size: var(--chu-phu); margin-bottom: var(--s-2); }
.hint { display: block; font-weight: 400; color: var(--chu-mo); font-size: var(--chu-phu); }
.input-wrap { position: relative; }
input[type="text"], select {
  width: 100%; font: inherit; font-size: var(--chu-than); min-height: var(--cao-nut); padding: 0 var(--s-3);
  border: 1px solid var(--vien); border-radius: var(--bo); background: var(--nen); color: var(--chu);
}
.input-wrap input { padding-right: 68px; }
input:focus, select:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--chinh); outline-offset: 1px; }
input:focus, select:focus { border-color: var(--chinh); }
.unit { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--chu-mo); font-size: var(--chu-phu); pointer-events: none; }
.quick-label { font-size: var(--chu-muc); font-weight: 600; margin-bottom: var(--s-3); }
.quick-input { font-size: 24px !important; font-weight: 700; min-height: 56px; padding-right: 76px !important; }
.quick-hint { margin: var(--s-2) 0 0; }
.platform { border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--s-3); margin-bottom: var(--s-3); background: var(--nen-phu); }
.platform-head { display: flex; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.platform-head input { font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.platform .field { margin-bottom: var(--s-2); }
.platform .field:last-child { margin-bottom: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.detail-head h2 { margin: 0; }
.detail-head .linkish { margin: 0; flex: none; }

/* Nút: chính (nền primary), phụ (xám), viền (nhẹ), chữ (liên kết) */
.cta, .nut {
  display: block; width: 100%; text-align: center; font: inherit; font-weight: 600; font-size: var(--chu-than);
  background: var(--chinh); color: #fff; border: 0; cursor: pointer; text-decoration: none;
  min-height: var(--cao-nut); padding: var(--s-3) var(--s-4); border-radius: var(--bo); margin-top: var(--s-4);
}
.cta:hover, .nut:hover { background: var(--chinh-dam); }
.cta:disabled { background: var(--o-xam); color: var(--chu-mo); cursor: default; }
.ghost { font: inherit; font-size: var(--chu-than); font-weight: 500; background: var(--o-xam); color: var(--chu); cursor: pointer; border: 0; border-radius: var(--bo); min-height: var(--cao-nut); padding: var(--s-3); width: 100%; }
.remove { flex: none; font: inherit; font-size: var(--chu-phu); font-weight: 500; background: transparent; color: var(--chu-mo); border: 1px solid var(--vien); border-radius: var(--bo-nho); min-height: 40px; padding: 0 var(--s-3); cursor: pointer; }
.retry { font: inherit; font-weight: 500; margin-top: var(--s-3); background: var(--nen); color: var(--chu); border: 1px solid var(--vien); border-radius: var(--bo); min-height: 44px; padding: 0 var(--s-4); cursor: pointer; }
.linkish { font: inherit; font-size: var(--chu-phu); font-weight: 500; background: none; border: 0; padding: 0; margin-top: var(--s-3); color: var(--chinh); cursor: pointer; text-align: left; }

/* Thẻ số liệu (kết quả tính) */
.result { padding: var(--s-5) var(--s-4); }
.chip { display: inline-block; font-size: var(--chu-nhan); font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: var(--bo-tron); background: var(--o-xam); color: var(--chu); margin-bottom: var(--s-3); }
.chip.ok { background: var(--tin-cay-nhat); color: #047857; }
.chip.risk, .chip.over { background: var(--canh-bao-nhat); color: var(--canh-bao); }
.result .label { color: var(--chu-mo); font-size: var(--chu-phu); margin: 0; }
.big { font-size: 34px; font-weight: 700; line-height: 1.15; margin: var(--s-1) 0 var(--s-3); letter-spacing: -0.02em; word-break: break-word; font-variant-numeric: tabular-nums; color: var(--chu); }
.result.ok .big { color: var(--chinh); }
.result p { margin: var(--s-2) 0 0; }
.result.loading .big { opacity: 0.45; transition: opacity 0.15s; }
.spinner { position: absolute; top: var(--s-4); right: var(--s-4); width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--vien); border-top-color: var(--chinh); animation: spin 0.8s linear infinite; }
.result { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.warns { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-8); background: var(--canh-bao-nhat); color: var(--canh-bao); border-radius: var(--bo); font-size: var(--chu-phu); }
.warns li + li { margin-top: var(--s-1); }

/* Trạng thái rỗng: biểu tượng trong ô 72px bo 20 + 1 câu */
.rong { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-2) 0; }
.rong .o { width: 72px; height: 72px; border-radius: 20px; background: var(--chinh-nhat); color: var(--chinh); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-3); }
.rong .o svg { width: 32px; height: 32px; stroke-width: 1.75; }
.rong p { margin: 0; color: var(--chu-mo); max-width: 30ch; }
.rong strong { color: var(--chu); display: block; font-weight: 600; margin-bottom: var(--s-1); }

/* Bảng: dòng mảnh, số căn phải */
table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 0; font-size: var(--chu-phu); }
caption { text-align: left; color: var(--chu-mo); font-size: var(--chu-nhan); padding-bottom: var(--s-2); }
th, td { padding: var(--s-2) var(--s-1); border-top: 1px solid var(--vien); text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--chu-mo); font-weight: 500; font-size: var(--chu-nhan); border-top: 0; }
tfoot td { font-weight: 600; }
.src { color: var(--chu-mo); font-size: var(--chu-nhan); font-weight: 400; display: block; }

/* Các bước làm hồ sơ */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-4); counter-increment: step; }
.steps li:last-child { margin-bottom: 0; }
.step-ico { flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--chinh-nhat); color: var(--chinh); display: flex; align-items: center; justify-content: center; }
.step-ico svg { width: 24px; height: 24px; stroke-width: 1.75; }
.steps li > span:last-child::before { content: counter(step) ". "; font-weight: 600; }

/* FAQ, bài liên quan, chân trang */
.faq details { border-top: 1px solid var(--vien); padding: var(--s-3) 0; }
.faq details:first-of-type { border-top: 0; padding-top: 0; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq details p { margin: var(--s-2) 0 0; color: var(--chu-mo); }
.related ul, nav.card ul { list-style: none; padding: 0; margin: 0; }
.related li, nav.card li { border-top: 1px solid var(--vien); padding: var(--s-2) 0; }
.related li:first-child, nav.card li:first-child { border-top: 0; padding-top: 0; }
.related a, nav.card a { text-decoration: none; }
footer { font-size: var(--chu-nhan); color: var(--chu-mo); margin-top: var(--s-8); }
footer ul { padding-left: var(--s-4); margin: var(--s-1) 0 0; }
footer a { color: inherit; }
#sources-updated { display: block; margin-top: var(--s-2); }

@media (max-width: 380px) { .grid2 { grid-template-columns: 1fr; } }