/* Chép từ ai/tasks/mcp-gateway/design/gw.css (bản design 3, 11/11/2026). Sửa giao diện thì sửa cả hai nơi. */
/* Web4s Kết nối — bản design. Màu + chữ lấy từ màn đồng ý OAuth của core (templates/element/Oauth/style.tpl). */
:root{
  --bg:#f5f7f9; --card:#fff; --panel:#fbfbfc; --line:#e6ecf0; --line-2:#d9e1e7; --hover:#f4f8fa;
  --ink:#00172F; --text:#1e232d; --muted:#6e7079; --faint:#a3a8b3;
  --primary:#058DC2; --primary-hover:#06729D; --b-soft:#eaf7f8; --b-ink:#06729D; --navy:#07122b;
  --ok:#2a9d9c; --ok-soft:#e7f6f6; --warn-ink:#92400e; --warn-soft:#fffbeb; --warn-line:#fde68a;
  --danger:#e11d48; --danger-soft:#fff1f2; --danger-line:#fecdd3; --off-soft:#f1f3f5;
  --shadow:0 1px 2px rgba(30,41,80,.05),0 12px 24px -12px rgba(30,41,80,.10),0 40px 80px -32px rgba(30,41,80,.18);
  --shadow-s:0 1px 2px rgba(30,41,80,.06),0 4px 12px -6px rgba(30,41,80,.10);
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,"SF Pro Text",Roboto,Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
h1,h2,h3{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.01em}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.i-s{width:15px;height:15px}
.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:13px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Nút ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent;
  font:500 14px/1 inherit;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.btn-p{background:var(--primary);color:#fff} .btn-p:hover{background:var(--primary-hover);color:#fff}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--ink)} .btn-o:hover{background:var(--hover);color:var(--ink)}
.btn-g{background:transparent;color:var(--muted)} .btn-g:hover{background:var(--hover);color:var(--ink)}
.btn-d{background:#fff;border-color:var(--danger-line);color:var(--danger)} .btn-d:hover{background:var(--danger-soft);color:var(--danger)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn-ic{width:32px;padding:0}
.btn-block{width:100%}

/* ── Khung app ── */
.top{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;height:60px;padding:0 24px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#058DC2,#2a9d9c);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.brand small{font-weight:500;color:var(--muted);font-size:14px;padding-left:10px;border-left:1px solid var(--line)}
.nav{display:flex;gap:4px;height:100%}
.nav a{display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);border-bottom-color:var(--primary)}
.nav .cnt{font-size:12px;background:var(--off-soft);color:var(--muted);border-radius:99px;padding:1px 7px}
.me{margin-left:auto;display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.me .n{font-weight:500;color:var(--ink);line-height:1.2}
.me .e{font-size:12px;color:var(--muted)}

.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 64px}
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.ph h1{font-size:24px}
.ph p{margin:4px 0 0;color:var(--muted)}
.ph .act{margin-left:auto;display:flex;gap:8px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s)}
.card-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:15px}
.card-b{padding:20px}

/* Ô địa chỉ kết nối */
.addr{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 20px;margin-bottom:16px}
.addr .lb{font-size:12px;color:var(--muted);text-transform:none}
.addr .v{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:14px;color:var(--ink);font-weight:500}
.addr .ic{width:36px;height:36px;border-radius:10px;background:var(--b-soft);color:var(--b-ink);display:grid;place-items:center;flex:none}
.addr .act{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Thông báo */
.note{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);margin-bottom:16px}
.note .i{margin-top:1px}
.note b{color:var(--ink);font-weight:600}
.note.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-ink)}
.note.warn b{color:var(--warn-ink)}
.note.info{background:var(--b-soft);border-color:#c9e8f0;color:#0b4f68}
.note.info b{color:#0b4f68}
.note .act{margin-left:auto;flex:none}

/* Thanh công cụ danh sách */
.bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search{position:relative;flex:1;min-width:220px;max-width:360px}
.search .i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search input{width:100%;height:38px;border:1px solid var(--line-2);border-radius:10px;padding:0 12px 0 38px;font:inherit;color:var(--ink);background:#fff}
.search input:focus,.field:focus{outline:2px solid rgba(5,141,194,.25);border-color:var(--primary)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:#fff;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer}
.chip b{font-weight:600;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on b{color:#fff}

/* Bảng website */
table.tb{width:100%;border-collapse:collapse}
.tb th{font-size:12px;font-weight:500;color:var(--muted);text-align:left;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.tb td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb tr:hover td{background:#fcfdfe}
.site{display:flex;align-items:center;gap:12px;min-width:0}
.fav{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.site .d{font-weight:600;color:var(--ink)}
.site .s{font-size:12.5px;color:var(--muted)}
.acc .u{color:var(--ink)}
.acc .r{font-size:12.5px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:#1d7574}
.pill.warn{background:var(--warn-soft);color:var(--warn-ink)}
.pill.off{background:var(--off-soft);color:var(--muted)}
.pill.bad{background:var(--danger-soft);color:var(--danger)}
.pill.no-dot::before{display:none}
.row-act{display:flex;gap:6px;justify-content:flex-end}
.m-only{display:none}
.foot-tb{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.pager{margin-left:auto;display:flex;gap:4px}
.pager a{min-width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;padding:0 8px}
.pager a.on{border-color:var(--line-2);color:var(--ink);background:#fff;font-weight:600}

/* Màu biểu tượng website (chữ cái đầu) */
.c1{background:#e8590c}.c2{background:#2f9e44}.c3{background:#1c7ed6}.c4{background:#ae3ec9}.c5{background:#f08c00}.c6{background:#0c8599}.c7{background:#d6336c}.c8{background:#5c7cfa}

/* ── Màn đăng nhập / đồng ý (cùng kiểu màn đồng ý của website) ── */
.auth-bg{min-height:100vh;display:grid;place-items:center;padding:32px 16px;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(5,141,194,.07),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(74,186,185,.08),transparent 60%),#fff}
.split{width:100%;max-width:920px;display:grid;grid-template-columns:360px 1fr;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.split.narrow{max-width:860px;grid-template-columns:340px 1fr}
.hero{background:linear-gradient(160deg,#07122b 0%,#0b2a4a 55%,#0b4f68 100%);color:#dfe9f1;padding:32px 28px;display:flex;flex-direction:column;gap:24px}
.hero .brand{color:#fff}
.hero .brand small{color:#9fb3c6;border-left-color:rgba(255,255,255,.18)}
.hero h1{color:#fff;font-size:21px;line-height:1.35;font-weight:600}
.hero h1 b{color:#7fd3f0;font-weight:600}
.hero p{margin:0;color:#a9bccd;font-size:13.5px}
.apps{display:flex;align-items:center;gap:10px}
.apps .lg{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.apps .lg.w{background:linear-gradient(135deg,#058DC2,#2a9d9c)}
.apps .lg.cl{background:#c96442}
.apps .lg.gp{background:#10a37f}
.apps .ln{flex:1;max-width:60px;height:2px;background:repeating-linear-gradient(90deg,#7fd3f0 0 6px,transparent 6px 11px);position:relative}
.apps .ln span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#2a9d9c;color:#fff;display:grid;place-items:center}
.apps .ln .i{width:13px;height:13px;stroke-width:3}
.who{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);margin-top:auto}
.who .n{color:#fff;font-weight:600}
.who .m{font-size:12.5px;color:#9fb3c6}
.who .av{background:#2a9d9c}
.facts{display:flex;flex-direction:column;gap:10px;font-size:13px;color:#b9c9d6}
.facts div{display:flex;gap:10px;align-items:flex-start}
.facts .i{color:#7fd3f0;margin-top:1px}

.main{padding:32px;display:flex;flex-direction:column;gap:18px;min-width:0}
.main h2{font-size:18px}
.main .sub{color:var(--muted);margin-top:-10px}
.field{width:100%;height:44px;border:1px solid var(--line-2);border-radius:10px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
label.lb{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-gg{background:#fff;border:1px solid var(--line-2);color:var(--ink);height:44px;font-size:14.5px}
.btn-gg:hover{background:var(--hover);color:var(--ink)}
.gg{width:18px;height:18px}
.otp{display:flex;gap:10px}
.otp input{width:52px;height:56px;text-align:center;font-size:22px;font-weight:600;border:1px solid var(--line-2);border-radius:12px;color:var(--ink);font-family:inherit}
.otp input.f{border-color:var(--primary);outline:3px solid rgba(5,141,194,.18)}
.fine{font-size:12.5px;color:var(--muted)}
.actions{display:flex;gap:10px;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--line);margin-top:auto;padding-top:18px}

/* Danh sách chọn website ở màn đồng ý */
.radio-card{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;align-items:flex-start}
.radio-card.on{border-color:var(--primary);background:#f6fbfd;box-shadow:0 0 0 3px rgba(5,141,194,.10)}
.radio-card .t{font-weight:600;color:var(--ink)}
.radio-card .d{font-size:12.5px;color:var(--muted)}
.rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none;margin-top:2px;display:grid;place-items:center}
.on .rd{border-color:var(--primary)}
.on .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.pick{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pick-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.pick-h .search{max-width:none;min-width:0}
.pick-h .search input{height:34px}
.pick-l{max-height:268px;overflow:auto}
.pick-i{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.pick-i:last-child{border-bottom:0}
.pick-i .fav{width:30px;height:30px;border-radius:8px;font-size:12px}
.pick-i .d{font-weight:500;color:var(--ink)}
.pick-i .s{font-size:12px;color:var(--muted)}
.pick-i .pill{margin-left:auto}
.pick-i.dis{opacity:.55}
.ck{width:18px;height:18px;border-radius:5px;border:2px solid var(--line-2);flex:none;display:grid;place-items:center;background:#fff}
.ck.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ck .i{width:12px;height:12px;stroke-width:3.4}
.shared{display:flex;gap:10px;font-size:13px;padding:10px 12px;border-radius:10px;background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-ink)}
.shared .i{margin-top:1px}

/* ── Thêm website ── */
.steps{display:flex;gap:0;margin-bottom:20px;counter-reset:s}
.step{flex:1;display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:500;font-size:13.5px}
.step .no{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-size:13px;font-weight:600;background:#fff;flex:none}
.step::after{content:"";flex:1;height:2px;background:var(--line);margin:0 12px}
.step:last-child::after{display:none}
.step.done .no{background:var(--ok);border-color:var(--ok);color:#fff}
.step.cur{color:var(--ink)}
.step.cur .no{border-color:var(--primary);color:var(--primary)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
textarea.field{height:auto;min-height:196px;padding:12px 14px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:13.5px;line-height:1.75;resize:vertical}
.chk{display:flex;flex-direction:column}
.chk-i{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chk-i:last-child{border-bottom:0}
.chk-i .fav{width:32px;height:32px;border-radius:9px;font-size:12px}
.chk-i .d{font-weight:600;color:var(--ink)}
.chk-i .s{font-size:12.5px;color:var(--muted)}
.chk-i .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.prog{height:6px;border-radius:99px;background:var(--off-soft);overflow:hidden}
.prog span{display:block;height:100%;background:linear-gradient(90deg,#058DC2,#2a9d9c);border-radius:99px}

/* ── Ứng dụng đã kết nối ── */
.apps-list{display:grid;gap:14px}
.app{display:grid;grid-template-columns:auto 1fr auto;gap:16px;padding:18px 20px;align-items:center}
.app .lg{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.app .t{font-weight:600;color:var(--ink);font-size:15px;display:flex;align-items:center;gap:8px}
.app .m{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:4px}
.app .m span{display:inline-flex;align-items:center;gap:6px}
.app .sites{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:var(--off-soft);color:var(--text);font-size:12.5px}
.tag.all{background:var(--b-soft);color:var(--b-ink);font-weight:500}
.app .act{display:flex;gap:8px}
.feed{display:flex;flex-direction:column}
.feed-i{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);align-items:center;font-size:13.5px}
.feed-i:last-child{border-bottom:0}
.feed-i .tm{color:var(--muted);font-size:12.5px}
.feed-i .w{color:var(--ink)}
.feed-i .w b{font-weight:600}
.side{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}

/* ── Hướng dẫn ── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 8px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-weight:500;cursor:pointer}
.tab .lg{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.tab.on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(5,141,194,.12)}
.how{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}
.sl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.sl li{display:grid;grid-template-columns:32px 1fr;gap:14px}
.sl .no{width:32px;height:32px;border-radius:50%;background:var(--b-soft);color:var(--b-ink);display:grid;place-items:center;font-weight:600}
.sl .t{font-weight:600;color:var(--ink);margin-top:5px}
.sl .d{color:var(--muted);margin-top:2px}
.code{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 8px 8px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel)}
.code span{flex:1;min-width:0;overflow:auto;white-space:nowrap;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:13px;color:var(--ink)}
.kbd{display:inline-block;padding:1px 7px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:#fff;font-size:12.5px;color:var(--ink)}
/* Mô phỏng hộp "Add custom connector" */
.mock{border-radius:16px;background:#f3f1ec;padding:22px;border:1px solid #e7e3da}
.mock-w{background:#fff;border-radius:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);padding:20px;font-size:13.5px}
.mock-w h4{margin:0 0 4px;font-size:15px;color:#2b2a27}
.mock-w p{margin:0 0 14px;color:#77736a;font-size:12.5px}
.mock-f{margin-bottom:12px}
.mock-f .l{font-size:12px;color:#5a564e;margin-bottom:5px}
.mock-f .v{height:38px;border:1px solid #dcd7cc;border-radius:9px;display:flex;align-items:center;padding:0 12px;color:#2b2a27}
.mock-f .v.hl{border-color:#c96442;box-shadow:0 0 0 3px rgba(201,100,66,.15)}
.mock-b{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.mock-b span{height:34px;padding:0 14px;border-radius:9px;display:inline-flex;align-items:center;font-weight:500}
.mock-b .c{color:#5a564e;border:1px solid #dcd7cc}
.mock-b .a{background:#2b2a27;color:#fff}
.mock-cap{font-size:12px;color:#77736a;margin-top:12px;text-align:center}
.prompts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pr{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:10px}
.pr .k{font-size:12px;color:var(--b-ink);font-weight:600;display:flex;align-items:center;gap:6px}
.pr .q{color:var(--ink);flex:1}
.pr .btn{align-self:flex-start}

/* ── Trang mục lục bản design ── */
.toc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.toc a{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--text);box-shadow:var(--shadow-s)}
.toc a:hover{border-color:var(--primary)}
.toc .no{font-size:12px;color:var(--b-ink);font-weight:600}
.toc .t{font-weight:600;color:var(--ink);font-size:15px}
.toc .d{font-size:13px;color:var(--muted)}
.toc .who-tag{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}

/* ── Số liệu + tìm kiếm lớn (màn nhân viên, hàng nghìn website) ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.stat .k{font-size:12.5px;color:var(--muted)}
.stat .v{font-size:22px;font-weight:700;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.stat .v.ok{color:#1d7574}
.stat .s{font-size:12px;color:var(--faint);margin-top:2px}
.search.search-lg{max-width:520px}
.search.search-lg input{height:42px;font-size:14.5px}
.role{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;background:var(--b-soft);color:#0b4f68;font-size:12.5px;font-weight:500}
.sso{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);font-weight:600}
.sso:hover{border-color:var(--primary);text-decoration:none}
.sso .mark{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.sso small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.sso .i{margin-left:auto;color:var(--faint)}
.grp-lb{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* Chọn loại tài khoản ở màn đăng nhập */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.seg a{height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:500;font-size:14px}
.seg a:hover{text-decoration:none;color:var(--ink)}
.seg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,23,47,.08),0 0 0 1px var(--line)}
.pw{position:relative}
.pw .lk{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12.5px}
/* Cài mã 6 số lần đầu */
.setup{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.qr{width:148px;height:148px;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:10px;display:block}
.secret{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:13.5px;letter-spacing:.06em;color:var(--ink);background:#fff;border:1px dashed var(--line-2);border-radius:8px;padding:8px 10px;display:inline-block;margin-top:6px;word-break:break-all}
.sl-mini{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13.5px}
.sl-mini li{display:flex;gap:10px;align-items:flex-start}
.sl-mini .no{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink);flex:none}

/* ── Điện thoại ── */
@media (max-width:900px){
  .side,.how,.grid2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .prompts,.toc{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .top-in{padding:0 16px;gap:12px;height:56px}
  .brand small{display:none}
  .nav{position:fixed;left:0;right:0;bottom:0;height:60px;background:#fff;border-top:1px solid var(--line);justify-content:space-around;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
  .nav a{flex-direction:column;gap:2px;font-size:11.5px;justify-content:center;border-bottom:0;border-top:2px solid transparent;margin:0;padding:0 6px;flex:1}
  .nav a.on{border-top-color:var(--primary);border-bottom:0}
  .nav .cnt{display:none}
  .me .n,.me .e{display:none}
  .wrap{padding:20px 16px 88px}
  .ph{flex-wrap:wrap;align-items:flex-start}
  .ph h1{font-size:21px}
  .ph .act{margin-left:0;width:100%}
  .ph .act .btn{flex:1}
  .addr{flex-wrap:wrap;padding:14px 16px}
  .addr .act{margin-left:0;width:100%}
  .addr .act .btn{flex:1}
  .addr .v{font-size:13px;word-break:break-all}
  .note{display:grid;grid-template-columns:18px 1fr;gap:10px 12px}
  .note .act{grid-column:2;margin-left:0}
  .search{max-width:none}
  .chips{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:2px}
  .chip{flex:none}
  /* bảng thành thẻ */
  table.tb thead{display:none}
  .tb,.tb tbody,.tb tr,.tb td{display:block;width:100%}
  .tb tr{position:relative;padding:14px 16px;border-bottom:1px solid var(--line)}
  .tb td{padding:0;border:0}
  .tb td.c-acc{margin:10px 0 0 48px}
  .tb td.c-st{margin:8px 0 0 48px;display:flex;gap:10px;align-items:center}
  .tb td.c-last{display:none}
  .tb td.c-act{position:absolute;right:12px;top:14px;width:auto}
  .tb td.c-act .btn:not(.btn-ic){display:none}
  .m-only{display:inline-flex}
  .foot-tb{flex-wrap:wrap}
  .auth-bg{place-items:start center;padding:16px 12px}
  .split,.split.narrow{grid-template-columns:1fr;border-radius:16px}
  .hero{padding:22px 20px;gap:16px}
  .hero h1{font-size:18px}
  .hero .facts,.hero .who{display:none}
  .main{padding:22px 20px}
  .otp input{width:44px;height:50px}
  .actions{flex-direction:column-reverse}
  .actions .btn{width:100%}
  .steps .step span.l{display:none}
  .app{grid-template-columns:auto 1fr;padding:16px;align-items:start}
  .chk-i{flex-wrap:wrap}
  .chk-i>div:nth-child(2){flex:1 1 160px;min-width:0}
  .chk-i .r{flex:none}
  .app .act{grid-column:1 / -1}
  .app .act .btn{flex:1}
  .feed-i{grid-template-columns:1fr;gap:2px;padding:12px 16px}
  .prompts,.toc{grid-template-columns:1fr}
  .mock{padding:14px}
  .tab{flex:1;min-width:calc(50% - 6px)}
  .setup{grid-template-columns:1fr;justify-items:center;text-align:center}
  .sl-mini li{text-align:left}
  .stats{gap:8px}
  .stat{padding:12px}
  .stat .v{font-size:19px}
  .stat .s{display:none}
}

/* ── Trang quản lý của cổng (ngoài bản design: thao tác thật cần thêm vài thành phần) ── */
.me form.out{margin:0}
a.chip:hover{text-decoration:none;color:var(--ink)}
a.chip.on:hover{color:#fff}
.empty{padding:28px 20px;text-align:center;color:var(--muted)}
.reveal{display:none}
.reveal:target,.reveal.open{display:block}
form.reveal.scope-form:target,form.reveal.scope-form.open{display:grid;gap:10px;margin-top:12px}
.scope-form textarea.field{min-height:96px}
.scope-form input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.scope-form .radio-card:has(input:checked){border-color:var(--primary);background:#f6fbfd;box-shadow:0 0 0 3px rgba(5,141,194,.10)}
.scope-form .radio-card:has(input:checked) .rd{border-color:var(--primary)}
.scope-form .radio-card:has(input:checked) .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.row-act form{margin:0}
.more{position:relative}
.more summary{list-style:none;cursor:pointer}
.more summary::-webkit-details-marker{display:none}
.more-m{position:absolute;right:0;top:36px;z-index:5;min-width:210px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:grid;gap:2px}
.more-m form{margin:0}
.more-m button{width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer}
.more-m button:hover{background:var(--hover)}
.more-m button.dng{color:var(--danger)}
.more-m .fine{padding:6px 10px}
.bar form.search{margin:0}
.app .act form{margin:0}
.scope-form .radio-card .t,.scope-form .radio-card .d{display:block}
/* Điện thoại: ô bảng có lề trái 48px mà vẫn rộng 100% thì tràn ngang; cột chữ của danh sách bước phải được co
   lại dưới bề rộng dòng lệnh/địa chỉ dài. Bản design có cùng lỗi — sửa cả ở đó. */
.sl li>div{min-width:0}
.sl .code span{overflow-wrap:anywhere}
@media (max-width:720px){
  .tb td.c-acc,.tb td.c-st{width:auto}
}

/* ── Màn cho phép ứng dụng: chọn phạm vi website không cần JS ── */
.consent input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.consent .radio-card .t,.consent .radio-card .d{display:block}
.consent .radio-card:has(input:checked){border-color:var(--primary);background:#f6fbfd;box-shadow:0 0 0 3px rgba(5,141,194,.10)}
.consent .radio-card:has(input:checked) .rd{border-color:var(--primary)}
.consent .radio-card:has(input:checked) .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.consent .radio-card:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.consent textarea.sites{display:none;min-height:96px}
.consent:has(input[value=some]:checked) textarea.sites{display:block}
.consent button.btn{font:inherit}