/**
 * FE V2 — Design system frontend (docs/FE-REDESIGN.md §3-§4).
 *
 * ĐỘC LẬP HOÀN TOÀN với admin: token tự chứa, scope .cmsf (KHÔNG :root),
 * không import/tham chiếu cms-tokens.css hay cms-admin-v2.css. Giá trị
 * thương hiệu là COPY có chủ ý — đổi admin không lan FE và ngược lại.
 *
 * Quy tắc: prefix cmsf- · không !important · không hex ngoài token trong
 * component · font kế thừa theme (không ép) · breakpoint duy nhất 768/1024
 * · nhịp 4px · trạng thái chỉ tô màu qua tone (ok/warn/danger/info/muted).
 */

/* ============================== 1. TOKEN ============================== */
.cmsf {
    /* Màu thương hiệu (copy, không var chéo file) */
    --fe-primary: #1245a6;
    --fe-primary-dark: #0d3378;
    --fe-primary-soft: #e8eef7;

    /* Chữ / đường kẻ / nền */
    --fe-ink: #1f2937;
    --fe-ink-soft: #6b7280;
    --fe-line: #e5e7eb;
    --fe-bg: #ffffff;
    --fe-bg-soft: #f8f7f4;

    /* Ngữ nghĩa */
    --fe-ok: #15803d;      --fe-ok-soft: #e9f6ee;
    --fe-warn: #b45309;    --fe-warn-soft: #fdf3e3;
    --fe-danger: #b91c1c;  --fe-danger-soft: #fdeaea;
    --fe-info: #1245a6;    --fe-info-soft: #e8eef7;

    /* Typography — trang đọc, nền ≥ 16px, font của theme */
    --fe-fs-sm: .875rem;
    --fe-fs-base: 1rem;
    --fe-fs-md: 1.125rem;
    --fe-fs-lg: 1.375rem;
    --fe-fs-xl: 1.75rem;
    --fe-fs-hero: 2.25rem;
    --fe-lh-text: 1.65;
    --fe-lh-tight: 1.25;

    /* Nhịp 4px */
    --fe-sp-1: 4px;  --fe-sp-2: 8px;  --fe-sp-3: 12px; --fe-sp-4: 16px;
    --fe-sp-5: 24px; --fe-sp-6: 32px; --fe-sp-7: 40px; --fe-sp-8: 48px;

    --fe-radius: 10px;
    --fe-radius-sm: 6px;
    --fe-shadow: 0 1px 3px rgba(15, 23, 42, .08);

    --fe-z-sticky: 40;
    --fe-z-modal: 1000;
    --fe-z-toast: 1100;

    color: var(--fe-ink);
    font-size: var(--fe-fs-base);
    line-height: var(--fe-lh-text);

    /* Thoát container của theme (Astra bó nội dung trong .ast-container hẹp
       và lệch theo layout sidebar) — full-bleed rồi tự căn giữa bằng shell.
       Đây là NƠI DUY NHẤT xử lý breakout (FE-REDESIGN §3). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--fe-bg-soft);
}

/* Trang V2: chặn tràn ngang do kỹ thuật full-bleed 100vw (tính cả thanh cuộn) */
body.cmsf-v2 { overflow-x: hidden; }

/* GUARD: [hidden] phải thắng mọi display của component (bug học phí lộ vì
   .cmsf-status-line{display:flex} đè UA-style [hidden]{display:none}) */
.cmsf [hidden] { display: none; }

/* GUARD: Astra đặt h1..h6{clear:both} — trong vùng plugin, heading đứng sau
   ảnh float (giảng viên) bị đẩy tuột xuống dưới ảnh → chữ không bao quanh.
   Hoàn nguyên trong .cmsf; chỗ nào cần clear thì tự khai. */
.cmsf h1, .cmsf h2, .cmsf h3, .cmsf h4, .cmsf h5, .cmsf h6 { clear: none; }

/* ============================== 2. SHELL ============================== */
/* Vùng nội dung của plugin trong khung theme. Mọi "thoát container Astra"
   xử lý DUY NHẤT tại đây — cấm hack rải trong view. */
.cmsf-shell {
    /* Khớp đúng container của Astra để căn lề với header/footer:
       .ast-container = var(--ast-container-width, 1200px) + 20px padding mỗi bên */
    max-width: calc(var(--ast-container-width, 1200px) + 40px);
    margin: 0 auto;
    padding: var(--fe-sp-5) 20px var(--fe-sp-8);
}
.cmsf-shell--narrow { max-width: 520px; }   /* auth, form đơn */
.cmsf-shell--reading { max-width: 860px; }  /* trang nhiều chữ */

/* Page head */
.cmsf-page-head { margin-bottom: var(--fe-sp-5); }
.cmsf-page-head h1 {
    font-size: var(--fe-fs-xl);
    line-height: var(--fe-lh-tight);
    margin: 0 0 var(--fe-sp-2);
    color: var(--fe-ink);
}
.cmsf-page-head .cmsf-page-sub {
    color: var(--fe-ink-soft);
    font-size: var(--fe-fs-base);
    margin: 0;
}
.cmsf-page-chips { display: flex; gap: var(--fe-sp-2); flex-wrap: wrap; margin-top: var(--fe-sp-2); }

/* Breadcrumb */
.cmsf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fe-sp-2);
    font-size: var(--fe-fs-sm);
    color: var(--fe-ink-soft);
    margin-bottom: var(--fe-sp-4);
}
.cmsf-breadcrumb a { color: var(--fe-ink-soft); text-decoration: none; }
.cmsf-breadcrumb a:hover { color: var(--fe-primary); text-decoration: underline; }
.cmsf-breadcrumb .cmsf-sep { opacity: .5; }
.cmsf-breadcrumb .cmsf-current { color: var(--fe-ink); }

