/* ===== Trạm chống lừa đảo AI (tram-chong-lua-dao.html, tram-lua-dao.js) =====
   Mockup A + B, C (Sang chọn 20/10/2026). Đỏ chỉ dùng cho nguy hiểm; còn lại theo bảng màu "Trời xanh" của web. */
.tl, .tl-nhay { --tl-do: #DC2626; --tl-do-chu: #B91C1C; --tl-vang: #D97706; --tl-xanh: #059669; --tl-xanh-chu: #047857;
}
.tl { display: grid; gap: 22px; padding-block: 8px 40px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.tl, .tl-nhay) { --tl-do-chu: #F87171; --tl-xanh-chu: #34D399; } }
:root[data-theme="dark"] :is(.tl, .tl-nhay) { --tl-do-chu: #F87171; --tl-xanh-chu: #34D399; }

.tl-nhay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tl-nhay a { padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--edge); background: var(--panel); color: var(--ink);
  font: 600 13.5px/1.3 var(--f-body); text-decoration: none; }
.tl-nhay a:hover { border-color: var(--blue); }
.tl-nhay .tl-nhay-sos { border-color: color-mix(in srgb, var(--tl-do) 45%, var(--edge)); color: var(--tl-do-chu); }

.tl-khoi { display: grid; gap: 12px; padding: 22px; border-radius: 22px; border: 1.5px solid var(--edge); background: var(--panel); min-width: 0; }
.tl-khoi h2 { margin: 0; font: 800 clamp(21px, 2.6vw, 27px)/1.2 var(--f-display); text-wrap: balance; }
.tl-nhan { margin: 0; font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.tl-dan { margin: -4px 0 0; color: var(--muted); max-width: 70ch; }
.tl-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Kiểm tra nhanh --- */
.tl-kt { border-color: color-mix(in srgb, var(--tl-do) 35%, var(--edge));
  background: linear-gradient(165deg, color-mix(in srgb, var(--tl-do) 9%, var(--panel)), var(--panel) 60%); }
.tl-kt .tl-nhan { color: var(--tl-do-chu); }
.tl-chon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tl-th { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 2px solid var(--edge); background: var(--panel); color: var(--ink); font: 600 15px/1.3 var(--f-body); transition: border-color .15s, transform .15s; }
.tl-th:hover { border-color: var(--tl-do); transform: translateY(-2px); }
.tl-th:focus-visible, .tl-the:focus-visible, .tl-loc-nut:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tl-th-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--blue); background: color-mix(in srgb, var(--sky) 16%, var(--panel)); }
.tl-th[aria-pressed="true"] { border-color: var(--tl-do); background: color-mix(in srgb, var(--tl-do) 8%, var(--panel)); }
.tl-th[aria-pressed="true"] .tl-th-ic { background: var(--tl-do); color: #fff; }

.tl-hoi, .tl-kq { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--bg); border: 1.5px solid var(--edge); animation: tl-vao .25s ease-out; }
.tl-hoi[hidden], .tl-kq[hidden] { display: none; }
.tl-hoi-dau { display: flex; align-items: center; gap: 12px; }
.tl-hoi-so { font: 700 13px/1 var(--f-mono); color: var(--muted); }
.tl-hoi-tien { display: flex; gap: 5px; }
.tl-hoi-tien i { width: 26px; height: 6px; border-radius: 3px; background: var(--edge); }
.tl-hoi-tien i.xong { background: var(--blue); }
.tl-hoi-tien i.nay { background: var(--yellow); }
.tl-hoi-cau { margin: 0; font: 700 clamp(18px, 2.2vw, 22px)/1.35 var(--f-display); text-wrap: balance; }
.tl-hoi-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; }
.tl-hoi-nut button { min-height: 52px; border-radius: 14px; cursor: pointer; font: 800 17px/1 var(--f-body); border: 2px solid transparent; }
.tl-co-nut { background: var(--tl-do); color: #fff; }
.tl-khong-nut { background: var(--panel); color: var(--ink); border-color: var(--edge) !important; }
.tl-hoi-nut button:hover { transform: translateY(-1px); }
.tl-hoi-nut button:focus-visible, .tl-doi:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tl-doi { justify-self: start; padding: 0; border: 0; background: none; color: var(--blue-chu); font: 600 14px/1.4 var(--f-body); cursor: pointer; text-decoration: underline; }

.tl-kq { --m: var(--tl-xanh); border: 2px solid var(--m); background: color-mix(in srgb, var(--m) 6%, var(--panel)); }
.tl-kq.tl-muc-1 { --m: var(--tl-vang); }
.tl-kq.tl-muc-2 { --m: var(--tl-do); }
.tl-kq-dau { display: flex; align-items: center; gap: 12px; }
.tl-kq-vach { display: flex; gap: 4px; flex: 1; max-width: 260px; }
.tl-kq-vach i { flex: 1; height: 10px; border-radius: 5px; background: var(--edge); }
.tl-kq-vach i.on { background: var(--m); }
.tl-kq-dem { font: 600 13px/1 var(--f-mono); color: var(--muted); }
.tl-kq-ten { margin: 0; font: 800 22px/1.25 var(--f-display); color: var(--ink); }
.tl-kq-ten:focus { outline: none; }
.tl-kq-giai { margin: -6px 0 0; color: var(--muted); }
.tl-kq-nhan { margin: 4px 0 0; font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-kq-lam { margin: 0; padding: 0; list-style: none; counter-reset: lam; display: grid; gap: 8px; }
.tl-kq-lam li { counter-increment: lam; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font: 600 16px/1.45 var(--f-body); }
.tl-kq-lam li::before { content: counter(lam); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--m); color: #fff; font: 800 14px/1 var(--f-body); }
.tl-kq-di { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* --- Danh bạ chiêu lừa --- */
.tl-loc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tl-loc-nut { flex: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--edge); background: var(--panel); color: var(--ink); font: 600 14px/1.2 var(--f-body); }
.tl-loc-nut[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.tl-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tl-m-do { --mc: #EF4444; } .tl-m-tim { --mc: #8B5CF6; } .tl-m-cam { --mc: #F97316; } .tl-m-xanh { --mc: #0EA5E9; }
.tl-m-la { --mc: #10B981; } .tl-m-vang { --mc: #EAB308; } .tl-m-hong { --mc: #EC4899; } .tl-m-xam { --mc: #64748B; }
.tl-the { display: grid; padding: 0; overflow: hidden; border-radius: 16px; cursor: pointer; text-align: left; border: 1.5px solid var(--edge); background: var(--panel); color: var(--ink);
  transition: transform .15s, border-color .15s; }
.tl-the:hover { transform: translateY(-2px); border-color: var(--mc); }
.tl-the[hidden] { display: none; }
.tl-the[aria-expanded="true"] { border: 2px solid var(--mc); box-shadow: 0 10px 24px -16px var(--mc); }
.tl-the-bia { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 118px; padding: 14px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--mc) 32%, var(--panel)), color-mix(in srgb, var(--mc) 10%, var(--panel))); }
.tl-the-bia .tl-ic { width: 30px; height: 30px; color: color-mix(in srgb, var(--mc) 70%, var(--ink)); }
.tl-the-bia b { font: 800 16px/1.25 var(--f-display); text-wrap: balance; }
.tl-the-chan { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 14px; font: 600 12.5px/1 var(--f-mono); color: var(--muted); }
.tl-cham { display: flex; gap: 3px; }
.tl-cham i { width: 8px; height: 8px; border-radius: 50%; background: var(--edge); }
.tl-cham i.on { background: var(--tl-do); }

.tl-cts { display: contents; }
.tl-ct { display: grid; gap: 14px; padding: 18px; border-radius: 18px; border: 2px solid var(--mc); background: color-mix(in srgb, var(--mc) 6%, var(--panel)); animation: tl-vao .25s ease-out; }
.tl-ct[hidden] { display: none; }
.tl-ct-dau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.tl-ct-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mc); color: #fff; }
.tl-ct-dau h3 { margin: 0; font: 800 20px/1.25 var(--f-display); }
.tl-ct-dau p { margin: 4px 0 0; color: var(--muted); }
.tl-ct-dong { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--panel); color: var(--ink); cursor: pointer; }
.tl-ct-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tl-ct-nhan { margin: 0 0 8px; font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.tl-do-chu { color: var(--tl-do-chu); } .tl-xanh-chu { color: var(--tl-xanh-chu); }
.tl-co, .tl-lam { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tl-co li, .tl-lam li { padding: 8px 12px; border-radius: 10px; font: 500 15px/1.4 var(--f-body); }
.tl-co li { background: color-mix(in srgb, var(--tl-do) 9%, var(--panel)); border-left: 4px solid var(--tl-do); }
.tl-lam li { background: color-mix(in srgb, var(--tl-xanh) 10%, var(--panel)); border-left: 4px solid var(--tl-xanh); }
.tl-ct-di { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tl-vd { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--edge); background: var(--panel); color: var(--ink);
  text-decoration: none; font: 500 14px/1.35 var(--f-body); }
.tl-vd:hover { border-color: var(--blue); }
.tl-vd .ic { flex: none; width: 18px; height: 18px; color: var(--blue); }
.tl-vd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.tl-tro .ic { width: 18px; height: 18px; margin-right: 6px; }

/* --- Phòng tập --- */
.tl-tien { display: flex; align-items: center; gap: 12px; max-width: 420px; }
.tl-tien-thanh { flex: 1; height: 10px; border-radius: 5px; background: var(--edge); overflow: hidden; }
.tl-tien-thanh span { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--grad); transition: width .3s; }
.tl-tien-so { font: 700 14px/1 var(--f-mono); color: var(--muted); }
.tl-duong { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tl-buoc { position: relative; display: grid; gap: 8px; align-content: start; }
.tl-buoc-so { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--edge); background: var(--panel); font: 800 15px/1 var(--f-display); color: var(--muted); }
.tl-buoc.da-ghe .tl-buoc-so { background: var(--mint-dam); border-color: var(--mint-dam); color: #fff; }
.tl-buoc-the { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-height: 86px; padding: 12px; border-radius: 16px;
  border: 1.5px solid var(--edge); background: var(--bg); color: var(--ink); text-decoration: none; }
a.tl-buoc-the:hover { border-color: var(--blue); transform: translateY(-2px); }
.tl-buoc-anh { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: color-mix(in srgb, var(--sky) 16%, var(--panel)); }
.tl-buoc-anh img { width: 50px; height: 50px; }
.tl-buoc-chu { display: grid; gap: 3px; min-width: 0; }
.tl-buoc-chu b { font: 700 15px/1.3 var(--f-body); }
.tl-buoc-chu small { font: 500 12.5px/1.35 var(--f-body); color: var(--muted); }
.tl-da { display: none; position: absolute; top: -9px; right: 10px; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--mint-dam); color: #fff; font: 700 11px/1.3 var(--f-body); }
.tl-da .ic { width: 12px; height: 12px; }
.tl-buoc.da-ghe .tl-da { display: inline-flex; }
.tl-sap { opacity: .78; }
.tl-sap-nhan { position: absolute; top: -9px; right: 10px; padding: 3px 8px; border-radius: 999px; background: var(--yellow); color: #0F172A; font: 800 11px/1.3 var(--f-body); }

/* --- Cho cả nhà --- */
.tl-do-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tl-do { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; border: 1.5px solid var(--edge); background: var(--bg); color: var(--ink); text-decoration: none; }
a.tl-do:hover { border-color: var(--mint-dam); transform: translateY(-2px); }
.tl-do-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--mint-dam); background: color-mix(in srgb, var(--mint) 16%, var(--panel)); }
.tl-o-chu { display: grid; gap: 3px; }
.tl-o-chu b { font: 700 15px/1.3 var(--f-body); }
.tl-o-chu small { font: 500 13px/1.4 var(--f-body); color: var(--muted); }
.tl-gui { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 4px; }
.tl-gui-anh { width: 84px; height: auto; }
.tl-gui .chia-se-h { margin: 0; font: 800 18px/1.3 var(--f-display); }
.tl-gui-dan { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }

/* --- Lỡ bị lừa --- */
.tl-sos { border-color: color-mix(in srgb, var(--tl-vang) 45%, var(--edge)); background: color-mix(in srgb, var(--tl-vang) 7%, var(--panel)); }
.tl-sos .tl-nhan { color: var(--tl-vang); }
.tl-sos-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tl-so { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--edge); min-width: 0; }
.tl-so b { font: 800 clamp(17px, 2.2vw, 24px)/1.15 var(--f-display); overflow-wrap: anywhere; user-select: all; }
.tl-so small { font: 500 13px/1.3 var(--f-body); color: var(--muted); }
.tl-sos-ds { margin: 0; padding: 0; list-style: none; counter-reset: sos; display: grid; gap: 8px; }
.tl-sos-ds li { counter-increment: sos; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font: 500 15.5px/1.5 var(--f-body); }
.tl-sos-ds li::before { content: counter(sos); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tl-vang); color: #fff; font: 800 14px/1 var(--f-body); }

@keyframes tl-vao { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tl-hoi, .tl-kq, .tl-ct { animation: none; } .tl-th, .tl-the, .tl-tien-thanh span { transition: none; } }

@media (max-width: 1000px) {
  .tl-luoi, .tl-duong, .tl-do-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tl-khoi { padding: 16px; border-radius: 18px; }
  .tl-chon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tl-th { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 10px; font-size: 14px; }
  .tl-th-ic { width: 34px; height: 34px; border-radius: 10px; }
  .tl-ct-hai, .tl-sos-o { grid-template-columns: minmax(0, 1fr); }
  .tl-duong { grid-template-columns: minmax(0, 1fr); }
  .tl-gui { grid-template-columns: minmax(0, 1fr); }
  .tl-gui-anh { display: none; }
  .tl-vd span { white-space: normal; }
}
@media (max-width: 420px) {
  .tl-luoi, .tl-do-luoi { gap: 8px; }
  .tl-the-bia { min-height: 104px; padding: 12px; }
  .tl-the-bia b { font-size: 14.5px; }
}