/* tools.css — style tool + emulator maytinhcasio580.com. Tự đủ, không phụ thuộc theme.
   Tokens --c5-* lấy từ bản thiết kế (design/c5.css). Không hard-code hex ngoài khối :root. */

:root{
  --c5-bg:#F6F6F2; --c5-surface:#FFFFFF; --c5-surface-2:#EEEFEA; --c5-surface-3:#E4E6DF;
  --c5-border:#D8DAD3; --c5-border-strong:#AEB2A9;
  --c5-text:#1A2420; --c5-text-2:#48534E; --c5-text-3:#667069; --c5-text-inverse:#FFFFFF;
  --c5-primary:#1D6B4C; --c5-primary-hover:#155239; --c5-primary-soft:#E3F1EA; --c5-primary-ring:rgba(29,107,76,.28);
  --c5-accent:#B8460B; --c5-accent-soft:#FBEADF;
  --c5-success:#1E7A45; --c5-success-bg:#E4F4EA; --c5-success-border:#9FD4B3;
  --c5-warn:#7A4E00; --c5-warn-bg:#FFF3D6; --c5-warn-border:#EFC96A;
  --c5-error:#B3261E; --c5-error-bg:#FDEBEA; --c5-error-border:#F0B4AF;
  --c5-info:#2B5F80; --c5-info-bg:#EAF2F8; --c5-info-border:#B9D3E6;
  --c5-result:#0F4A33; --c5-result-bg:#F1F8F4;
  --c5-source:#3E5A6E; --c5-source-bg:#EDF3F7; --c5-source-border:#C9DAE6;
  --c5-key-bg:#FFFFFF; --c5-key-text:#1A2420; --c5-key-border:#C9CCC4; --c5-key-shadow:#AEB2A9;
  --c5-key-shift-bg:#B8460B; --c5-key-shift-text:#FFFFFF; --c5-key-shift-border:#8F3607;
  --c5-key-alpha-bg:#6D3FC2; --c5-key-alpha-text:#FFFFFF; --c5-key-alpha-border:#52309A;
  --c5-key-pressed:#FFE8A3;
  --c5-screen-bg:#E6ECDF; --c5-screen-text:#14211B; --c5-screen-dim:#5B6A60; --c5-screen-frame:#2A2F2B; --c5-screen-grid:rgba(20,33,27,.06);
  --c5-font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --c5-font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --c5-fs-xs:.75rem; --c5-fs-sm:.875rem; --c5-fs-md:1rem; --c5-fs-lg:1.125rem; --c5-fs-xl:1.5rem; --c5-fs-2xl:2rem; --c5-fs-3xl:2.5rem;
  --c5-lh-tight:1.2; --c5-lh-body:1.55;
  --c5-sp-1:4px; --c5-sp-2:8px; --c5-sp-3:12px; --c5-sp-4:16px; --c5-sp-5:24px; --c5-sp-6:32px; --c5-sp-7:48px; --c5-sp-8:64px;
  --c5-r-sm:6px; --c5-r-md:10px; --c5-r-lg:14px; --c5-r-pill:999px;
  --c5-sh-sm:0 1px 2px rgba(26,36,32,.06); --c5-sh-md:0 4px 14px rgba(26,36,32,.08);
  --c5-tap:44px; --c5-container:1200px;
}