/* ============================== 3. NÚT ============================== */
.cmsf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fe-sp-2);
    white-space: nowrap; /* đợt 99: chữ trên nút không được gãy dòng */
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: var(--fe-radius-sm);
    border: 1px solid transparent;
    font-size: var(--fe-fs-base);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.cmsf-btn:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 2px; }
.cmsf-btn[disabled], .cmsf-btn--disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.cmsf-btn--primary { background: var(--fe-primary); color: #fff; }
.cmsf-btn--primary:hover { background: var(--fe-primary-dark); color: #fff; }
.cmsf-btn--outline { background: var(--fe-bg); color: var(--fe-primary); border-color: var(--fe-primary); }
.cmsf-btn--outline:hover { background: var(--fe-primary-soft); }
.cmsf-btn--ghost { background: transparent; color: var(--fe-ink-soft); }
.cmsf-btn--ghost:hover { color: var(--fe-ink); background: var(--fe-bg-soft); }
.cmsf-btn--danger { background: var(--fe-danger); color: #fff; }
.cmsf-btn--danger:hover { background: #991b1b; color: #fff; }
.cmsf-btn--block { width: 100%; }
.cmsf-btn--sm { padding: 6px 12px; font-size: var(--fe-fs-sm); }

/* ============================== 4. CHIP / TRẠNG THÁI ============================== */
.cmsf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--fe-fs-sm);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: normal;      /* title chương trình dài phải xuống dòng, không tràn ẩn */
    text-align: left;
}
.cmsf-chip--ok     { background: var(--fe-ok-soft);     color: var(--fe-ok);     border-color: rgba(21,128,61,.25); }
.cmsf-chip--warn   { background: var(--fe-warn-soft);   color: var(--fe-warn);   border-color: rgba(180,83,9,.25); }
.cmsf-chip--danger { background: var(--fe-danger-soft); color: var(--fe-danger); border-color: rgba(185,28,28,.25); }
.cmsf-chip--info   { background: var(--fe-info-soft);   color: var(--fe-info);   border-color: rgba(18,69,166,.25); }
.cmsf-chip--muted  { background: var(--fe-bg-soft);     color: var(--fe-ink-soft); border-color: var(--fe-line); }

/* Dòng trạng thái cửa đăng ký (card + panel) */
.cmsf-status-line {
    display: flex;
    align-items: baseline;
    gap: var(--fe-sp-2);
    font-size: var(--fe-fs-sm);
    color: var(--fe-ink-soft);
}
.cmsf-status-line strong { color: var(--fe-ink); }

/* ============================== 5. CARD ============================== */
.cmsf-card {
    background: var(--fe-bg);
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius);
    box-shadow: var(--fe-shadow);
    padding: var(--fe-sp-5);
}
.cmsf-card + .cmsf-card { margin-top: var(--fe-sp-4); }
.cmsf-grid > .cmsf-card { margin-top: 0; } /* grid tự lo gap — margin làm lệch hàng */
.cmsf-card h2 {
    font-size: var(--fe-fs-lg);
    line-height: var(--fe-lh-tight);
    margin: 0 0 var(--fe-sp-4);
    color: var(--fe-ink);
}
.cmsf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fe-sp-4);
}
@media (min-width: 768px)  { .cmsf-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cmsf-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cmsf-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* đợt 160: cựu học viên 4 người/hàng */

/* Layout 2 cột: sidebar thông tin (trái) + nội dung chính (phải) */
.cmsf-layout-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fe-sp-5);
    align-items: start;
}
@media (min-width: 1024px) {
    .cmsf-layout-side { grid-template-columns: 340px minmax(0, 1fr); }
    .cmsf-layout-side > .cmsf-sidebar { position: sticky; top: var(--fe-sp-5); }
}
@media (min-width: 1024px) {
    .cmsf-layout-side--right { grid-template-columns: minmax(0, 1fr) 380px; }
    .cmsf-layout-side--right > .cmsf-sidebar { order: 2; }
}

