/* Thẻ "Cách làm" (hướng dẫn giải) */
.ex-card { margin: 14px 0 6px; border: 3px solid #ffd166; background: #fffbea; border-radius: 20px; padding: 14px 16px; text-align: left; }
.ex-card .ex-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ex-card .ex-head b { font-size: 20px; flex: 1; }
.ex-steps { margin: 4px 0 0; padding-left: 0; list-style: none; counter-reset: exs; }
.ex-steps > li { counter-increment: exs; position: relative; padding: 8px 0 8px 40px; border-bottom: 1px dashed #f1dca0; }
.ex-steps > li:last-child { border-bottom: 0; }
.ex-steps > li::before { content: counter(exs); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: #ffb703; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.ex-t { font-size: 18px; line-height: 1.55; }
.ex-v { margin-top: 6px; overflow-x: auto; }
.ex-rule { background: #e3f6ff; border-left: 5px solid #118ab2; border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: 17px; }
.ex-tip { background: #effff6; border-left: 5px solid #06d6a0; border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; font-size: 17px; }
.ex-ans { margin-top: 8px; font-size: 18px; }
.ex-hl { color: #d62868; }
.ex-calc { display: inline-block; font-weight: 800; font-size: 20px; background: #fff; border: 2px solid #ffd166; border-radius: 10px; padding: 1px 10px; margin: 2px 0; }
.ex-svg { display: block; max-width: 100%; height: auto; }
.ex-dot { fill: #118ab2; } .ex-dot.add { fill: #ef476f; }
.ex-x { stroke: #d62828; stroke-width: 3; stroke-linecap: round; }
.ex-cell { fill: #fff; stroke: #555; stroke-width: 1.5; }
.ex-axis { stroke: #333; stroke-width: 2.5; } .ex-axh { fill: #333; } .ex-tick { stroke: #333; stroke-width: 2; }
.ex-num { font-size: 13px; text-anchor: middle; fill: #333; font-weight: 600; } .ex-num.on { font-weight: 900; fill: #d62868; }
.ex-ring { fill: #ffe3ea; stroke: #ef476f; stroke-width: 2; }
.ex-jump { fill: none; stroke-width: 2.5; } .ex-jump.up { stroke: #06a77d; } .ex-jump.down { stroke: #e76f51; }
.ex-jl { font-size: 15px; font-weight: 800; text-anchor: middle; } .ex-jl.up { fill: #06a77d; } .ex-jl.down { fill: #e76f51; }
.ex-bars { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.ex-bar { display: grid; grid-template-columns: 110px 1fr 34px; gap: 8px; align-items: center; }
.ex-bb { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #118ab2, #06d6a0); }
.ex-tb { border-collapse: collapse; margin: 4px 0; font-size: 17px; }
.ex-tb th, .ex-tb td { border: 2px solid #f1dca0; padding: 4px 12px; text-align: center; } .ex-tb th { background: #fff3c4; }
@media (max-width: 520px) { .ex-t { font-size: 16px; } .ex-card { padding: 12px; } .ex-bar { grid-template-columns: 80px 1fr 30px; } }

/* bảng, hình trong lời giải: không tràn khung trên điện thoại (vuốt ngang nếu cần) */
.ex-card .ex-tb, .ex-card table { display: block; max-width: 100%; overflow-x: auto; }
.ex-t { overflow-wrap: anywhere; }
@media (max-width: 520px) { .ex-tb th, .ex-tb td { padding: 3px 6px; font-size: 15px; } .ex-calc { font-size: 17px; } }
.ex-col { border-collapse: collapse; font-size: 22px; font-weight: 800; margin: 4px 0; }
.ex-col th { font-size: 13px; color: #6b6f85; padding: 0 10px; font-weight: 700; }
.ex-col td { text-align: center; padding: 2px 12px; min-width: 28px; }
.ex-col .ex-op { color: #e76f51; }
.ex-col .ex-res td { border-top: 3px solid #2d2a4a; color: #d62868; }