@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

/* ===========================================================================
   RỒNG VIỆT — HỆ THỐNG QUẢN TRỊ
   ---------------------------------------------------------------------------
   Công cụ làm việc, không phải trang giới thiệu. Nhân viên CSKH mở ra cả ngày
   để biết gọi ai tiếp theo, nên mật độ thông tin và tốc độ đọc quan trọng hơn
   hiệu ứng.

   QUY ƯỚC MÀU — đọc trước khi sửa:
   Đỏ / vàng / xanh lá là màu DỮ LIỆU, đã khoá cho ba mức điểm của bé
   (cần can thiệp / theo dõi / đạt chuẩn). Không bao giờ dùng ba màu đó cho
   nút bấm hay trạng thái giao diện, nếu không nhân viên sẽ đọc nhầm.
   Màu giao diện là tím-chàm (--accent), nằm ngoài hẳn ba màu kia.
   =========================================================================== */

:root {
    /* Nền — trung tính hơi ngả tím, không phải xanh-lạnh corporate */
    --ink:        #15161c;
    --surface:    #1d1f28;
    --surface-2:  #262935;
    --surface-3:  #2f3340;
    --line:       #343848;
    --line-soft:  #272a36;

    /* Chữ */
    --text:       #e8e8ef;
    --text-dim:   #a9abbd;
    --text-faint: #71748a;

    /* Giao diện */
    --accent:     #7c6cf0;
    --accent-hi:  #9387f4;
    --accent-dim: #4a3fa8;
    --accent-bg:  rgba(124, 108, 240, 0.13);

    /* DỮ LIỆU — chỉ dùng cho điểm số của bé.
       Ba màu này đã chạy qua scripts/validate_palette.js trên đúng nền tối:
       cách nhau ΔE 11,6 với người mù màu đỏ-lục và 21,8 với mắt thường,
       tương phản đều ≥ 3:1. Bộ cũ (#3fb27f/#e0a33e) chỉ cách ΔE 7,6 — khoảng
       6% nam giới nhìn vàng và xanh lá gần như một màu, mà đây là chỗ phân biệt
       "cần can thiệp" với "theo dõi" trên điểm của một đứa trẻ.
       ĐỔI THÌ PHẢI CHẠY LẠI SCRIPT. */
    --good:       #2fbf84;
    --good-tx:    #2fbf84;
    --good-bg:    rgba(47, 191, 132, 0.15);
    --watch:      #ffc53d;
    --watch-tx:   #ffc53d;
    --watch-bg:   rgba(255, 197, 61, 0.15);
    --risk:       #ff6b60;
    --risk-tx:    #ff6b60;
    --risk-bg:    rgba(255, 107, 96, 0.15);

    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  16px;

    --sidebar-w:  248px;
    --pad:        24px;

    --font: 'Be Vietnam Pro', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    background: var(--ink);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* Số liệu phải thẳng cột mới quét nhanh được */
.data-table td, .data-table th,
.kpi-value, .score-total, .mono {
    font-variant-numeric: tabular-nums;
}

.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

:focus-visible {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================================================
   FORM
   =========================================================================== */

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--surface-3); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}
input[readonly] { color: var(--text-dim); background: var(--surface); }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9abbd' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
input[type="date"] { color-scheme: dark; }
label { font-size: 13px; color: var(--text-dim); display: block; margin-bottom: 6px; }

.form-group { margin-bottom: 16px; }

button {
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    transition: background .15s, border-color .15s, color .15s;
}
button:disabled { opacity: .45; cursor: not-allowed; }

/* ===========================================================================
   ĐĂNG NHẬP
   =========================================================================== */

.login-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(124,108,240,.16), transparent 70%),
        var(--ink);
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
}
.login-card {
    background: var(--surface);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    width: 100%; max-width: 360px;
    text-align: center;
}
.login-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.login-card p { color: var(--text-dim); font-size: 13px; margin: 0 0 24px; }
.logo { font-size: 38px; color: var(--accent); margin-bottom: 14px; }

.input-group-login { position: relative; margin-bottom: 14px; text-align: left; }
.input-group-login i {
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%); color: var(--text-faint); font-size: 13px;
}
.input-group-login input { padding-left: 38px; }

#btnLogin {
    width: 100%; padding: 12px;
    background: var(--accent); color: #fff; font-size: 14px;
}
#btnLogin:hover { background: var(--accent-hi); }

/* ===========================================================================
   KHUNG TRANG
   =========================================================================== */

.dashboard-wrapper { display: flex; height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--line-soft);
    padding: 18px 12px;
    display: flex; flex-direction: column;
    overflow-y: auto;
}

.brand {
    font-size: 16px; font-weight: 700; color: var(--text);
    display: flex; gap: 9px; align-items: center;
    padding: 0 8px; margin-bottom: 20px;
}
.brand i { color: var(--accent); }