/* Hàng tiêu đề + hành động nổi bật bên phải */
.cmsf-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fe-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--fe-sp-4);
}
.cmsf-content-head h2 { margin: 0; font-size: var(--fe-fs-lg); }

/* ============================== 5b. COURSE CARD ============================== */
.cmsf-course-card {
    display: flex; flex-direction: column; gap: var(--fe-sp-2);
    position: relative; /* neo stretched-link */
    height: 100%;       /* đều chiều cao trong grid */
    padding: 0; overflow: hidden;
}
.cmsf-course-card > :not(.cmsf-course-card-img) { margin-left: var(--fe-sp-4); margin-right: var(--fe-sp-4); }
.cmsf-course-card > .cmsf-page-chips { margin-top: var(--fe-sp-4); }
.cmsf-course-card > .cmsf-course-card-cta { margin-bottom: var(--fe-sp-4); }
.cmsf-course-card-img {
    aspect-ratio: 16 / 9; width: 100%; /* đợt 98: 3:2 → 16:9, card thấp hơn */
    background: var(--fe-primary-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--fe-primary); font-size: var(--fe-fs-xl);
}
.cmsf-course-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmsf-course-card-img { position: relative; }
.cmsf-course-card-img .cmsf-chip {
    position: absolute; top: var(--fe-sp-2); left: var(--fe-sp-2);
    background: rgba(255,255,255,.94); box-shadow: var(--fe-shadow);
}
/* Cả card click được: link tiêu đề phủ toàn card; nút/link khác nổi lên trên */
.cmsf-course-card .cmsf-course-card-title a::after { content: ""; position: absolute; inset: 0; }
.cmsf-course-card .cmsf-btn, .cmsf-course-card .cmsf-page-chips a { position: relative; z-index: 1; }
.cmsf-course-card-title { margin: 0; font-size: var(--fe-fs-md); line-height: var(--fe-lh-tight); }
.cmsf-course-card-title a { color: var(--fe-ink); text-decoration: none; }
.cmsf-course-card-title a:hover { color: var(--fe-primary); }
.cmsf-course-card-status { margin-top: var(--fe-sp-1); }
.cmsf-course-card-meta {
    list-style: none; margin: 0; padding: 0;
    font-size: var(--fe-fs-sm); color: var(--fe-ink-soft);
    display: grid; grid-template-columns: 1fr 1fr; /* đợt 98: 2 cột, 5 hàng → 3 */
    gap: 2px var(--fe-sp-4);
}
.cmsf-course-card-meta li { min-width: 0; }
/* mục dài (khoảng ngày) chiếm cả hàng cho khỏi gãy chữ */
.cmsf-course-card-meta li.cmsf-meta-wide { grid-column: 1 / -1; }
.cmsf-course-card-cta {
    margin-top: auto; padding-top: var(--fe-sp-3);
    display: flex; align-items: center; gap: var(--fe-sp-3);
    justify-content: space-between; /* đợt 98: trạng thái trái, nút phải — gộp 2 hàng */
    flex-wrap: nowrap;
}
.cmsf-course-card-cta .cmsf-status-line {
    flex: 1 1 auto; min-width: 0;
    display: block; /* chữ trạng thái dài tự xuống dòng bên trong, không đẩy nút */
}
.cmsf-course-card-cta .cmsf-status-line strong { margin-right: 4px; }
a.cmsf-chip { text-decoration: none; }
a.cmsf-chip:hover { border-color: var(--fe-primary); color: var(--fe-primary); }

