/* ═══════════════════════════════════════════════════════════════════════════
   CAREER CHECK — khảo sát định hướng nghề nghiệp tại ngày hội việc làm

   Chạy trên HAI hoàn cảnh rất khác nhau, và đó là lý do gần như mọi quy tắc
   kích thước ở đây đều có hai phiên bản:

     • Điện thoại tại booth — chạm bằng ngón cái, nhiều khi dưới nắng.
       Cần vùng chạm cao, chữ to, mỗi lúc chỉ một cột.
     • Máy tính — chuột trỏ chính xác, màn 1440–1920px.
       Cần dày hơn, nhiều cột, nút vừa đủ to chứ không kéo hết chiều ngang.

   Bản đầu chỉ làm cho vế thứ nhất, nên trên desktop trông đúng như giao diện
   điện thoại bị phóng to. Phân biệt hai vế bằng (hover:hover) and (pointer:fine)
   thay vì đoán theo bề rộng — máy tính bảng có bút, laptop có màn cảm ứng.

   File riêng, không đụng site.css — đây là luồng tách biệt khỏi phần còn lại của web.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cc-primary: #A11D21;
    --cc-primary-dark: #7d1619;
    --cc-primary-soft: #fdf2f2;
    --cc-ink: #111827;
    --cc-muted: #5b6472;          /* đậm hơn #6b7280 để đạt tương phản AA trên nền xám */
    --cc-line: #e5e7eb;            /* viền THẺ — chỉ để phân nhóm, không phải control */
    /* Viền của ô nhập và ô lựa chọn là ranh giới của một control, WCAG 1.4.11 đòi tối
       thiểu 3:1 so với nền. #d3d8de chỉ được 1.45:1 — dưới nắng ở booth thì gần như
       không thấy ô nằm ở đâu. #8b93a1 đạt 3.0:1. */
    --cc-line-strong: #8b93a1;
    --cc-bg: #f6f7f9;
    --cc-ok: #15803d;
    --cc-warn: #b45309;
    --cc-radius: 12px;
}

.cc-body {
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-ink);
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

/* padding-top ở đây chứ không để từng view tự chêm margin: thông báo lỗi do layout
   dựng ra nằm ngay đầu .cc-wrap, thiếu nó là chữ đỏ dán sát vào thanh đỏ của header. */
.cc-wrap {
    max-width: 720px; margin: 0 auto;
    padding: 16px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
}

/* Nội dung HTML do Admin dán vào (giới thiệu chương trình, mô tả thẻ mời) — chặn
   sẵn ảnh và bảng quá khổ, không thì một tấm ảnh 2000px làm tràn cả trang. */
.cc-card img, .cc-card table, .cc-ticket img, .cc-ticket table { max-width: 100%; height: auto; }

/* ── Thanh trên ── */
.cc-top {
    background: var(--cc-primary); color: #fff;
    display: flex; align-items: center; gap: 12px;
    /* Layout khai viewport-fit=cover, nên phải tự chừa vùng tai thỏ / thanh vuốt,
       không thì trên iPhone logo chui vào sau khuyết camera khi xoay ngang. */
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
}
/* Logo AAuJob là chữ đỏ sẫm trên nền trong suốt — đặt thẳng lên thanh đỏ thì
   gần như tàng hình. Bọc một "viên" trắng để vừa giữ nhận diện vừa đọc được. */
.cc-top-logo {
    height: 30px; width: auto; display: block;
    background: #fff; border-radius: 8px; padding: 4px 9px;
}
.cc-top-name {
    font-weight: 700; font-size: .95rem; letter-spacing: .02em; white-space: nowrap;
}
.cc-top-right {
    margin-left: auto; font-size: .82rem; opacity: .92;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 45%;
}

/* ── Thanh bước ── */
.cc-steps { display: flex; gap: 8px; margin: 4px 0 22px; padding: 0; list-style: none; }
.cc-step { flex: 1; text-align: center; font-size: .75rem; color: var(--cc-muted); }
.cc-step-bar { height: 5px; border-radius: 99px; background: var(--cc-line-strong); margin-bottom: 6px; }
.cc-step.is-done .cc-step-bar, .cc-step.is-on .cc-step-bar { background: var(--cc-primary); }
.cc-step.is-on { color: var(--cc-primary); font-weight: 700; }