.user-profile {
    background: var(--ink);
    border: 1px solid var(--line-soft);
    padding: 10px 12px;
    border-radius: var(--radius);
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 18px;
}
.avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    background: var(--accent-bg); color: var(--accent-hi);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.user-info { min-width: 0; }
.user-info .name {
    font-weight: 600; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-info .role { font-size: 12px; color: var(--text-faint); }

.menu-group { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* Nhãn nhóm: chữ thường, không đánh số — đây là phân loại, không phải trình tự */
.section-header {
    font-size: 12px; font-weight: 600;
    color: var(--text-faint);
    padding: 16px 10px 6px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
}
.section-header:first-child { padding-top: 4px; }
.section-header i { font-size: 10px; transition: transform .2s; }

.btn-menu {
    text-align: left;
    padding: 9px 10px;
    background: transparent;
    color: var(--text-dim);
    font-size: 13.5px; font-weight: 500;
    display: flex; gap: 10px; align-items: center;
    width: 100%;
    position: relative;
}
.btn-menu i { width: 16px; font-size: 13px; text-align: center; flex-shrink: 0; }
.btn-menu:hover { background: var(--surface-2); color: var(--text); }
.btn-menu.active { background: var(--accent-bg); color: var(--accent-hi); font-weight: 600; }

.nav-badge {
    margin-left: auto;
    background: var(--risk); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}

.btn-logout {
    margin-top: 14px; padding: 10px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim); font-size: 13px;
}
.btn-logout:hover { border-color: var(--risk); color: var(--risk); }

.divider { height: 1px; background: var(--line-soft); margin: 10px 0; }

.main-content {
    flex: 1;
    height: 100vh;
    padding: var(--pad) 32px 48px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===========================================================================
   TIÊU ĐỀ & THẺ
   =========================================================================== */

.header { margin-bottom: 20px; }
.header h1 { margin: 0 0 3px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.header p { color: var(--text-dim); font-size: 13.5px; margin: 0; }

.card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 20px;
}

/* Thẻ số liệu: viền trái mang màu, không đổ bóng — phẳng thì đọc nhanh hơn */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.stat-card .kpi-label { font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px; }
.stat-card .kpi-value { font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.stat-card .kpi-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.stat-card.is-good  { border-left-color: var(--good); }
.stat-card.is-watch { border-left-color: var(--watch); }
.stat-card.is-risk  { border-left-color: var(--risk); }

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* ===========================================================================
   THANH LỌC
   =========================================================================== */

.filter-area {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 16px;
}
.filter-item { flex: 0 0 auto; min-width: 150px; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box i {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%); color: var(--text-faint); font-size: 13px;
    pointer-events: none;
}
.search-box input { padding-left: 36px; }

.btn-load, .btn-add {
    padding: 10px 16px;
    background: var(--accent); color: #fff;
    font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap;
}
.btn-load:hover, .btn-add:hover { background: var(--accent-hi); }
.btn-add { background: transparent; border: 1px solid var(--accent-dim); color: var(--accent-hi); }
.btn-add:hover { background: var(--accent-bg); border-color: var(--accent); }

.btn-test {
    padding: 8px 13px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-test:hover { background: var(--surface-3); color: var(--text); }

.btn-save {
    padding: 10px 18px;
    background: var(--accent); color: #fff; font-size: 14px;
}
.btn-save:hover { background: var(--accent-hi); }

/* ===========================================================================
   BẢNG
   =========================================================================== */

.table-responsive { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.data-table thead th {
    text-align: left;
    font-size: 12px; font-weight: 600;
    color: var(--text-faint);
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--surface-2); }

/* Viền trái mang trạng thái của dòng */
.data-table tbody tr.row-flag td:first-child {
    box-shadow: inset 3px 0 0 var(--row-flag, transparent);
}
.card-pending { --row-flag: var(--risk); }
.card-paid    { --row-flag: var(--good); }

/* ===========================================================================
   NHÃN TRẠNG THÁI
   =========================================================================== */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
    background: var(--surface-3); color: var(--text-dim);
}
.badge.success { background: var(--good-bg);  color: var(--good);  }
.badge.warning { background: var(--watch-bg); color: var(--watch); }
.badge.danger  { background: var(--risk-bg);  color: var(--risk);  }
.badge.info    { background: var(--accent-bg); color: var(--accent-hi); }

/* ===========================================================================
   GLYPH 5 LĨNH VỰC
   ---------------------------------------------------------------------------
   Hình dáng phát triển của một bé, thu nhỏ bằng con tem. Năm cột theo thứ tự
   cố định: vận động thô, vận động tinh, giao tiếp, nhận thức, cá nhân xã hội.
   Cao = điểm cao. Nhân viên liếc là thấy bé yếu ở đâu, khỏi mở chi tiết.
   =========================================================================== */

.score-glyph {
    display: inline-flex; align-items: flex-end; gap: 2px;
    height: 22px; padding: 2px 0;
    vertical-align: middle;
}
.score-glyph .bar {
    width: 4px;
    border-radius: 1px;
    background: var(--text-faint);
    min-height: 2px;
}
.score-glyph .bar.good  { background: var(--good);  }
.score-glyph .bar.watch { background: var(--watch); }
.score-glyph .bar.risk  { background: var(--risk);  }

.score-glyph-lg { height: 44px; gap: 4px; }
.score-glyph-lg .bar { width: 9px; border-radius: 2px; }

.score-total { font-weight: 700; font-size: 15px; }
.score-total.good  { color: var(--good-tx);  }
.score-total.watch { color: var(--watch-tx); }
.score-total.risk  { color: var(--risk-tx);  }
.score-total small { font-weight: 500; color: var(--text-faint); font-size: 11.5px; }

/* ===========================================================================
   HÀNG ĐỢI CHĂM SÓC
   =========================================================================== */

.status-spine {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 12px;
}
.status-chip {
    padding: 7px 13px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--text-dim);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 7px;
}
.status-chip:hover { border-color: var(--surface-3); color: var(--text); }
.status-chip.active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent-hi);
    font-weight: 600;
}
.status-chip .count {
    font-size: 12px; font-weight: 700;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.status-chip.active .count { color: var(--accent-hi); }

.btn-call {
    padding: 7px 14px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-dim);
    color: var(--accent-hi);
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
}
.btn-call:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.lead-phone {
    color: var(--text); font-weight: 600; font-size: 14px;
    text-decoration: none; letter-spacing: .01em;
}
.lead-phone:hover { color: var(--accent-hi); }

