/* ===================================================================
   CHỨNG NHẬN CỦA TÔI — trang trong app (assets/certs.js dựng HTML)
   Thiết kế html2canvas-friendly: màu đặc, con dấu/logo bằng <img>.
   =================================================================== */
.mc-page{max-width:1180px;margin:0 auto;padding:8px 6px 60px}
.mc-hero{text-align:center;padding:10px 12px 18px}
.mc-hero h1{font-family:'Lora',serif;font-size:clamp(1.5rem,1.1rem+2vw,2.1rem);color:var(--ink)}
.mc-hero p{color:var(--ink-soft);max-width:640px;margin:8px auto 0;line-height:1.6}

.mc-block{margin:26px 0}
.mc-status{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;font-size:.95rem}
.mc-badge{font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:99px}
.mc-badge.ok{background:#e7ead2;color:#2a3a26}
.mc-badge.lock{background:#efe7d6;color:#7a5e1f}

/* sân khấu để scale chứng nhận vừa màn hình; .mcert giữ kích thước thật */
.mc-stage{width:100%;overflow:hidden;display:flex;justify-content:center}
.mc-scaler{transform-origin:top center}

/* ===== KHỔ CHỨNG NHẬN (cố định để xuất ảnh nét) ===== */
.mcert{position:relative;width:1100px;height:778px;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Be Vietnam Pro',sans-serif}
.mcert *{box-sizing:border-box}
.mcert .fr1{position:absolute;inset:26px;border:2px solid #b8912e}
.mcert .fr2{position:absolute;inset:33px;border:1px solid rgba(184,145,46,.45)}
.mcert .co{position:absolute;width:46px;height:46px;z-index:3}
.mcert .co::before,.mcert .co::after{content:"";position:absolute;background:#b8912e}
.mcert .co::before{width:46px;height:1.4px}.mcert .co::after{height:46px;width:1.4px}
.mcert .co.tl{top:40px;left:40px}.mcert .co.tr{top:40px;right:40px}.mcert .co.bl{bottom:40px;left:40px}.mcert .co.br{bottom:40px;right:40px}
.mcert .co.tr::before,.mcert .co.tr::after{right:0}.mcert .co.bl::before,.mcert .co.bl::after{bottom:0}.mcert .co.br::before,.mcert .co.br::after{bottom:0;right:0}
.mcert .wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:470px;z-index:0;pointer-events:none}
.mcert .in{position:relative;z-index:2;width:100%;padding:0 92px;display:flex;flex-direction:column;align-items:center}

.mcert .logo{height:46px;object-fit:contain;margin-bottom:7px}
.mcert .acad{font-family:'Lora',serif;font-weight:600;font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase}
.mcert .acadvi{font-size:.66rem;letter-spacing:.18em;margin-top:3px}
.mcert .rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:11px 0}
.mcert .rule i{display:block;height:1px;width:108px}
.mcert .rule b{font-size:.66rem;color:#b8912e}
.mcert .ttl{font-family:'Lora',serif;font-weight:700;font-size:2.45rem;letter-spacing:.13em;text-transform:uppercase;line-height:1;color:#8a6c18}
.mcert .ttlvi{font-family:'Lora',serif;font-style:italic;font-size:1.08rem;margin-top:5px}
.mcert .certify{font-size:.78rem;letter-spacing:.04em;margin-top:20px}
.mcert .name{font-family:'Lora',serif;font-weight:600;font-size:2.9rem;line-height:1.05;margin-top:4px}
.mcert .nameline{width:520px;height:0;border-bottom:1px solid #b8912e;margin:7px auto 0}
.mcert .prog{font-family:'Lora',serif;font-weight:600;font-size:1.36rem;letter-spacing:.05em;margin:14px 0 2px}
.mcert .progsub{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}
.mcert .desc{font-size:.84rem;line-height:1.5;max-width:740px;margin-top:14px}
.mcert .desc .vi{display:block;font-style:italic;opacity:.82;font-size:.8rem;margin-top:3px}

.mcert .foot{display:flex;align-items:flex-end;justify-content:space-between;width:820px;margin-top:26px}
.mcert .foot .col{display:flex;flex-direction:column;align-items:center}
.mcert .seal{width:118px;height:118px}
.mcert .sigimg{height:60px;object-fit:contain;margin-bottom:-6px}
.mcert .sigline{width:260px;border-top:1px solid;padding-top:6px}
.mcert .sigline b{font-family:'Lora',serif;font-weight:700;font-size:.95rem;display:block}
.mcert .sigline span{font-size:.66rem}
.mcert .meta{position:absolute;bottom:48px;left:0;right:0;text-align:center;font-size:.66rem;letter-spacing:.09em}

/* khoá (chưa đủ điều kiện) */
.mcert.locked{filter:grayscale(.35)}
.mc-lockmask{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(40,34,24,.42);color:#fff;text-align:center;backdrop-filter:blur(1px)}
.mc-lockmask .lk{font-size:2.4rem}
.mc-lockmask b{font-size:1.15rem;margin-top:6px}
.mc-lockmask span{font-size:.9rem;margin-top:4px;opacity:.92}

/* nút tải/chia sẻ */
.mc-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.mc-acts button{font-family:inherit;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  border-radius:11px;padding:11px 18px;font-size:.92rem;font-weight:600;cursor:pointer}
.mc-acts button.primary{background:linear-gradient(180deg,#46553a,var(--a));color:#fff;border:none}
.mc-acts button:disabled{opacity:.5;cursor:not-allowed}

/* ===== Biến thể 1 — ivory ===== */
.mc1{background:radial-gradient(130% 130% at 50% 0%,#fffdf6,#faf4e6 42%,#f7f1e2);color:#2b2519}
.mc1 .wm{opacity:.05}
.mc1 .acad,.mc1 .name,.mc1 .prog{color:#1f2f1b}
.mc1 .acadvi{color:#8f7d54}
.mc1 .rule i:first-child{background:linear-gradient(90deg,transparent,#b8912e)}
.mc1 .rule i:last-child{background:linear-gradient(90deg,#b8912e,transparent)}
.mc1 .ttlvi{color:#33402a}
.mc1 .certify{color:#6f6144}.mc1 .desc{color:#5d5238}.mc1 .desc b{color:#1f2f1b}.mc1 .progsub{color:#8a6c18}
.mc1 .sigline{border-color:#bcab85;color:#6f6144}.mc1 .sigline b{color:#1f2f1b}.mc1 .meta{color:#8a7a55}

/* ===== Biến thể 2 — xanh rêu/vàng ===== */
.mc2{background:radial-gradient(135% 130% at 50% 6%,#2c3f24,#1f2f1b 48%,#14200f);color:#f7f1e2}
.mc2 .wm{display:none} /* nền tối: bỏ watermark cho nhẹ + xuất ảnh chuẩn (html2canvas không hiểu filter) */
.mc2 .acad{color:#e3c785}.mc2 .acadvi{color:#bdb087}
.mc2 .rule i:first-child{background:linear-gradient(90deg,transparent,#e3c785)}.mc2 .rule i:last-child{background:linear-gradient(90deg,#e3c785,transparent)}.mc2 .rule b{color:#e3c785}
.mc2 .ttl{color:#e3c785}.mc2 .ttlvi{color:#d7cbae}
.mc2 .name{color:#f0dca0}.mc2 .prog{color:#e3c785}
.mc2 .certify{color:#cabf9f}.mc2 .desc{color:#dad0b8}.mc2 .progsub{color:#e3c785}
.mc2 .sigline{border-color:rgba(227,199,133,.5);color:#cabf9f}.mc2 .sigline b{color:#fff}.mc2 .meta{color:#b6aa86}

/* ===== BÀI THI CUỐI KHOÁ (exam.js) ===== */
.exam-wrap{max-width:720px;margin:0 auto;padding:10px 12px 70px}
.exam-intro{text-align:center;padding:8px 6px 18px}
.exam-intro h1{font-family:'Lora',serif;font-size:1.6rem;color:var(--ink)}
.exam-intro p{color:var(--ink-soft);max-width:560px;margin:8px auto 0;line-height:1.6;font-size:1.02rem}
.exam-q{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px 16px;margin-bottom:14px}
.exam-qn{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#3a472e);margin-bottom:7px}
.exam-qt{font-size:1.12rem;font-weight:600;line-height:1.5;margin-bottom:12px;color:var(--ink)}
.exam-opts{display:flex;flex-direction:column;gap:9px}
.exam-opt{display:block;width:100%;text-align:left;font:inherit;font-size:1.08rem;color:var(--ink);
  padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fbf8f0;cursor:pointer;transition:.12s}
.exam-opt:hover{border-color:var(--accent,#3a472e)}
.exam-opt.on{background:#e7ead2;border-color:var(--a,#3a472e);font-weight:600}
.exam-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 4px calc(12px + env(safe-area-inset-bottom));margin-top:6px;
  background:linear-gradient(180deg,rgba(244,239,230,0),var(--paper) 40%)}
.exam-count{font-size:.9rem;color:var(--ink-soft)}
.exam-btn{font-family:inherit;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  border-radius:12px;padding:13px 22px;font-size:1rem;font-weight:700;cursor:pointer}
.exam-btn.primary{background:linear-gradient(180deg,#46553a,var(--a,#3a472e));color:#fff;border:none}
.exam-btn:disabled{opacity:.5;cursor:not-allowed}
.exam-result{text-align:center;padding:36px 16px;max-width:520px;margin:0 auto}
.exam-result .ic{font-size:3.2rem}
.exam-result h1{font-family:'Lora',serif;font-size:1.7rem;margin-top:8px;color:var(--ink)}
.exam-result.fail h1{color:var(--d,#7a5e1f)}
.exam-score{font-size:1.2rem;font-weight:700;color:var(--a,#3a472e);margin:10px 0}
.exam-result.fail .exam-score{color:var(--d,#7a5e1f)}
.exam-result p{color:var(--ink-soft);line-height:1.6;margin-bottom:18px}
.exam-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== Khu NỘP BÀI THỰC HÀNH (chứng nhận Mentor) ===== */
.prac-box{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:6px;text-align:left}
.prac-box>b{font-size:1.05rem;color:var(--ink)}
.prac-box.pending{background:#f3f5e8;border-color:#dde0c4}
.prac-help{color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin:8px 0 12px}
.prac-reject{background:#f6e3d8;border:1px solid #e6c3b3;color:#8a3b22;border-radius:10px;padding:9px 12px;font-size:.9rem;margin-bottom:10px}
.prac-box textarea{width:100%;min-height:140px;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;
  font-size:1.04rem;line-height:1.55;background:#fffdf8;color:var(--ink);resize:vertical;margin-bottom:10px}
.prac-box input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font:inherit;font-size:1rem;
  background:#fffdf8;color:var(--ink);margin-bottom:10px}
.prac-box textarea:focus,.prac-box input:focus{outline:2px solid var(--a,#3a472e);border-color:transparent}
.prac-box.pending p{color:var(--ink-soft);line-height:1.55;margin-top:6px;font-size:.95rem}

/* ===== CÂU HỎI THƯỜNG GẶP (faq.js) ===== */
.faq-page{max-width:720px;margin:0 auto;padding:10px 12px 70px}
.faq-hero{text-align:center;padding:8px 6px 16px}
.faq-hero h1{font-family:'Lora',serif;font-size:1.6rem;color:var(--ink)}
.faq-hero p{color:var(--ink-soft);max-width:560px;margin:8px auto 0;line-height:1.6}
.faq-hero a,.faq-a a{color:var(--d,#7a5e1f);font-weight:600}
.faq-item{background:var(--paper-2);border:1px solid var(--line);border-radius:13px;margin-bottom:10px;overflow:hidden}
.faq-item>summary{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;list-style:none;user-select:none}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-q{flex:1;font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.35}
.faq-chev{flex:0 0 auto;font-size:1.5rem;color:var(--ink-soft);transition:transform .2s;line-height:1}
.faq-item[open]>summary .faq-chev{transform:rotate(90deg)}
.faq-item[open]>summary{border-bottom:1px solid var(--line)}
.faq-a{padding:13px 16px 16px;font-size:1.06rem;line-height:1.65;color:#5a4f38}
.faq-a b{color:var(--ink)}
.faq-help{text-align:center;margin-top:24px;padding:20px;background:#f3f5e8;border:1px solid #dde0c4;border-radius:14px}
.faq-help b{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:10px}
.faq-btn{display:inline-block;background:linear-gradient(180deg,#46553a,var(--a,#3a472e));color:#fff;text-decoration:none;
  font-weight:700;padding:12px 22px;border-radius:12px;font-size:1rem}