/* Hero chi tiết (chương trình): ảnh trái + định danh phải, gọn */
.cmsf-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fe-sp-5);
    align-items: start;
    margin-bottom: var(--fe-sp-5);
}
@media (min-width: 768px) { .cmsf-hero--with-img { grid-template-columns: 300px minmax(0, 1fr); } }
.cmsf-hero-img img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: var(--fe-radius); border: 1px solid var(--fe-line);
}
.cmsf-hero h1 { font-size: var(--fe-fs-xl); line-height: var(--fe-lh-tight); margin: var(--fe-sp-2) 0; }

/* Dải chỉ số inline gọn (thay 3 card to): số đậm màu + nhãn mờ, ngăn chấm */
.cmsf-stat-line {
    display: flex; flex-wrap: wrap;
    gap: var(--fe-sp-2) var(--fe-sp-5);
    font-size: var(--fe-fs-sm); color: var(--fe-ink-soft);
    margin-top: var(--fe-sp-3);
}
.cmsf-stat-line b { font-size: var(--fe-fs-md); color: var(--fe-ink); margin-right: 4px; }

/* Thanh lọc: chip row + điều khiển */
.cmsf-filters { display: flex; flex-direction: column; gap: var(--fe-sp-3); margin-bottom: var(--fe-sp-5); }
.cmsf-chip-row { display: flex; gap: var(--fe-sp-2); flex-wrap: wrap; }
.cmsf-chip-row .cmsf-chip { cursor: pointer; }
.cmsf-chip--active { background: var(--fe-primary); color: #fff; border-color: var(--fe-primary); }
a.cmsf-chip--active:hover { color: #fff; border-color: var(--fe-primary); }
.cmsf-filter-controls { display: flex; gap: var(--fe-sp-2); flex-wrap: wrap; align-items: center; }
.cmsf-filter-controls .cmsf-select { width: auto; min-width: 140px; max-width: 260px; flex: 0 1 auto; }
.cmsf-filter-controls .cmsf-input { width: auto; min-width: 160px; }
.cmsf-filter-controls .cmsf-input[type="search"] { flex: 1 1 160px; min-width: 140px; }
.cmsf-filter-controls .cmsf-checkbox { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1024px) { .cmsf-filter-controls { flex-wrap: nowrap; } } /* đợt 100: 1 hàng */
/* Biến thể gọn: control thấp, chữ nhỏ — cho trang chi tiết */
.cmsf-filter-controls--compact .cmsf-input,
.cmsf-filter-controls--compact .cmsf-select { padding: 6px 10px; font-size: var(--fe-fs-sm); }
.cmsf-filter-controls--compact .cmsf-select { min-width: 140px; }
.cmsf-filter-controls--compact .cmsf-input[type="search"] { flex: 1 1 220px; }
.cmsf-filter-controls--compact .cmsf-btn { padding: 6px 14px; font-size: var(--fe-fs-sm); }

/* TÁCH LỚP THÔNG TIN (FE-REDESIGN §3): 4 lớp đọc —
   chip trạng thái (màu) → tiêu đề (to đậm) → cặp NHÃN-GIÁ TRỊ → phụ chú.
   .cmsf-props: hàng label trái mờ nhỏ / value phải đậm. */
.cmsf-props { display: flex; flex-direction: column; }
.cmsf-props > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--fe-sp-3);
    padding: var(--fe-sp-2) 0;
    border-bottom: 1px solid var(--fe-line);
    align-items: baseline;
}
.cmsf-props > div:last-child { border-bottom: none; }
.cmsf-props dt, .cmsf-props .cmsf-prop-label {
    font-size: var(--fe-fs-sm);
    color: var(--fe-ink-soft);
    margin: 0;
}
.cmsf-props dd, .cmsf-props .cmsf-prop-value {
    font-weight: 600;
    color: var(--fe-ink);
    margin: 0;
    font-size: var(--fe-fs-base);
}
/* Bản gọn cho card: nhãn mờ nhỏ trên, giá trị đậm dưới cùng dòng */
.cmsf-course-card-meta li { display: flex; gap: var(--fe-sp-2); align-items: baseline; }
.cmsf-course-card-meta .cmsf-meta-label {
    flex: 0 0 auto;
    color: var(--fe-ink-soft);
    font-size: var(--fe-fs-sm);
}
.cmsf-course-card-meta .cmsf-meta-value { color: var(--fe-ink); font-weight: 600; font-size: var(--fe-fs-sm); }

