/* ============================================================
   Khảo sát hàm số — @dohoangtumath
   Chỉ phần riêng của công cụ. Nút, ô nhập, thanh trượt, công tắc,
   bảng biến thiên (.vt-*), .latex-preview, .error-box đều lấy từ
   components.css.
   ============================================================ */

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

/* ── Ô nhập m nằm cạnh thanh trượt ───────────────────────── */
.m-field { width: 6.5rem; justify-self: end; }

/* ── Danh sách tiệm cận ──────────────────────────────────── */
.asym-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Mỗi dòng có một mẩu NÉT ĐỨT đứng đầu, vẽ đúng kiểu nét mà đồ thị dùng
   cho tiệm cận. Người học nối được ngay dòng chữ với đường trên hình mà
   không phải dò theo màu — nét đứt vẫn phân biệt được khi in đen trắng. */
.asym-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    font-size: var(--step--1);
    text-wrap: pretty;
}

.asym-dash {
    flex: none;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2px dashed var(--math-tangent);
}

.asym-eq {
    font-family: var(--font-data);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.asym-why { color: var(--text-muted); }

.asym-empty { font-size: var(--step--1); color: var(--text-muted); }

/* ── Bảng biến thiên: hai thứ riêng của tool này ─────────── */

/* Vạch ‖ tại tiệm cận đứng — hàm không xác định ở đó, cột này KHÔNG phải
   một giá trị nên phải trông khác hẳn mọi ô số khác. */
.vt-bar { color: var(--math-tangent); font-weight: 700; }

/* Ô giá trị tại tiệm cận đứng chứa HAI giới hạn một phía, xếp chồng:
   trái ở trên, phải ở dưới, đúng như cách sách in. */
.vt-two {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 0.92em;
}

/* ── Cực trị ─────────────────────────────────────────────── */
.ext-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--step--1);
    text-wrap: pretty;
}

/* Chấm màu khớp đúng màu điểm vẽ trên đồ thị. */
.ext-dot {
    width: 10px;
    height: 10px;
    flex: none;
    align-self: center;
    border-radius: 50%;
    background: var(--math-min);
}
.ext-dot.is-max { background: var(--math-max); }

.ext-val {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.ext-empty { font-size: var(--step--1); color: var(--text-muted); }

/* ── Vùng vẽ ─────────────────────────────────────────────── */
#plot-canvas { display: block; width: 100%; height: 100%; }