/*
 * BỘ HIỂN THỊ ĐỀ JNEWS — kiểu dáng. Định dạng "jnews-de/1".
 *
 * MỘT nguồn cho hai nơi: trang buổi học nạp tệp này, còn mau-bai/MAU-DE-JNEWS.html
 * được dựng bằng cách nhúng nguyên văn tệp này vào (node mau-bai/_tao-vi-du.mjs).
 * Sửa ở đây rồi chạy lại lệnh ấy — đừng sửa bản nhúng trong tệp mẫu.
 *
 * ── KHUÔN TỜ ĐỀ GIẤY (2026-09-27) ──────────────────────────────────────────
 * Chép dáng của src/components/DeKiemTra.astro (N1 Chặng 1 · Buổi 2): chủ site
 * chốt mọi bài test trước buổi và bài tập về nhà của N5–N1 cùng MỘT giao diện.
 * Không hộp trong hộp: tờ đề nằm thẳng trên nền trang, phương án không viền.
 *
 * ── MÀU ─────────────────────────────────────────────────────────────────────
 * Trong trang học, màu MƯỢN token của site (--ink, --line, --accent…) nên đổi
 * sáng/tối theo site. Mở tệp mẫu riêng lẻ (không có token site) thì rơi về màu
 * dự phòng ghi sau dấu phẩy. Biến riêng gói trong `.jd`, KHÔNG đặt trên :root.
 */