.lead-note {
    font-size: 12.5px; color: var(--text-faint);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================================================================
   PHÂN TRANG
   =========================================================================== */

.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.pager-info { font-size: 13px; color: var(--text-dim); }
.pager-controls { display: flex; gap: 6px; align-items: center; }
.pager-controls button {
    padding: 7px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 13px;
}
.pager-controls button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

/* ===========================================================================
   NÚT BIỂU TƯỢNG
   =========================================================================== */

.btn-icon {
    width: 30px; height: 30px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 4px;
}
.btn-icon:first-child { margin-left: 0; }
.btn-icon:hover { background: var(--surface-3); color: var(--text); }
.btn-icon.confirm:hover { background: var(--accent-bg); color: var(--accent-hi); border-color: var(--accent-dim); }
.btn-icon.delete:hover  { background: var(--risk-bg);   color: var(--risk);      border-color: var(--risk); }

.btn-del {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-faint); font-size: 12px;
}
.btn-del:hover { background: var(--risk-bg); color: var(--risk); }

/* ===========================================================================
   CỬA SỔ PHỤ
   =========================================================================== */

.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10, 11, 15, .72);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.modal-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    width: 100%; max-width: 520px;
    max-height: 88vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.large-modal { max-width: 860px; }

.modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-shrink: 0;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; }

.btn-close-modal-icon {
    width: 30px; height: 30px; flex-shrink: 0;
    background: transparent; border: none;
    color: var(--text-faint); font-size: 15px;
}
.btn-close-modal-icon:hover { background: var(--surface-3); color: var(--text); }

.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.btn-close-modal-text { padding: 10px 18px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); }

.modal-tabs {
    display: flex; gap: 2px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line-soft);
    overflow-x: auto; flex-shrink: 0;
}
.tab-btn {
    padding: 12px 14px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-faint);
    font-size: 13.5px; font-weight: 500;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent-hi); border-bottom-color: var(--accent); font-weight: 600; }

.modal-content-img { max-width: 100%; max-height: 80vh; border-radius: var(--radius); }

/* ===========================================================================
   SOẠN THẢO & VIDEO
   =========================================================================== */

.quill-wrapper { background: var(--ink); border-radius: var(--radius-sm); overflow: hidden; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--line) !important; }
.ql-snow .ql-stroke { stroke: var(--text-dim) !important; }
.ql-snow .ql-fill   { fill: var(--text-dim) !important; }
.ql-snow .ql-picker { color: var(--text-dim) !important; }
.ql-editor { min-height: 180px; color: var(--text); }
.ql-editor.ql-blank::before { color: var(--text-faint) !important; font-style: normal; }

.exercise-row, .video-row {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    display: grid; gap: 12px;
}

.video-source-selector { display: flex; gap: 8px; }
.radio-option {
    flex: 1;
    padding: 9px 12px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text-dim);
    cursor: pointer; margin-bottom: 0;
    display: flex; align-items: center; gap: 8px;
}
.radio-option input { width: auto; }
.radio-option.selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-hi); }

.video-box {
    background: var(--ink);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 60px;
}
.video-box iframe { display: block; border: 0; }

/* ===========================================================================
   HỖ TRỢ PHỤ HUYNH
   =========================================================================== */

.chat-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    height: calc(100vh - 190px);
    min-height: 420px;
}
.chat-list-area, .chat-main-area {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow-y: auto;
}
.chat-main-area { display: flex; flex-direction: column; padding: 16px; gap: 12px; }
.btn-back-mobile { display: none; }

.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--line); }
.main-content::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 5px; }
.main-content::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }

.tracking-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 16px;
}

/* ===========================================================================
   TRẠNG THÁI RỖNG
   =========================================================================== */

.empty-state { padding: 48px 24px; text-align: center; }
.empty-state i { font-size: 30px; color: var(--surface-3); margin-bottom: 12px; display: block; }
.empty-state h4 { margin: 0 0 5px; font-size: 15px; font-weight: 600; color: var(--text-dim); }
.empty-state p { margin: 0 auto; font-size: 13px; color: var(--text-faint); max-width: 44ch; }

/* ===========================================================================
   TIỆN ÍCH
   =========================================================================== */

