/* Fine Chemical User Guide: style dùng chung (trang hướng dẫn, portal, khung mô phỏng) */
:root{
  --ink:#111827; --ink2:#4b5563; --ink3:#8a94a6; --line:#e5eaf0; --bg:#f4f6f9; --card:#fff;
  --lime:#c8fb5b; --lime-d:#7ab317; --lime-bg:#f0ffc8; --dark:#0c1019; --dark2:#1c2230;
  --red:#ff4d4f; --red-d:#cf1322; --red-bg:#fff1f0; --red-bd:#ffa39e;
  --blue:#1677ff; --blue-bg:#e6f4ff; --blue-bd:#91caff;
  --green:#389e0d; --green-bg:#f6ffed; --green-bd:#b7eb8f;
  --amber:#d48806; --amber-bg:#fffbe6; --amber-bd:#ffe58f;
  --hl:#ff7a00;
  --font:"Noto Sans","Segoe UI","Malgun Gothic","Apple SD Gothic Neo",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font)}
button{font:inherit;cursor:pointer}
a{color:#2563eb}
b{font-weight:600}

/* ---------- khung trang ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--dark);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 20px}
.brand{font-weight:700;letter-spacing:.3px;white-space:nowrap;color:#fff;text-decoration:none}
.brand span{color:var(--lime);font-weight:500}
.top .grow{flex:1}
.top-search{flex:0 1 360px;min-width:0;border:1px solid #2d3546;background:#141a26;color:#fff;border-radius:8px;padding:6px 12px;font:inherit;font-size:14px}
.top-search::placeholder{color:#8a94a6}
.langs{display:flex;gap:4px;background:var(--dark2);border-radius:8px;padding:3px}
.langs button{border:0;background:transparent;color:#cfd6e3;padding:5px 12px;border-radius:6px;font-size:13px;white-space:nowrap}
.langs button.on{background:var(--lime);color:#111;font-weight:600}
.wrap{max-width:1500px;margin:0 auto;padding:18px 20px}
.crumb{font-size:13px;color:var(--ink3);margin:0 0 10px}
.crumb a{color:var(--ink2);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
h1{font-size:22px;margin:0 0 6px}
h2{font-size:17px;margin:0 0 10px}
.path{display:inline-block;background:#f1f5f9;border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:13px;color:var(--ink2);margin:2px 0 10px}
.linkbtn{border:0;background:none;color:#2563eb;padding:0;text-decoration:underline;font-size:14px}
.muted{color:var(--ink3)}

/* dải thứ tự khai báo */
.seq{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.seq a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;font-size:13px}
.seq a i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#e5e7eb;color:var(--ink2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.seq a.on{border-color:var(--dark);color:var(--ink);font-weight:600}
.seq a.on i{background:var(--dark);color:var(--lime)}
.seq .ov{border-style:dashed}

.intro{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.intro p{margin:0 0 8px}
.rules ul{margin:0;padding-left:18px}
.rules li{margin-bottom:6px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 18px;font-weight:600;color:var(--ink2)}
.tabs button.on{background:var(--dark);border-color:var(--dark);color:#fff}

.work{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.steps{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto}
.sub{display:flex;background:#eef1f5;border-radius:8px;padding:3px;margin-bottom:10px;flex-wrap:wrap}
.sub button{flex:1;border:0;background:transparent;padding:6px 8px;border-radius:6px;font-size:13px;color:var(--ink2);white-space:nowrap}
.sub button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.step{display:flex;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid transparent;margin-bottom:6px;cursor:pointer}
.step .n{flex:0 0 24px;height:24px;border-radius:50%;background:#e5e7eb;color:var(--ink2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.step.cur{background:#fff;border-color:var(--hl);box-shadow:0 0 0 3px rgba(255,122,0,.12)}
.step.cur .n{background:var(--hl);color:#fff}
.step.done{opacity:.6}
.step.done .n{background:var(--lime-d);color:#fff}
.step .tx{flex:1;min-width:0}
.step .act{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.step .act button{border:0;background:none;padding:0;font-size:13px;color:#2563eb}
.step img{display:block;width:100%;margin-top:8px;border:1px solid var(--line);border-radius:6px;cursor:zoom-in}
.note{background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:8px;padding:10px 12px;font-size:14px;margin-top:10px}
.fin{background:var(--lime-bg);border:1px solid var(--green-bd);border-radius:8px;padding:10px 12px;font-size:14px;margin-top:10px}
.fin button{margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 10px;font-size:13px}

.simwrap{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.simbar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2);gap:10px}
.simbar button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 10px;font-size:13px;white-space:nowrap}
.simscroll{overflow-x:auto}

.msgs{margin-top:16px}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{color:var(--ink2);font-weight:600;background:#f8fafc}
code{background:#f1f5f9;border-radius:4px;padding:1px 5px;font-family:inherit}
footer{color:var(--ink3);font-size:13px;margin:18px 0 8px}
.lb{position:fixed;inset:0;background:rgba(10,12,18,.82);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:6px;background:#fff}

/* ---------- portal ---------- */
.portal{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.side{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;padding:10px}
.side .mod{border:0;background:none;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.side .mod:hover{background:#f1f5f9}
.side .mod.on{background:var(--dark);color:#fff}
.side .mod small{font-weight:500;font-size:11px;border-radius:999px;padding:0 7px;background:var(--lime-bg);color:var(--green)}
.side .mod.on small{background:var(--lime);color:#111}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 14px;text-decoration:none;color:var(--ink);position:relative}
.card:hover{border-color:var(--lime-d);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.card .f{font-size:12px;color:var(--ink3)}
.card .nm{font-weight:600;margin:2px 0}
.card .en{font-size:12px;color:var(--ink3)}
.card.off{background:#fafbfc;color:var(--ink3);cursor:default}
.card.off:hover{border-color:var(--line);box-shadow:none}
.tag{display:inline-block;font-size:11px;border-radius:999px;padding:1px 8px;margin-top:6px}
.tag.ok{background:var(--lime-bg);color:var(--green);border:1px solid var(--green-bd)}
.tag.no{background:#f1f5f9;color:var(--ink3);border:1px solid var(--line)}
.folder{margin:18px 0 8px;font-weight:700;color:var(--ink2);font-size:14px;display:flex;align-items:center;gap:10px}
.folder a{font-weight:600;font-size:13px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:16px}
.start{display:block;text-decoration:none;color:#fff;background:var(--dark);border-radius:10px;padding:16px 18px}
.start b{color:var(--lime)}
.start .go{display:inline-block;margin-top:10px;background:var(--lime);color:#111;border-radius:6px;padding:4px 12px;font-weight:600;font-size:14px}

/* ---------- trang tổng quan ---------- */
.flowfig{margin:0}
.flowfig svg{width:100%;height:auto;display:block}
.flowfig figcaption{font-size:14px;color:var(--ink2);margin-top:8px}
.flowfig a{cursor:pointer}
.flowfig a:hover rect.nd{stroke:var(--hl);stroke-width:2.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.life{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.life .s{border:1px solid;border-radius:6px;padding:2px 10px;font-size:13px;font-weight:600}
.life .a{color:var(--ink3);font-size:13px}
.check li{margin-bottom:6px}

/* ---------- khung mô phỏng (clone giao diện hệ thống) ---------- */
.sim{position:relative;min-width:980px;background:#f8fafc;font-size:14px;color:#1f2937;user-select:none}
.s-top{height:52px;background:#fff;display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}
.s-tab{background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;padding:7px 12px;font-size:12px;font-weight:500;display:flex;gap:10px;align-items:center;margin-bottom:-1px}
.s-tab i{font-style:normal;color:#6b7280}
.s-right{display:flex;align-items:center;gap:18px;align-self:center;font-size:13px;font-weight:600}
.s-ava{width:28px;height:28px;border-radius:50%;background:var(--lime-bg);color:#5b8c00;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-right:6px}
.s-body{padding:12px 16px 16px;min-height:600px}
.s-h1{font-size:19px;font-weight:600;margin:4px 0 12px}
.s-card{background:#fff;border:1px solid var(--line);border-radius:8px;position:relative;margin-bottom:12px}
.s-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);min-height:56px}
.s-head .tt{font-weight:600;font-size:15px}
.s-head .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.s-cnt{border:1px solid var(--line);border-radius:4px;padding:0 7px;font-size:12px;line-height:22px;background:#fafafa}
.s-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px;padding:10px 14px 14px}
.s-filters .f-lab{font-size:13px;color:#4b5563}
.btn{border:1px solid #d9dee5;background:#fff;color:#1f2937;border-radius:6px;padding:4px 11px;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:22px}
.btn svg{width:14px;height:14px}
.btn.lime{background:var(--lime);border-color:var(--lime);color:#1f2937}
.btn.lime:hover{background:#b6ec3f}
.btn.press{background:var(--lime-d);border-color:var(--lime-d);color:#fff}
.btn.off{color:#b4bac4;background:#fafafa;cursor:not-allowed}
.btn.dng{border-color:var(--red);color:var(--red)}
.btn.dng:hover{background:var(--red-bg)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{border-color:transparent;padding:4px 6px}
.btn.sm{padding:1px 8px;font-size:13px}
.s-in,.s-ta{width:100%;border:1px solid #d9dee5;border-radius:6px;padding:5px 11px;font:inherit;font-size:14px;color:#1f2937;background:#fff}
.s-in:focus,.s-ta:focus{outline:0;border-color:#a3d93b;box-shadow:0 0 0 2px rgba(200,251,91,.35)}
.s-in[disabled]{background:#f3f4f6;color:#9ca3af}
.s-in.err,.sel-v.err{border-color:var(--red)}
.s-ta{height:54px;resize:vertical}
.f-lab{font-size:14px;color:#1f2937;margin-bottom:6px}
.f-lab .req{color:var(--red);margin-left:3px}
.f-err{color:var(--red);font-size:13px;margin-top:3px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;padding:18px 22px}
.f-grid.c3{grid-template-columns:1fr 1fr 1fr}
.full{grid-column:1/-1}
.sel-box{position:relative}
.sel-v{border:1px solid #d9dee5;border-radius:6px;padding:5px 11px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:#fff;min-height:34px;gap:8px}
.sel-v .ph{color:#9ca3af}
.sel-v.dis{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}
.sel-v svg{width:12px;height:12px;color:#9ca3af;flex:0 0 12px}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.03);padding:4px;z-index:6;max-height:240px;overflow:auto}
.sel-list div{padding:6px 12px;border-radius:4px;cursor:pointer}
.sel-list div:hover{background:#f5f5f5}
.sel-list div.on{background:var(--lime-bg);font-weight:600}
.sel-list div.dis{color:#b4bac4;cursor:not-allowed;background:none}
.sel-list div.ind{padding-left:28px}
.radios{display:inline-flex}
.radios span{border:1px solid #d9dee5;padding:5px 24px;margin-left:-1px;cursor:pointer;background:#fff;white-space:nowrap}
.radios span:first-child{border-radius:6px 0 0 6px;margin-left:0}
.radios span:last-child{border-radius:0 6px 6px 0}
.radios span.on{border-color:var(--lime-d);color:var(--lime-d);font-weight:600;position:relative;z-index:1}
.cbx{display:inline-flex;width:16px;height:16px;border:1px solid #c9d1db;border-radius:4px;background:#fff;align-items:center;justify-content:center;flex:0 0 16px;cursor:pointer;vertical-align:middle}
.cbx.dis{background:#f3f4f6;border-color:#e3e7ec;cursor:not-allowed}
.cbx.on{background:var(--lime-d);border-color:var(--lime-d)}
.cbx.on:after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.bdg{display:inline-block;font-size:12px;border:1px solid;border-radius:4px;padding:0 7px;line-height:20px;white-space:nowrap}
.bdg.DRAFT{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-bd)}
.bdg.INACTIVE,.bdg.OBSOLETE{color:var(--red-d);background:var(--red-bg);border-color:var(--red-bd)}
.bdg.ACTIVE{color:var(--green);background:var(--green-bg);border-color:var(--green-bd)}
.bdg.PENDING{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-bd)}
.bdg.TYPE{color:#4b5563;background:#fafafa;border-color:#e5e7eb}
table.g{width:100%;border-collapse:collapse;font-size:14px}
table.g th{background:#fff;text-align:left;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.g td{padding:7px 12px;border-bottom:1px solid #f0f2f5;white-space:nowrap}
table.g tr.sel td{background:var(--lime-bg)}
table.g td.c,table.g th.c{width:40px;text-align:center}
table.g td.a,table.g th.a{width:70px;text-align:center}
table.g .lk{text-decoration:underline;font-weight:500}
.dots{border:0;background:none;width:26px;height:26px;border-radius:5px;font-size:16px;line-height:1;color:#4b5563}
.dots:hover,.dots.on{background:#f0f2f5}
.pager{display:flex;justify-content:flex-end;gap:10px;align-items:center;padding:10px 14px;font-size:13px;color:#4b5563}
.pager .pg{border:1px solid var(--lime-d);color:var(--lime-d);border-radius:6px;padding:1px 9px}
.s-menu{position:absolute;z-index:22;background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.03);padding:4px;min-width:150px}
.s-menu div{padding:6px 12px;border-radius:4px;cursor:pointer;white-space:nowrap}
.s-menu div:hover{background:#f5f5f5}
.s-menu div.dng{color:var(--red)}
.s-toast{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.12);padding:9px 14px;display:flex;gap:8px;align-items:center;z-index:40;font-size:14px;white-space:nowrap}
.s-toast .dot{width:16px;height:16px;border-radius:50%;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
.s-toast.ok .dot{background:#52c41a}.s-toast.bad .dot{background:var(--red)}
.s-pop{position:absolute;z-index:23;background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.03);padding:12px 14px}
.s-pop .q{display:flex;gap:8px;align-items:center;margin-bottom:10px;white-space:nowrap}
.s-pop .q i,.s-cf .ic{width:16px;height:16px;border-radius:50%;background:#faad14;color:#fff;font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 16px}
.s-pop .b{display:flex;justify-content:flex-end;gap:8px}
.s-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-start;justify-content:center;padding-top:70px}
.s-modal{background:#fff;border-radius:10px;width:720px;max-width:calc(100% - 40px);box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative}
.s-modal.wide{width:900px}
.s-modal .mh{padding:18px 22px 0;font-size:18px;font-weight:600}
.s-modal .ms{padding:4px 22px 0;color:#4b5563;font-size:14px}
.s-modal .x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:20px;color:#6b7280}
.s-modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:12px 22px 18px}
.s-modal .sec{padding:12px 22px 0;font-weight:600}
.s-cf{background:#fff;border-radius:10px;width:420px;padding:20px 22px 16px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.s-cf .h{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px}
.s-cf .p{margin:8px 0 0 26px;color:#374151;font-size:14px}
.s-cf .b{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.kv .k{color:#4b5563;font-size:13px;margin-bottom:3px}
.kv .v{font-weight:500}
.info{background:var(--blue-bg);border:1px solid var(--blue-bd);border-radius:6px;padding:8px 12px;color:#1f2937;font-size:14px}
.warnbox{background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:6px;padding:8px 12px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:5px;padding:1px 8px;font-size:12px;font-weight:600;margin:3px 4px 3px 0}
.chip.g{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-bd)}
.chip.s{color:#4b5563;background:#f3f4f6;border-color:#e5e7eb}
.chip.a{color:#ad6800;background:#fffbe6;border-color:#ffe58f}
.chip i{font-style:normal;color:#9ca3af;cursor:pointer}
.rule{border:1px solid var(--line);border-radius:8px}
.rule .rh{padding:10px 14px;border-bottom:1px solid var(--line)}
.rule .rh b{font-size:14px}
.rule .rh small{display:block;color:#6b7280;font-size:12px}
.rule .pat{min-height:58px;margin:10px 14px;border:1px dashed #d9dee5;border-radius:6px;padding:6px 8px;background:#fafbfc;color:#6b7280;font-size:13px}
.rule .tok{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.rule .res{border-top:1px solid var(--line);padding:8px 14px;font-family:Consolas,monospace;font-size:13px}
.s-tree{padding:0 10px 10px}
.grp{border:1px solid var(--line);border-radius:8px;padding:4px 8px;margin-bottom:8px}
.row{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:5px;cursor:pointer;position:relative}
.row:hover{background:#f6f8fa}
.row.sel{background:var(--lime-bg)}
.row .car{width:12px;color:#6b7280;font-size:11px;flex:0 0 12px;text-align:center}
.row .ind{flex:0 0 18px;height:30px;position:relative}
.row .ind:before{content:"";position:absolute;left:4px;top:0;height:16px;width:10px;border-left:1px solid #c9d1db;border-bottom:1px solid #c9d1db;border-bottom-left-radius:3px}
.r-code{font-weight:500;white-space:nowrap}
.r-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.r-nm.grey{color:#9ca3af}
.addc{flex:0 0 22px;height:22px;border-radius:4px;display:none;align-items:center;justify-content:center;color:#5b8c00;background:#f4fde3}
.addc svg{width:14px;height:14px}
.row:hover .addc,.addc.show{display:inline-flex}
.addc.dis{color:#c4c9d0;background:#f5f5f5;cursor:not-allowed}
.s-search{display:block;width:calc(100% - 20px);margin:0 10px 10px;border:1px solid #d9dee5;border-radius:6px;padding:5px 10px;font:inherit;font-size:14px}
.hl{outline:3px solid var(--hl)!important;outline-offset:2px;animation:pulse 1.4s ease-in-out infinite;border-radius:6px}
@keyframes pulse{0%,100%{outline-color:rgba(255,122,0,1)}50%{outline-color:rgba(255,122,0,.35)}}

@media (max-width:1100px){
  .intro,.hero,.two{grid-template-columns:1fr}
  .work,.portal{grid-template-columns:1fr}
  .steps,.side{position:static;max-height:none}
}
@media (max-width:640px){
  .wrap{padding:14px 16px}
  .top{padding:10px 16px;flex-wrap:wrap}
  .top-search{order:3;flex:1 1 100%}
  .brand span{display:none}
  .langs button{padding:5px 8px;font-size:12px}
}