.jd{
  --jd-ink:var(--ink,#1f1a14); --jd-ink2:var(--ink-soft,#5c5246); --jd-muted:var(--muted,#8a7f72);
  --jd-line:var(--line,#d9cfc2); --jd-line2:var(--line-soft,#e9e2d8);
  --jd-paper:var(--surface,#fffdf9); --jd-paper2:var(--surface-2,#f4efe7);
  --jd-accent:var(--accent,#2f7d5b); --jd-accent-soft:var(--accent-soft,#e4f2ea);
  --jd-ok:var(--ok,#15803d); --jd-ok-soft:var(--ok-soft,#e7f6ec); --jd-err:var(--err,#b42318); --jd-err-soft:var(--err-soft,#fdecea);
  --jd-warn:#8a5a00; --jd-warn-soft:#fff4dc;
  /* Chữ Latin/Việt lấy phông Latin TRƯỚC, chữ Nhật rơi xuống phông Nhật. Để
     system-ui đứng đầu thì Windows tiếng Nhật chọn phông Nhật và vỡ dấu tiếng Việt. */
  --jd-ui:"Segoe UI","Noto Sans",Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Yu Gothic","Hiragino Sans",sans-serif;
  --jd-ja:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","MS Mincho",serif;
  color:var(--jd-ink); font:16px/1.7 var(--jd-ui); min-width:0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme='light']) .jd{
    --jd-ink:var(--ink,#e8e3dc); --jd-ink2:var(--ink-soft,#bdb5aa); --jd-muted:var(--muted,#a9a296);
    --jd-line:var(--line,#2c333d); --jd-line2:var(--line-soft,#232932);
    --jd-paper:var(--surface,#161b23); --jd-paper2:var(--surface-2,#1d232c);
    --jd-accent:var(--accent,#5fcf99); --jd-accent-soft:var(--accent-soft,#16322a);
    --jd-ok:var(--ok,#4ade80); --jd-ok-soft:var(--ok-soft,#12301e); --jd-err:var(--err,#ff8a80); --jd-err-soft:var(--err-soft,#3a1714);
    --jd-warn:#f5c16c; --jd-warn-soft:#352812;
  }
}
:root[data-theme='dark'] .jd{
  --jd-ink:var(--ink,#e8e3dc); --jd-ink2:var(--ink-soft,#bdb5aa); --jd-muted:var(--muted,#a9a296);
  --jd-line:var(--line,#2c333d); --jd-line2:var(--line-soft,#232932);
  --jd-paper:var(--surface,#161b23); --jd-paper2:var(--surface-2,#1d232c);
  --jd-accent:var(--accent,#5fcf99); --jd-accent-soft:var(--accent-soft,#16322a);
  --jd-ok:var(--ok,#4ade80); --jd-ok-soft:var(--ok-soft,#12301e); --jd-err:var(--err,#ff8a80); --jd-err-soft:var(--err-soft,#3a1714);
  --jd-warn:#f5c16c; --jd-warn-soft:#352812;
}
.jd *{box-sizing:border-box}
.jd .ja{font-family:var(--jd-ja)}
.jd .vn{font-family:var(--jd-ui)}
/* Chuỗi 「1・2・3・4から一つ」 không có chỗ ngắt tự nhiên — cho ngắt ở bất cứ đâu. */
.jd-dai-de,.jd-than,.jd-o span,.jd-giai-bang dd{overflow-wrap:break-word}
.jd-dai-de,.jd-than.ja{line-break:anywhere}

/* Nút */
.jd-nut{font:700 15px/1 var(--jd-ui);padding:12px 26px;border-radius:10px;border:1px solid var(--jd-line);background:var(--jd-paper);color:var(--jd-ink);cursor:pointer;min-height:44px}
.jd-nut.chinh{background:var(--jd-accent);border-color:var(--jd-accent);color:#fff}
.jd-nut.chinh:hover{filter:brightness(1.08)}
.jd-nut.phu:hover{border-color:var(--jd-accent);color:var(--jd-accent)}
.jd-nut:disabled{opacity:.55;cursor:default}

/* Bìa */
.jd-bia{padding:4px 0 18px}
.jd-cap{font-size:12px;letter-spacing:.3em;color:var(--jd-accent);font-weight:700}
.jd-bia h3{margin:4px 0 2px;font-weight:600;font-size:clamp(20px,5vw,30px);letter-spacing:.04em;text-wrap:balance}
.jd-chude{font-size:clamp(14px,3vw,17px);color:var(--jd-muted);letter-spacing:.06em}
.jd-chuy{margin:18px 0 0;padding:12px 16px 12px 34px;background:var(--jd-paper);border:1px solid var(--jd-line);border-radius:14px;display:grid;gap:10px;font-size:13.5px}
.jd-chuy li::marker{color:var(--jd-accent);font-weight:700}
.jd-chuy span{display:block}
.jd-chuy .ja{font-size:15px}
.jd-chuy span+span{color:var(--jd-ink2)}
.jd-bia>.jd-nut{margin-top:18px}
.jd-nhap{margin-top:18px;padding:14px 16px;border:1px solid var(--jd-accent);border-radius:14px;background:var(--jd-accent-soft)}
.jd-nhap p{margin:0 0 10px}
.jd-nguon{margin-top:14px;font-size:12px;color:var(--jd-muted)}

/* Thanh đồng hồ — DÍNH (chủ site 2026-09-27: "lướt xuống vẫn phải thấy thời gian").
   `--jd-dinh` là đáy thật của các thanh dính của trang (đầu trang, .lvbar ≤900px,
   thanh tab buổi học), do dinhThanh() trong de-jnews.js đo — đừng dùng --hdr-h. */
.jd-thanh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;margin-bottom:12px;border-bottom:1px solid var(--jd-line);
  position:sticky;top:var(--jd-dinh,0px);z-index:40;background:var(--bg,var(--jd-paper2))}
.jd-thanh.dinh{box-shadow:0 8px 12px -10px rgba(0,0,0,.25)}
.jd-gio{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;min-width:62px}
.jd-gio.gap{color:var(--jd-err)}
.jd-tien{flex:1 1 90px;min-width:0;height:5px;background:var(--jd-line2);border-radius:99px;overflow:hidden}
.jd-tien>i{display:block;height:100%;width:0;background:var(--jd-accent);border-radius:99px;transition:width .2s}
.jd-dem{font-size:12.5px;color:var(--jd-muted);font-variant-numeric:tabular-nums}
.jd-dau{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-size:12px;color:var(--jd-muted);margin-bottom:22px;letter-spacing:.08em}
.jd-dau b{color:var(--jd-accent);font-weight:700}

/* Đại vấn 問題N */
.jd-dai{margin:30px 0 16px}
.jd-dau+.jd-dai{margin-top:0}
.jd-dai-de{font-size:clamp(14px,2.4vw,16px);line-height:1.85;margin:0 0 4px}
.jd-dai-de b{font-weight:700;margin-right:.7em}
.jd-kho{display:inline-block;width:2.6em;border-bottom:1px solid currentColor;transform:translateY(-4px);margin:0 2px}
.jd-dai-vn{margin:0;font-size:12.5px;color:var(--jd-muted)}
.jd-doan{margin:0 0 18px;padding:14px 16px;border-left:3px solid var(--jd-line);background:var(--jd-paper);font-size:16px;line-height:2;white-space:pre-wrap}
.jd-doan h4{margin:0 0 6px;font-size:16px}

/* Câu hỏi */
.jd-cau{display:grid;grid-template-columns:27px minmax(0,1fr);gap:4px 10px;margin-bottom:22px;scroll-margin-top:120px;border-radius:8px}
.jd-cau.thieu .jd-so{border-color:var(--jd-warn);color:var(--jd-warn)}
.jd-cau.nhay{animation:jd-nhay 1.2s ease 2}
@keyframes jd-nhay{50%{box-shadow:0 0 0 6px var(--jd-accent-soft);background:var(--jd-accent-soft)}}
.jd-so{font-size:13px;font-weight:800;text-align:center;border:1.5px solid var(--jd-ink);border-radius:3px;height:23px;line-height:20px;font-variant-numeric:tabular-nums}
.jd-than{font-size:clamp(15px,2.6vw,17px);line-height:1.95}
.jd-than.vn{font-size:16px;font-weight:600}
.jd-than u{text-decoration:none;border-bottom:1.5px solid var(--jd-ink)}
.jd-o-o,.jd-o-sao{display:inline-block;min-width:3.2em;border-bottom:1.4px solid currentColor;margin:0 3px}
.jd-o-sao{text-align:center;font-weight:700}
.jd-pa{grid-column:2;display:grid;gap:2px 6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:6px}
.jd-pa.doc{display:flex;flex-direction:column;gap:2px}
.jd-o{display:flex;align-items:flex-start;gap:8px;cursor:pointer;background:none;border:1px solid transparent;border-radius:10px;padding:6px 10px 6px 7px;text-align:left;color:inherit;font-family:var(--jd-ja);font-size:clamp(14px,2.4vw,16px);line-height:1.75;min-height:40px}
.jd-o.vn{font-family:var(--jd-ui);font-size:15px}
.jd-o:hover{background:var(--jd-paper2)}
.jd-o>i{font-style:normal;color:var(--jd-muted);flex:none;font-variant-numeric:tabular-nums}
.jd-o>em{margin-left:auto;padding-left:8px;font-style:normal;font-size:11.5px;font-weight:700;flex:none;font-family:var(--jd-ui)}
.jd-o[aria-pressed='true']{background:var(--jd-accent-soft);border-color:var(--jd-accent)}
.jd-o[aria-pressed='true']>i{color:var(--jd-accent);font-weight:800}
.jd-o:disabled{cursor:default}
.jd-o.la-dung{background:var(--jd-ok-soft);border-color:var(--jd-ok)}
.jd-o.la-dung>em{color:var(--jd-ok)}
.jd-o.chon-sai{background:var(--jd-err-soft);border-color:var(--jd-err)}
.jd-o.chon-sai>em{color:var(--jd-err)}

/* Chữa bài */
.jd-giai{grid-column:2;display:none}
.jd.da-nop .jd-giai:not(:empty){display:block}
.jd-giai-bang{margin:8px 0 0;padding-left:12px;border-left:2px solid var(--jd-line);font-size:13px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px}
.jd-giai-bang dt{color:var(--jd-muted);font-size:11.5px;padding-top:2px}
.jd-giai-bang dd{margin:0}
.jd-giai-bang .ja{font-size:14.5px}
.jd-giai-bang .no{color:var(--jd-ink2)}
.jd-chua{grid-column:2;margin-top:10px;display:none}
.jd.dang-chua .jd-chua{display:block}
.jd-chua table{width:100%;border-collapse:collapse;font-size:14px}
.jd-chua th,.jd-chua td{border:1px solid var(--jd-line);padding:6px 8px;text-align:left;vertical-align:top}
.jd-chua input{width:100%;min-height:40px;padding:6px 8px;border:1px solid var(--jd-line);border-radius:6px;background:var(--jd-paper);color:var(--jd-ink);font:inherit;font-size:16px}
.jd-chua input.ok{border-color:var(--jd-ok);background:var(--jd-ok-soft)}
.jd-chua input.sai{border-color:var(--jd-err);background:var(--jd-err-soft)}
.jd-chua .mau{display:none;font-size:12.5px;color:var(--jd-ink2);margin-top:3px}
.jd.da-chua .jd-chua .mau{display:block}

/* Phiếu tô 解答用紙 */
.jd-phieu{margin-top:28px}
.jd-phieu h4{margin:0 0 8px;font-size:12px;letter-spacing:.18em;color:var(--jd-muted);font-weight:600}
.jd-phieu-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:2px 10px;border:1px solid var(--jd-line);border-radius:10px;padding:8px;background:var(--jd-paper)}
.jd-hang{display:flex;align-items:center;gap:6px;padding:2px 0}
.jd-hang>b{font-size:11.5px;font-weight:700;width:18px;text-align:right;font-variant-numeric:tabular-nums}
.jd-hang.chua>b{color:var(--jd-muted)}
.jd-phieu.nhac .jd-hang.chua>b{color:var(--jd-err)}
.jd-to{width:20px;height:13px;border:1.2px solid var(--jd-line);border-radius:99px;background:none;cursor:pointer;padding:0;font-size:0;color:transparent}
.jd-to:hover{border-color:var(--jd-accent)}
.jd-to[aria-pressed='true']{background:var(--jd-ink);border-color:var(--jd-ink)}
.jd-phieu-ghi{margin:8px 0 0;font-size:11.5px;color:var(--jd-muted)}
.jd-nop{margin-top:22px;text-align:center}
.jd-canh{margin:8px 0 0;font-size:13px;color:var(--jd-err);min-height:18px}

/* Kết quả */
.jd-diem{text-align:center;padding:10px 0 20px;border-bottom:1px solid var(--jd-line);margin-bottom:26px}
.jd-so-diem{font-size:clamp(38px,9vw,54px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.jd-so-diem span{font-size:.42em;color:var(--jd-muted);font-weight:600}
.jd-nhan{font-size:15px;font-weight:700;margin-top:8px}
.jd-diem.qua .jd-nhan{color:var(--jd-ok)}
.jd-diem.truot .jd-nhan{color:var(--jd-err)}
.jd-muc{font-size:12.5px;color:var(--jd-muted);margin-top:4px}
.jd-mon{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px;color:var(--jd-ink2)}
.jd-cuoi{margin-top:26px;padding-top:16px;border-top:1px solid var(--jd-line);font-size:12.5px;color:var(--jd-muted);line-height:1.7}
.jd-loi{margin:20px 0;padding:16px 18px;border:2px solid var(--jd-err);border-radius:12px;background:var(--jd-err-soft);color:var(--jd-ink)}
.jd-loi h2{margin:0 0 8px;font-size:17px;color:var(--jd-err)}
.jd-loi li{font-size:14px;margin:3px 0}
.jd-xong{margin:18px 0 0;padding:14px 16px;border:1px solid var(--jd-ok);border-radius:12px;background:var(--jd-ok-soft);font-weight:700}

@media (max-width:480px){
  .jd-cau{grid-template-columns:24px minmax(0,1fr)}
  .jd-pa{grid-template-columns:1fr 1fr}
  .jd-pa.doc{display:flex}
  .jd-chua table,.jd-chua tbody,.jd-chua tr,.jd-chua td,.jd-chua th{display:block;width:100%}
  .jd-chua thead{display:none}
  .jd-chua td{border:0;padding:4px 0}
  .jd-chua tr{border:1px solid var(--jd-line);border-radius:8px;padding:6px 8px;margin-bottom:8px}
}
@media print{
  .jd-thanh,.jd-nop,.jd-bia .jd-nut,.jd-phieu{display:none!important}
}