/* onthivui.com — onthi-board · grade→subject hub (unique) */
:root{
  --ov-ink:#102a43; --ov-muted:#486581; --ov-line:#d9e2ec;
  --ov-bg:#f0f4f8; --ov-card:#fff; --ov-pri:#0d9488; --ov-pri-d:#0f766e;
  --ov-warn:#d97706; --ov-rose:#e11d48; --ov-sky:#0284c7;
  --ov-r:4px; --ov-shadow:0 2px 0 rgba(16,42,67,.08);
  --ov-w:1180px; --ov-toc:200px;
  --ov-font:"Be Vietnam Pro",system-ui,sans-serif;
  --ov-mono:"IBM Plex Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 var(--ov-font);color:var(--ov-ink);background:var(--ov-bg)}
a{color:var(--ov-pri-d);text-decoration:none} a:hover{color:var(--ov-rose)}
.ov-wrap{max-width:var(--ov-w);margin:0 auto;padding:0 .9rem}
.ov-bar{background:var(--ov-ink);color:#fff}
.ov-bar .ov-wrap{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .9rem;flex-wrap:wrap}
.ov-mark{display:inline-flex;align-items:center;line-height:0;flex-shrink:0}
.ov-mark img{height:52px;width:auto;max-width:min(200px,40vw);object-fit:contain;display:block;border-radius:4px}
.ov-mark .ov-word{font-weight:800;font-size:1.1rem;letter-spacing:-.03em;color:#fff;margin-left:.35rem}
.ov-mark .ov-word b{color:#5eead4}.ov-mark .ov-word i{font-style:normal;color:#fbbf24}
@media(max-width:719px){.ov-mark img{height:40px}}
.ov-seg{display:flex;background:#243b53;border-radius:var(--ov-r);overflow:hidden;border:1px solid #334e68}
.ov-seg a{color:#d9e2ec;padding:.45rem .85rem;font-weight:800;font-size:.9rem;border-right:1px solid #334e68}
.ov-seg a:last-child{border:0}
.ov-seg a.is-on,.ov-seg a:hover{background:var(--ov-pri);color:#fff}
.ov-links{display:flex;gap:.85rem;font-size:.88rem;font-weight:700;flex-wrap:wrap}
.ov-links a{color:#9fb3c8}
.ov-links a:hover{color:#fff}
.ov-sub{background:#fff;border-bottom:3px solid var(--ov-pri);box-shadow:var(--ov-shadow)}
.ov-sub .ov-wrap{display:flex;gap:.5rem;padding:.55rem .9rem;overflow-x:auto;align-items:center}
.ov-pill{white-space:nowrap;padding:.35rem .7rem;border-radius:999px;background:#e6fffa;color:var(--ov-pri-d);font-weight:700;font-size:.82rem;border:1px solid #99f6e4}
.ov-pill.warn{background:#fffbeb;border-color:#fcd34d;color:#b45309}
.ov-pill.sky{background:#e0f2fe;border-color:#7dd3fc;color:#0369a1}
.ov-pill.rose{background:#ffe4e6;border-color:#fda4af;color:#be123c}
.ov-hero{padding:0;margin:1rem 0 .5rem;border:2px solid var(--ov-ink);border-radius:var(--ov-r);overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--ov-pri)}
.ov-hero-banner{height:clamp(150px,26vw,220px);background:#0f766e}
.ov-hero-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ov-hero-body{padding:1rem .95rem}
.ov-hero h1{margin:0 0 .4rem;font:800 1.5rem/1.25 var(--ov-mono);letter-spacing:-.02em}
.ov-hero p{margin:0;color:var(--ov-muted)}
.ov-grades{display:grid;grid-template-columns:1fr;gap:.75rem;margin:1rem 0}
@media(min-width:700px){.ov-grades{grid-template-columns:repeat(3,1fr)}}
.ov-grade{display:block;background:#fff;border:2px solid var(--ov-ink);border-radius:var(--ov-r);padding:0;box-shadow:4px 4px 0 var(--ov-pri);transition:transform .12s}
.ov-grade:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ov-warn)}
.ov-grade .n{font:800 2.2rem/1 var(--ov-mono);color:var(--ov-pri)}
.ov-grade .l{font-weight:800;margin-top:.35rem}
.ov-grade .s{font-size:.82rem;color:var(--ov-muted);margin-top:.25rem}
.ov-panel{background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r);padding:1rem;margin:1rem 0;box-shadow:var(--ov-shadow)}
.ov-panel h2{margin:0 0 .75rem;font:800 1.1rem/1.3 var(--ov-mono);border-left:4px solid var(--ov-warn);padding-left:.55rem}
.ov-mons{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
@media(min-width:720px){.ov-mons{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ov-mons{grid-template-columns:repeat(6,1fr)}}
.ov-mon{text-align:center;padding:.9rem .4rem;border-radius:var(--ov-r);font-weight:800;color:#fff;min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.ov-mon small{font-weight:600;opacity:.9;font-size:.72rem}
.ov-m1{background:#0d9488}.ov-m2{background:#0284c7}.ov-m3{background:#7c3aed}
.ov-m4{background:#d97706}.ov-m5{background:#e11d48}.ov-m6{background:#059669}
.ov-filter{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.ov-filter select,.ov-filter input{padding:.5rem .65rem;border:1px solid var(--ov-line);border-radius:var(--ov-r);font:inherit;background:#fff}
.ov-btn{background:var(--ov-pri);color:#fff!important;padding:.5rem .9rem;border-radius:var(--ov-r);font-weight:800;border:0;cursor:pointer}
.ov-btn.warn{background:var(--ov-warn)}
.ov-table{width:100%;border-collapse:collapse;font-size:.9rem}
.ov-table th,.ov-table td{border-bottom:1px solid var(--ov-line);padding:.55rem .4rem;text-align:left}
.ov-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ov-muted)}
.ov-tips{display:grid;gap:.65rem}
@media(min-width:720px){.ov-tips{grid-template-columns:1fr 1fr 1fr}}
.ov-tip{border:1px solid var(--ov-line);border-left:4px solid var(--ov-sky);padding:.75rem;background:#f0f9ff;border-radius:0 var(--ov-r) var(--ov-r) 0}
.ov-tip h3{margin:0 0 .3rem;font-size:.95rem}
.ov-tip p{margin:0;font-size:.85rem;color:var(--ov-muted)}
.ov-empty{padding:.85rem;background:#fff7ed;border:1px dashed var(--ov-warn);color:#9a3412;font-size:.9rem;border-radius:var(--ov-r)}
.ov-kpi{display:flex;flex-wrap:wrap;gap:1rem;background:#134e4a;color:#ccfbf1;padding:.85rem 0;font-weight:700;font-size:.9rem}
.ov-kpi strong{color:#fff;font-size:1.1rem}
.ov-foot{background:#102a43;color:#9fb3c8;padding:1.75rem 0 1rem;margin-top:1.5rem;font-size:.88rem}
.ov-foot a{color:#e0fcff}
.ov-fg{display:grid;gap:1rem}
@media(min-width:720px){.ov-fg{grid-template-columns:1fr 1fr 1fr}}
.ov-foot h4{margin:0 0 .4rem;color:#fff}
.ov-foot ul{list-style:none;margin:0;padding:0}
.ov-foot li{margin:.28rem 0}
.ov-copy{margin-top:1rem;padding-top:.75rem;border-top:1px solid #243b53;font-size:.78rem}
.ov-crumb{font-size:.82rem;color:var(--ov-muted);margin:1rem 0 .5rem}
.ov-detail{display:grid;gap:1rem;margin:1rem 0 2rem}
@media(min-width:900px){.ov-detail{grid-template-columns:var(--ov-toc) 1fr}}
.ov-toc{background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r);padding:.85rem;height:fit-content;position:sticky;top:.75rem}
.ov-toc h3{margin:0 0 .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ov-muted)}
.ov-toc a{display:block;padding:.3rem 0;font-size:.9rem;font-weight:600;border-bottom:1px dotted var(--ov-line)}
.ov-body{background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r);padding:1.1rem}
.ov-body h1{margin-top:0;font:800 1.4rem/1.25 var(--ov-mono)}
.ov-step{border-left:3px solid var(--ov-pri);padding:.55rem .75rem;margin:.65rem 0;background:#f0fdfa}
.ov-ans{background:#fffbeb;border:2px solid var(--ov-warn);border-radius:var(--ov-r);padding:.85rem;margin-top:1rem}
.ov-ans summary{font-weight:800;cursor:pointer;color:#b45309}
@media(max-width:699px){
  .ov-seg{width:100%;justify-content:stretch}
  .ov-seg a{flex:1;text-align:center}
}

/* photos + tip cards */
.ov-grade{position:relative;overflow:hidden;padding:0}
.ov-grade .ov-gthumb{height:110px;overflow:hidden;background:#ccfbf1}
.ov-grade .ov-gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ov-grade .ov-gbd{padding:1rem 1.1rem}
.ov-tip{overflow:hidden;padding:0}
.ov-tip .ov-tthumb{height:100px;overflow:hidden;background:#e0f2fe}
.ov-tip .ov-tthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ov-tip .ov-tbd{padding:.85rem}
.ov-cover{border:2px solid var(--ov-ink);border-radius:var(--ov-r);overflow:hidden;margin:0 0 1rem;height:clamp(140px,22vw,200px);box-shadow:3px 3px 0 var(--ov-pri)}
.ov-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ov-mon{position:relative;overflow:hidden}
.ov-mon img{position:absolute;right:0;bottom:0;width:48%;height:70%;object-fit:cover;opacity:.28;pointer-events:none}