/* ===== khung chung ===== */
.c5-tool,.c5-keyseq,.c5-list,.c5-table,.c5-widget{box-sizing:border-box;font-family:var(--c5-font-sans);color:var(--c5-text);line-height:var(--c5-lh-body);font-size:var(--c5-fs-md)}
.c5-tool *,.c5-keyseq *,.c5-list *,.c5-widget *{box-sizing:border-box}
.c5-tool button,.c5-tool input,.c5-tool select,.c5-tool textarea,.c5-keyseq button{font:inherit;color:inherit}
.c5-tool button,.c5-keyseq button{cursor:pointer}
.c5-tool{margin:0 0 var(--c5-sp-5)}
.c5-tool__meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--c5-sp-3)}
.c5-tool__disclaimer{margin:var(--c5-sp-3) 0 0}
.c5-mono{font-family:var(--c5-font-mono);font-variant-numeric:tabular-nums}
.c5-hint{font-size:var(--c5-fs-xs);color:var(--c5-text-3)}
.c5-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== thẻ phím ===== */
.c5-key{display:inline-flex;align-items:center;justify-content:center;min-width:2.25em;height:2em;padding:0 .55em;border-radius:var(--c5-r-sm);font-family:var(--c5-font-mono);font-weight:600;font-size:var(--c5-fs-sm);line-height:1;white-space:nowrap;vertical-align:middle;background:var(--c5-key-bg);color:var(--c5-key-text);border:1px solid var(--c5-key-border);box-shadow:0 2px 0 var(--c5-key-shadow);user-select:none;font-style:normal}
.c5-key--shift{background:var(--c5-key-shift-bg);color:var(--c5-key-shift-text);border-color:var(--c5-key-shift-border);box-shadow:0 2px 0 var(--c5-key-shift-border)}
.c5-key--alpha{background:var(--c5-key-alpha-bg);color:var(--c5-key-alpha-text);border-color:var(--c5-key-alpha-border);box-shadow:0 2px 0 var(--c5-key-alpha-border)}
.c5-key--sm{font-size:var(--c5-fs-xs);height:1.8em;min-width:2em}
.c5-key--lg{font-size:var(--c5-fs-md);height:2.4em;min-width:2.6em;padding:0 .7em}
.c5-key--inline{font-size:.85em;height:1.7em;min-width:1.9em;padding:0 .4em;margin:0 .1em;box-shadow:0 1px 0 var(--c5-key-shadow);transform:translateY(-1px)}
.c5-key.is-pressed{background:var(--c5-key-pressed);color:var(--c5-key-text);box-shadow:0 0 0 3px var(--c5-primary-ring);transform:translateY(2px)}
.c5-key sup{font-size:.65em;line-height:0;margin-left:1px}