/* Bảng dữ liệu (môn học, danh sách) */
.cmsf-table { width: 100%; border-collapse: collapse; font-size: var(--fe-fs-base); }
.cmsf-table th {
    text-align: left; font-size: var(--fe-fs-sm); color: var(--fe-ink-soft);
    font-weight: 600; padding: var(--fe-sp-2) var(--fe-sp-3);
    border-bottom: 2px solid var(--fe-line); white-space: nowrap;
}
.cmsf-table td { padding: var(--fe-sp-3); border-bottom: 1px solid var(--fe-line); vertical-align: top; }
.cmsf-table tr:last-child td { border-bottom: none; }

/* Nội dung soạn thảo (wp_editor) — kế thừa typography theme, chỉ nắn nhịp */
.cmsf-rich { line-height: var(--fe-lh-text); }
.cmsf-rich > :first-child { margin-top: 0; }
.cmsf-rich > :last-child { margin-bottom: 0; }
.cmsf-rich img, .cmsf-rich iframe { max-width: 100%; height: auto; border-radius: var(--fe-radius-sm); }
.cmsf-rich iframe[src*="youtube"], .cmsf-rich iframe[src*="vimeo"] { aspect-ratio: 16 / 9; width: 100%; }
.cmsf-rich ul, .cmsf-rich ol { padding-left: 1.4em; }

/* Giảng viên (đợt 89): ảnh float trái, TOÀN BỘ chữ (tên + nội dung) bao quanh;
   ảnh vừa phải để chữ luôn phủ kín bên phải, hết khoảng trống kỳ */
.cmsf-teacher::after { content: ""; display: block; clear: both; }
.cmsf-teacher img {
    float: left;
    width: 180px; height: 180px; max-width: 38%;
    border-radius: var(--fe-radius);
    object-fit: cover; border: 1px solid var(--fe-line);
    margin: 0 var(--fe-sp-4) var(--fe-sp-2) 0;
}
.cmsf-teacher h3 { margin: 0 0 var(--fe-sp-2); font-size: var(--fe-fs-md); }
.cmsf-teacher .cmsf-rich { margin-bottom: var(--fe-sp-3); }
.cmsf-teacher .cmsf-rich:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
    .cmsf-teacher img { float: none; max-width: 100%; width: 100%; height: auto; margin-right: 0; margin-bottom: var(--fe-sp-3); }
}

/* Danh sách môn học gọn (chỉ tên môn) */
.cmsf-subject-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--fe-sp-6); counter-reset: cmsf-subj; }
.cmsf-subject-list li {
    padding: var(--fe-sp-2) 0; border-bottom: 1px solid var(--fe-line);
    break-inside: avoid; font-size: var(--fe-fs-base);
    counter-increment: cmsf-subj;
}
.cmsf-subject-list li::before {
    content: counter(cmsf-subj) ". ";
    color: var(--fe-primary);
    font-weight: 700;
    margin-right: 4px;
}
@media (max-width: 768px) { .cmsf-subject-list { columns: 1; } }

/* ============================== 6. FORM ============================== */
.cmsf-form .cmsf-field { margin-bottom: var(--fe-sp-4); }
.cmsf-field label {
    display: block;
    font-weight: 600;
    font-size: var(--fe-fs-sm);
    margin-bottom: var(--fe-sp-1);
    color: var(--fe-ink);
}
.cmsf-field .cmsf-req { color: var(--fe-danger); }
.cmsf-input,
.cmsf-select,
.cmsf-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius-sm);
    font-size: var(--fe-fs-base);
    font-family: inherit;
    line-height: 1.4;
    color: var(--fe-ink);
    background: var(--fe-bg);
    box-sizing: border-box;
}
.cmsf-input:focus, .cmsf-select:focus, .cmsf-textarea:focus {
    outline: none;
    border-color: var(--fe-primary);
    box-shadow: 0 0 0 3px var(--fe-primary-soft);
}
.cmsf-input[readonly] { background: var(--fe-bg-soft); color: var(--fe-ink-soft); }
.cmsf-help { font-size: var(--fe-fs-sm); color: var(--fe-ink-soft); margin-top: var(--fe-sp-1); }
.cmsf-err { font-size: var(--fe-fs-sm); color: var(--fe-danger); margin-top: var(--fe-sp-1); display: none; }
.cmsf-field.cmsf-invalid .cmsf-input,
.cmsf-field.cmsf-invalid .cmsf-select,
.cmsf-field.cmsf-invalid .cmsf-textarea { border-color: var(--fe-danger); }
.cmsf-field.cmsf-invalid .cmsf-err { display: block; }
.cmsf-checkbox { display: flex; gap: var(--fe-sp-2); align-items: flex-start; font-size: var(--fe-fs-base); }
.cmsf-form-actions { margin-top: var(--fe-sp-5); display: flex; gap: var(--fe-sp-3); flex-wrap: wrap; }