.text-center { text-align: center; }
.block { display: block; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mr-2 { margin-right: 8px; }
.text-2xl { font-size: 22px; }
.text-3xl { font-size: 28px; }
.text-4xl { font-size: 34px; }
.text-blue-500 { color: var(--accent-hi); }
.text-slate-400 { color: var(--text-dim); }

/* ===========================================================================
   ĐIỆN THOẠI & MÁY TÍNH BẢNG
   ---------------------------------------------------------------------------
   Nhân viên CSKH làm việc trên điện thoại, nên bảng phải thành thẻ đọc được
   bằng một tay, và số điện thoại phải là vùng bấm đủ to để gọi.
   =========================================================================== */

@media (max-width: 1024px) {
    .chat-wrapper { grid-template-columns: 1fr; height: auto; }
    .chat-main-area { display: none; min-height: 60vh; }
    .chat-wrapper.mobile-active .chat-list-area { display: none; }
    .chat-wrapper.mobile-active .chat-main-area { display: flex; }
    .btn-back-mobile {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 12px; background: var(--surface-2);
        border: 1px solid var(--line); color: var(--text-dim); font-size: 13px;
    }
}

@media (max-width: 768px) {
    body { overflow: auto; }

    .dashboard-wrapper { flex-direction: column; height: auto; }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
        padding: 12px;
        position: sticky; top: 0; z-index: 50;
        overflow: visible;
    }
    .brand { margin-bottom: 12px; font-size: 15px; }
    .user-profile { display: none; }
    .section-header { display: none; }

    .menu-group {
        flex-direction: row;
        overflow-x: auto;
        gap: 7px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    /* Các nhóm là div bọc nút. Không có dòng này thì flex bắt vào div,
       menu xếp thành nhiều cột chồng lên nhau thay vì cuộn ngang một hàng.
       Phải dùng !important vì toggleSidebarGroup() ghi display:block thẳng
       vào thuộc tính style của từng div. */
    .menu-group > div[id^="group_"] { display: contents !important; }
    .menu-group::-webkit-scrollbar { display: none; }
    .btn-menu {
        flex: 0 0 auto; width: auto;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 20px;
        background: var(--surface-2);
        font-size: 13px;
    }
    .btn-menu.active { background: var(--accent); color: #fff; }
    .divider { display: none; }
    .btn-logout { display: none; }

    .main-content { height: auto; padding: 16px 14px 60px; overflow-y: visible; }

    .header h1 { font-size: 19px; }
    .filter-area { flex-direction: column; align-items: stretch; }
    .filter-item, .search-box { width: 100%; min-width: 0; }
    .btn-load, .btn-add { width: 100%; justify-content: center; }

    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .stat-card { padding: 12px; }
    .stat-card .kpi-value { font-size: 21px; }

    /* Bảng thành thẻ */
    .table-responsive { overflow-x: visible; }
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }

    .data-table tr {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-left: 3px solid var(--row-flag, var(--line));
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 6px 2px;
    }
    .data-table tbody tr:hover { background: var(--surface); }
    .data-table tbody tr.row-flag td:first-child { box-shadow: none; }

    .data-table td {
        text-align: right;
        padding: 8px 14px;
        border-bottom: 1px solid var(--line-soft);
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
    }
    .data-table td:last-child { border-bottom: none; }
    .data-table td::before {
        content: attr(data-label);
        font-size: 12px; font-weight: 500;
        color: var(--text-faint);
        text-align: left; flex-shrink: 0;
    }
    .data-table td:empty { display: none; }

    /* Số điện thoại: vùng bấm gọi đủ to */
    .lead-phone { font-size: 16px; padding: 4px 0; display: inline-block; }
    .btn-call { padding: 10px 16px; font-size: 14px; }
    .btn-icon { width: 36px; height: 36px; font-size: 13px; }

    .status-spine { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 10px; }
    .status-spine::-webkit-scrollbar { display: none; }
    .status-chip { flex: 0 0 auto; }

    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-box { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .modal-body { padding: 16px; }
    .modal-header { padding: 14px 16px; }
    .modal-tabs { padding: 0 10px; }

    .pager { flex-direction: column; align-items: stretch; }
    .pager-controls { justify-content: center; }
}

@media (max-width: 420px) {
    .kpi-row { grid-template-columns: 1fr; }
}

@media print {
    .sidebar, .filter-area, .btn-icon, .pager, .status-spine { display: none !important; }
    body, .main-content { height: auto; overflow: visible; background: #fff; color: #000; }
}

/* ===========================================================================
   TRẠNG THÁI CHĂM SÓC
   ---------------------------------------------------------------------------
   Cố tình KHÔNG dùng đỏ/vàng/xanh lá: ba màu đó nằm ngay cột điểm bên cạnh và
   đang nói về tình trạng của BÉ. Trạng thái chăm sóc nói về việc CỦA MÌNH, nên
   nó có ngôn ngữ riêng — chấm tròn theo thang trung tính → tím, và "đã chốt"
   được phân biệt bằng dấu tick chứ không phải bằng một màu thứ tư.
   =========================================================================== */

.crm-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 500;
    color: var(--text-dim);
    white-space: nowrap;
}
.crm-tag .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-faint); flex-shrink: 0;
}
.crm-tag[data-tt="chua_goi"]       { color: var(--text); font-weight: 600; }
.crm-tag[data-tt="chua_goi"] .dot  { background: transparent; border: 1.5px solid var(--accent-hi); }
.crm-tag[data-tt="da_goi"] .dot    { background: var(--accent-dim); }
.crm-tag[data-tt="hen_lai"]        { color: var(--accent-hi); font-weight: 600; }
.crm-tag[data-tt="hen_lai"] .dot   { background: var(--accent); }
.crm-tag[data-tt="khong_nghe"]     { color: var(--text-faint); }
.crm-tag[data-tt="khong_nghe"] .dot{ background: var(--surface-3); }
.crm-tag[data-tt="da_chot"]        { color: var(--accent-hi); font-weight: 700; }
.crm-tag[data-tt="da_chot"] .dot   { background: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-bg); }
.crm-tag[data-tt="khong_quan_tam"] { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.crm-tag[data-tt="khong_quan_tam"] .dot { background: transparent; border: 1.5px solid var(--surface-3); }

.crm-select {
    padding: 6px 28px 6px 10px;
    font-size: 12.5px;
    background-color: var(--surface-2);
    border-color: var(--line);
    width: auto; min-width: 132px;
}

/* Hàng đợi trên trang Tổng quan */
.queue-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line-soft);
}
.queue-row:last-child { border-bottom: none; }
.queue-rank {
    width: 22px; flex-shrink: 0;
    font-size: 12px; font-weight: 700; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.queue-main { flex: 1; min-width: 0; }
.queue-name { font-weight: 600; font-size: 13.5px; }
.queue-meta { font-size: 12px; color: var(--text-faint); }

/* Thanh phân bổ */
.bar-row { margin-bottom: 11px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 13px; margin-bottom: 5px;
}
.bar-head .n { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bar-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.bar-fill.muted { background: var(--surface-3); border: 1px solid var(--line); }

@media (max-width: 768px) {
    #ovGrid { grid-template-columns: 1fr !important; }
    .queue-row { flex-wrap: wrap; }
}


/* ===========================================================================
   BỘ LỌC THU GỌN TRÊN ĐIỆN THOẠI
   ---------------------------------------------------------------------------
   Màn hình điện thoại mà bày hết 6 ô lọc thì cuộn hết một trang mới thấy
   người đầu tiên. Mặc định thu lại, ai cần mới mở.
   =========================================================================== */

.btn-filter-toggle { display: none; }

@media (max-width: 768px) {
    .btn-filter-toggle {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 11px 14px; margin-bottom: 12px;
        background: var(--surface-2); border: 1px solid var(--line);
        color: var(--text-dim); font-size: 13.5px;
    }
    .btn-filter-toggle .fa-chevron-down { transition: transform .2s; font-size: 11px; }
    .btn-filter-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
    .filter-area.is-collapsed { display: none; }
}

.date-field { display: flex; flex-direction: column; gap: 4px; }
.date-field > span { font-size: 11.5px; color: var(--text-faint); }


/* ===========================================================================
   THẺ DANH SÁCH CHĂM SÓC TRÊN ĐIỆN THOẠI
   ---------------------------------------------------------------------------
   Kiểu bảng-thành-thẻ chung cho ra 7 dòng "nhãn — giá trị" cho mỗi người,
   cuộn mãi không hết. Ở đây tên và số điện thoại tự nó đã rõ nghĩa rồi nên bỏ
   nhãn đi, và số điện thoại chiếm trọn chiều ngang cho dễ bấm gọi.
   =========================================================================== */

@media (max-width: 768px) {
    #tblAssessments td[data-label="Phụ huynh"],
    #tblAssessments td[data-label="Số điện thoại"] { display: block; text-align: left; }

    #tblAssessments td[data-label="Phụ huynh"]::before,
    #tblAssessments td[data-label="Số điện thoại"]::before,
    #tblAssessments td[data-label="Điểm"]::before,
    #tblAssessments td[data-label="Hình dáng 5 lĩnh vực"]::before { content: none; }

    #tblAssessments td[data-label="Phụ huynh"] { padding-bottom: 2px; border-bottom: none; }
    #tblAssessments td[data-label="Phụ huynh"] b { font-size: 15.5px; }

    #tblAssessments td[data-label="Số điện thoại"] { padding-top: 2px; border-bottom: none; }
    #tblAssessments td[data-label="Số điện thoại"] .lead-phone {
        display: block; width: 100%;
        padding: 9px 12px;
        background: var(--accent-bg);
        border: 1px solid var(--accent-dim);
        border-radius: var(--radius-sm);
        color: var(--accent-hi);
        text-align: center; font-size: 16px;
    }

    /* Glyph và điểm đứng chung một hàng */
    #tblAssessments td[data-label="Hình dáng 5 lĩnh vực"] {
        border-bottom: none; padding-bottom: 4px;
        justify-content: flex-start; gap: 10px;
    }
    #tblAssessments td[data-label="Điểm"] { padding-top: 4px; justify-content: flex-start; }

    #tblAssessments td[data-label="Thao tác"] { justify-content: flex-end; }
    #tblAssessments .crm-select { width: 100%; min-width: 0; padding: 9px 30px 9px 12px; font-size: 14px; }
}

