/* Xác thực 2 lớp (ảnh duyệt 2L-1 … 2L-5, 13/10/2026) — lớp tiền tố tf-: ô mã 6 số, ba bước cài, lưới mã dự phòng, hàng trạng thái, công tắc.
   Dùng ở trang đăng nhập (index.html › #auth), Cài đặt cá nhân (settings.html), màn bắt buộc cài (cai-2-lop.html). Phần của Quản trị › Người dùng nằm ở admin.css. */
.tf-otp{display:flex;gap:7px;position:relative;width:max-content;max-width:100%}.tf-otp i{flex:none;width:42px;height:52px;border:1px solid #ccd9e8;border-radius:6px;background:#fff;display:grid;place-items:center;font:600 24px/1 var(--nx-font);font-style:normal;color:var(--nx-ink);font-variant-numeric:tabular-nums}
.tf-otp i.cur{border-color:var(--nx-blue);box-shadow:0 0 0 3px #0665ed26}.tf-otp i.cur::after{content:"";width:2px;height:24px;background:var(--nx-blue)}.tf-otp .gap{width:6px}
.tf-otp.ok i{border-color:#9fd6b5;background:#f4fbf6}.tf-otp.off i{background:#f6f8fb;border-color:#e1e8f0}
/* ô nhập thật phủ lên sáu ô hiển thị (trong suốt): gõ, dán, tự điền mã từ bàn phím điện thoại đều vào một ô */
.tf-otp input.tf-otp-in{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;opacity:0;font-size:16px;cursor:text}
.tf-steps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
.tf-step{border:1px solid var(--nx-border);border-radius:8px;padding:14px 16px 16px;background:#fff}.tf-step.wide{grid-column:1/-1}.tf-step.now{border-color:#9cc3f8;box-shadow:0 0 0 3px #edf4ff}.tf-step.later{background:#f8fafc}.tf-step.later>*:not(.tf-h){opacity:.5}
.tf-h{display:flex;align-items:center;gap:10px;margin:0 0 6px}.tf-h b{font-size:15px;font-weight:600;color:var(--nx-ink)}.tf-h .st-tag{margin-left:auto}
.tf-no{flex:none;width:24px;height:24px;border-radius:50%;background:var(--nx-blue);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700}.tf-no.done{background:var(--nx-success)}.tf-no.done svg{width:14px;height:14px;stroke-width:2.6}.tf-no.wait{background:#e3e9f1;color:#56687f}
.tf-step p{margin:0;font-size:13px;line-height:1.5;color:var(--nx-muted)}.tf-step p b{color:var(--nx-ink);font-weight:600}.tf-step p.tf-gap{margin-top:10px}
.tf-qr{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;margin-top:10px}.tf-qr>img,.tf-qr>svg{width:132px;height:132px;border:1px solid #dde3ea;border-radius:8px;background:#fff;display:block}
.tf-key{display:flex;align-items:center;gap:8px;margin-top:6px}.tf-key .cde-button{white-space:nowrap;padding:0 10px;flex:none}.tf-key code{flex:none;font:600 11.5px/1.5 ui-monospace,Menlo,monospace;background:#f3f6fa;border:1px solid #dfe6ee;border-radius:5px;padding:7px 8px;color:var(--nx-ink);white-space:pre}
.st-body .cde-button.sm{min-height:32px;padding:0 12px;font-size:13px}
.tf-okline{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--nx-success)}.tf-okline svg{width:16px;height:16px;stroke-width:2.4;flex:none}
.tf-confirm{margin-top:12px;display:flex;align-items:center;gap:10px}.tf-confirm .st-note{margin:0}.tf-otp-wrap{margin-top:12px}
.tf-codes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 0}.tf-codes span{font:600 14px/1 ui-monospace,Menlo,monospace;letter-spacing:.6px;text-align:center;padding:10px 0;border:1px dashed #b9c8da;border-radius:6px;background:#f8fafc;color:var(--nx-ink)}
.tf-codes-foot{display:flex;align-items:center;gap:8px;margin-top:12px}.tf-codes-foot .st-check{margin:0 0 0 8px!important;font-size:13.5px}.tf-sp{flex:1}
.tf-notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:8px;background:#fff7e6;border:1px solid #f0d49a;color:#6b4a12;margin:0 0 14px}.tf-notice svg{flex:none;width:22px;height:22px;color:#b67a00;margin-top:1px}.tf-notice b{display:block;font-size:16px;font-weight:600;color:#5a3d08}.tf-notice p{margin:3px 0 0;font-size:13px;line-height:1.5}
.tf-rows{border:1px solid var(--nx-border);border-radius:8px;margin-top:4px}.tf-rows.tf-rel{margin-top:8px}.tf-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-top:1px solid #eef1f4}.tf-row:first-child{border-top:0}.tf-row>div{flex:1;min-width:0}.tf-row b{display:block;font-size:14px;font-weight:600;color:var(--nx-ink)}.tf-row small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--nx-muted)}.tf-row small b{display:inline;font-size:inherit}.tf-row .cde-button{flex:none;white-space:nowrap}
.tf-row .tf-ic{flex:none;width:36px;height:36px;border-radius:8px;background:#edf4ff;color:var(--nx-blue);display:grid;place-items:center}.tf-row .tf-ic svg{width:19px;height:19px}.tf-row .tf-ic.ok{background:#e3f6ea;color:#1b7a44}.tf-row .tf-ic.mute{background:#eef2f6;color:#7a8799}
.tf-row.off b{color:#7a8799}.tf-row a{color:var(--nx-blue);font-weight:600;text-decoration:none;white-space:nowrap;flex:none;font-size:13.5px}
.tf-meter{display:inline-flex;gap:3px;vertical-align:-1px;margin-right:8px}.tf-meter i{width:7px;height:12px;border-radius:2px;background:#1b7a44}.tf-meter i.u{background:#dbe3ec}
.st-tag.plain{margin-left:0}.st-tag.off{background:#eef2f6;color:#56687f}
.tf-switch{flex:none;width:40px;height:24px;border-radius:999px;background:#c5cfdb;position:relative;display:inline-block;border:0;padding:0;cursor:pointer}.tf-switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0b234040}.tf-switch.on{background:var(--nx-blue)}.tf-switch.on::after{left:19px}
/* trang Cài đặt: thẻ đang ở chế độ ba bước cài (ảnh 2L-2) */
.st-shell:has(.tf-setup:not([hidden])){padding-top:18px}.st-card.tf-setup{padding:20px 24px}.st-card.tf-setup .st-sub{margin-bottom:14px}
/* hộp nhập lại mật khẩu + mã 6 số (tắt xác thực 2 lớp, tạo lại mã dự phòng) */
.tf-dialog{border:0;border-radius:12px;padding:20px 24px;width:min(460px,calc(100vw - 24px));box-shadow:0 20px 50px rgba(0,0,0,.3);font-size:14px;color:var(--nx-ink)}.tf-dialog::backdrop{background:rgba(10,20,40,.45)}.tf-dialog h2{margin:0 0 6px;font-size:18px}.tf-dialog .st-form label{margin-top:12px}.tf-dialog footer{justify-content:flex-end}.tf-dialog .tf-otp{margin-top:6px}
/* màn bắt buộc cài (ảnh 2L-5) */
.tf-gate{max-width:900px;margin:0 auto;padding:18px 20px 40px}.tf-gate .st-card{padding:20px 24px}.tf-gate .st-sub{margin-bottom:14px}
.tf-out{display:inline-flex;align-items:center;gap:8px;color:#fff;font:inherit;font-size:13.5px;font-weight:500;border:1px solid #ffffff40;border-radius:8px;padding:7px 12px;background:transparent;cursor:pointer}.tf-out:hover{background:#ffffff14}.tf-out svg{width:16px;height:16px}.tf-me{color:#c9d8ea;font-size:13px;margin-right:12px}
/* đăng nhập bước 2 (ảnh 2L-1) — cùng khung với trang đăng nhập */
#auth .tf-otp{margin-top:8px;gap:10px}#auth .tf-otp i{width:56px;height:60px;border-color:var(--nx-border);border-radius:var(--nx-radius);font-size:26px}#auth .tf-otp .gap{width:4px}
#auth .tf-who{display:flex;align-items:center;gap:10px;margin:18px 0 22px;padding:10px 12px;border:1px solid var(--nx-border);border-radius:var(--nx-radius);background:#fff;font-size:13.5px;color:var(--nx-ink)}#auth .tf-who svg{width:18px;height:18px;color:var(--nx-success);flex:none;stroke-width:2.4}#auth .tf-who b{font-weight:600}#auth .tf-who span{min-width:0;overflow-wrap:anywhere}
#auth .tf-links{display:flex;justify-content:space-between;margin-top:6px}#auth .tf-links .auth-link{margin:14px 0 0}
#auth .tf-hint{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--nx-muted)}#auth #tf-form{margin-top:0}
@media(max-width:760px){.tf-steps{grid-template-columns:1fr}.tf-qr{grid-template-columns:1fr}.tf-codes{grid-template-columns:repeat(2,minmax(0,1fr))}.tf-codes-foot{flex-wrap:wrap}.tf-row{flex-wrap:wrap}.tf-otp{gap:5px}.tf-otp i{width:38px;height:48px}#auth .tf-otp{gap:6px}#auth .tf-otp i{width:44px;height:54px}.tf-me{display:none}}
/* in mã dự phòng: chỉ in khối ba bước / lưới mã */
@media print{body.tf-printing>*:not(.tf-print){display:none!important}body.tf-printing .tf-print{display:block!important;font:14px/1.6 ui-monospace,Menlo,monospace;color:#000;padding:24px}body.tf-printing .tf-print h1{font:600 18px/1.3 sans-serif;margin:0 0 4px}body.tf-printing .tf-print p{font:13px/1.5 sans-serif;margin:0 0 14px}body.tf-printing .tf-print li{margin:4px 0}}
.tf-print{display:none}