/* Mini Remote — canonical article stylesheet.
   Geometry: shared topic rail 1120px; typography: GUIDE-ADMIN-UI-RULES.
   Source image remains uncropped. Icons resolve through the Docker Iconify proxy. */
:root{color-scheme:light;--mr-bg:#f8fafc;--mr-text:#0f172a;--mr-heading:#020617;--mr-muted:#475569;--mr-border:rgba(15,23,42,.14);--mr-surface:rgba(255,255,255,.8);--mr-accent:#007fff;--mr-demo:#047857;--mr-advice:#6d28d9;--mr-warning:#b42318;--mr-key:#34363a;--mr-key-text:#fff;--mr-radius:14px;--mr-gap:16px}
html[data-theme="night"]{color-scheme:dark;--mr-bg:#081120;--mr-text:#e2e8f0;--mr-heading:#f8fafc;--mr-muted:#b6c8dc;--mr-border:rgba(182,200,220,.2);--mr-surface:rgba(15,23,42,.65);--mr-demo:#6ee7b7;--mr-advice:#c4b5fd;--mr-warning:#fda29b}
.vm-mini-remote{margin:0;background:var(--mr-bg);color:var(--mr-text);font-size:18px;line-height:1.72}
.vm-mini-remote *{box-sizing:border-box}
.mr-shell{width:min(100%,1120px);margin-inline:auto;padding:36px 24px 32px;container:mini-remote / inline-size}
.vm-mini-remote h1,.vm-mini-remote h2,.vm-mini-remote h3{color:var(--mr-heading);line-height:1.28;margin:0 0 16px;font-weight:750;text-wrap:balance}
.vm-mini-remote h1{font-size:clamp(32px,5cqi,52px);font-weight:780;letter-spacing:.015em;margin:18px 0}
.vm-mini-remote h2{font-size:clamp(24px,3cqi,30px)}
.vm-mini-remote h3{font-size:18px;line-height:1.4;margin-bottom:8px}
.vm-mini-remote p{margin:0 0 16px}
.vm-mini-remote p:last-child{margin-bottom:0}
.vm-mini-remote a{color:inherit;text-underline-offset:4px}
.vm-mini-remote a:focus-visible,.vm-mini-remote [tabindex]:focus-visible{outline:3px solid var(--mr-accent);outline-offset:4px;border-radius:6px}
.mr-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:40px;align-items:center}
.mr-hero-copy{min-width:0}
.mr-category{display:inline-flex;border:1px solid var(--mr-accent);border-radius:999px;padding:6px 12px;color:var(--mr-accent);background:color-mix(in srgb,var(--mr-accent) 7%,transparent);font-size:13px;font-weight:700}
.mr-lead{font-size:20px;line-height:1.6;color:var(--mr-heading);max-width:46ch}
.mr-rules{display:grid;gap:20px;margin-top:28px}
.mr-rules>div{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px}
.mr-rules .mr-icon{margin-top:3px;color:var(--mr-accent)}
.mr-rules h2{font-size:18px;margin:0 0 6px}
.mr-hero-media{margin:0;min-width:0;width:100%;max-width:424px;justify-self:center;padding:8px}
.mr-hero-media>a,.mr-hero-media picture{display:block}
.mr-hero-media img{display:block;width:100%;height:auto;object-fit:contain}
.mr-hero-media figcaption{font-size:13px;line-height:1.5;text-align:center;color:var(--mr-muted);margin-top:12px}
.mr-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--mr-border);min-width:0;scroll-margin-top:24px}
.mr-section-heading{max-width:72ch;margin-bottom:24px}
.mr-section-heading>p{color:var(--mr-muted)}
.mr-table-wrap{border:1px solid var(--mr-border);border-radius:var(--mr-radius);overflow:hidden;margin-block:24px}
.vm-mini-remote table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:17px;line-height:1.65}
.vm-mini-remote caption{padding:12px 18px;color:var(--mr-muted);font-size:14px;text-align:left;background:var(--mr-surface);border-bottom:1px solid var(--mr-border)}
.vm-mini-remote th,.vm-mini-remote td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--mr-border);overflow-wrap:break-word}
.vm-mini-remote thead{background:color-mix(in srgb,var(--mr-accent) 7%,var(--mr-surface))}
.vm-mini-remote thead th{font-size:15px;color:var(--mr-heading);font-weight:700}
.vm-mini-remote th:first-child{width:29%}
.vm-mini-remote tbody th{font-weight:600}
.vm-mini-remote tr:last-child>th,.vm-mini-remote tr:last-child>td{border-bottom:0}
.vm-mini-remote kbd{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;min-height:32px;border-radius:7px;background:var(--mr-key);color:var(--mr-key-text);font-size:13px;font-weight:750;line-height:1.4;white-space:nowrap;vertical-align:middle}
.vm-mini-remote .mr-key-shift{background:#ffb323;color:#352600}
.vm-mini-remote .mr-key-red{background:#ba1830;color:#fff}
.vm-mini-remote .mr-key-green{background:#087f4e;color:#fff}
.vm-mini-remote .mr-key-yellow{background:#f8d44a;color:#352600}
.vm-mini-remote .mr-key-blue{background:#9ac9f2;color:#153454}
.mr-key-group,.mr-combo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mr-combo{margin-bottom:10px}
.vm-mini-remote .mr-small{font-size:14px;line-height:1.6;color:var(--mr-muted)}
.mr-notes,.mr-guidance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.mr-note,.mr-demo,.mr-advice{position:relative;padding:20px 56px 20px 20px;border:1px solid var(--mr-border);border-radius:var(--mr-radius);background:var(--mr-surface);min-width:0}
.mr-note p,.mr-guidance p{font-size:17px;line-height:1.7}
.mr-note>.mr-icon,.mr-guidance .mr-icon{position:absolute;right:14px;top:16px;width:32px;height:32px;opacity:.14}
.mr-demo{background:color-mix(in srgb,var(--mr-demo) 7%,transparent);border-color:color-mix(in srgb,var(--mr-demo) 22%,var(--mr-border))}
.mr-advice{background:color-mix(in srgb,var(--mr-advice) 7%,transparent);border-color:color-mix(in srgb,var(--mr-advice) 22%,var(--mr-border))}
.mr-demo h3{color:var(--mr-demo)}.mr-advice h3{color:var(--mr-advice)}
.mr-notice{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:18px 20px;margin-top:24px;border-left:3px solid var(--mr-accent);background:color-mix(in srgb,var(--mr-accent) 5%,transparent);font-size:17px}
.mr-notice>.mr-icon{margin-top:5px;color:var(--mr-accent)}
.mr-warning{border-color:var(--mr-warning);background:color-mix(in srgb,var(--mr-warning) 6%,transparent)}
.mr-warning h3,.mr-warning>.mr-icon{color:var(--mr-warning)}
.mr-icon{display:inline-block;width:22px;height:22px;flex:0 0 auto;background:currentColor;mask:var(--mr-icon) center/contain no-repeat;-webkit-mask:var(--mr-icon) center/contain no-repeat}
.mr-icon[data-icon="device-tv"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-device-tv.svg")}
.mr-icon[data-icon="device-remote"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-device-remote.svg")}
.mr-icon[data-icon="settings"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-settings.svg")}
.mr-icon[data-icon="player-play"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-player-play.svg")}
.mr-icon[data-icon="info-circle"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-info-circle.svg")}
.mr-icon[data-icon="presentation"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-presentation.svg")}
.mr-icon[data-icon="message-circle"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-message-circle.svg")}
.mr-icon[data-icon="alert-triangle"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-alert-triangle.svg")}
.mr-icon[data-icon="download"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-download.svg")}
.mr-icon[data-icon="file-description"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-file-description.svg")}
.mr-icon[data-icon="link"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-link.svg")}
.mr-download{display:flex;gap:24px;align-items:center;justify-content:space-between}
.mr-download>div{max-width:68ch}
.mr-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;min-height:48px;padding:12px 18px;border:1px solid var(--mr-accent);border-radius:10px;background:color-mix(in srgb,var(--mr-accent) 10%,transparent);color:var(--mr-heading);text-decoration:none;font-size:16px;font-weight:700;transition:background .18s}
.mr-button:hover{background:color-mix(in srgb,var(--mr-accent) 18%,transparent)}
.mr-tags{padding-top:24px;margin-top:24px;border-top:1px solid var(--mr-border)}
.article-references-marquee,.article-tags-marquee{max-width:100%;min-width:0;margin-top:16px}
.marquee-row{max-width:100%;overflow-x:auto;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab;padding:5px 0}
.marquee-row::-webkit-scrollbar{display:none}
.marquee-track,.marquee-set{display:flex;align-items:center;width:max-content;gap:10px}
.marquee-track{gap:0}
.marquee-set{padding-right:10px;flex-shrink:0}
.article-reference-tile,.mr-tag{display:inline-flex;align-items:center;gap:9px;min-height:46px;width:max-content;padding:10px 14px;white-space:nowrap;border:1px solid var(--mr-border);border-radius:999px;font-size:14px;line-height:1.5;text-decoration:none;background:var(--mr-surface);flex-shrink:0}
.article-reference-tile>.mr-icon{width:17px;height:17px;color:var(--mr-muted)}
a.article-reference-tile:hover,.mr-tag:hover{border-color:var(--mr-accent)}
@container mini-remote (max-width:839px){
.mr-hero{grid-template-columns:1fr;gap:24px}
.mr-hero-copy{max-width:72ch}
.mr-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
.mr-download{align-items:flex-start;flex-direction:column}
}
@container mini-remote (max-width:479px){
.mr-hero{gap:16px}
.mr-rules,.mr-notes,.mr-guidance{grid-template-columns:1fr}
.mr-section{margin-top:32px;padding-top:26px}
.vm-mini-remote table{font-size:16px}
.vm-mini-remote th,.vm-mini-remote td{padding:12px 10px}
.vm-mini-remote th:first-child{width:40%}
.vm-mini-remote kbd{font-size:11px;padding:5px 7px}
.vm-mini-remote .mr-audio-table th:first-child{width:42%}
.mr-note,.mr-demo,.mr-advice{padding-left:16px}
.mr-button{width:100%}
.mr-notice{padding:16px 12px}
}
@media(max-width:479px){.mr-shell{padding:28px 16px 24px}.vm-mini-remote{font-size:17px}.mr-lead{font-size:18px}}
@media(prefers-reduced-motion:reduce){.vm-mini-remote *{scroll-behavior:auto;transition:none}.marquee-set[data-clone]{display:none}}
@media print{
:root,html[data-theme="night"]{--mr-bg:#fff;--mr-text:#111;--mr-heading:#000;--mr-muted:#444;--mr-border:#bbb;--mr-surface:#fff}
.mr-shell{width:100%;padding:0}.mr-hero{grid-template-columns:1.2fr .8fr;gap:20px}.mr-hero-media{max-width:220px}.mr-button{display:none}
.mr-section{margin-top:24px;padding-top:20px}.mr-table-wrap{overflow:visible}tr,.mr-note,.mr-guidance>aside,figure{break-inside:avoid}h2,h3{break-after:avoid}
.marquee-row{overflow:visible}.marquee-track,.marquee-set{width:auto;flex-wrap:wrap}.marquee-set[data-clone]{display:none}
.vm-mini-remote{font-size:11pt}.vm-mini-remote table{font-size:10pt}.vm-mini-remote h1{font-size:26pt}.vm-mini-remote h2{font-size:18pt}
}

.mr-guide-media{max-width:720px;margin:28px auto 0;padding:8px}.mr-guide-media a,.mr-guide-media picture{display:block}.mr-guide-media img{display:block;width:100%;height:auto;object-fit:contain}.mr-guide-media figcaption{margin-top:12px;font-size:14px;line-height:1.6;text-align:center;color:var(--mr-muted)}

.mr-cover{margin:0 0 clamp(24px,4vw,48px);overflow:hidden;border-radius:16px}.mr-cover picture{display:block}.mr-cover img{display:block;width:100%;height:auto;object-fit:contain}
.mr-cover{margin-bottom:12px}
.mr-article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 clamp(24px,4vw,48px);color:var(--mr-muted);font-size:14px;line-height:1.5}
.mr-article-meta>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mr-icon[data-icon="calendar"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-calendar.svg")}
.mr-icon[data-icon="eye"]{--mr-icon:url("/huong-dan/mini-remote/assets/icon-eye.svg")}

/* Equal-width key labels in article tables, including wrapped combinations. */
.vm-mini-remote table kbd{box-sizing:border-box;width:112px;min-width:112px;flex:0 0 112px;text-align:center}
@media(max-width:479px){.vm-mini-remote table kbd{width:96px;min-width:96px;flex-basis:96px}}

/* A two-key chord is indivisible; both keys share available cell width. */
.vm-mini-remote .mr-combo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px;align-items:center;max-width:248px}
.vm-mini-remote table .mr-combo kbd{width:100%;min-width:0;max-width:112px;flex:none;padding-inline:3px;font-size:clamp(9px,2.6vw,13px)}