/* ===========================================================================
   PHỄU KHÁCH HÀNG
   ---------------------------------------------------------------------------
   Bốn bước là CÙNG một đại lượng (số người) teo dần qua từng chặng, không phải
   bốn hạng mục khác nhau — nên tất cả dùng chung một màu, phân biệt bằng độ dài
   thanh và nhãn ghi thẳng. Dùng bốn màu khác nhau là nói sai ý nghĩa dữ liệu.
   (Đã chạy script kiểm màu: hai sắc tím của bảng màu cách nhau ΔE 7,7 — quá gần
   để làm hai hạng mục riêng, càng khẳng định phải một màu.)

   Thanh vẽ theo % so với TỔNG lượt truy cập, không co giãn theo bước trước.
   Nhìn thì bước 2 chỉ còn một vệt mỏng — nhưng đó là sự thật cần thấy.
   =========================================================================== */

.funnel { padding: 4px 0; }

.funnel-step { padding: 2px 0; }

.funnel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; margin-bottom: 7px;
}
.funnel-label { font-size: 14px; font-weight: 600; }
.funnel-label .hint { font-weight: 400; color: var(--text-faint); font-size: 12.5px; }

.funnel-nums { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.funnel-num {
    font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.funnel-pct {
    font-size: 13px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    min-width: 58px; text-align: right;
}

.funnel-track {
    height: 10px;
    background: var(--surface-3);
    border-radius: 5px;
    overflow: hidden;
}
.funnel-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 5px;
    min-width: 4px;            /* bước nhỏ quá vẫn phải nhìn thấy */
    transition: width .35s ease;
}

/* Khoảng rơi giữa hai bước — chỗ mất người, cũng là chỗ đáng nhìn nhất */
.funnel-drop {
    display: flex; align-items: center; gap: 10px;
    margin: 9px 0 9px 2px; padding-left: 14px;
    border-left: 2px solid var(--line);
    font-size: 12.5px; color: var(--text-faint);
    min-height: 26px;
}
.funnel-drop b { color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-drop.nang { border-left-color: var(--accent-dim); }
.funnel-drop.nang b { color: var(--accent-hi); }

.funnel-note {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px; color: var(--text-faint);
}

@media (max-width: 768px) {
    .funnel-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; }
    .funnel-nums { width: 100%; justify-content: space-between; }
    .funnel-pct { text-align: left; }
    #tkPeriods .btn-test { margin-left: 0 !important; }
}

/* ===========================================================================
   DANH MỤC KHÓA HỌC
   ---------------------------------------------------------------------------
   14 gói = 2 nhóm tuổi x 7 kỹ năng. Trạng thái "Đang bán" để TRUNG TÍNH vì đó
   là trạng thái bình thường — tô màu cả 12 thẻ đang ổn thì mắt không biết nhìn
   đâu. Chỉ gói thiếu video hoặc chưa đặt giá mới được tô, để nhìn phát thấy ngay.
   Mỗi thẻ đều có chữ ghi rõ tình trạng, không bắt ai đoán theo màu.
   =========================================================================== */

.ed-group { margin-bottom: 28px; }
.ed-group:last-child { margin-bottom: 0; }

.ed-group-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}
.ed-group-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.ed-group-meta { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.ed-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 12px;
}

