/* Bản giao diện Dũng Mori (dm.html), đè lên bjt.css.
   Màu lấy từ dungmori.com: xanh lá #57D061, xanh rêu #07403F, cam nút #EC6E23. Chữ tròn Quicksand + Baloo 2, tiếng Nhật Zen Maru Gothic.
   Khung thoại = bảng xanh phấn trắng (giống slide live Dũng Mori). Không dùng emoji. */
:root,:root[data-theme="dark"]{
  --nen:#F3F9F4; --the:#fff; --chu:#17322B; --nhat:#5B6F68; --vien:#D6E8DC;
  --navy:#07403F; --navy2:#118C60; --cam:#EC6E23; --cam2:#D35B14; --xanh:#2E9E4F; --do:#D2432F;
  --la:#57D061; --la-nhat:#E6F7E8; --rieu:#07403F; --bang:#24473B; --bang2:#1D3C31; --go:#B07B45; --phan:#FFE47A;
  --vang:#FFF8E1; --bong:0 6px 0 rgba(7,64,63,.08), 0 10px 26px rgba(7,64,63,.08);
  --jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --tron:"Baloo 2","Quicksand",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --nen:#F3F9F4; --the:#fff; --chu:#17322B; --nhat:#5B6F68; --vien:#D6E8DC; --vang:#FFF8E1; --navy:#07403F; --navy2:#118C60; }
}
body{font-family:"Quicksand",system-ui,sans-serif;font-weight:500;background:var(--nen) radial-gradient(circle at 1px 1px,rgba(7,64,63,.05) 1px,transparent 0) 0 0/22px 22px}
b,strong,h1,h2,h3,h4{font-weight:700}

