/* Thạo Năng Lực (TNL) · giao diện chương trình, trang kỹ năng (luyện 5 bước), bài đánh giá (4 bước), kết quả, tiến bộ, người chấm.
   Dùng token của style.css (cobalt --accent, lime --hi, ink --ink). Cập nhật 09/10/2026 theo RV-737/738. */
.tnl{--tnl-soft:#F2F4F7;--tnl-bg:#F6F7FB;--tnl-ok:#1B7F4B;--tnl-ok-bg:#E8F6EE;--tnl-warn:#8A5A00;--tnl-warn-bg:#FFF4D6;--tnl-bad:#B3261E;--tnl-bad-bg:#FDECEA;--tnl-info-bg:#EEF2FF;--tnl-cob:#2448FF;--tnl-cob-d:#1733C9;--tnl-navy:#0B1B5C}
.tnl .wrap{max-width:1180px}
.tnl *{min-width:0}
.tnl p,.tnl li,.tnl h1,.tnl h2,.tnl h3,.tnl pre,.tnl td{overflow-wrap:anywhere}
.tnl .btn{margin-top:0}
.tnl .ic{width:18px;height:18px;flex:none}
.tnl-small{font-size:14px;color:var(--muted)}
.tnl-section-id{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.02em;margin:0 0 4px}
.tnl-kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tnl-cob-d)}
.tnl-lead{font-size:clamp(17px,1.5vw,19px);max-width:56ch;margin:0 0 6px;line-height:1.55}
.tnl-link{border:0;background:none;padding:0;color:var(--tnl-cob-d);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tnl-icon-btn{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:var(--rb);font:700 20px/1 var(--body);color:var(--muted);cursor:pointer;display:inline-grid;place-items:center}
.tnl-icon-btn:hover{color:var(--tnl-bad);border-color:currentColor}
.tnl :focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Thạo ---------- */
.tnl-thao{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.tnl-thao-btn{position:relative;width:150px;height:140px;border:0;padding:0;background:transparent;cursor:pointer;border-radius:22px}
.tnl-thao-btn img{width:100%;height:100%;object-fit:contain;transition:transform 360ms ease;filter:drop-shadow(0 12px 18px rgba(23,51,201,.22))}
.tnl-thao-btn canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.tnl-thao-btn.is-3d img{visibility:hidden}
.tnl-thao-cap{position:relative;margin:0;display:flex;gap:8px;align-items:flex-start;width:100%;max-width:34ch;padding:10px 12px;background:#fff;border:1px solid #C9D2FF;border-radius:12px;font-size:15px;line-height:1.45;color:var(--ink);box-shadow:0 6px 18px rgba(16,19,26,.06)}
.tnl-thao-cap::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:#fff;border-left:1px solid #C9D2FF;border-top:1px solid #C9D2FF;transform:translateX(-50%) rotate(45deg)}
.tnl-thao-cap span:empty{display:none}
.tnl-thao-cap:has(span:empty){display:none}
.tnl-thao-face{width:28px;height:28px;flex:none}
.tnl-thao[data-state=bat-dau] .tnl-thao-btn img{animation:tnl-chao 1.5s ease 1}
.tnl-thao[data-state=goi-y] .tnl-thao-btn img,.tnl-thao[data-state=gap-kho] .tnl-thao-btn img{animation:tnl-nghieng 1s ease 1}
.tnl-thao[data-state=phat-hien-loi] .tnl-thao-btn img{animation:tnl-gat 1.3s ease 1}
.tnl-thao[data-state=dung-buoc] .tnl-thao-btn img{animation:tnl-nay .8s ease 1}
.tnl-thao[data-state=hoan-thanh] .tnl-thao-btn img{animation:tnl-vui 1.8s ease 1}
.tnl-thao[data-state=chua-dat] .tnl-thao-btn img{animation:tnl-nhin-lai 1.3s ease 1}
.tnl-thao[data-state=dang-nghi] .tnl-thao-btn img{animation:tnl-tho 2.4s ease-in-out infinite}
.tnl-thao[data-state=tap-trung] .tnl-thao-btn img{transform:rotate(-2deg) scale(.98)}
.tnl-thao-nho .tnl-thao-btn{width:96px;height:90px}
@keyframes tnl-chao{0%{transform:rotate(0)}30%{transform:rotate(-7deg) translateY(-4px)}60%{transform:rotate(5deg)}100%{transform:rotate(0)}}
@keyframes tnl-nghieng{0%{transform:rotate(0)}50%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@keyframes tnl-gat{0%{transform:translateY(0)}35%{transform:rotate(-3deg)}65%{transform:translateY(5px)}100%{transform:translateY(0)}}
@keyframes tnl-nay{0%{transform:translateY(0)}40%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes tnl-vui{0%{transform:scale(1)}25%{transform:scale(1.06) rotate(-4deg)}50%{transform:scale(1.02) rotate(4deg)}75%{transform:scale(1.05) rotate(-2deg)}100%{transform:scale(1)}}
@keyframes tnl-nhin-lai{0%{transform:rotate(0)}40%{transform:rotate(-6deg) translateY(3px)}100%{transform:rotate(0)}}
@keyframes tnl-tho{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.tnl-thao img{animation:none!important;transition:none!important;transform:none!important}}

/* ---------- Trang chương trình ---------- */
.tnl-hero{background:radial-gradient(800px 380px at 92% -10%,rgba(36,72,255,.12),transparent 60%),var(--tnl-bg);border-bottom:1px solid var(--line)}
.tnl-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:36px;align-items:center;padding:40px 0 36px}
.tnl-hero h1{font-size:clamp(30px,3.6vw,46px);line-height:1.08;max-width:17ch;margin:0 0 14px;letter-spacing:-.015em}
.tnl-hero .btn-row{margin-top:18px;align-items:center}
.tnl-hero .tnl-note{margin:12px 0 0;font-size:15px;color:var(--muted)}
.tnl-hero-pts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;font-weight:600}
.tnl-hero-pts li{display:inline-flex;align-items:center;gap:7px}
.tnl-hero-pts li::before{content:"";width:9px;height:9px;background:var(--hi);border:2px solid var(--ink);border-radius:2px}
.tnl-tiep-tuc{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:18px 0 0;padding:12px 14px;background:#fff;border:1.5px solid var(--ink);border-radius:var(--rb)}
.tnl-tiep-tuc p{margin:0}
.tnl-tiep-tuc[hidden]{display:none}
/* Minh họa đầu vào → Thạo → sản phẩm (dùng chung trang chủ, trang chương trình) */
.tnl-demo{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) 88px minmax(0,1.3fr);align-items:center;gap:0;min-height:300px}
.tnl-demo-in,.tnl-demo-out{position:relative;background:#fff;border:1px solid #D7DCEA;border-radius:12px;padding:14px 14px 12px;box-shadow:0 18px 40px rgba(11,27,92,.10)}
.tnl-demo-in{transform:rotate(-2deg);background:#FFFDF2;border-color:#EADFA8}
.tnl-demo-k{display:block;margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A6D00}
.tnl-demo-out .tnl-demo-k{color:var(--tnl-cob-d)}
.tnl-demo-in p{margin:0 0 6px;font-size:13px;line-height:1.45;color:#3B3F49}
.tnl-demo-in mark{background:#FFE58A;padding:0 2px}
.tnl-demo-mid{display:grid;justify-items:center;gap:4px;z-index:1}
.tnl-demo-mid img{width:84px;height:auto;filter:drop-shadow(0 8px 12px rgba(23,51,201,.25))}
.tnl-demo-mid span{font-size:11.5px;font-weight:700;color:var(--tnl-cob-d);text-align:center;line-height:1.25}
.tnl-demo-out table{width:100%;border-collapse:collapse;font-size:12.5px}
.tnl-demo-out th{background:var(--tnl-info-bg);text-align:left;font-weight:700;padding:5px 6px;border:1px solid #D6DCF5}
.tnl-demo-out td{padding:5px 6px;border:1px solid #E3E7F0;vertical-align:top}
.tnl-demo-out th,.tnl-demo-out td{white-space:nowrap}
.tnl-demo-out td:first-child{white-space:normal}
.tnl-demo-out td.cxn{color:var(--tnl-bad);font-style:italic}
.tnl-demo-cert{position:absolute;right:-8px;bottom:-18px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--ink);color:#fff;border-radius:999px;font-size:12.5px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px rgba(16,19,26,.25)}
.tnl-demo-cert b{background:var(--hi);color:var(--ink);padding:2px 7px;border-radius:999px;font-size:11.5px}
.tnl-demo-cert:hover{background:#000}
.tnl-sec{padding:34px 0 10px}
.tnl-sec>h2,.tnl-sec .tnl-sec-h h2{margin:0 0 6px}
.tnl-sub{color:var(--muted);margin:0 0 16px;max-width:70ch}
.tnl-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:f}
.tnl-flow li{position:relative;background:#fff;border:1px solid var(--line);padding:16px 16px 14px;counter-increment:f}
.tnl-flow li::before{content:counter(f);display:inline-grid;place-items:center;width:30px;height:30px;margin:0 0 10px;background:var(--ink);color:var(--hi);font-weight:800;border-radius:4px}
.tnl-flow b{display:block;font-size:16px;margin:0 0 4px}
.tnl-flow p{margin:0;font-size:14.5px;color:var(--muted)}
.tnl-flow li.is-cn{background:var(--tnl-navy);border-color:var(--tnl-navy);color:#fff}
.tnl-flow li.is-cn p{color:#C7D1FF}.tnl-flow li.is-cn::before{background:var(--hi);color:var(--ink)}
.tnl-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:10px;margin:0;padding:0;list-style:none}
.tnl-role{border:1px solid var(--line);background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.tnl-role b{font-size:15.5px}
.tnl-role p{margin:0;font-size:14.5px;color:var(--muted)}
.tnl-role a{font-weight:700;font-size:14.5px;margin-top:auto}
.tnl-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.tnl-tools input[type=search]{flex:1 1 280px;min-width:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--rb);font:16px var(--body)}
.tnl-tools input[type=search]:focus{border-color:var(--accent)}
.tnl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.tnl-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;min-height:36px;font:600 14px var(--body);cursor:pointer;color:var(--ink)}
.tnl-chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tnl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:12px;margin:0;padding:0;list-style:none}
.tnl-card{border:1px solid var(--line);background:#fff;padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;position:relative;transition:border-color var(--motion) ease,box-shadow var(--motion) ease}
.tnl-card:hover{border-color:var(--ink);box-shadow:0 8px 22px rgba(16,19,26,.08)}
.tnl-card:focus-within{border-color:var(--accent)}
.tnl-card[hidden]{display:none}
.tnl-card-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tnl-type{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:4px;background:var(--tnl-info-bg);color:var(--tnl-cob-d);font-size:12.5px;font-weight:700}
.tnl-card .tnl-g{font-size:12.5px;color:var(--muted);font-weight:600}
.tnl-card h3{margin:0;font-size:17px;line-height:1.35}
.tnl-card h3 a{text-decoration:none;color:inherit}
.tnl-card h3 a::after{content:"";position:absolute;inset:0}
.tnl-card .tnl-out{margin:0;font-size:14.5px;line-height:1.45;color:#3B4150}
.tnl-card .tnl-cm{margin:0;font-size:13px;color:var(--muted)}
.tnl-card .tnl-st{margin-top:auto;padding-top:8px;border-top:1px solid #EEF0F4;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.tnl-card [data-bt]{font-weight:800;color:var(--tnl-cob-d);display:inline-flex;align-items:center;gap:6px}
.tnl-card [data-bt]::after{content:"→"}
.tnl-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:700;background:var(--tnl-soft);color:var(--ink)}
.tnl-badge.ok{background:var(--tnl-ok-bg);color:var(--tnl-ok)}
.tnl-badge.warn{background:var(--tnl-warn-bg);color:var(--tnl-warn)}
.tnl-badge.bad{background:var(--tnl-bad-bg);color:var(--tnl-bad)}
.tnl-badge.info{background:var(--tnl-info-bg);color:var(--accent-deep)}
.tnl-badge.free{background:var(--hi);color:var(--ink)}
.tnl-empty{padding:18px;border:1px dashed var(--line);color:var(--muted)}
.tnl-faq details{border-top:1px solid var(--line);padding:12px 0}
.tnl-faq summary{cursor:pointer;font-weight:700;min-height:28px}
.tnl-faq p{margin:8px 0 0;color:var(--ink);max-width:75ch}
.tnl-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tnl-frames li{background:#fff;border:1px solid var(--line);border-top:4px solid var(--tnl-cob-d);padding:16px 18px}
.tnl-frames li+li{border-top-color:#003399}
.tnl-frames b{display:block;font-size:18px;line-height:1.2}
.tnl-frames span{display:block;margin:6px 0 0;font-size:14.5px;color:#3B4150}
.tnl-frames a{display:inline-block;margin-top:8px;font-weight:700;font-size:14.5px}
.tnl-frames .tnl-org{display:block;margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A6172}
.tnl-frames-h{margin:22px 0 10px;font-size:17px}
.tnl-frames.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tnl-frames.is-3 li,.tnl-frames.is-3 li+li{border-top-color:#C9CDD6}
@media (max-width:900px){.tnl-frames.is-3{grid-template-columns:1fr}}

/* ---------- Đầu trang con (kỹ năng, bài làm, tiến bộ) ---------- */
.tnl-top{background:var(--tnl-bg);border-bottom:1px solid var(--line)}
.tnl-top-in{padding:20px 0 16px}
.tnl-crumbs{margin:0 0 8px;font-size:14px;color:var(--muted)}
.tnl-crumbs a{color:inherit}
.tnl-top h1{font-size:clamp(24px,2.6vw,34px);max-width:34ch;margin:0}
.tnl-top .tnl-lead{margin-top:8px}
.tnl-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;align-items:center}

/* ---------- Không gian làm bài ---------- */
.tnl-ws{padding:16px 0 8px}
.tnl-ws-top{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;margin:0 0 10px}
.tnl-chang{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14.5px;color:var(--muted)}
.tnl-chang b{color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--hi);padding:3px 8px;border-radius:3px}
.tnl-save{margin:0;font-size:14px;color:var(--muted);min-height:1.4em}
.tnl-save.ok{color:var(--tnl-ok)}.tnl-save.bad{color:var(--tnl-bad);font-weight:600}
.tnl-conf{margin:6px 0 10px}
.tnl-stepper{position:sticky;top:0;z-index:5;transition:top .12s ease;display:flex;align-items:center;gap:12px;margin:0 -2px 14px;padding:8px 2px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.tnl-stepper ol{flex:1;list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tnl-stepper ol::-webkit-scrollbar{display:none}
.tnl-stepper li{flex:1 0 auto;position:relative}
.tnl-stepper li button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:44px;border:1px solid transparent;background:transparent;border-radius:var(--rb);font:600 14.5px var(--body);color:var(--muted);cursor:pointer;text-align:left;white-space:nowrap}
.tnl-stepper li button:hover{background:var(--tnl-soft);color:var(--ink)}
.tnl-step-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #C5CBD8;font-size:13px;font-weight:800;background:#fff;flex:none}
.tnl-stepper li.done .tnl-step-n{background:var(--ink);border-color:var(--ink);color:var(--hi)}
.tnl-stepper button[aria-current=step]{background:var(--tnl-info-bg);color:var(--ink);border-color:#C9D2FF}
.tnl-stepper button[aria-current=step] .tnl-step-n{background:var(--tnl-cob);border-color:var(--tnl-cob);color:#fff}
.tnl-all-btn{flex:none;font-size:14px;white-space:nowrap;min-height:44px}
.tnl-ws-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.tnl-ws-main{min-width:0}
.tnl-pane{background:#fff;border:1px solid var(--line);padding:22px 24px 18px;margin:0 0 14px}
.tnl-pane[hidden]{display:none}
.tnl-ws.is-all .tnl-pane[hidden]{display:block}
.tnl-pane>h2{margin:0 0 14px;font-size:clamp(22px,2vw,27px)}
.tnl-pane h3{font-size:16.5px;margin:18px 0 8px}
.tnl-pane h2:focus{outline:none}
.tnl-step-k{margin:0 0 4px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tnl-cob-d)}
.tnl-step-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:22px -24px -18px;padding:14px 24px;background:var(--tnl-bg);border-top:1px solid var(--line)}
.tnl-ws.is-all .tnl-step-foot{display:none}
.tnl-task{background:var(--tnl-navy);color:#fff;padding:18px 20px;border-radius:6px;margin:0 0 6px}
.tnl-task p{margin:0 0 8px;color:#DCE3FF}
.tnl-task-k{margin:0 0 6px!important;font-size:12px!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hi)!important}
.tnl-task-out{font:700 clamp(18px,1.8vw,22px)/1.35 var(--display);color:#fff!important}
.tnl-task b{color:#fff}
.tnl-task .tnl-req li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.tnl-meta-line{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;margin:6px 0 0!important}
.tnl-meta-line span::before{content:"· ";color:var(--hi)}
.tnl-two-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:6px}
.tnl-shape-l{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.tnl-shape-l span{display:block;font-size:13.5px;color:var(--muted)}
.tnl-shape-t{min-width:640px}
.tnl-shape-t th{font-size:13px;white-space:nowrap}
.tnl-shape-t td{font-size:13px}
.tnl-eg{margin:16px 0 0;border:1px solid #C9D2FF;background:var(--tnl-info-bg);padding:10px 14px;border-radius:6px}
.tnl-eg summary{cursor:pointer;font-weight:700;color:var(--tnl-cob-d)}
.tnl-eg p{margin:8px 0 0}
.tnl-req{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tnl-req li{padding:4px 10px;border:1px solid #C9D2FF;background:var(--tnl-info-bg);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--tnl-cob-d)}
.tnl-ws-rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px}
.tnl-guide{background:linear-gradient(180deg,#F1F4FF,#fff);border:1px solid #D6DCF5;border-radius:10px;padding:14px 12px 12px}
.tnl-rail-acts{display:grid;gap:8px;margin:0}
.tnl-rail-acts .tnl-btn-2{justify-content:center}
.tnl-ask{background:#fff;border:1px solid var(--line);border-radius:6px}
.tnl-ask>summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style-position:inside}
.tnl-ask[open]>summary{border-bottom:1px solid var(--line)}
.tnl-ask .tnl-tool{border:0;border-radius:0}
.tnl-src-inline{margin:0 0 16px;border:1px solid var(--line);background:var(--tnl-bg);padding:10px 14px;border-radius:6px}
.tnl-src-inline>summary{cursor:pointer;font-weight:700}
.tnl-done{margin:16px 0 0;padding:14px 16px;border:1.5px dashed #9AA7D6;border-radius:6px}
.tnl-done.is-done{border-style:solid;border-color:var(--tnl-ok);background:var(--tnl-ok-bg)}
.tnl-done-next{margin-top:10px}
.tnl-sum{border:1px solid var(--line);background:var(--tnl-bg);padding:12px 16px;margin:0 0 12px}
.tnl-sum h3:first-child{margin-top:4px}
.tnl-sum h4{margin:12px 0 4px;font-size:14.5px}
.tnl-pre-wrap{white-space:pre-wrap;margin:0}
.tnl-selfcheck{border:1px solid var(--line);padding:12px 16px;margin:14px 0;display:grid;gap:8px}
.tnl-selfcheck legend{font-weight:700;padding:0 6px}
.tnl-selfcheck label{display:flex;gap:10px;align-items:flex-start;font-size:15px;min-height:28px}
.tnl-selfcheck input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--tnl-cob)}
.tnl-checks{border:1px solid var(--line);background:var(--tnl-bg);padding:12px 16px;margin:0 0 12px}
.tnl-checks-h{margin:0 0 6px;font-weight:800;font-size:14px;letter-spacing:.02em}
.tnl-check{list-style:none;padding:0;margin:0 0 6px}
.tnl-check li{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:15px}
.tnl-check li::before{content:"";width:18px;height:18px;flex:none;border:2px solid #B9C0CE;border-radius:4px;margin-top:3px;background:#fff}
.tnl-check li.ok::before{background:var(--tnl-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--tnl-ok)}
.tnl-check li.bad{color:var(--tnl-bad)}
.tnl-check li.bad::before{border-color:var(--tnl-bad)}
/* Trường nhập */
.tnl-field{margin:0 0 16px}
.tnl-field label,.tnl-field .tnl-lb{display:block;font-weight:700;font-size:15px;margin:0 0 6px}
.tnl-help{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.tnl-field textarea,.tnl-field input[type=text],.tnl-field input:not([type]),.tnl-field select{width:100%;box-sizing:border-box;padding:11px 12px;border:1.5px solid #CDD3DE;border-radius:var(--rb);font:16px/1.55 var(--body);min-height:48px;resize:vertical;background:#fff}
.tnl-field textarea.tnl-big{min-height:280px}
.tnl-field textarea.tnl-mono{font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.tnl-field textarea:focus,.tnl-field input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.tnl-count{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tnl-count.ok{color:var(--tnl-ok)}.tnl-count.bad{color:var(--tnl-bad);font-weight:600}
.tnl-mode{margin:4px 0 14px;font-size:14px}
/* Bảng nhập */
.tnl-tbl-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;margin:0 0 8px}
.tnl-tbl-h h3{margin:0;font-size:16.5px}
.tnl-tbl-wrap{overflow-x:auto;border:1.5px solid #CDD3DE;border-radius:6px;background:#fff}
.tnl-tbl{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
.tnl-tbl th{position:sticky;top:0;background:var(--tnl-info-bg);text-align:left;vertical-align:bottom;padding:8px 8px 6px;border-bottom:1.5px solid #C9D2FF;border-right:1px solid #DCE1EA}
.tnl-tbl th span{display:block;font-weight:800;font-size:13.5px}
.tnl-tbl th small{display:block;font-weight:400;font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px}
.tnl-tbl td{padding:0;border-right:1px solid #E3E7F0;border-bottom:1px solid #E3E7F0;vertical-align:top}
.tnl-tbl td textarea{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:10px 8px;border:0;resize:none;font:14.5px/1.45 var(--body);background:transparent;overflow:hidden}
.tnl-tbl td textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#FAFBFF}
.tnl-tbl td textarea::placeholder{color:#A3AAB8}
.tnl-tbl tbody tr:nth-child(even) td{background:#FAFBFD}
.tnl-row-x{width:44px;text-align:center;vertical-align:middle!important}
.tnl-row-x .tnl-icon-btn{margin:4px}
.tnl-tbl-log{min-width:640px}
.tnl-tbl-tools{margin:10px 0 18px;justify-content:space-between}
.tnl-log{margin-top:6px}
/* Tệp */
.tnl-files-h{font-size:16.5px;margin:20px 0 6px}
.tnl-upload{border:1.5px dashed #B9C0CE;padding:14px 16px;margin:0 0 12px;background:#fff;border-radius:6px}
.tnl-upload-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tnl-upload .tnl-lb{font-weight:700;font-size:15px}
.tnl-upload-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.tnl-upload input[type=file]{font-size:14px;max-width:100%}
.tnl-upload .tnl-fname{font-size:14px;color:var(--ink);word-break:break-word}
.tnl-upload .ok{color:var(--tnl-ok);font-weight:600}.tnl .bad{color:var(--tnl-bad)}
.tnl-upload .tnl-fdel{border:0;background:none;color:var(--tnl-bad);font-weight:700;cursor:pointer;font-size:14px;min-height:32px}
.tnl-pv{margin-top:10px;padding:10px;background:var(--tnl-bg);border:1px solid var(--line);border-radius:6px}
.tnl-pv img{display:block;max-width:100%;max-height:360px;margin:0 auto;border:1px solid var(--line);background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 50%/16px 16px}
.tnl-pv video{display:block;max-width:100%;max-height:420px;margin:0 auto;background:#000}
.tnl-pv audio{display:block;width:100%}
.tnl-pv-m{margin:8px 0 0;font-size:14px}
.tnl-ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.tnl-ba .tnl-files-h,.tnl-ba>p,.tnl-ba .tnl-upload:nth-of-type(3){grid-column:1/-1}
.tnl-files{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.tnl-file-btn,.tnl-files a{display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);background:#fff;font:600 14px var(--body);color:var(--ink);text-decoration:none;cursor:pointer;border-radius:6px;text-align:left}
.tnl-file-btn:hover{border-color:var(--ink)}
.tnl-file-btn small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
/* Chat */
.tnl-chat{display:flex;flex-direction:column;max-height:60vh}
.tnl-chat-log{flex:1;min-height:120px;max-height:320px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.tnl-msg{max-width:94%;padding:9px 12px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;border-radius:8px}
.tnl-msg.u{align-self:flex-end;background:var(--tnl-info-bg)}
.tnl-msg.a{align-self:flex-start;background:var(--tnl-soft);border:1px solid var(--line)}
.tnl-msg.s{align-self:center;font-size:13px;color:var(--muted);background:none;text-align:center}
.tnl-chat-f{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.tnl-chat-f textarea{flex:1;min-height:44px;max-height:120px;padding:9px 10px;border:1.5px solid #CDD3DE;border-radius:var(--rb);font:15px var(--body);resize:vertical}
.tnl-chat-f button{align-self:flex-end;padding:11px 14px}
.tnl-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px}
.tnl-quick button{border:1px solid #C9D2FF;background:#fff;border-radius:999px;padding:6px 11px;min-height:34px;font:600 13px var(--body);cursor:pointer;color:var(--tnl-cob-d)}
.tnl-tool{background:var(--tnl-info-bg);border:1px solid #C9D2FF;padding:12px 14px}
.tnl-tool p{margin:6px 0 0;font-size:14.5px}
/* Nút, trạng thái */
.tnl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
.tnl-btn-2{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;min-height:44px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:700 15px var(--body);cursor:pointer;text-decoration:none;border-radius:var(--rb)}
.tnl-btn-2:hover{background:var(--tnl-soft)}
.tnl-btn-2:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}
.tnl-status{font-size:14px;color:var(--muted);margin:0}
.tnl-status.ok{color:var(--tnl-ok)}.tnl-status.bad{color:var(--tnl-bad)}
.tnl-alert{padding:12px 14px;border:1px solid var(--line);background:var(--tnl-warn-bg);font-size:15px;margin:0 0 14px}
.tnl-alert.bad{background:var(--tnl-bad-bg)}.tnl-alert.ok{background:var(--tnl-ok-bg)}.tnl-alert.info{background:var(--tnl-info-bg)}
.tnl-box{border:1px solid var(--line);background:#fff;padding:16px 18px;margin:0 0 14px}
.tnl-box h2,.tnl-box h3{margin-top:0}
.tnl-pre{white-space:pre-wrap;word-break:break-word;font:15px/1.55 var(--body);background:var(--tnl-soft);padding:12px 14px;border:1px solid var(--line);margin:0;max-height:420px;overflow:auto}
.tnl-code{font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--tnl-soft);padding:2px 6px;border-radius:3px}
/* Chặng 2 trên trang kỹ năng */
.tnl-stage2{margin:10px 0 22px;background:var(--tnl-navy);color:#fff;border-radius:8px;scroll-margin-top:80px}
.tnl-stage2-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;padding:24px 26px}
.tnl-stage2 h2{color:#fff;margin:8px 0 8px}
.tnl-stage2 p{color:#DCE3FF}
.tnl-stage2 .tnl-chang b{background:var(--hi)}
.tnl-mini-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:m}
.tnl-mini-steps li{counter-increment:m;padding:6px 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:13.5px;font-weight:600}
.tnl-mini-steps li::before{content:counter(m) ". ";color:var(--hi)}
.tnl-facts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;font-size:14.5px}
.tnl-facts li{padding-left:18px;position:relative}
.tnl-facts li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--hi);border-radius:2px}
.tnl-pane .tnl-facts li::before{background:var(--tnl-cob)}
.tnl-stage2 .tnl-btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.tnl-stage2 .tnl-status{color:#FFD9D6}
.tnl-stage2 .tnl-list li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.tnl-stage2 .tnl-list a{color:#fff}
.tnl-stage2 .tnl-small{color:#C7D1FF}
.tnl-expect{margin:0;padding-left:20px;display:grid;gap:6px}
/* Kết quả */
.tnl-timeline{list-style:none;margin:0 0 14px;padding:14px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:#fff;border:1px solid var(--line)}
.tnl-timeline li{position:relative;padding:4px 0 0 30px;color:var(--muted);font-size:14.5px}
.tnl-timeline li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;border:2px solid #C5CBD8;background:#fff}
.tnl-timeline li.done::before{background:var(--tnl-ok);border-color:var(--tnl-ok)}
.tnl-timeline li.cur{color:var(--ink)}
.tnl-timeline li.cur:not(.done)::before{border-color:var(--tnl-cob);box-shadow:0 0 0 4px var(--tnl-info-bg)}
.tnl-timeline b{display:block;color:inherit}
.tnl-timeline span{display:block;font-size:13px}
.tnl-result{border:2px solid var(--ink);padding:20px 22px;background:#fff;margin:0 0 16px}
.tnl-result.is-dat{border-color:var(--tnl-ok);box-shadow:inset 0 6px 0 var(--tnl-ok)}
.tnl-result.is-chua{box-shadow:inset 0 6px 0 var(--hi)}
.tnl-result-h h2{margin:2px 0 6px;font-size:clamp(24px,2.4vw,32px)}
.tnl-result-sum{font-size:16.5px;margin:4px 0 12px}
.tnl-uutien{background:var(--tnl-warn-bg);border-left:4px solid #E6B800;padding:10px 14px;margin:0 0 12px}
.tnl-uutien p{margin:0}
.tnl-uutien .tnl-task-k{color:var(--tnl-warn)!important}
.tnl-crit{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.tnl-crit li{border:1px solid var(--line);border-left-width:5px;padding:10px 12px}
.tnl-crit li.muc-tot{border-left-color:var(--tnl-ok)}.tnl-crit li.muc-kha{border-left-color:#E6B800}.tnl-crit li.muc-can-sua{border-left-color:var(--tnl-bad)}
.tnl-crit-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-weight:700;font-size:15px}
.tnl-muc{font-size:13.5px;padding:2px 9px;border-radius:999px;background:var(--tnl-soft)}
.muc-tot .tnl-muc{background:var(--tnl-ok-bg);color:var(--tnl-ok)}.muc-kha .tnl-muc{background:var(--tnl-warn-bg);color:var(--tnl-warn)}.muc-can-sua .tnl-muc{background:var(--tnl-bad-bg);color:var(--tnl-bad)}
.tnl-crit p{margin:6px 0 0;font-size:14.5px}
.tnl-crit .tnl-ev{font-size:13px;color:var(--muted)}
.tnl-fb{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin-top:6px}
.tnl-fb h3{font-size:15.5px;margin:12px 0 6px}
.tnl-fb ul{margin:0;padding-left:20px;font-size:15px}
.tnl-flags{margin:10px 0;font-size:14.5px;color:var(--tnl-bad);font-weight:600}
.tnl-hist{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.tnl-result [data-kq-acts]{margin-top:16px}
.tnl-submitted h3{font-size:16px;margin:16px 0 6px}
#bai-da-nop summary{cursor:pointer;list-style:none}
#bai-da-nop summary h2{display:inline;margin:0;font-size:20px}
#bai-da-nop summary::after{content:" +";font-weight:800}
#bai-da-nop details[open] summary::after{content:" −"}
.tnl-cn-pick{border:1px solid var(--line);padding:10px 14px;margin:8px 0;display:grid;gap:8px}
.tnl-cn-pick legend{font-weight:700;padding:0 6px}
.tnl-cn-pick label{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.tnl-cn-pick input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--tnl-cob)}
.tnl-cn-pre{border:1px dashed #9AA7D6;padding:10px 14px;margin:8px 0;background:#fff}
.tnl-cn-pre p{margin:0}
/* Tiến bộ */
.tnl-continue{background:var(--tnl-navy);color:#fff;padding:20px 22px;border-radius:8px;margin:18px 0 14px}
.tnl-continue h2{color:#fff;margin:4px 0 6px}
.tnl-continue p{color:#DCE3FF;margin:0 0 10px}
.tnl-new{margin:0 0 14px}
.tnl-stat{list-style:none;margin:14px 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tnl-stat li{background:#fff;border:1px solid var(--line);padding:12px 14px}
.tnl-stat b{display:block;font:800 28px/1 var(--display)}
.tnl-stat span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.tnl-stat .s-dat{border-color:var(--tnl-ok);background:var(--tnl-ok-bg)}
.tnl-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tnl-list li{border:1px solid var(--line);background:#fff;padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.tnl-list li.tnl-list-h{border:0;background:none;padding:0}
.tnl-list li b{font-size:15px}
.tnl-prog{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px;margin:0;padding:0;list-style:none}
.tnl-prog li{border:1px solid var(--line);background:#fff;padding:12px 14px}
.tnl-prog b{display:block;font-size:14px;margin-bottom:8px}
.tnl-dots{display:flex;flex-wrap:wrap;gap:6px}
.tnl-dot{display:inline-block;width:26px;height:26px;border-radius:5px;background:var(--tnl-soft);border:1.5px solid #CDD3DE;text-decoration:none}
.tnl-dot.s-dang-luyen{background:#fff;border-color:var(--tnl-cob);border-style:dashed}
.tnl-dot.s-xong-luyen{background:var(--tnl-info-bg);border-color:var(--tnl-cob)}
.tnl-dot.s-dang-dg{background:#fff;border-color:var(--ink);border-width:2.5px}
.tnl-dot.s-cho{background:var(--tnl-warn-bg);border-color:#E6C25A}
.tnl-dot.s-chua-dat{background:var(--tnl-bad-bg);border-color:#E4A39F}
.tnl-dot.s-dat{background:var(--tnl-ok);border-color:var(--tnl-ok)}
.tnl-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--muted);margin:10px 0 0}
.tnl-legend span{display:inline-flex;align-items:center;gap:6px}
.tnl-legend .tnl-dot{width:16px;height:16px}
/* Ngăn kéo dữ liệu nguồn */
.tnl-drawer{width:min(620px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 0 0 auto;padding:0;border:0;border-left:1px solid var(--line);background:#fff;color:var(--ink)}
.tnl-drawer::backdrop{background:rgba(16,19,26,.45)}
.tnl-drawer-h{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.tnl-drawer-h h2{margin:0;font-size:19px}
.tnl-drawer-b{padding:16px 18px 30px;font:16px/1.55 var(--body)}
/* Bộ dữ liệu */
.tnl-case p{margin:0 0 10px;font-size:15.5px;line-height:1.55}
.tnl-case .tnl-src{padding:10px 12px;background:var(--tnl-bg);border:1px solid var(--line);border-radius:6px}
.tnl-src-k{display:inline-block;margin-right:6px;padding:1px 7px;background:var(--ink);color:#fff;border-radius:3px;font:700 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;vertical-align:1px}
.tnl-table-wrap{overflow-x:auto;margin:8px 0 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.tnl-table{border-collapse:collapse;width:100%;font-size:14.5px}
.tnl-table th,.tnl-table td{border:1px solid #DCE1EA;padding:7px 10px;text-align:left;vertical-align:top}
.tnl-table thead th{background:#EEF2FF;font-weight:700}
.tnl-table tbody tr:nth-child(even) td{background:#F7F8FB}
.tnl-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.tnl-table .tnl-trong{color:#8A93A3;font-style:italic;font-size:13px}
.tnl-table-wrap-text td,.tnl-table-wrap-text th{white-space:normal;line-height:1.45}
/* Mô phỏng quy trình */
.tnl-sim{border:1px solid var(--line);padding:12px 14px;background:#fff;margin:16px 0 10px;border-radius:6px}
.tnl-sim h3{margin-top:0}
.tnl-sim textarea{width:100%;box-sizing:border-box;min-height:90px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:8px;border:1px solid var(--line)}
.tnl-sim .tnl-lb{display:block;font-weight:700;font-size:14px;margin:8px 0 4px}
.tnl-sim-out{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;background:var(--tnl-soft);padding:8px;max-height:220px;overflow:auto;margin:8px 0 0;border:1px solid var(--line)}
/* Cổng đăng nhập trang kỹ năng */
.tnl-gate{margin:18px 0;border:1px solid #C9D2F5;background:linear-gradient(180deg,#F5F7FF,#FFFFFF);padding:20px 22px}
.tnl-gate-in{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center}
.tnl-gate h2{margin:2px 0 8px}
.tnl-gate-steps{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:g}
.tnl-gate-steps li{counter-increment:g;padding:5px 10px;background:#fff;border:1px solid #C9D2FF;border-radius:999px;font-size:13.5px;font-weight:600}
.tnl-gate-steps li::before{content:counter(g) ". ";color:var(--tnl-cob-d)}
.tnl-gate-out{margin:0 0 6px;padding:10px 12px;background:#fff;border-left:4px solid var(--hi);font-weight:600}
/* Người chấm */
.tnl-rv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.tnl-rv-key{background:var(--tnl-warn-bg);border:1px solid #E6C25A;padding:12px 14px;font-size:14px}
.tnl-rv-score{display:grid;grid-template-columns:1fr 70px;gap:8px;align-items:center;margin:0 0 8px}
.tnl-rv-score input{padding:6px;border:1px solid var(--line);font:15px var(--body)}
.tnl-media{max-width:100%;max-height:360px;display:block;margin:6px 0;border:1px solid var(--line)}
.tnl-noscript{padding:14px;border:1px solid var(--line);background:var(--tnl-warn-bg)}
.tnl-fdel{border:0;background:none;color:var(--tnl-bad);font-weight:700;cursor:pointer;font-size:14px;min-height:32px}
/* ---------- Màn hình vừa và nhỏ ---------- */
@media (max-width:1060px){.tnl-ws-body{grid-template-columns:minmax(0,1fr) 280px}.tnl-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .tnl-hero-in{grid-template-columns:1fr;gap:22px;padding:22px 0 26px}
  .tnl-demo{min-height:0;grid-template-columns:minmax(0,.85fr) 64px minmax(0,1.3fr)}
  .tnl-demo-mid img{width:58px}
  .tnl-ws-body{display:flex;flex-direction:column-reverse;gap:10px;align-items:stretch}
  .tnl-ws-rail{position:static;flex-direction:row;flex-wrap:wrap;align-items:stretch}
  .tnl-guide{flex:1 1 100%;padding:10px 12px}
  .tnl-guide .tnl-thao{flex-direction:row;align-items:center;gap:10px}
  .tnl-guide .tnl-thao-btn{width:60px;height:56px;flex:none}
  .tnl-guide .tnl-thao-cap{max-width:none;flex:1}
  .tnl-guide .tnl-thao-cap::before{top:50%;left:-7px;transform:translateY(-50%) rotate(-45deg)}
  .tnl-rail-acts{flex:1 1 100%;grid-template-columns:1fr 1fr}
  .tnl-ask{flex:1 1 45%}
  .tnl-ask>summary{padding:10px 12px;font-size:14.5px}
  .tnl-ask[open]{flex-basis:100%}
  .tnl-rail-acts .tnl-btn-2{padding:9px 10px;font-size:14px;min-height:44px}
  .tnl-two-c,.tnl-stage2-in,.tnl-rv-grid{grid-template-columns:1fr}
  .tnl-stat{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tnl-timeline{grid-template-columns:1fr}
  .tnl-ba{grid-template-columns:1fr}
}
@media (max-width:700px){
  .tnl-pane{padding:16px 14px 14px;margin-left:-4px;margin-right:-4px}
  .tnl-step-foot{margin:18px -14px -14px;padding:12px 14px;position:sticky;bottom:0;z-index:4}
  .tnl-step-foot .btn,.tnl-step-foot .tnl-btn-2{flex:1 1 auto;justify-content:center}
  .tnl-stepper li{flex:0 0 auto}
  .tnl-stepper li button{padding:6px 8px}
  .tnl-stepper li:not(:has([aria-current])) .tnl-step-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tnl-all-btn{font-size:13px}
  /* Bảng nhập thành thẻ theo dòng, nhãn cột hiện trên từng ô */
  .tnl-tbl,.tnl-tbl tbody,.tnl-tbl tr,.tnl-tbl td{display:block;min-width:0}
  .tnl-tbl{min-width:0}
  .tnl-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tnl-tbl-wrap{border:0;background:none;overflow:visible}
  .tnl-tbl tr{position:relative;margin:0 0 12px;border:1.5px solid #CDD3DE;border-radius:8px;background:#fff;padding:6px 10px 4px;counter-increment:r}
  .tnl-tbl tbody{counter-reset:r}
  .tnl-tbl tr::before{content:"Dòng " counter(r);display:block;font-weight:800;font-size:13px;color:var(--tnl-cob-d);padding:2px 0 4px}
  .tnl-tbl td{border:0;border-bottom:1px solid #EEF0F4;padding:6px 0}
  .tnl-tbl td[data-label]::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
  .tnl-tbl td textarea{padding:6px 0;min-height:36px}
  .tnl-tbl tbody tr:nth-child(even) td{background:none}
  .tnl-tbl .tnl-row-x{position:absolute;top:2px;right:4px;width:auto;border:0}
  .tnl-grid{grid-template-columns:1fr}
  .tnl-flow{grid-template-columns:1fr}
  .tnl-frames{grid-template-columns:1fr}
  .tnl-demo{grid-template-columns:1fr;gap:6px}
  .tnl-demo-in{transform:none}
  .tnl-demo-mid{grid-auto-flow:column;align-items:center;gap:8px;justify-content:start}
  .tnl-demo-mid img{width:44px}
  .tnl-demo-cert{position:static;justify-self:start;margin-top:6px}
  .tnl-gate-in{grid-template-columns:1fr}
  .tnl-gate .tnl-thao{flex-direction:row;align-items:center}
  .tnl-gate .tnl-thao-btn{width:72px;height:66px;flex:none}
  .tnl-gate .tnl-thao-cap::before{top:50%;left:-7px;transform:translateY(-50%) rotate(-45deg)}
  .tnl-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:380px){.tnl-rail-acts{grid-template-columns:1fr}.tnl-chang span{display:block}}
@media print{.tnl-ws-rail,.tnl-stepper,.tnl-step-foot{display:none}}
/* Nút có tên kỹ năng dài: cho xuống dòng, không đẩy trang tràn ngang trên điện thoại */
.tnl-actions .btn,.tnl-actions .tnl-btn-2,.tnl-step-foot .btn{white-space:normal;max-width:100%;text-align:left;line-height:1.3}