.ed-card {
    display: flex; flex-direction: column; gap: 9px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    text-align: left;
    font-family: inherit; font-weight: 400;
    color: var(--text);
    cursor: pointer;
}
.ed-card:hover { border-color: var(--accent-dim); background: var(--surface-2); }

.ed-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-card-top > i { font-size: 16px; color: var(--text-faint); }
.ed-card:hover .ed-card-top > i { color: var(--accent-hi); }

.ed-card-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }

.ed-card-stats {
    display: flex; gap: 14px;
    font-size: 12.5px; color: var(--text-faint);
}
.ed-card-stats b { color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; }

.ed-card-price {
    margin-top: auto; padding-top: 9px;
    border-top: 1px solid var(--line-soft);
    font-size: 13.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ed-chip {
    padding: 2px 8px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
/* Bình thường thì im lặng */
.ed-chip.du     { background: var(--surface-3); color: var(--text-faint); }
/* Có vấn đề thì lên tiếng */
.ed-chip.thieu  { background: var(--watch-bg); color: var(--watch); }
.ed-chip.trong  { background: var(--risk-bg);  color: var(--risk);  }

.ed-card.thieu { border-color: rgba(224,163,62,0.3); }
.ed-card.trong { border-style: dashed; border-color: rgba(226,87,76,0.35); }
.ed-card.trong .ed-card-price { color: var(--text-faint); }

/* Thanh điều hướng trong trình soạn thảo */
.ed-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.ed-crumb {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; color: var(--text-dim);
}
.ed-crumb i { font-size: 9px; color: var(--text-faint); }
.ed-crumb b { color: var(--text); font-weight: 600; }

@media (max-width: 768px) {
    .ed-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .ed-card { padding: 13px; }
}

/* ===========================================================================
   CHẾ ĐỘ SÁNG
   ---------------------------------------------------------------------------
   Không phải lật ngược bảng màu tối — từng giá trị được chọn lại rồi kiểm trên
   đúng nền trắng.

   Màu điểm số phải tách làm hai bộ, vì trên nền sáng có một mâu thuẫn không
   tránh được: vàng đủ tối để đọc rõ chữ thì lại gần như trùng với đỏ
   (ΔE 2,6 — nhìn bằng mắt thường còn khó phân biệt); vàng đủ sáng để tách khỏi
   đỏ thì tương phản chữ chỉ còn 2,48:1, đọc không nổi.
     --good / --watch / --risk        : màu VẼ (thanh glyph) — tách xa nhau
     --good-tx / --watch-tx / --risk-tx : màu CHỮ (số điểm)  — đủ tương phản
   Cả hai bộ đều đã qua validate_palette.js.
   =========================================================================== */

:root[data-theme="light"] {
    --ink:        #f4f4f7;
    --surface:    #ffffff;
    --surface-2:  #f2f2f6;
    --surface-3:  #e6e6ec;
    --line:       #d7d7e0;
    --line-soft:  #ebebf1;

    --text:       #1b1c24;
    --text-dim:   #585a69;
    --text-faint: #86889a;

    --accent:     #5b4bd6;
    --accent-hi:  #473bb8;
    --accent-dim: #bdb6ef;
    --accent-bg:  rgba(91, 75, 214, 0.09);

    /* màu vẽ — ΔE 16,8 (mù màu đỏ-lục) · 27,0 (mắt thường) */
    --good:       #157a52;
    --watch:      #e09500;
    --risk:       #a82a1f;
    /* màu chữ — tương phản đều ≥ 3:1 trên nền trắng */
    --good-tx:    #11633f;
    --watch-tx:   #7d5300;
    --risk-tx:    #96221a;

    --good-bg:    rgba(21, 122, 82, 0.11);
    --watch-bg:   rgba(224, 149, 0, 0.14);
    --risk-bg:    rgba(168, 42, 31, 0.10);
}

/* Nền sáng: viền mảnh quanh thanh glyph để cột vàng không bị chìm vào nền trắng */
:root[data-theme="light"] .score-glyph .bar {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

:root[data-theme="light"] body { background: var(--ink); }

:root[data-theme="light"] .login-overlay {
    background: radial-gradient(900px 500px at 50% -10%, rgba(91,75,214,.10), transparent 70%), var(--ink);
}

/* Phải dùng background-color chứ không phải background rút gọn:
   dạng rút gọn xoá luôn background-repeat và background-position, làm mũi tên
   trong ô chọn bị lặp kín thành hoa văn. */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background-color: var(--surface); }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus { background-color: #fbfbfd; }
:root[data-theme="light"] input[type="date"] { color-scheme: light; }
:root[data-theme="light"] input[readonly] { background-color: var(--surface-2); }

:root[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23585a69' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .sidebar { background: var(--surface); }
:root[data-theme="light"] .modal-overlay { background: rgba(27, 28, 36, .34); }
:root[data-theme="light"] .btn-menu.active { background: var(--accent-bg); color: var(--accent-hi); }
:root[data-theme="light"] .nav-badge { background: var(--risk); }
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .ed-card { box-shadow: 0 1px 2px rgba(27,28,36,.05); }

:root[data-theme="light"] .ql-editor { color: var(--text); }
:root[data-theme="light"] .ql-snow .ql-stroke { stroke: var(--text-dim) !important; }
:root[data-theme="light"] .ql-snow .ql-fill   { fill: var(--text-dim) !important; }

@media (max-width: 768px) {
    :root[data-theme="light"] .btn-menu { background: var(--surface-2); }
    :root[data-theme="light"] .btn-menu.active { background: var(--accent); color: #fff; }
}

/* Nút đổi chế độ */
.btn-theme {
    margin-top: 10px; padding: 9px 10px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 9px;
    width: 100%;
}
.btn-theme:hover { border-color: var(--accent-dim); color: var(--text); }
.btn-theme i { width: 16px; text-align: center; }

@media (max-width: 768px) {
    .btn-theme {
        position: absolute; top: 12px; right: 12px;
        width: auto; margin: 0; padding: 7px 11px;
        background: var(--surface-2);
    }
    .btn-theme .nhan { display: none; }
}

/* ===========================================================================
   CATALOG VIDEO TRONG MỘT KỸ NĂNG
   ---------------------------------------------------------------------------
   Trước đây mỗi video là một khối form dài, 10 video là cuộn mỏi tay mới hết.
   Giờ mỗi video một thẻ nhỏ, nhìn phát thấy cả khoá có gì, thiếu gì, thứ tự ra sao.
   =========================================================================== */

.vid-actions { display: flex; gap: 8px; flex-wrap: wrap; }

#videosContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.vid-card {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.vid-card.thieu { border-color: rgba(224,163,62,0.35); }

.vid-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.vid-stt {
    width: 24px; height: 24px; flex-shrink: 0;
    background: var(--accent-bg); color: var(--accent-hi);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vid-move { display: flex; gap: 3px; }
.vid-move button {
    width: 24px; height: 24px;
    background: transparent; border: 1px solid var(--line);
    color: var(--text-faint); font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.vid-move button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

.vid-ten {
    font-size: 13.5px; font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.8em;
}
.vid-ten.trong { color: var(--text-faint); font-weight: 400; font-style: italic; }

.vid-meta {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; color: var(--text-faint);
}
.vid-nguon {
    padding: 1px 7px; border-radius: 20px;
    background: var(--surface-3); color: var(--text-dim);
    font-weight: 600;
}
.vid-nguon.thieu { background: var(--watch-bg); color: var(--watch-tx, var(--watch)); }

.vid-btns {
    display: flex; gap: 5px; margin-top: auto; padding-top: 9px;
    border-top: 1px solid var(--line-soft);
}
.vid-btns button {
    flex: 1;
    padding: 6px 4px;
    background: transparent; border: 1px solid var(--line);
    color: var(--text-dim); font-size: 12px;
}
.vid-btns button:hover { background: var(--surface-3); color: var(--text); }
.vid-btns button.xoa:hover { background: var(--risk-bg); color: var(--risk-tx, var(--risk)); border-color: var(--risk); }

/* Thanh tiến trình tải lên */
.up-progress {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 13px 15px;
    margin-bottom: 12px;
}
.up-head {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; margin-bottom: 8px;
}
.up-head span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-head span:last-child { color: var(--accent-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.up-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.up-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s; }

#vmPreview iframe { display: block; border: 0; width: 100%; height: 220px; }

@media (max-width: 768px) {
    #videosContainer { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .vid-card { padding: 11px; }
    .vid-actions { width: 100%; }
    .vid-actions button { flex: 1; justify-content: center; }
}


/* Hai ô chọn độ tuổi / kỹ năng vẫn phải nằm trong DOM vì loadData và
   saveCurriculum đọc giá trị từ đó, nhưng không cần hiện ra nữa: người dùng
   vào đây bằng cách bấm thẻ ở danh mục, và breadcrumb phía trên đã nói rõ
   đang sửa gói nào. Để lộ ra chỉ tổ lệch với breadcrumb. */
#edEditor .ed-chon-an { display: none; }

/* Ô mã video trong cửa sổ sửa — chỉ để đọc và chép, không sửa */
.ma-video {
    display: flex; align-items: center; gap: 8px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 8px 8px 12px;
}
.ma-video code {
    flex: 1; min-width: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px; color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-video button { flex-shrink: 0; padding: 6px 10px; }

/* ===========================================================================
   ẢNH ĐẠI DIỆN VIDEO
   ---------------------------------------------------------------------------
   Khung cố định 16:9 để lưới không nhảy lúc ảnh đang tải. Ảnh hỏng thì thẻ img
   tự gỡ mình và khung chuyển sang dạng giữ chỗ — không để lại ô vỡ.
   =========================================================================== */

.vid-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: -14px -14px 2px;          /* tràn ra sát mép thẻ */
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    background: var(--surface-3);
}
.vid-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Nút play nổi trên ảnh */
.vid-thumb-play {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(21, 22, 28, 0.62);
    color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.vid-thumb-play i { margin-left: 2px; }   /* tam giác play lệch phải cho cân */

/* Không có ảnh: dải kẻ chéo mờ cho biết đây là chỗ giữ, không phải ảnh lỗi */
.vid-thumb.khong-anh {
    background-image: repeating-linear-gradient(
        45deg,
        var(--surface-3) 0 10px,
        var(--surface-2) 10px 20px
    );
}
.vid-thumb.khong-anh .vid-thumb-play {
    background: var(--surface-2);
    color: var(--text-faint);
    border: 1px solid var(--line);
    backdrop-filter: none;
}

.vid-card { padding-top: 14px; overflow: hidden; }

@media (max-width: 768px) {
    .vid-thumb { margin: -11px -11px 2px; }
}

/* ====================================================================
   FORM TẠO ĐƠN HÀNG TRONG TRANG ADMIN
   Hộp thoại của trang admin dùng NỀN SÁNG, nên khối này cũng phải sáng.
   (Bản đầu mình viết theo tông tối của khung ngoài, chữ tiêu đề gần như
   mất hẳn trên nền trắng.)
   ==================================================================== */

.td-buoc { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #e2e8f0; }
.td-so {
    flex: 0 0 28px; height: 28px; border-radius: 50%;
    background: #2563eb; color: #fff; font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.td-noi { flex: 1; min-width: 0; }
.td-nhan { display: block; color: #0f172a; font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.td-phu { display: block; color: #475569; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.td-goi-y { color: #64748b; font-size: 12px; margin: 6px 0 0; line-height: 1.6; }

.td-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 620px) { .td-luoi { grid-template-columns: 1fr; } }

/* --- kết quả tra số điện thoại --- */
.td-the {
    border-radius: 10px; padding: 11px 13px; margin-top: 10px;
    font-size: 13px; line-height: 1.65; border: 1px solid;
}
.td-the-moi   { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.td-the-cu    { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.td-the-dg    { background: #f0fdfa; border-color: #99f6e4; color: #115e59; }
.td-the-trong { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.td-canh-bao  { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 13px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.td-dang-tai  { color: #64748b; font-size: 13px; padding: 10px 0; }

.td-dong-nho { margin-top: 5px; font-size: 12px; }
.td-chip {
    display: inline-block; background: rgba(15, 23, 42, .07); border-radius: 6px;
    padding: 1px 7px; margin: 2px 4px 2px 0; font-size: 11px; font-weight: 700;
}
.td-hang-diem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.td-diem {
    background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 9px;
    display: flex; flex-direction: column; line-height: 1.3; min-width: 78px;
}
.td-diem i { font-style: normal; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.td-diem b { font-size: 16px; }

/* --- danh sách gói --- */
.td-ds-goi { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 620px) { .td-ds-goi { grid-template-columns: 1fr; } }

.td-goi {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
    padding: 11px 13px; cursor: pointer; transition: .15s; color: #0f172a;
}
.td-goi:hover { border-color: #2563eb; background: #f8fbff; }
.td-goi input { width: auto; margin: 0; flex: 0 0 auto; accent-color: #2563eb; }
.td-goi > i { color: #2563eb; width: 18px; text-align: center; flex: 0 0 auto; }
.td-goi-ten { flex: 1; font-size: 13px; font-weight: 700; min-width: 0; }
.td-goi-gia { font-size: 13px; font-weight: 800; color: #b45309; white-space: nowrap; }
.td-goi-gia.td-mo { color: #94a3b8; font-weight: 600; font-size: 12px; }
.td-goi-chon { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb inset; }
.td-goi-tat { opacity: .55; cursor: not-allowed; background: #f8fafc; }
.td-goi-tat:hover { border-color: #cbd5e1; background: #f8fafc; }

/* --- khối tiền --- */
.td-tien { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.td-tien-dong { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #475569; padding: 4px 0; }
.td-tien-dong b { color: #0f172a; font-weight: 700; }
.td-tien-tong { border-top: 1px dashed #cbd5e1; margin-top: 8px; padding-top: 10px; font-size: 14px; color: #0f172a; font-weight: 800; }
.td-tien-tong b { font-size: 21px; color: #2563eb; font-weight: 900; }

.td-bang-gia { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.td-bang-o { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 620px) { .td-bang-o { grid-template-columns: 1fr 1fr; } }
.td-bang-o label { display: block; font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 3px; }
.td-bang-o input { width: 100%; }

/* --- hoc cu kem theo don --- */
.td-mon-dau { display:flex; align-items:center; gap:10px; margin:18px 0 8px; flex-wrap:wrap; }
.td-mon-dau > span { font-size:13px; font-weight:800; color:#0f172a; }
.td-mon-dau > span i { color:#2563eb; margin-right:5px; }
.td-mon-dau input { flex:1; min-width:150px; max-width:260px; padding:7px 11px; font-size:12px; }

.td-ds-hoccu { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:320px; overflow-y:auto; padding-right:4px; }
@media (max-width:620px){ .td-ds-hoccu{ grid-template-columns:1fr; } }

.td-hc { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #cbd5e1; border-radius:10px; padding:8px 10px; }
.td-hc-chon { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 1px #2563eb inset; }
.td-hc-het { opacity:.55; background:#f8fafc; }
.td-hc-anh { width:40px; height:40px; border-radius:8px; background:#f1f5f9; overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#94a3b8; }
.td-hc-anh img { width:100%; height:100%; object-fit:cover; }
.td-hc-giua { flex:1; min-width:0; }
.td-hc-ten { font-size:12.5px; font-weight:700; color:#0f172a; line-height:1.35; }
.td-hc-gia { font-size:11.5px; color:#b45309; font-weight:700; margin-top:2px; }
.td-hc-het-nhan { font-size:11px; font-weight:700; color:#94a3b8; white-space:nowrap; }
.td-hc-dem { display:flex; align-items:center; gap:2px; background:#f1f5f9; border-radius:8px; padding:2px; flex:0 0 auto; }
.td-hc-dem button { width:24px; height:24px; border:1px solid #e2e8f0; background:#fff; color:#475569; border-radius:6px; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; padding:0; }
.td-hc-dem button:hover:not(:disabled) { background:#2563eb; color:#fff; border-color:#2563eb; }
.td-hc-dem button:disabled { opacity:.35; cursor:not-allowed; }
.td-hc-dem span { min-width:20px; text-align:center; font-weight:800; font-size:12.5px; color:#0f172a; }

.td-ship { background:#fffbeb; border:1px solid #fcd34d; border-radius:10px; padding:12px 14px; margin-top:12px; }
.td-ship .td-phu { color:#92400e; }