/* đầu trang: dải xanh rêu */
.dau{display:block;max-width:none;padding:0;background:var(--rieu);position:sticky;top:0;z-index:10}
.dau-trong{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo-anh{width:38px;height:38px;border-radius:50%;background:#fff;padding:2px}
.logo-ten{color:#fff;font:800 19px/1 var(--tron);letter-spacing:.5px}
.logo-ten small{color:#A9E6B0;font:600 12px/1.3 "Quicksand";letter-spacing:0}
.dau-nav a{color:#fff;background:rgba(255,255,255,.12);border-radius:99px;padding:6px 14px}
.nhan-thu{color:#A9E6B0;border-color:rgba(255,255,255,.25)}
main{padding-top:18px}

/* nút: cam đậm có gờ, giống nút dungmori.com */
.nut{border-radius:99px;border:2px solid var(--vien);font-family:"Quicksand";font-weight:700}
.nut-chinh{background:var(--cam);border-color:var(--cam);box-shadow:0 4px 0 var(--cam2);color:#fff}
.nut-chinh:hover{background:#F27A33;border-color:#F27A33}
.nut-chinh:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cam2)}
.nut-vien{border-color:#fff;color:#fff;background:transparent}

/* tiêu đề mục: chữ tròn đậm, nửa sau xanh lá */
.td,.the h2{font:800 26px/1.2 var(--tron);color:var(--rieu)}
.td span,.the h2 span{color:var(--la);text-shadow:0 2px 0 rgba(7,64,63,.12)}
.the h2{font-size:22px}

/* hero kiểu banner dungmori.com: nền xanh lá, chữ trắng, bảng gỗ bên phải */
.hero{grid-template-columns:1fr 1.05fr;background:linear-gradient(135deg,#2FA84F,#57D061 55%,#7FDB6A);border-radius:24px;box-shadow:var(--bong);position:relative;overflow:visible}
.hero-noi{padding:34px 30px;color:#fff}
.hero-tag{display:inline-block;align-self:flex-start;background:#fff;color:var(--rieu);border-radius:99px;padding:4px 14px;font:700 13px "Quicksand";letter-spacing:0;text-transform:none}
.hero-noi h1{font:800 40px/1.08 var(--tron);margin:12px 0 12px;color:#fff;text-shadow:0 3px 0 rgba(7,64,63,.25)}
.hero-noi h1 em{font-style:normal;color:var(--phan);display:inline-block;transform:rotate(-2deg)}
.hero-noi p{color:#F0FFF2;font-weight:600}
.hero-anh{position:relative;min-height:0;overflow:visible;padding:22px 22px 22px 0;display:flex;align-items:center}
.hero-bang{position:relative;width:100%;aspect-ratio:16/10;border:10px solid var(--go);border-radius:14px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.15);background:var(--bang)}
.hero-nen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-nv{position:absolute;bottom:0;height:88%}
.hero-mori{position:absolute;left:-46px;bottom:-14px;width:110px;transform:rotate(-8deg);filter:drop-shadow(0 6px 6px rgba(0,0,0,.2))}

/* thẻ bước, nhân vật, BJT */
.buoc div,.nvs div,.bjt div{border:2px solid var(--vien);box-shadow:none;border-radius:20px}
.buoc .i i{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--la);color:#fff;font:800 20px/1 var(--tron);font-style:normal;box-shadow:0 3px 0 #3BA548}
.buoc b{font-size:17px;color:var(--rieu)}
.nvs div{background:linear-gradient(180deg,#fff 55%,var(--la-nhat))}
.bjt b{color:var(--rieu);font-size:17px}

/* lộ trình */
.chang{border:2px solid var(--vien);box-shadow:none;border-radius:22px}
.chang-dau{background:var(--rieu);position:relative}
.chang-dau::after{content:"";position:absolute;right:-10px;top:-10px;width:90px;height:90px;border-radius:50%;background:rgba(87,208,97,.18)}
.chang-so{background:var(--la);color:var(--rieu);box-shadow:0 3px 0 #3BA548}
.chang-so b{font-family:var(--tron)}
.chang-dau h3{font:800 21px/1.2 var(--tron)}
.chang-muc{background:var(--phan);color:var(--rieu);position:relative;z-index:1}
.chu-de h4{color:var(--rieu)}
.bai-so{background:var(--la-nhat);color:var(--navy2)}
.bai-ds li.co .bai-so{background:var(--la);color:#fff;box-shadow:0 2px 0 #3BA548}
.bai-cho{border-style:solid;background:#F4F6F5}
.cap div{border-radius:14px}

/* giới thiệu cảnh */
.the-gt{border:2px solid var(--vien);box-shadow:none;border-radius:22px}
.gt-anh{background:var(--bang)}
.gt-so{color:var(--navy2);letter-spacing:.3px;text-transform:none;font-size:14px}
.gt-noi h1{font:800 28px/1.15 var(--tron);color:var(--rieu)}
.gt-bc{background:var(--la-nhat);border-left:4px solid var(--la)}
.gt-cach span{background:#fff;border:2px solid var(--vien);font-weight:600}

/* sân khấu: khung gỗ như bảng lớp học */
.san{border:8px solid var(--go);border-radius:16px;box-shadow:0 6px 0 rgba(0,0,0,.12)}
.tien-do div{background:var(--la)}
.dt{background:var(--rieu);border-radius:14px}
.dt.noi{outline-color:var(--phan)}

/* khung thoại = bảng xanh, chữ phấn */
.khung{background:var(--bang);color:#fff;border:8px solid var(--go);border-radius:16px;box-shadow:0 6px 0 rgba(0,0,0,.12);
  background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.07),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(0,0,0,.18),transparent 60%)}
.k-ten{display:inline-block;background:var(--cam);color:#fff;border-radius:8px;padding:2px 10px;font-family:var(--jp)}
.k-ten small{color:#FFE2CE;font-family:"Quicksand"}
.cong{color:#CFE5DA}
.cong input{accent-color:var(--la)}
.k-ja{color:#fff;text-shadow:0 0 1px rgba(255,255,255,.4)}
.k-ja rt,.khung rt{color:#BFE3CF}
.k-ja.dan{color:#CFE5DA}
.gc{border-bottom:2px dashed var(--phan)}
.gc:hover,.gc.chon{background:rgba(255,228,122,.18)}
.k-vi{color:var(--phan);border-left-color:rgba(255,228,122,.5)}
.k-ghi button{background:rgba(255,255,255,.1);color:var(--phan);border:1px dashed rgba(255,228,122,.6)}
.khung .nut{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.khung .nut:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.khung .nut-chinh{background:var(--cam);border-color:var(--cam);box-shadow:0 4px 0 var(--cam2)}
.k-chon .hoi{color:var(--phan)}
.k-chon .hoi::before{content:"Đến lượt bạn · "}
.khung .lc{background:#FFFDF6;color:var(--chu);border:0;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.khung .lc:hover{background:#fff}
.khung .lc.sai{background:#FFE9E4}
.khung .lc.dung{background:#E6F7E8}
.khung .lc rt{color:var(--nhat)}

/* Mori giải thích */
.pop{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--la);border-radius:18px}
.pop-mori{width:54px;height:54px;object-fit:cover;object-position:center 30%;border-radius:50%;background:var(--la-nhat);flex:none}
.pop-ai{font:700 12px "Quicksand";color:var(--navy2);text-transform:uppercase;letter-spacing:.6px}
.pop-cum{color:var(--cam2)}

/* ôn + bài */
.the{border:2px solid var(--vien);box-shadow:none;border-radius:22px}
.cot{position:relative;background:var(--la-nhat);border-color:#BFE6C6;padding-left:96px;min-height:110px}
.cot-mori{position:absolute;left:14px;top:16px;width:68px;height:68px;object-fit:cover;object-position:center 30%;border-radius:50%;background:#fff}
.cot h3{color:var(--rieu)}
.cau-dang{background:var(--la);color:#fff;border-radius:99px;padding:2px 10px}
.giai.ok::before{content:"Chính xác! "}
.giai.no::before{content:"Chưa đúng. "}
.ket{background:var(--la-nhat);color:var(--rieu);border:2px dashed var(--la)}
.tl::before{background:var(--la)}
.chan{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}

@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .hero-noi{padding:24px 18px 6px}
  .hero-noi h1{font-size:32px}
  .hero-anh{padding:12px 16px 20px}
  .hero-mori{left:auto;right:4px;bottom:6px;top:auto;width:72px}
  .k-ten small{display:none}
  #nutNghe{font-size:20px}
  .td{font-size:22px}
  .san,.khung{border-width:6px}
  .cot{padding-left:18px;padding-top:86px}
  .dau-nav a{padding:5px 10px}
}
.luyen-dau{background:linear-gradient(135deg,#2FA84F,#57D061);color:#fff;border:0}
.luyen-dau h1{font:800 30px/1.15 var(--tron);color:#fff}
.luyen-dau .gt-so{color:#E8FFE9}
.luyen-dau .gt-ja{color:#fff;font-size:18px}
.luyen-dau p{color:#F0FFF2;font-weight:600}
.ly-tu div{background:var(--la-nhat)}
.ly-cach{padding-left:22px}
.ly-cach li::marker{color:var(--la);font-weight:800}
.kb summary{color:var(--navy2)}

/* 09/11: nhân vật Gungun vẽ đen trắng → nền cảnh cũng ngả xám nhạt cho cùng một nét, như tranh trong sách */
.san-nen, .cau-tranh img:first-child, #gtNen{filter:grayscale(.9) contrast(.85) brightness(1.08)}
#tcPdf{border-color:#EC6E23;color:#fff;background:#EC6E23;margin-top:4px}
.nut-pdf{border-color:#EC6E23!important;color:#EC6E23!important;background:#fff!important}