/* Khảo sát: khối xem lại đáp án (readonly) */
.cmsf-answer-view {
    background: var(--fe-bg-soft);
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius-sm);
    padding: var(--fe-sp-2) var(--fe-sp-3);
    font-size: var(--fe-fs-base);
}
.cmsf-answer-view a { color: var(--fe-primary); }

/* Thumbnail ảnh trong câu trả lời khảo sát (đợt 103) */
.cmsf-answer-thumb { display: inline-block; text-decoration: none; }
.cmsf-answer-thumb img {
    display: block;
    max-width: 220px; max-height: 160px;
    width: auto; height: auto;
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius-sm);
    margin-bottom: var(--fe-sp-1);
}
.cmsf-answer-thumb:hover img { border-color: var(--fe-primary); }

/* Khảo sát: danh sách lựa chọn + thang điểm */
.cmsf-option-list { display: flex; flex-direction: column; gap: var(--fe-sp-2); }
.cmsf-rating { display: flex; gap: var(--fe-sp-1); flex-wrap: wrap; }
.cmsf-rating-item input { position: absolute; opacity: 0; pointer-events: none; }
.cmsf-rating-item span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 6px;
    border: 1px solid var(--fe-line); border-radius: var(--fe-radius-sm);
    cursor: pointer; font-weight: 600; background: var(--fe-bg);
}
.cmsf-rating-item input:checked + span {
    background: var(--fe-primary); border-color: var(--fe-primary); color: #fff;
}
.cmsf-rating-item input:focus-visible + span { outline: 2px solid var(--fe-primary); outline-offset: 2px; }

/* ============================== 7. ALERT ============================== */
.cmsf-alert {
    display: flex;
    gap: var(--fe-sp-3);
    padding: var(--fe-sp-3) var(--fe-sp-4);
    border-radius: var(--fe-radius-sm);
    border: 1px solid;
    font-size: var(--fe-fs-base);
    margin-bottom: var(--fe-sp-4);
}
.cmsf-alert--ok     { background: var(--fe-ok-soft);     border-color: rgba(21,128,61,.3);  color: var(--fe-ok); }
.cmsf-alert--warn   { background: var(--fe-warn-soft);   border-color: rgba(180,83,9,.3);   color: var(--fe-warn); }
.cmsf-alert--danger { background: var(--fe-danger-soft); border-color: rgba(185,28,28,.3);  color: var(--fe-danger); }
.cmsf-alert--info   { background: var(--fe-info-soft);   border-color: rgba(18,69,166,.3);  color: var(--fe-info); }

