:root {
  --bg: #f6f8f7; --card: #ffffff; --ink: #14201d; --muted: #5b6b66; --line: #dfe6e3;
  --brand: #0f766e; --brand-ink: #ffffff;
  --ok: #15803d; --ok-bg: #dcfce7; --warn: #b45309; --warn-bg: #fef3c7; --bad: #b91c1c; --bad-bg: #fee2e2;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1513; --card: #15211e; --ink: #e6efec; --muted: #93a6a0; --line: #26372f;
    --brand: #2dd4bf; --brand-ink: #062521;
    --ok: #4ade80; --ok-bg: #12331f; --warn: #fbbf24; --warn-bg: #3a2c0a; --bad: #f87171; --bad-bg: #3b1616;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 72px;
}
/* padding-top chừa chỗ cho tai thỏ/đảo động iPhone (viewport-fit=cover khiến nội dung tràn lên vùng đó).
   flex-wrap: khi tên app dài (vd bản app điện thoại "Digital Asset Info") không đủ chỗ cùng dòng với
   dòng "Miễn phí..." thì dòng đó tự xuống hàng dưới, thay vì ép cả hai bị bóp chữ xuống dòng lung tung. */
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 2px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; max-width: 860px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 18px; flex: 0 0 auto; }
.top > .muted.small { flex: 1 1 auto; text-align: right; }
.brand img { border-radius: 7px; }
main { max-width: 860px; margin: 0 auto; padding: 0 16px 16px; }
h2 { font-size: 20px; margin: 8px 0 4px; }
h3 { font-size: 16px; margin: 0 0 8px; }
p { margin: 6px 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.row > * { flex: 0 1 auto; }
.grow { flex: 1 1 200px !important; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; min-width: 0; width: 100%;
  /* tối thiểu 16px: dưới mức này Safari/WebView trên iOS tự phóng to cả trang khi chạm vào ô, làm "vỡ khung" */
  font-size: max(16px, 1em);
}
input[type=checkbox] { width: auto; }
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 8px; padding: 10px 14px;
  background: var(--brand); color: var(--brand-ink); text-decoration: none; display: inline-block;
}
button.ghost, .btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
button.danger { background: var(--bad-bg); color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.stat .v { font-size: 22px; font-weight: 700; margin: 2px 0; }
.stat .s { font-size: 13px; color: var(--muted); }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; }
.badge { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.badge { background: var(--line); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.banner { border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-weight: 600; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.info { background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 400; }
.banner small { display: block; font-weight: 400; margin-top: 2px; }
ul.flags { list-style: none; padding: 0; margin: 8px 0; }
ul.flags li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
ul.flags li:last-child { border-bottom: 0; }
details summary { cursor: pointer; font-weight: 600; }
pre { overflow: auto; font-size: 12px; background: var(--bg); padding: 10px; border-radius: 8px; max-height: 300px; }
.disclaimer { max-width: 860px; margin: 0 auto; padding: 8px 16px 16px; font-size: 12px; color: var(--muted); }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5;
}
.tabs a {
  flex: 1; text-align: center; padding: 8px 4px; color: var(--muted); text-decoration: none; font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.tabs a span { font-size: 20px; line-height: 1.2; }
.tabs a.on { color: var(--brand); font-weight: 700; }
@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .tabs { position: static; width: calc(100% - 32px); max-width: 828px; margin: 0 auto 8px; border: 1px solid var(--line); border-radius: var(--radius); order: -1; }
  body { display: flex; flex-direction: column; }
  .top { order: -2; width: 100%; }
  main { width: 100%; }
}

.seg { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.seg button { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.seg button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
ul.news { list-style: none; padding: 0; margin: 0; }
ul.news li { padding: 9px 0; border-bottom: 1px solid var(--line); }
ul.news li:last-child { border-bottom: 0; }
ul.news a { color: var(--ink); font-weight: 600; text-decoration: none; }
ul.news a:hover { text-decoration: underline; }
input[type=search] { margin-bottom: 8px; }
.tabs a { min-width: 0; }

/* Hiệu ứng đang tải */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 14px 2px 6px; font-weight: 600; }
.spinner {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite;
}
.skeleton { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 14px; margin: 8px 0 12px; }
.skel {
  height: 14px; border-radius: 7px; margin: 12px 0;
  background: linear-gradient(90deg, var(--line) 25%, var(--bg) 50%, var(--line) 75%); background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
/* Nút "Làm mới" hiện vòng xoay nhỏ khi đang tải (kể cả lúc tự làm mới mỗi phút) */
button#reload:disabled::before, button#go:disabled::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .spinner, button#reload:disabled::before, button#go:disabled::before { animation-duration: 2.4s; }
}

/* Dòng kết quả "sạch nhưng có giới hạn cần đọc kèm" */
tr.hl td { background: var(--warn-bg); }
tr.hl td:first-child { box-shadow: inset 4px 0 0 var(--warn); }

/* Footer */
.site-footer p { margin: 4px 0; }
.site-footer .copy { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); }

/* Danh sách theo dõi / lịch sử kiểm tra (trang Kiểm tra lừa đảo) */
.minilist { list-style: none; margin: 0 0 10px; padding: 0; }
.minilist li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.minilist li:first-child { border-top: 0; }
.minilist li .ghost { padding: 4px 10px; }
.minilist li [data-act="open"] { word-break: break-all; text-align: left; }
.minilist li [data-act="unwatch"] { margin-left: auto; }

/* Phần giới thiệu viết sẵn trong HTML (cho người đọc và trình thu thập của công cụ tìm kiếm), nằm dưới nội dung từng tab */
.about { max-width: 860px; margin: 8px auto 0; padding: 12px 16px 8px; border-top: 1px solid var(--line); color: var(--muted); }
.about h2 { font-size: 16px; margin: 0 0 6px; color: var(--ink); }
.about h3 { font-size: 14px; margin: 14px 0 4px; color: var(--ink); }
.about p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