/* ===== khối chuỗi phím ===== */
.c5-keyseq{background:var(--c5-surface);border:1px solid var(--c5-border);border-radius:var(--c5-r-lg);overflow:hidden;margin:var(--c5-sp-4) 0}
.c5-keyseq__head{display:flex;flex-wrap:wrap;gap:var(--c5-sp-3);align-items:center;justify-content:space-between;padding:var(--c5-sp-3) var(--c5-sp-4);border-bottom:1px solid var(--c5-border);background:var(--c5-surface-2)}
.c5-keyseq__title{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:var(--c5-fs-sm)}
.c5-keyseq__steps{list-style:none;margin:0;padding:var(--c5-sp-2) 0}
.c5-keyseq__step{display:grid;grid-template-columns:28px 1fr;gap:var(--c5-sp-3);padding:var(--c5-sp-3) var(--c5-sp-4);align-items:start;margin:0}
.c5-keyseq__step + .c5-keyseq__step{border-top:1px dashed var(--c5-border)}
.c5-keyseq__empty{display:block;color:var(--c5-text-3);font-size:var(--c5-fs-sm)}
.c5-keyseq__num{width:28px;height:28px;border-radius:50%;background:var(--c5-surface-2);color:var(--c5-text-2);font-size:var(--c5-fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.c5-keyseq__keys{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:36px}
.c5-keyseq__val{font-family:var(--c5-font-mono);font-weight:600;font-size:var(--c5-fs-md);padding:0 .25em;color:var(--c5-text)}
.c5-keyseq__menu{font-family:var(--c5-font-mono);font-size:var(--c5-fs-sm);padding:.25em .5em;border:1px dashed var(--c5-border-strong);border-radius:var(--c5-r-sm);color:var(--c5-text-2);background:var(--c5-surface)}
.c5-keyseq__arrow{color:var(--c5-text-3);font-size:var(--c5-fs-sm)}
.c5-keyseq__note{font-size:var(--c5-fs-sm);color:var(--c5-text-2);margin-top:4px}
.c5-keyseq__foot{display:flex;flex-wrap:wrap;gap:var(--c5-sp-2);padding:var(--c5-sp-3) var(--c5-sp-4);border-top:1px solid var(--c5-border);align-items:center}
.c5-keyseq__foot:empty{display:none}
.c5-keyseq__legend{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.c5-keyseq__result{font-size:var(--c5-fs-sm);color:var(--c5-text-2);padding:0 var(--c5-sp-4) var(--c5-sp-3)}

/* ===== tab / nút / ô nhập / chip / badge ===== */
.c5-seg{display:inline-flex;background:var(--c5-surface-3);border-radius:var(--c5-r-pill);padding:3px;gap:2px;flex-wrap:wrap}
.c5-seg:empty{display:none}
.c5-seg__btn{min-height:38px;padding:0 14px;border:0;border-radius:var(--c5-r-pill);background:transparent;color:var(--c5-text-2);font-weight:600;font-size:var(--c5-fs-sm);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.c5-seg__btn[aria-pressed="true"]{background:var(--c5-surface);color:var(--c5-text);box-shadow:var(--c5-sh-sm)}
.c5-seg__btn[disabled]{opacity:.5;cursor:not-allowed}
.c5-btn{min-height:var(--c5-tap);padding:0 18px;border-radius:var(--c5-r-md);border:1px solid var(--c5-border-strong);background:var(--c5-surface);color:var(--c5-text);font-weight:700;font-size:var(--c5-fs-sm);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;line-height:1.2}
.c5-btn:hover{background:var(--c5-surface-2);color:var(--c5-text)}
.c5-btn--primary{background:var(--c5-primary);border-color:var(--c5-primary);color:var(--c5-text-inverse);font-size:var(--c5-fs-md)}
.c5-btn--primary:hover{background:var(--c5-primary-hover);color:var(--c5-text-inverse)}
.c5-btn--ghost{border-color:transparent;background:transparent;color:var(--c5-primary)}
.c5-btn--ghost:hover{background:var(--c5-primary-soft);color:var(--c5-primary)}
.c5-btn--sm{min-height:36px;padding:0 12px;font-size:var(--c5-fs-xs)}
.c5-btn:focus-visible,.c5-input:focus-visible,.c5-chip:focus-visible,.c5-seg__btn:focus-visible,.c5-emu__key:focus-visible{outline:3px solid var(--c5-primary-ring);outline-offset:1px}
.c5-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.c5-label{font-size:var(--c5-fs-sm);font-weight:700;color:var(--c5-text-2);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.c5-label small{font-weight:500;color:var(--c5-text-3)}
.c5-input{min-height:48px;width:100%;padding:0 14px;border-radius:var(--c5-r-md);border:1px solid var(--c5-border-strong);background:var(--c5-surface);font-family:var(--c5-font-mono);font-size:var(--c5-fs-lg);font-variant-numeric:tabular-nums;color:var(--c5-text)}
select.c5-input{font-family:var(--c5-font-sans);font-size:var(--c5-fs-md)}
textarea.c5-input{min-height:96px;padding:10px 14px;font-size:var(--c5-fs-sm);resize:vertical}
.c5-input:focus{border-color:var(--c5-primary);outline:none;box-shadow:0 0 0 3px var(--c5-primary-ring)}
.c5-input.is-invalid{border-color:var(--c5-error);background:var(--c5-error-bg)}
.c5-chip{min-height:36px;padding:0 12px;border-radius:var(--c5-r-pill);border:1px solid var(--c5-border);background:var(--c5-surface);font-family:var(--c5-font-mono);font-size:var(--c5-fs-sm);font-weight:500;color:var(--c5-text-2);cursor:pointer}
.c5-chip:hover{border-color:var(--c5-primary);color:var(--c5-primary)}
.c5-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.c5-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--c5-r-pill);font-size:var(--c5-fs-xs);font-weight:700;letter-spacing:.01em;white-space:nowrap;font-family:var(--c5-font-sans)}
.c5-badge--grade{background:var(--c5-primary-soft);color:var(--c5-primary)}
.c5-badge--part{background:var(--c5-info-bg);color:var(--c5-info)}
.c5-badge--verify{background:var(--c5-warn-bg);color:var(--c5-warn);border:1px solid var(--c5-warn-border)}
.c5-badge--ok{background:var(--c5-success-bg);color:var(--c5-success)}

/* ===== thông báo ===== */
.c5-note{border-radius:var(--c5-r-md);padding:var(--c5-sp-3) var(--c5-sp-4);font-size:var(--c5-fs-sm);display:flex;gap:10px;align-items:flex-start;border:1px solid;margin:0}
.c5-note--warn{background:var(--c5-warn-bg);border-color:var(--c5-warn-border);color:var(--c5-warn)}
.c5-note--info{background:var(--c5-info-bg);border-color:var(--c5-info-border);color:var(--c5-info)}
.c5-note--error{background:var(--c5-error-bg);border-color:var(--c5-error-border);color:var(--c5-error)}
.c5-note--source{background:var(--c5-source-bg);border-color:var(--c5-source-border);color:var(--c5-source)}
.c5-note a{color:inherit;font-weight:700}
.c5-note + .c5-note{margin-top:var(--c5-sp-2)}

/* ===== widget (khung tool) ===== */
.c5-widget{background:var(--c5-surface);border:1px solid var(--c5-border);border-radius:var(--c5-r-lg);box-shadow:var(--c5-sh-sm);overflow:hidden}
.c5-widget__loading{padding:var(--c5-sp-5);text-align:center;color:var(--c5-text-3);font-size:var(--c5-fs-sm)}
.c5-widget__head{display:flex;flex-wrap:wrap;gap:var(--c5-sp-3);align-items:center;justify-content:space-between;padding:var(--c5-sp-3) var(--c5-sp-4);border-bottom:1px solid var(--c5-border);background:var(--c5-surface-2)}
.c5-widget__body{padding:var(--c5-sp-4);display:grid;gap:var(--c5-sp-3)}
.c5-widget__preview{margin:0;font-size:var(--c5-fs-lg);color:var(--c5-text-2);min-height:1.4em}
.c5-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--c5-sp-3)}
.c5-form-grid--1{grid-template-columns:1fr}
.c5-form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c5-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.c5-actions .c5-btn--primary{min-width:160px;flex:1 1 160px;max-width:260px}
.c5-widget__result{border-top:1px solid var(--c5-border)}
.c5-result-empty{padding:var(--c5-sp-5) var(--c5-sp-4);text-align:center;color:var(--c5-text-3);font-size:var(--c5-fs-sm)}
.c5-result-empty .c5-mono{font-size:var(--c5-fs-2xl);color:var(--c5-border-strong);line-height:1}
.c5-result-empty p{margin:10px 0 0}
.c5-result{padding:var(--c5-sp-4);background:var(--c5-result-bg);display:grid;gap:var(--c5-sp-3)}
.c5-result__top{display:flex;flex-wrap:wrap;gap:var(--c5-sp-3);align-items:flex-end;justify-content:space-between}
.c5-result__bigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--c5-sp-3);flex:1}
.c5-result-big{font-family:var(--c5-font-mono);font-variant-numeric:tabular-nums;font-size:var(--c5-fs-2xl);font-weight:600;color:var(--c5-result);line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.c5-result-big small{font-size:.5em;font-weight:500;color:var(--c5-text-3);margin-left:.3em}
.c5-detail{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:var(--c5-fs-sm);margin:0;padding-top:var(--c5-sp-3);border-top:1px solid var(--c5-border)}
.c5-detail dt{color:var(--c5-text-2);font-weight:600}
.c5-detail dd{margin:0;font-family:var(--c5-font-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.c5-result details{border-top:1px solid var(--c5-border);padding-top:6px}
.c5-result summary{cursor:pointer;font-weight:700;font-size:var(--c5-fs-sm);color:var(--c5-primary);min-height:40px;display:flex;align-items:center;list-style:none}
.c5-result summary::-webkit-details-marker{display:none}
.c5-result summary::before{content:"+ ";margin-right:4px}
.c5-result details[open] summary::before{content:"− "}
.c5-result ol.c5-steps{margin:6px 0 0;padding-left:1.3em;font-size:var(--c5-fs-sm);color:var(--c5-text-2)}
.c5-result ol.c5-steps li{margin-bottom:6px}
.c5-result table{width:100%;border-collapse:collapse;font-size:var(--c5-fs-sm)}
.c5-result th{text-align:left;padding:8px 10px;background:var(--c5-surface-2);border-bottom:2px solid var(--c5-border-strong);white-space:nowrap}
.c5-result td{padding:8px 10px;border-bottom:1px solid var(--c5-border);vertical-align:top}
.c5-result td.num,.c5-result th.num{text-align:right;font-family:var(--c5-font-mono);font-variant-numeric:tabular-nums}
.c5-result .c5-scroll{overflow-x:auto}
.c5-result__error{padding:var(--c5-sp-4);display:grid;gap:var(--c5-sp-3)}
.c5-screen{font-family:var(--c5-font-mono);background:var(--c5-screen-bg);color:var(--c5-screen-text);border:6px solid var(--c5-screen-frame);border-radius:var(--c5-r-md);padding:12px 16px;max-width:360px;line-height:1.4}
.c5-screen__ind{display:flex;justify-content:space-between;font-size:var(--c5-fs-xs);color:var(--c5-screen-dim)}
.c5-screen__expr{font-size:var(--c5-fs-lg);overflow-wrap:anywhere}
.c5-screen__res{font-size:var(--c5-fs-xl);font-weight:600;margin:4px 0;text-align:right}
.c5-screen__res.is-error{text-align:left}
.c5-screen__hint{font-size:var(--c5-fs-sm)}
.c5-copied{color:var(--c5-success)}

/* ===== danh sách tool / lưới hub ===== */
.c5-list{display:grid;gap:var(--c5-sp-3);margin:0 0 var(--c5-sp-5)}
.c5-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.c5-tool-btn{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;border:1px solid var(--c5-border);border-radius:var(--c5-r-md);background:var(--c5-surface);text-decoration:none;color:var(--c5-text);font-size:var(--c5-fs-sm);font-weight:600;line-height:1.25}
.c5-tool-btn:hover{border-color:var(--c5-primary);color:var(--c5-text);box-shadow:var(--c5-sh-sm)}
.c5-tool-btn.is-hidden{display:none}
.c5-tool-btn__ic{width:32px;height:32px;flex:none;border-radius:var(--c5-r-sm);background:var(--c5-primary-soft);color:var(--c5-primary);display:flex;align-items:center;justify-content:center;font-family:var(--c5-font-mono);font-size:11px;font-weight:600}
.c5-tool-btn__g{margin-left:auto;font-size:10px;font-weight:800;color:var(--c5-text-3);letter-spacing:.02em;white-space:nowrap}

/* ===== bảng từ config ===== */
.c5-table table{width:100%;border-collapse:collapse;font-size:var(--c5-fs-sm)}
.c5-table th{text-align:left;background:var(--c5-surface-2);color:var(--c5-text-2);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--c5-border-strong);white-space:nowrap}
.c5-table td{padding:10px 12px;border-bottom:1px solid var(--c5-border);vertical-align:top}
.c5-table{overflow-x:auto;margin:0 0 var(--c5-sp-4)}

/* ===== máy mô phỏng ===== */
.c5-emu{background:var(--c5-surface);border:1px solid var(--c5-border);border-radius:var(--c5-r-lg);padding:12px;box-shadow:var(--c5-sh-sm);max-width:480px;margin:0 auto;font-family:var(--c5-font-sans)}
.c5-emu__screen{position:sticky;top:0;z-index:5;background:var(--c5-screen-bg);color:var(--c5-screen-text);border:6px solid var(--c5-screen-frame);border-radius:10px;padding:8px 12px 10px;font-family:var(--c5-font-mono);background-image:linear-gradient(var(--c5-screen-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c5-screen-grid) 1px,transparent 1px);background-size:14px 14px;min-height:120px}
.c5-emu__ind{display:flex;gap:12px;font-size:11px;color:var(--c5-screen-dim);font-weight:700;min-height:16px;letter-spacing:.04em}
.c5-emu__ind span{opacity:.35}
.c5-emu__ind span.is-on{opacity:1;color:var(--c5-screen-text)}
.c5-emu__expr{min-height:60px;display:flex;align-items:center;flex-wrap:wrap;gap:1px 3px;font-size:22px;line-height:1.15;overflow:hidden;padding:4px 0}
.c5-emu__res{text-align:right;font-size:28px;font-weight:600;min-height:38px;font-variant-numeric:tabular-nums;display:flex;justify-content:flex-end;align-items:center;gap:4px;overflow-wrap:anywhere}
.c5-emu__hint{font-size:11px;color:var(--c5-screen-dim);text-align:right;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c5-emu__frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:.75em;vertical-align:middle}
.c5-emu__frac span:first-child{border-bottom:2px solid currentColor;padding:0 3px 1px}
.c5-emu__frac span:last-child{padding:1px 3px 0}
.c5-emu__box{display:inline-flex;align-items:center;min-width:.7em;min-height:1em;border:1px dashed var(--c5-screen-dim);border-radius:2px;padding:0 1px;gap:1px}
.c5-emu__box.is-active{background:rgba(20,33,27,.14);border-style:solid}
.c5-emu__cursor{display:inline-block;width:2px;height:1.05em;background:currentColor;animation:c5-blink 1s steps(1) infinite;vertical-align:middle}
@keyframes c5-blink{50%{opacity:0}}
.c5-emu__menu{display:grid;grid-template-columns:1fr 1fr;gap:1px 10px;font-size:12px;line-height:1.3;padding:2px 0}
.c5-emu__menu span.is-sel{background:var(--c5-screen-text);color:var(--c5-screen-bg);padding:0 3px}
.c5-emu__fn{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(44px,auto);gap:6px;margin-top:14px}
.c5-emu__num{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
.c5-emu__key{position:relative;min-height:44px;border-radius:8px;border:1px solid var(--c5-key-border);background:var(--c5-key-bg);box-shadow:0 2px 0 var(--c5-key-shadow);display:flex;align-items:flex-end;justify-content:center;padding:14px 2px 5px;font-family:var(--c5-font-mono);font-weight:600;font-size:14px;line-height:1;color:var(--c5-key-text);user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .05s;cursor:pointer;touch-action:manipulation}
.c5-emu__key:hover{background:var(--c5-surface-2)}
.c5-emu__key:active,.c5-emu__key.is-pressed{transform:translateY(2px);box-shadow:0 0 0 3px var(--c5-primary-ring);background:var(--c5-key-pressed)}
.c5-emu__num .c5-emu__key{min-height:50px;font-size:18px;padding-top:12px}
.c5-emu__key--ctl{background:var(--c5-surface-3);border-color:var(--c5-border-strong)}
.c5-emu__key--shift{background:var(--c5-key-shift-bg);color:var(--c5-key-shift-text);border-color:var(--c5-key-shift-border);box-shadow:0 2px 0 var(--c5-key-shift-border)}
.c5-emu__key--alpha{background:var(--c5-key-alpha-bg);color:var(--c5-key-alpha-text);border-color:var(--c5-key-alpha-border);box-shadow:0 2px 0 var(--c5-key-alpha-border)}
.c5-emu__key--eq{background:var(--c5-primary);color:var(--c5-text-inverse);border-color:var(--c5-primary-hover);box-shadow:0 2px 0 var(--c5-primary-hover)}
.c5-emu__key--eq:hover{background:var(--c5-primary-hover)}
.c5-emu__key.is-active{outline:3px solid var(--c5-primary-ring);outline-offset:1px}
.c5-emu__lg{position:absolute;top:3px;font-size:8px;line-height:1;font-weight:700;padding:1px 2px;border-radius:3px;white-space:nowrap;letter-spacing:-.02em}
.c5-emu__lg:empty{display:none}
.c5-emu__lg--s{left:3px;color:var(--c5-key-shift-bg)}
.c5-emu__lg--a{right:3px;color:var(--c5-key-alpha-bg)}
.c5-emu.is-shift .c5-emu__lg--s{background:var(--c5-key-shift-bg);color:var(--c5-key-shift-text)}
.c5-emu.is-alpha .c5-emu__lg--a{background:var(--c5-key-alpha-bg);color:var(--c5-key-alpha-text)}
.c5-emu.is-shift .c5-emu__key:not(.c5-emu__key--shift) .c5-emu__main,.c5-emu.is-alpha .c5-emu__key:not(.c5-emu__key--alpha) .c5-emu__main{opacity:.45}
.c5-emu__pad{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;background:var(--c5-surface-3);border-radius:12px;padding:4px;min-height:100px}
.c5-emu__pad .c5-emu__key{min-height:44px;padding:0;font-size:13px;align-items:center;border-radius:6px}
.c5-emu__pad .c5-emu__key--up{grid-column:1;grid-row:1}
.c5-emu__pad .c5-emu__key--left{grid-column:1;grid-row:2}
.c5-emu__pad .c5-emu__key--down{grid-column:2;grid-row:1}
.c5-emu__pad .c5-emu__key--right{grid-column:2;grid-row:2}
.c5-emu__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:var(--c5-fs-xs);color:var(--c5-text-3);flex-wrap:wrap}
@media (min-width:1024px){.c5-emu__screen{position:relative}}

/* ===== mobile ===== */
@media (max-width:479px){
  .c5-form-grid,.c5-form-grid--2{grid-template-columns:1fr}
  .c5-result-big{font-size:var(--c5-fs-xl)}
  .c5-detail{grid-template-columns:1fr;gap:2px}
  .c5-detail dt{color:var(--c5-text-3)}
  .c5-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c5-emu{padding:10px;border-radius:0;border-left:0;border-right:0;max-width:none}
  .c5-emu__expr{font-size:20px}
  .c5-actions .c5-btn--primary{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .c5-emu__key,.c5-key{transition:none}
  .c5-emu__cursor{animation:none}
}

/* ===== emulator: Natural Display + lịch sử + player (1B-1) ===== */
.c5-tool--emu .c5-tool__mount{border:0;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
.c5-emu__screen{min-height:132px}
.c5-emu__mode{margin-left:auto;font-weight:500}
.c5-emu__expr{font-size:22px;align-items:center}
.c5-emu__slot{display:inline-flex;align-items:center;gap:1px;min-width:.5em;min-height:1em}
.c5-emu__slot.is-empty{border:1px dashed var(--c5-screen-dim);border-radius:2px;min-width:.7em;padding:0 1px}
.c5-emu__box{display:inline-flex;min-width:.7em;min-height:1em;border:1px dashed var(--c5-screen-dim);border-radius:2px}
.c5-emu__frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;font-size:.8em;vertical-align:middle;margin:0 1px}
.c5-emu__frac>*:first-child{border-bottom:2px solid currentColor;padding:0 3px 1px}
.c5-emu__frac>*:last-child{padding:1px 3px 0}
.c5-emu__mixed{display:inline-flex;align-items:center;gap:1px}
.c5-emu__sqrt{display:inline-flex;align-items:stretch}
.c5-emu__sqrt-sym{font-size:1.1em;line-height:1}
.c5-emu__sqrt-body{border-top:2px solid currentColor;padding:0 2px;display:inline-flex;align-items:center}
.c5-emu__rootn{font-size:.6em;align-self:flex-start;margin-right:-2px}
.c5-emu__abs{display:inline-flex;align-items:center}
.c5-emu__sup{font-size:.7em;vertical-align:super;line-height:1;display:inline-flex;align-items:center;min-width:.5em}
.c5-emu__sub{font-size:.7em;vertical-align:sub;line-height:1;display:inline-flex;align-items:center;min-width:.5em}
.c5-emu__int{display:inline-flex;align-items:center;gap:2px}
.c5-emu__intsym{font-size:1.7em;line-height:.9;font-weight:400}
.c5-emu__lim{display:flex;flex-direction:column;font-size:.55em;line-height:1.1;gap:4px;min-width:.9em;align-items:center}
.c5-emu__intbody{padding:0 3px}
.c5-emu__dx{font-size:.85em}
.c5-emu__ddx{display:inline-flex;flex-direction:column;font-size:.65em;line-height:1.05;align-items:center}
.c5-emu__ddx>*:first-child{border-bottom:2px solid currentColor;padding:0 2px}
.c5-emu__recur-body{text-decoration:overline}
.c5-emu__res{min-height:38px}
.c5-emu__res .c5-emu__frac{font-size:.75em}
.c5-emu__res .c5-emu__sqrt-body{padding:0 3px}
.c5-emu__reslabel{margin-right:auto;font-size:.7em;color:var(--c5-screen-dim)}
.c5-emu__note{font-size:11px;color:var(--c5-screen-dim);border-top:1px dashed var(--c5-screen-dim);padding-top:4px;margin-top:4px;line-height:1.35}
.c5-emu__off{min-height:80px}
.c5-emu-hist{background:var(--c5-surface);border:1px solid var(--c5-border);border-radius:var(--c5-r-lg);padding:var(--c5-sp-4);margin:var(--c5-sp-4) auto 0;max-width:480px}
.c5-emu-hist__head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.c5-emu-hist__head h2{font-size:var(--c5-fs-md);margin:0}
.c5-emu-hist__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.c5-emu-hist__list li{display:flex;justify-content:space-between;gap:12px;font-size:var(--c5-fs-sm);padding:8px 10px;border-radius:var(--c5-r-sm);background:var(--c5-surface-2);cursor:pointer}
.c5-emu-hist__list li:hover{background:var(--c5-primary-soft)}
.c5-emu-hist__e{color:var(--c5-text-2);overflow-wrap:anywhere}
.c5-emu-hist__r{font-weight:600;text-align:right;white-space:nowrap}
.c5-player{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding:8px 10px;border-radius:var(--c5-r-md);background:var(--c5-primary-soft);font-size:var(--c5-fs-sm);color:var(--c5-primary)}
.c5-player__txt{font-weight:700;flex:1}
.c5-player .c5-seg__btn{min-height:30px;padding:0 10px}
@media (max-width:479px){.c5-emu-hist{border-radius:0;border-left:0;border-right:0;max-width:none}}
.c5-emu__key--shift .c5-emu__main,.c5-emu__key--alpha .c5-emu__main{font-size:12px;letter-spacing:-.02em}
@media (max-width:479px){.c5-emu__fn .c5-emu__key{font-size:13px}.c5-emu__key--shift .c5-emu__main,.c5-emu__key--alpha .c5-emu__main{font-size:11px}}
.c5-emu__res--extra{font-size:22px;min-height:30px}
.c5-emu__expr--small{font-size:16px;min-height:36px}
.c5-emu__promptval{display:inline-flex;align-items:center;gap:1px;margin-left:8px}
.c5-emu__menu--1col{grid-template-columns:1fr}
.c5-emu__cells{display:grid;gap:2px;font-size:14px;margin:4px 0}
.c5-emu__cells-row{display:flex;gap:6px;align-items:center}
.c5-emu__cells-head .c5-emu__cell{color:var(--c5-screen-dim);font-weight:700;background:transparent}
.c5-emu__cells-idx{width:1.4em;font-size:11px;color:var(--c5-screen-dim);text-align:right;flex:none}
.c5-emu__cell{flex:1;min-width:0;padding:1px 4px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c5-emu__cell.is-sel{background:var(--c5-screen-text);color:var(--c5-screen-bg)}
.c5-emu__cellinput{font-size:22px}
.c5-emu__dim{color:var(--c5-screen-dim);margin-left:4px}
.c5-emu__mat{display:inline-grid;gap:2px 10px;padding:2px 8px;border-left:2px solid currentColor;border-right:2px solid currentColor;border-radius:4px;font-size:18px}
.c5-emu__mat-row{display:flex;gap:10px;justify-content:flex-end}
.c5-emu__mat-row .c5-emu__cell{flex:none;min-width:2em;text-align:right}
.c5-emu__res--mat{justify-content:flex-end}
.c5-emu__res--base{font-size:22px;overflow-wrap:anywhere;text-align:right;display:block}
.c5-emu__ss .c5-emu__cell{font-size:12px;min-width:0}

/* ---- Skin fx-880BTG (4 dòng) & fx-570VN Plus ---- */
.c5-emu--4line .c5-emu__screen{min-height:168px}
.c5-emu__prev{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--c5-screen-dim);border-bottom:1px dashed var(--c5-screen-dim);padding:2px 0 3px;margin-bottom:2px;overflow:hidden;white-space:nowrap}
.c5-emu__prev span:last-child{font-variant-numeric:tabular-nums}
.c5-emu--4line .c5-emu__menu{grid-template-columns:1fr 1fr 1fr;font-size:11.5px}
.c5-emu--880 .c5-emu__key--eq{font-size:13px;letter-spacing:.02em}
.c5-emu--880 .c5-emu__key--ctl{font-size:9.5px}
.c5-emu--570 .c5-emu__screen{min-height:112px;background-image:none}
.c5-emu--570 .c5-emu__expr{font-size:20px;min-height:48px}
.c5-emu--570 .c5-emu__res{font-size:26px}
@media (max-width:420px){.c5-emu--4line .c5-emu__menu{grid-template-columns:1fr 1fr}}
/* ---- Dòng miễn trừ trách nhiệm (footer mọi trang) ---- */
.c5-disclaimer{font:13px/1.5 var(--c5-font,system-ui,sans-serif);color:#555;background:#f4f4f2;border-top:1px solid #e2e2de;padding:14px 16px;margin-top:32px}
.c5-disclaimer__in{max-width:960px;margin:0 auto}
.c5-disclaimer a{color:inherit;text-decoration:underline}
/* ---- Thư viện chuỗi phím ---- */
.c5-kslib__filter{flex-wrap:wrap;margin-bottom:16px}
.c5-kslib__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.c5-kscard{border:1px solid var(--c5-border,#e2e2de);border-radius:12px;padding:12px 14px;background:#fff;min-width:0}
.c5-kscard.is-hidden{display:none}
.c5-kscard__t{font-size:15px;margin:0 0 8px;line-height:1.3}
.c5-kscard__k{font-size:14px;margin:0 0 4px;word-break:break-word}
.c5-kscard .c5-keyseq{margin:0;border:0;padding:0}
/* ---- Phase 5: breadcrumb, banner mùa thi, bước tiếp theo, công cụ liên quan của emulator ---- */
.c5-breadcrumb{font:13px/1.5 var(--c5-font-sans,system-ui,sans-serif);color:#666;margin:0 0 12px}
.c5-breadcrumb a{color:inherit;text-decoration:underline}
.c5-breadcrumb .separator{margin:0 4px}
.c5-banner{background:#fff7e0;border-bottom:1px solid #f0d98a;font:14px/1.5 var(--c5-font-sans,system-ui,sans-serif);color:#4a3b00;padding:10px 16px;text-align:center}
.c5-banner a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.c5-next{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0;font-size:14px}
.c5-next__l{font-weight:700;color:var(--c5-text-2,#555)}
.c5-next__a{display:inline-block;padding:8px 12px;border:1px solid var(--c5-border,#ddd);border-radius:999px;text-decoration:none;color:inherit;background:#fff;min-height:40px;box-sizing:border-box}
.c5-next__a:hover{border-color:var(--c5-accent,#1a73e8)}
.c5-emu-related{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px auto 0;max-width:480px;font-size:13px}
.c5-emu-related[hidden]{display:none}
.c5-emu-related__l{font-weight:700;color:var(--c5-text-2,#555);flex-basis:100%}
.c5-emu-related a{padding:6px 10px;border:1px solid var(--c5-border,#ddd);border-radius:999px;text-decoration:none;color:inherit;background:#fff}
.wp-block-table{overflow-x:auto}