/* ============================== 8. AUTH CARD ============================== */
.cmsf-auth {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--fe-sp-6) var(--fe-sp-4) var(--fe-sp-8);
}
.cmsf-auth-card {
    background: var(--fe-bg);
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius);
    box-shadow: var(--fe-shadow);
    padding: var(--fe-sp-6);
}
@media (max-width: 768px) { .cmsf-auth-card { padding: var(--fe-sp-5) var(--fe-sp-4); } }
/* Section trong form dài (đăng ký, hồ sơ) */
.cmsf-form-section { margin-top: var(--fe-sp-5); padding-top: var(--fe-sp-4); border-top: 1px solid var(--fe-line); }
.cmsf-form-section > h2 { font-size: var(--fe-fs-md); margin: 0 0 var(--fe-sp-3); }
/* Radio card chọn loại thành viên — 3 lựa chọn 1 hàng (mobile: xếp dọc) */
.cmsf-radio-cards { display: grid; gap: var(--fe-sp-2); }
@media (min-width: 768px) { .cmsf-radio-cards { grid-template-columns: repeat(3, 1fr); } }
.cmsf-radio-card {
    display: flex; gap: var(--fe-sp-2); align-items: flex-start;
    border: 1px solid var(--fe-line); border-radius: var(--fe-radius-sm);
    padding: var(--fe-sp-2) var(--fe-sp-3); cursor: pointer;
    background: var(--fe-bg);
}
.cmsf-radio-card .cmsf-help { font-size: .8125rem; line-height: 1.4; }
.cmsf-radio-card:hover { border-color: var(--fe-primary); }
.cmsf-radio-card input { margin-top: 4px; accent-color: var(--fe-primary); }
.cmsf-radio-card strong { display: block; font-size: var(--fe-fs-base); }
.cmsf-radio-card .cmsf-help { margin: 0; }
.cmsf-radio-card:has(input:checked) { border-color: var(--fe-primary); background: var(--fe-primary-soft); }
.cmsf-auth-head { text-align: center; margin-bottom: var(--fe-sp-5); }
.cmsf-auth-head h1 { font-size: var(--fe-fs-xl); line-height: var(--fe-lh-tight); margin: 0 0 var(--fe-sp-2); }
.cmsf-auth-head p { color: var(--fe-ink-soft); margin: 0; font-size: var(--fe-fs-base); }
.cmsf-auth-foot {
    text-align: center;
    margin-top: var(--fe-sp-5);
    padding-top: var(--fe-sp-4);
    border-top: 1px solid var(--fe-line);
    font-size: var(--fe-fs-base);
    color: var(--fe-ink-soft);
}
.cmsf-auth-foot a { color: var(--fe-primary); font-weight: 600; text-decoration: none; }
.cmsf-auth-foot a:hover { text-decoration: underline; }
.cmsf-auth-links { display: flex; justify-content: space-between; font-size: var(--fe-fs-sm); margin-top: var(--fe-sp-3); }
.cmsf-auth-links a { color: var(--fe-primary); text-decoration: none; }
.cmsf-auth-links a:hover { text-decoration: underline; }

/* Icon-state (verify email, pending…) */
.cmsf-state-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--fe-sp-4);
    font-size: 28px;
}
.cmsf-state-icon--ok { background: var(--fe-ok-soft); color: var(--fe-ok); }
.cmsf-state-icon--warn { background: var(--fe-warn-soft); color: var(--fe-warn); }
.cmsf-state-icon--danger { background: var(--fe-danger-soft); color: var(--fe-danger); }
.cmsf-state-icon--info { background: var(--fe-info-soft); color: var(--fe-info); }

/* ============================== 9. EMPTY / PROGRESS / TASK ============================== */
.cmsf-empty {
    text-align: center;
    padding: var(--fe-sp-8) var(--fe-sp-4);
    color: var(--fe-ink-soft);
}
.cmsf-empty h3 { color: var(--fe-ink); font-size: var(--fe-fs-md); margin: 0 0 var(--fe-sp-2); }
.cmsf-empty p { margin: 0 0 var(--fe-sp-4); }

.cmsf-progress { background: var(--fe-bg-soft); border-radius: 999px; height: 10px; overflow: hidden; }
.cmsf-progress > span { display: block; height: 100%; background: var(--fe-primary); border-radius: 999px; transition: width .3s; }

.cmsf-task {
    display: flex;
    align-items: center;
    gap: var(--fe-sp-3);
    padding: var(--fe-sp-3) var(--fe-sp-4);
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius-sm);
    background: var(--fe-bg);
}
.cmsf-task + .cmsf-task { margin-top: var(--fe-sp-2); }
.cmsf-task .cmsf-grow { flex: 1; min-width: 0; }

/* ============================== 10. PAGINATION ============================== */
.cmsf-pagination {
    display: flex;
    gap: var(--fe-sp-1);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--fe-sp-5);
}
/* Đợt 136: ô ≥44px (chuẩn chạm trên mobile), chữ 1rem, trang hiện tại đặc màu chính */
.cmsf-pagination { gap: 6px; }
.cmsf-pagination a, .cmsf-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    text-align: center;
    border: 1px solid var(--fe-line);
    border-radius: var(--fe-radius-sm);
    font-size: var(--fe-fs-base);
    font-weight: 500;
    line-height: 1;
    color: var(--fe-ink);
    text-decoration: none;
    background: var(--fe-bg);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cmsf-pagination a:hover, .cmsf-pagination a:focus-visible { border-color: var(--fe-primary); background: var(--fe-primary-soft); color: var(--fe-primary); outline: none; }