/* ── Thẻ nội dung ── */
.cc-card {
    background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
    padding: 20px 18px; margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.cc-card-hd { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; }
.cc-card-sub { color: var(--cc-muted); font-size: .88rem; margin: 0 0 18px; }

.cc-h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin: 0 0 8px; }
.cc-lead { color: var(--cc-muted); margin: 0 0 20px; }

/* ── Câu hỏi ── */
.cc-q { margin-bottom: 22px; }
.cc-q:last-child { margin-bottom: 4px; }
.cc-q-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.cc-req { color: var(--cc-primary); }
.cc-help { display: block; color: var(--cc-muted); font-size: .81rem; margin: -4px 0 8px; }

.cc-input {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; font-size: 1rem; font-family: inherit; color: var(--cc-ink);
    border: 1.5px solid var(--cc-line-strong); border-radius: 10px; background: #fff;
}
.cc-input:focus-visible,
.cc-input:focus { outline: none; border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(161, 29, 33, .14); }
textarea.cc-input { min-height: 96px; resize: vertical; }

/* Lựa chọn — cả hàng là vùng chạm, không bắt chạm đúng cái ô tròn bé xíu */
.cc-opts { display: grid; gap: 8px; }
/* auto-fit tự xếp 1 cột trên điện thoại, 2 trên tablet, 3 trên desktop —
   đỡ phải khai từng điểm ngắt, và không bao giờ để một nhãn ngắn chiếm cả dòng 700px. */
/* Bề rộng cột tối thiểu do từng câu hỏi tự khai theo độ dài nhãn dài nhất của nó
   (--cc-col-min). Để một con số cứng thì nhãn "Quay video bằng điện thoại" bị bẻ
   làm ba dòng trong khi "Năm 1" thì thừa chỗ. */
.cc-opts.cc-2col { grid-template-columns: repeat(auto-fit, minmax(var(--cc-col-min, 210px), 1fr)); }
.cc-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; min-height: 46px; box-sizing: border-box;
    border: 1.5px solid var(--cc-line-strong); border-radius: 10px; background: #fff;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.cc-opt:hover { border-color: var(--cc-muted); }
.cc-opt:has(input:checked) { border-color: var(--cc-primary); background: var(--cc-primary-soft); }
/* Đi bằng bàn phím cũng phải thấy mình đang đứng ở đâu — trước đây chỉ có viền
   mặc định của ô tròn bé tí, gần như không nhận ra trên nền trắng. */
