/* Khung chung cho mọi mô phỏng Toán (nguyenquangkhanh.com). Dùng biến màu của assets/style.css. */
:root{--sim-font:Cambria,"Cambria Math","Times New Roman",Georgia,serif;--math-font:"Cambria Math",Cambria,"Times New Roman",serif;
  --ok:#1a7f37;--ok-bg:#e6f4ea;--no:#c62828;--no-bg:#fdecea}
:root[data-theme="dark"]{--ok:#6bd99a;--ok-bg:#12301f;--no:#ff9a9a;--no-bg:#3a1a1a}
main.sim{max-width:1180px;font-family:var(--sim-font)}
main.sim h1{font-family:var(--sim-font)}
.m{font-family:var(--math-font);font-style:normal;white-space:nowrap}
.m i{font-style:italic;padding-right:.07em}
/* bố cục: hình + bảng điều khiển; hai khung dưới bằng nhau */
.sim-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);gap:16px;align-items:stretch}
.sim-grid>.sim-card:not(.applet-card){display:flex;flex-direction:column}
.sim-grid>.sim-card:not(.applet-card)>.status:last-child{margin-top:auto;padding-top:12px}
.sim-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;min-width:0}
.sim-card>h2{margin:0 0 12px;font-size:19px}
.applet-card{position:relative;padding:8px;background:#fff;display:flex;align-items:center}
.ggb-box{width:100%;max-width:720px;margin:0 auto}
#ggb{opacity:0;transition:opacity .3s}#ggb.ready{opacity:1}
/* ô ngang dưới hình (khi bảng điều khiển dài): các cột tự xếp */
.sim-wide{margin-top:16px}
.wide-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 28px;align-items:start}
.wide-cols h3{margin:0 0 8px;font-size:16px;color:var(--brand)}
.below{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:stretch}
.below>.sim-card{display:flex;flex-direction:column}
.sim-card .box{margin:12px 0 4px}
.below .box{margin:12px 0 0}
/* nút chọn, thanh trượt, mẫu có sẵn, trạng thái */
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:5px 14px;font:inherit;font-size:16px;cursor:pointer}
.op:hover{border-color:var(--brand-2)}
.op[aria-pressed="true"]{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
:root[data-theme="dark"] .op[aria-pressed="true"]{color:#0b1220}
.sl{display:grid;grid-template-columns:auto minmax(0,1fr) 2.6em;gap:10px;align-items:center;margin:8px 0}
.sl input{width:100%;accent-color:var(--brand-2)}
.sl output{text-align:right;font-family:var(--math-font)}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.presets .btn{font-size:15px}
.status{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.status>span{background:var(--formula-bg);border-radius:8px;padding:3px 10px;font-size:15px}
/* hoạt động gợi ý, bảng Đúng/Sai */
.tasks ol{margin:0;padding-left:1.4em;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.tasks li{margin:0 0 10px}.tasks li:last-child{margin-bottom:0}
table.tv{width:100%;min-width:0;border-collapse:collapse;background:transparent}
table.tv td{padding:7px 6px;border:0;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
table.tv tr:last-child td{border-bottom:0}
table.tv td.v{text-align:right;width:5.6em}
.tv-tag{display:inline-block;min-width:4.4em;text-align:center;font-weight:700;border-radius:6px;padding:1px 8px}
.tv-tag.t{color:var(--ok);background:var(--ok-bg)}.tv-tag.f{color:var(--no);background:var(--no-bg)}
/* kí hiệu vectơ: <span class="vec"><i>AB</i></span> -> mũi tên trên chữ (dùng trong .m) */
.vec{position:relative;display:inline-block;padding-top:.36em;line-height:1;white-space:nowrap}
.vec::before{content:"";position:absolute;left:.06em;right:.1em;top:.17em;border-top:.075em solid currentColor}
.vec::after{content:"";position:absolute;right:.07em;top:.045em;width:.22em;height:.22em;border:solid currentColor;border-width:.075em .075em 0 0;transform:rotate(45deg)}
/* liên kết về bài học / danh mục */
.sim-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;font-size:15px}
.sim-links a{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 12px;color:var(--text);text-decoration:none}
.sim-links a:hover{border-color:var(--brand-2);text-decoration:none}
/* dấu bản quyền trên hình, thông báo khi mở sai nơi */
.nqk-wm{position:absolute;right:16px;bottom:12px;font:600 12px/1 "Segoe UI",Arial,sans-serif;color:#1f3a5f;opacity:.38;pointer-events:none;user-select:none;letter-spacing:.3px}
.nqk-guard{padding:40px 16px;text-align:center;color:#1d2433;font:16px/1.6 "Segoe UI",Arial,sans-serif}
.nqk-guard a{color:#2b6cb0;font-weight:600}
/* chống sao chép (bản web) */
.nqk-nocopy main.sim{-webkit-user-select:none;user-select:none}
.nqk-nocopy main.sim input,.nqk-nocopy main.sim textarea{-webkit-user-select:text;user-select:text}
.nqk-nocopy main.sim img,.nqk-nocopy main.sim canvas{-webkit-user-drag:none}
@media print{.nqk-nocopy main.sim{display:none!important}}
/* màn hình nhỏ */
@media (max-width:1100px){.sim-grid{grid-template-columns:1fr}.applet-card{max-width:none}}
@media (max-width:760px){.below{grid-template-columns:1fr}.sim-card{padding:12px}.op{font-size:15px;padding:5px 12px}main.sim h1{font-size:24px}}
@media (max-width:420px){.applet-card{padding:4px}table.tv td{padding:6px 3px}.nqk-wm{right:10px;bottom:8px;font-size:10px}}
html.embed main.sim{max-width:none}
html.embed .sim-links{display:none}

.nqk-diag{position:absolute;left:12px;right:12px;top:40%;padding:14px 16px;border:1px solid #e3b341;border-radius:10px;background:#fff8e1;color:#5c4400;font:15px/1.5 "Segoe UI",Arial,sans-serif;text-align:center}
.nqk-diag small{display:block;margin-top:6px;color:#8a7a50;font-size:11px;word-break:break-all}