.cmsf-pagination .cmsf-current { background: var(--fe-primary); border-color: var(--fe-primary); color: #fff; font-weight: 600; }
.cmsf-pagination .cmsf-disabled { opacity: .5; pointer-events: none; }

/* ============================== 11. MODAL / TOAST ============================== */
.cmsf-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: var(--fe-z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--fe-sp-4);
}
.cmsf-modal {
    background: var(--fe-bg);
    border-radius: var(--fe-radius);
    box-shadow: 0 10px 40px rgba(15, 23, 42, .2);
    max-width: 440px;
    width: 100%;
    padding: var(--fe-sp-5);
}
.cmsf-modal h3 { margin: 0 0 var(--fe-sp-3); font-size: var(--fe-fs-md); }
.cmsf-modal p { color: var(--fe-ink-soft); margin: 0 0 var(--fe-sp-4); }
.cmsf-modal-actions { display: flex; justify-content: flex-end; gap: var(--fe-sp-2); }

.cmsf-toast-wrap {
    position: fixed;
    bottom: var(--fe-sp-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--fe-z-toast);
    display: flex; flex-direction: column; gap: var(--fe-sp-2);
    width: min(92vw, 420px);
}
.cmsf-toast {
    padding: var(--fe-sp-3) var(--fe-sp-4);
    border-radius: var(--fe-radius-sm);
    border: 1px solid;
    background: var(--fe-bg);
    box-shadow: var(--fe-shadow);
    font-size: var(--fe-fs-base);
    animation: cmsf-toast-in .2s ease-out;
}
.cmsf-toast--ok { border-color: rgba(21,128,61,.4); color: var(--fe-ok); }
.cmsf-toast--danger { border-color: rgba(185,28,28,.4); color: var(--fe-danger); }
.cmsf-toast--info { border-color: rgba(18,69,166,.4); color: var(--fe-info); }
@keyframes cmsf-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Phản hồi tại điểm hành động — dòng kết quả cạnh nút (FE-REDESIGN §3) */
.cmsf-inline-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--fe-sp-3);
    font-size: var(--fe-fs-sm);
    font-weight: 600;
    transition: opacity .4s;
    animation: cmsf-toast-in .2s ease-out;
}
.cmsf-inline-result--ok::before { content: "✓"; }
.cmsf-inline-result--ok { color: var(--fe-ok); }
.cmsf-inline-result--danger::before { content: "✕"; }
.cmsf-inline-result--danger { color: var(--fe-danger); }

/* ============================== 12. LOADING ============================== */
.cmsf-spinner {
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: cmsf-spin .7s linear infinite;
    vertical-align: -3px;
}
@keyframes cmsf-spin { to { transform: rotate(360deg); } }

/* ============================== 13. TIMELINE THEO NĂM (cựu học viên) ============================== */
.cmsf-timeline { position: relative; padding-left: var(--fe-sp-6); }
.cmsf-timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 10px; bottom: 6px;
    width: 2px;
    background: var(--fe-line);
    border-radius: 1px;
}
.cmsf-timeline-group { position: relative; margin-bottom: var(--fe-sp-6); }
.cmsf-timeline-group:last-child { margin-bottom: 0; }
.cmsf-timeline-year {
    position: relative;
    margin: 0 0 var(--fe-sp-4);
    font-size: var(--fe-fs-lg);
    font-weight: 700;
    line-height: var(--fe-lh-tight);
    color: var(--fe-primary);
}
.cmsf-timeline-year::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--fe-sp-6) - 1px);
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--fe-primary);
    border: 3px solid var(--fe-bg);
    box-shadow: 0 0 0 2px var(--fe-primary-soft);
}
.cmsf-timeline-count {
    margin-left: var(--fe-sp-2);
    font-size: var(--fe-fs-sm);
    font-weight: 400;
    color: var(--fe-ink-soft);
}
@media (min-width: 768px) {
    .cmsf-timeline { padding-left: var(--fe-sp-7); }
    .cmsf-timeline-year::before { left: calc(-1 * var(--fe-sp-7) - 1px); }
}