/* ============================================================
   Đồ thị hàm số lượng giác — @dohoangtumath
   Chỉ phần riêng của công cụ. Nút, nhóm nút phân đoạn, thanh trượt,
   công tắc, .readout, .toast đều lấy từ components.css.
   ============================================================ */

@import url('../../shared/components.css');

/* ── Nhóm nút chọn hàm cơ sở ─────────────────────────────────
   .btn-group.segmented dùng chung (components.css). Riêng ở đây có BỐN
   nút trong một hàng nên phải bớt đệm ngang cho vừa. */
.btn-group.segmented .btn { padding-inline: var(--sp-2); }

/* ── Công thức đang xét ───────────────────────────────────────
   Đặt trong ô nền nhạt, cùng kiểu với ô f′(x) của tool Đạo hàm: đây là
   KẾT QUẢ của bốn thanh trượt, không phải một ô để chỉnh. */
.cong-thuc {
    padding: var(--sp-3);
    font-size: var(--step-0);
    color: var(--accent);
    background: var(--accent-wash);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

/* ── Vùng vẽ ─────────────────────────────────────────────── */
#trig-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#trig-canvas.dang-keo { cursor: grabbing; }