/* UTIL-001 Đồng hồ online — kế thừa font Arial của bộ giao diện tiện ích; không ghi đè font icon. */
.oc-stage{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:320px;padding:24px 16px;border:1px solid var(--sou-line);border-radius:18px;background:#f7f9fd;color:var(--sou-ink);text-align:center;--oc-face:#fff;--oc-tick:#7083ad;--oc-hand:#10245e;--oc-second:#c0291b;--oc-muted:#4f6290}
.oc-stage[data-theme=dark]{background:#0d1733;border-color:#24345f;color:#f2f5ff;--oc-face:#14214a;--oc-tick:#9fb0d8;--oc-hand:#f2f5ff;--oc-second:#ff8a7c;--oc-muted:#c3cdea}
@media (prefers-color-scheme:dark){.oc-stage[data-theme=system]{background:#0d1733;border-color:#24345f;color:#f2f5ff;--oc-face:#14214a;--oc-tick:#9fb0d8;--oc-hand:#f2f5ff;--oc-second:#ff8a7c;--oc-muted:#c3cdea}}
.oc-zone{margin:0;max-width:100%;font-size:15px;font-weight:700;color:var(--oc-muted);overflow-wrap:anywhere}
.oc-digital{max-width:100%}
.oc-time{margin:0;font-weight:700;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:clamp(34px,14vw,180px);font-size:clamp(34px,23cqw,180px)}
.oc-stage.has-ampm .oc-time{font-size:clamp(30px,12vw,160px);font-size:clamp(30px,19cqw,160px)}
.oc-stage.no-sec .oc-time{font-size:clamp(40px,18vw,220px);font-size:clamp(40px,30cqw,220px)}
.oc-stage.no-sec.has-ampm .oc-time{font-size:clamp(36px,15vw,200px);font-size:clamp(36px,25cqw,200px)}
.oc-ampm{margin-left:.18em;font-size:.32em;vertical-align:.2em}
.oc-date{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:0;font-size:clamp(16px,3.4cqw,28px);font-weight:700;color:var(--oc-muted)}
.oc-date:empty,.oc-stage.no-date .oc-date{display:none}
.oc-analog svg{display:block;width:min(100%,360px);height:auto}
.oc-face{fill:var(--oc-face);stroke:var(--oc-tick);stroke-width:2}
.oc-tick{stroke:var(--oc-tick);stroke-width:1.2;stroke-linecap:round}
.oc-tick.major{stroke:var(--oc-hand);stroke-width:3}
.oc-numbers text{fill:var(--oc-hand);font:700 14px Arial,"Helvetica Neue",Helvetica,sans-serif}
.oc-hand{stroke:var(--oc-hand);stroke-linecap:round}
.oc-hand-h{stroke-width:6}
.oc-hand-m{stroke-width:4}
.oc-hand-s{stroke:var(--oc-second);stroke-width:2}
.oc-cap{fill:var(--oc-second)}
.oc-fs-bar{display:none}
.oc-stage.is-fs{min-height:100vh;padding:72px 24px 24px;border:0;border-radius:0}
.oc-stage.is-fs .oc-fs-bar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;position:absolute;top:12px;right:12px;left:12px;transition:opacity .3s}
.oc-stage.is-fs.is-idle .oc-fs-bar{opacity:0;pointer-events:none}
.oc-stage.is-fs.is-idle{cursor:none}
.oc-stage.is-fs .oc-time{font-size:min(23vw,40vh)}
.oc-stage.is-fs.has-ampm .oc-time{font-size:min(19vw,36vh)}
.oc-stage.is-fs.no-sec .oc-time{font-size:min(30vw,48vh)}
.oc-stage.is-fs.no-sec.has-ampm .oc-time{font-size:min(25vw,44vh)}
.oc-stage.is-fs .oc-analog svg{width:min(78vh,90vw)}
.oc-stage.is-fs .oc-date{font-size:min(4.4vw,6vh)}
.oc-stage.is-fs .oc-zone{font-size:min(2.6vw,3.4vh)}
.oc-quick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 0}
.oc-quick .sou-presets{margin:0}
.oc .sou-presets button{min-height:44px;padding:8px 16px}
.oc-settings{margin-top:8px;padding:16px;border:1px solid var(--sou-line);border-radius:16px;background:#fbfcff}
.oc-sheet-head{display:none}
.oc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px}
.oc-grid>*{min-width:0}
.oc-checks{display:flex;flex-wrap:wrap;gap:0 20px}
.oc-checks .sou-label{flex:1 1 100%}
.oc-checks .sou-check{min-height:44px;padding:8px 0;align-items:center}
.oc-checks .sou-check input{margin:0}
.oc-settings .sou-toolbar{margin-top:4px}
.oc-settings .sou-toolbar .sou-button{min-height:44px}
.oc-settings-toggle{display:none!important}
@media (min-width:861px){.oc-tz-field{grid-column:span 2}}
.oc-backdrop{display:none}
@media (max-width:860px){
 .oc-settings-toggle{display:inline-flex!important}
 .oc-settings{display:none;margin:0}
 .oc-settings.is-open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10001;max-height:86vh;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -12px 40px rgba(16,36,94,.25)}
 .oc-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
 .oc-sheet-head h2{font-size:19px}
 .oc-backdrop{display:block;position:fixed;inset:0;z-index:10000;background:rgba(16,36,94,.45)}
 .oc-settings.is-open>.sou-status{position:sticky;bottom:0;margin:12px 0 0;box-shadow:0 -6px 18px rgba(16,36,94,.12)}
 .oc-stage{min-height:240px;padding:20px 12px}
}
@media (max-width:600px){
 .oc-quick .sou-button{flex:1 1 auto}
 .oc-quick .sou-presets{flex:1 1 100%}
 .oc-quick .sou-presets button{flex:1 1 0}
 .oc-settings .sou-toolbar .sou-button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.oc-stage.is-fs .oc-fs-bar{transition:none}}
@media print{.oc-quick,.oc-settings,.oc-fs-bar{display:none!important}.oc-stage{border:0}}