.cc-opt:has(input:focus-visible) { border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(161, 29, 33, .14); }
.cc-opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cc-primary); flex: none; }
.cc-opt-text { font-size: .92rem; display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
/* Nhãn chiếm hết phần còn lại, huy hiệu mức bị đẩy sát mép phải và không bao giờ
   bị kéo xuống giữa chừng câu chữ. */
/* Nhãn do Admin tự nhập, có thể là một chuỗi dài không dấu cách (tên công cụ, URL).
   Không cho ngắt thì nó đẩy cả lưới rộng ra và trang tràn ngang. */
.cc-opt-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cc-opt-text > .cc-level { margin-left: auto; align-self: center; }
.cc-opt.is-disabled { opacity: .45; pointer-events: none; }

/* Ô "ghi rõ..." của đáp án Khác: chỉ hiện khi đáp án đó được chọn, và luôn
   chiếm trọn hàng chứ không nằm lọt thỏm trong một ô của lưới. */
.cc-opt-free { grid-column: 1 / -1; margin-top: 2px; }
.cc-opt-free[hidden] { display: none; }

/* Thang mức độ — hoặc MỘT hàng, hoặc MỘT cột, không bao giờ 3+2.
   Thang Likert bị bẻ thành hai hàng lệch nhau thì người đọc hiểu sai thứ tự mức độ,
   tưởng hàng dưới là một nhóm khác chứ không phải phần đuôi của cùng một thang. */
.cc-scale { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 700px) {
    .cc-scale { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
    .cc-scale .cc-opt { flex-direction: row; align-items: center; text-align: left; }
    .cc-scale .cc-opt-text { justify-content: flex-start; }
}
.cc-scale .cc-opt { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.cc-scale .cc-opt-text { justify-content: center; }

/* ── Nút ── */
.cc-actions { display: flex; gap: 10px; margin-top: 8px; }
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 20px; min-height: 50px; border-radius: 11px;
    font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
    border: 1.5px solid transparent; text-decoration: none; transition: background .12s, border-color .12s;
}
.cc-btn-primary { background: var(--cc-primary); color: #fff; flex: 1; }
.cc-btn-primary:hover { background: var(--cc-primary-dark); color: #fff; }
.cc-btn-ghost { background: #fff; border-color: var(--cc-line-strong); color: var(--cc-ink); }
.cc-btn-ghost:hover { border-color: var(--cc-muted); color: var(--cc-ink); }
.cc-btn:focus-visible { outline: 3px solid rgba(161, 29, 33, .35); outline-offset: 2px; }
.cc-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Thông báo ── */
.cc-alert { padding: 12px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 16px; border: 1px solid; }
.cc-alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cc-alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.cc-alert-ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

/* ── Trạm 2: ngành / vị trí / kỹ năng ── */
.cc-hidden { display: none !important; }
.cc-count { font-size: .82rem; color: var(--cc-muted); font-weight: 600; }
.cc-count.is-full { color: var(--cc-primary); }

/* Chưa chọn ngành thì cả khối vị trí lẫn Skill Check đều ẩn — không có dòng này,
   người dùng nhìn thấy một khoảng trống giữa hai câu hỏi và tưởng trang bị lỗi. */
.cc-await {
    border: 1.5px dashed var(--cc-line-strong); border-radius: var(--cc-radius);
    padding: 22px 18px; text-align: center; color: var(--cc-muted);
    font-size: .9rem; margin-bottom: 16px; background: #fff;
}
.cc-await i { display: block; font-size: 1.4rem; margin-bottom: 8px; opacity: .5; }

.cc-skillblock-hd { font-weight: 800; font-size: .95rem; margin-bottom: 4px; }
.cc-level {
    font-size: .68rem; font-weight: 700; padding: 2px 7px;
    border-radius: 99px; flex: none; white-space: nowrap;
}
.cc-level-required { background: #fee2e2; color: #991b1b; }
.cc-level-preferred { background: #fef3c7; color: #8a4b09; }
.cc-level-bonus { background: #e0e7ff; color: #3730a3; }

/* ── Kết quả ── */
.cc-result-hero {
    background: linear-gradient(135deg, var(--cc-primary), var(--cc-primary-dark));
    color: #fff; border-radius: 16px; padding: 26px 20px; text-align: center; margin-bottom: 16px;
}
.cc-result-hero h1 { font-size: 1.3rem; margin: 0 0 6px; font-weight: 800; }
.cc-result-hero p { margin: 0; opacity: .94; font-size: .9rem; }

.cc-match { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cc-match-ring {
    width: 68px; height: 68px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: var(--cc-primary);
    background: conic-gradient(var(--cc-primary) calc(var(--pct) * 1%), var(--cc-line-strong) 0);
    position: relative;
}
.cc-match-ring::before { content: ''; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.cc-match-ring span { position: relative; }
.cc-match-name { font-weight: 800; font-size: 1.02rem; }
.cc-match-sub { color: var(--cc-muted); font-size: .84rem; }

.cc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cc-chip { font-size: .82rem; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--cc-line-strong); background: #fff; }
.cc-chip-have { border-color: #bbf7d0; background: #f0fdf4; color: var(--cc-ok); }
.cc-chip-gap { border-color: #fed7aa; background: #fff7ed; color: var(--cc-warn); }
.cc-block-title { font-weight: 700; font-size: .88rem; margin: 16px 0 2px; }

/* ── Thẻ mời ── */
.cc-ticket {
    background: linear-gradient(140deg, #A11D21, #5c1013);
    color: #fff; border-radius: 18px; padding: 26px 22px; position: relative; overflow: hidden;
}
.cc-ticket h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.cc-ticket ul { margin: 12px 0 0; padding-left: 20px; font-size: .88rem; line-height: 1.7; }
.cc-ticket-meta {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28);
    display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .84rem;
}
.cc-ticket-code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; }

/* Chữ chỉ dành cho trình đọc màn hình — mắt thường không thấy nhưng vẫn được đọc lên. */
.cc-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cc-foot { text-align: center; color: var(--cc-muted); font-size: .78rem; padding: 22px 16px 34px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÀN RỘNG — bố cục nhiều cột
   Cột đơn 720px đặt giữa màn 1440px làm trang trông như ảnh chụp điện thoại
   phóng to. Từ 820px trở lên, mỗi thẻ thành lưới 2 cột: câu hỏi ngắn (tên,
   SĐT, email…) đứng cạnh nhau, câu hỏi cần bề ngang thì chiếm trọn hàng.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 820px) {
    .cc-wrap { max-width: 880px; }

    .cc-card { padding: 24px 26px; }
    /* Mọi thứ mặc định chiếm trọn hàng; chỉ câu hỏi đánh dấu data-w="half" mới đứng đôi. */
    .cc-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-content: start; }
    .cc-card > * { grid-column: 1 / -1; }
    .cc-card > .cc-q[data-w="half"] { grid-column: span 1; }

    /* Hai câu hỏi cạnh nhau có ghi chú dài ngắn khác nhau, nên nếu không đẩy ô nhập
       xuống đáy thì ô bên này cao hơn ô bên kia một quãng, nhìn rất lệch. */
    .cc-card > .cc-q[data-w="half"] { display: flex; flex-direction: column; }
    .cc-card > .cc-q[data-w="half"] > .cc-input { margin-top: auto; }

    .cc-card-hd { font-size: 1.15rem; }

    /* Quay lại bên trái, đi tiếp bên phải — và nút không kéo dài hết chiều ngang nữa. */
    .cc-actions { justify-content: space-between; margin-top: 4px; }
    .cc-btn-primary { flex: 0 0 auto; min-width: 250px; }
    .cc-btn-ghost { flex: 0 0 auto; }
    /* Trang chỉ có một nút (Bắt đầu / Mở thẻ mời) thì đẩy sang phải cho cân. */
    .cc-actions > .cc-btn-primary:only-child { margin-left: auto; }

    .cc-steps { margin: 22px 0 24px; }
    .cc-step { font-size: .82rem; }

    .cc-result-hero { padding: 34px 28px; }
    .cc-result-hero h1 { font-size: 1.6rem; }
    .cc-match-ring { width: 86px; height: 86px; font-size: 1.25rem; }
    .cc-match-ring::before { inset: 8px; }
}

@media (min-width: 1200px) {
    .cc-wrap { max-width: 960px; }
}

/* ── Máy có chuột: bóp chiều cao lại ──
   46px là kích thước cho ngón tay cái. Với con trỏ chuột thì nó thừa, và một
   danh sách 15 kỹ năng cao 46px mỗi dòng bắt người dùng cuộn vô ích. */
@media (hover: hover) and (pointer: fine) {
    .cc-opt { padding: 9px 12px; min-height: 40px; }
    .cc-opt input { width: 17px; height: 17px; }
    .cc-opt-text { font-size: .89rem; }
    .cc-input { padding: 10px 12px; font-size: .95rem; }
    .cc-btn { min-height: 44px; padding: 11px 22px; font-size: .95rem; }
    .cc-q { margin-bottom: 18px; }
    .cc-scale .cc-opt { padding: 10px 8px; }
}

/* ── Điện thoại nhỏ ── */
@media (max-width: 480px) {
    /* KHÔNG ép về 1 cột nữa: mỗi câu hỏi đã tự khai --cc-col-min theo độ dài nhãn,
       nên auto-fit tự quyết đúng. Ép cứng thì "Năm 1 … Khác" thành 6 dòng, bắt
       sinh viên cuộn thêm một màn cho sáu chữ ngắn. */
    .cc-h1 { font-size: 1.3rem; }
    .cc-actions { flex-direction: column-reverse; }
    .cc-btn { width: 100%; }
    .cc-top-name { font-size: .88rem; }
    .cc-top-right { max-width: 38%; font-size: .76rem; }
}

/* Bản in / lưu PDF của thẻ mời: bỏ nút bấm, giữ nguyên nền màu. */
@media print {
    .cc-noprint { display: none !important; }
    .cc-body { background: #fff; }
    .cc-ticket { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}