/* ===== Lò Luyện Chữ — chữ to, nút to, tông cam ấm ===== */
:root{
  --nen:#FBF3EC; --nen2:#F5E6DA; --the:#FFFFFF;
  --chu:#3A2618; --chu-mo:#8A6A55; --vien:#EAD5C4;
  --cam:#C2410C; --cam-dam:#8F2F08; --vang:#F2A33A;
  --la:#2B9A62; --do:#D9463E; --xanh:#2E6FD6;
  --bong:rgba(58,38,24,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,var(--nen),var(--nen2));
  color:var(--chu);font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:600;min-height:100dvh;-webkit-text-size-adjust:100%;padding-bottom:40px}
h1{font-size:26px;margin:0;line-height:1.2}
h2{font-size:19px;margin:0}
p{margin:0}
.an{display:none !important}
.boc{max-width:680px;margin:0 auto;padding:16px 16px 24px}

.dau{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.phu{color:var(--chu-mo);font-size:14px;margin-top:4px}
.nut-ve{background:var(--the);border:2px solid var(--vien);color:var(--chu);
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;font-size:24px;line-height:1;
  cursor:pointer;box-shadow:0 3px 0 var(--bong)}

.the{background:var(--the);border:2px solid #fff;border-radius:20px;padding:16px;
  box-shadow:0 5px 0 var(--bong);margin-bottom:12px;font-size:16px;line-height:1.55}
.the-bam{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  cursor:pointer;font-family:inherit;color:inherit;font-weight:600}
.the-bam:active{transform:translateY(3px);box-shadow:0 2px 0 var(--bong)}
.bieu-tuong{font-size:34px;flex:0 0 46px;text-align:center}
.the-bam p{color:var(--chu-mo);font-size:14px;line-height:1.45;margin-top:3px}

.nut{display:block;width:100%;padding:15px;border-radius:16px;border:none;
  background:var(--cam);color:#fff;font-size:17px;font-weight:800;font-family:inherit;
  cursor:pointer;box-shadow:0 5px 0 var(--cam-dam);margin-bottom:12px}
.nut:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cam-dam)}
.nut.phu-nut{background:var(--the);color:var(--chu);border:2px solid var(--vien);box-shadow:0 4px 0 var(--bong)}
.nut.cam{background:var(--vang);color:#3A2618;box-shadow:0 5px 0 #B9741A}
.nut.la{background:var(--la);box-shadow:0 5px 0 #1C6E45}
.nut.do-nut{background:var(--do);box-shadow:0 5px 0 #A12F29}
.nut.nho{display:inline-block;width:auto;padding:9px 14px;font-size:14px;margin:0}
.nut:disabled{opacity:.5}
.hang{display:flex;gap:10px;flex-wrap:wrap}
.hang .nut{flex:1;min-width:130px}

/* số liệu */
.o-so{display:flex;gap:10px;margin-bottom:10px}
.o-so div{flex:1;background:var(--the);border-radius:16px;padding:12px 8px;text-align:center;box-shadow:0 4px 0 var(--bong)}
.o-so b{display:block;font-size:24px;color:var(--cam);font-weight:800}
.o-so span{font-size:13px;color:var(--chu-mo)}
.thanh-cap{height:10px;border-radius:10px;background:#fff;overflow:hidden;margin-bottom:8px}
.thanh-cap i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vang),var(--cam));transition:width .5s}

/* chọn công thức */
.chon{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chon button{flex:1;min-width:90px;padding:11px 6px;border-radius:14px;border:2px solid var(--vien);
  background:var(--the);color:var(--chu);font-family:inherit;font-weight:800;font-size:15px;
  cursor:pointer;box-shadow:0 3px 0 var(--bong)}
.chon button.dang{background:var(--cam);color:#fff;border-color:var(--cam);box-shadow:0 3px 0 var(--cam-dam)}

/* nhãn bước (màu theo thứ tự) */
.nhan{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:800;margin:0 6px 6px 0;color:#fff}
.m0{background:#D9463E}.m1{background:#E07B24}.m2{background:#C9A100}.m3{background:#2B9A62}
.m4{background:#2E6FD6}.m5{background:#7A5AE0}.m6{background:#B8408F}

/* xếp khối */
.khu{min-height:70px;border:2px dashed var(--vien);border-radius:18px;padding:10px;margin:6px 0 14px}
.khu-bai{background:#fff8f2}
.khoi{display:block;width:100%;text-align:left;background:var(--the);border:2px solid var(--vien);
  border-radius:14px;padding:11px 13px;margin-bottom:8px;font-family:inherit;font-size:16px;
  line-height:1.5;color:var(--chu);font-weight:600;cursor:pointer;box-shadow:0 3px 0 var(--bong)}
.khoi:active{transform:translateY(2px)}
.khoi .so{display:inline-block;min-width:24px;color:var(--cam);font-weight:800}
.khoi.dung{border-color:#8FD3AE;background:#EAF8F0}
.khoi.sai{border-color:#F0A9A4;background:#FDECEB}
.trong{color:var(--chu-mo);font-size:14px;text-align:center;padding:14px 0}

/* đấu trường */
.de-bai{border-left:6px solid var(--vang)}
.de-bai.nho{font-size:14px;padding:12px}
.dong-ho{font-size:44px;font-weight:800;text-align:center;color:var(--cam);margin-bottom:8px;font-variant-numeric:tabular-nums}
.dong-ho.het{color:var(--do)}
textarea,input{width:100%;font-family:inherit;font-size:17px;line-height:1.6;color:var(--chu);
  border:2px solid var(--vien);border-radius:16px;padding:14px;background:#fff;font-weight:600}
textarea{min-height:320px;resize:vertical;margin-bottom:12px}
textarea:focus,input:focus{outline:3px solid #F7C9A6;border-color:var(--cam)}
.goi-y summary{cursor:pointer;font-weight:800}
.goi-y ol{margin:10px 0 0;padding-left:20px}

/* kết quả chấm */
.diem-lon{font-size:56px;font-weight:800;line-height:1;text-align:center}
.xep-loai{text-align:center;font-size:18px;font-weight:800;margin:6px 0 10px}
.dong-cham{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid #F1E4D9}
.dong-cham:first-of-type{border-top:none}
.dong-cham .d{flex:0 0 48px;text-align:center;font-weight:800;border-radius:10px;padding:3px 0;font-size:15px}
.d-tot{background:#E3F6EC;color:#1C6E45}.d-vua{background:#FFF1DC;color:#9A5A0A}.d-te{background:#FDE7E6;color:#A12F29}
.cau-yeu{border-left:4px solid var(--do);padding:8px 12px;margin:10px 0;background:#FFF8F7;border-radius:0 12px 12px 0}
.cau-yeu .moi{border-left-color:var(--la)}
.canh-bao{background:#FDE7E6;border:2px solid #F3B7B4;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.ban-sua{white-space:pre-wrap}
.bai-goc{white-space:pre-wrap;color:var(--chu-mo);font-size:15px}

/* kho bài */
.muc-kho{display:flex;gap:12px;align-items:center}
.muc-kho .diem{flex:0 0 56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.muc-kho .nd{flex:1;min-width:0}
.muc-kho .nd p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.thong-bao{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--chu);color:#fff;
  padding:12px 20px;border-radius:14px;font-weight:700;z-index:9;max-width:90vw;text-align:center}

/* soi bài mẫu */
.bang-mau{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.bang-mau button{border:3px solid transparent;border-radius:999px;padding:6px 12px;color:#fff;
  font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;opacity:.55}
.bang-mau button.dang{opacity:1;border-color:var(--chu);transform:scale(1.05)}
.doan-soi{position:relative;border-left:8px solid var(--vien)}
.doan-soi .gan{display:block;margin-top:6px}
.doan-soi.b0{border-left-color:#D9463E}.doan-soi.b1{border-left-color:#E07B24}.doan-soi.b2{border-left-color:#C9A100}
.doan-soi.b3{border-left-color:#2B9A62}.doan-soi.b4{border-left-color:#2E6FD6}.doan-soi.b5{border-left-color:#7A5AE0}.doan-soi.b6{border-left-color:#B8408F}
/* điền chỗ trống */
.o-trong{border:2px dashed var(--cam);border-radius:14px;padding:12px;margin:8px 0;background:#FFF4EB;color:var(--cam);font-weight:800;text-align:center}
.doan-mo{color:var(--chu-mo)}
textarea.ngan{min-height:170px}

/* bài mẫu có xuống dòng */
.khoi,.doan-mo{white-space:pre-line}

/* ===== LÒ TU TỪ ===== */
.vach{display:flex;align-items:center;gap:10px;margin:22px 0 12px;color:var(--chu-mo);font-size:13px;font-weight:800}
.vach::before,.vach::after{content:"";flex:1;height:2px;background:var(--vien);border-radius:2px}
.vach span{white-space:nowrap}

.hang-so{display:flex;justify-content:space-between;font-weight:800;font-size:15px;margin-bottom:8px}
.hang-so span:last-child{color:var(--cam)}

.cau-do{font-size:21px;line-height:1.55;border-left:6px solid var(--cam);margin-bottom:10px}

.luoi-dap-an{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.dap-an{padding:15px 10px;border-radius:16px;border:2px solid var(--vien);background:var(--the);
  color:var(--chu);font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 0 var(--bong);line-height:1.3}
.dap-an:active{transform:translateY(2px);box-shadow:0 2px 0 var(--bong)}
.dap-an:disabled{opacity:1;cursor:default}
.dap-an.dung{background:#E3F6EC;border-color:#5FBF8C;color:#1C6E45;box-shadow:0 4px 0 #A7DCC1}
.dap-an.sai{background:#FDE7E6;border-color:#E08C86;color:#A12F29;box-shadow:0 4px 0 #EFBAB6}
@media (max-width:360px){ .luoi-dap-an{grid-template-columns:1fr} }

.giai-dung{border-left:6px solid var(--la)}
.giai-sai{border-left:6px solid var(--do)}

.bp-giao{border-left:6px solid var(--vang);background:#FFFBF4}
.bp-giao p{font-size:15px;line-height:1.5}

/* --- Bốc 3 lá --- */
.bo-la{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.the-la{background:var(--the);border-radius:20px;padding:14px 16px;border:2px solid var(--vien);
  box-shadow:0 5px 0 var(--bong);border-left-width:8px}
.the-la b{display:block;font-size:21px;line-height:1.3;margin-top:2px;font-family:inherit}
.the-la .la-nhan{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--chu-mo)}
.the-la p{font-size:14px;margin-top:5px;line-height:1.45}
.la-sp{border-left-color:var(--cam)}
.la-bp{border-left-color:var(--grape,#7A5AE0)}
.la-cx{border-left-color:var(--la)}
@media (min-width:620px){ .bo-la{grid-template-columns:1fr 1fr 1fr} .the-la b{font-size:18px} }

textarea.that-ngan{min-height:110px}

/* --- Nâng cấp bài nhạt --- */
.doan-nhat{border-left:6px solid var(--chu-mo);white-space:pre-line;line-height:1.65;color:var(--chu-mo)}
.tim-thay{border-left:4px solid var(--la);padding:8px 12px;margin:10px 0;background:#F1FAF5;border-radius:0 12px 12px 0}
.tim-thay.chua-dat{border-left-color:var(--vang);background:#FFF8EC}
.tim-thay .trich{margin:5px 0;font-style:italic}