/* ✍️ SỔ CHỮ CỦA TÔI — khu luyện viết chữ riêng của từng học viên (28/8/2026).
   Tự chứa, prefix .sc-. Cùng bảng màu kem/ô-liu với "✍️ Luyện viết chữ" (luyen-viet-chu.css) để hai khu
   nhìn là một nhà; nhưng KHÔNG dùng chung tên lớp, tránh đè lẫn nhau.
   Mọi vùng chạm ≥ 48px (học viên trung niên) · ô nhập ≥16px (Safari iOS khỏi tự phóng trang). */

.sc-ov{ position:fixed; inset:0; z-index:1450; display:none; background:var(--sc-kem,#FBF7F0);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sc-ov.open{ display:block; }
.sc-ov{ --sc-kem:#FBF7F0; --sc-kem2:#F4EDE1; --sc-muc:#2E2A24; --sc-mo:#7A7166; --sc-oliu:#6B7A4F;
  --sc-oliu-d:#55643D; --sc-mut:#C89A3C; --sc-do:#C0392B; --sc-xanh:#2F6FA8; --sc-vien:#E2D8C6;
  color:var(--sc-muc); font-family:inherit; }

/* ---- thanh trên cùng (dính) ---- */
.sc-head{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px; background:linear-gradient(165deg,#3c4720,#2c3419);
  color:#f6efdd; border-bottom:2px solid #a9781f; }
.sc-head .sc-back{ background:rgba(255,255,255,.18); border:none; color:#fff; min-height:44px; padding:0 14px;
  border-radius:22px; font-size:1rem; font-weight:700; cursor:pointer; font-family:inherit; }
.sc-head .sc-back.sc-nhat{ background:rgba(255,255,255,.10); font-weight:600; }
/* Hai đường về (4/9/2026) — khi học viên đến từ 📚 Kho chữ Hán. Màn hẹp thì cắt phần đuôi của nhãn
   ("Hán", "học viên") chứ KHÔNG thu nhỏ nút: vùng chạm phải giữ ≥44px cho học viên lớn tuổi. */
.sc-head .sc-back .sc-dai{ display:inline; }
@media (max-width:520px){
  .sc-head .sc-back .sc-dai{ display:none; }
  .sc-head .sc-back{ padding:0 11px; font-size:.94rem; }
}
.sc-head .sc-t{ font-weight:800; font-size:1.1rem; flex:1; color:#e9dcb6; letter-spacing:-.01em; }
/* Có hai nút thì tiêu đề nhường chỗ trước — thà tiêu đề bị cắt còn hơn nút bị bóp. */
.sc-head .sc-t.sc-hep{ font-size:1rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:400px){ .sc-head .sc-t.sc-hep{ display:none; } }
.sc-head .sc-ic{ background:rgba(255,255,255,.18); border:none; color:#fff; width:44px; height:44px;
  border-radius:50%; font-size:1.05rem; cursor:pointer; flex:none; }

/* ---- thẻ chuyển mục ---- */
.sc-tabs{ display:flex; gap:8px; padding:12px 14px 0; overflow-x:auto; scrollbar-width:none; }
.sc-tabs::-webkit-scrollbar{ display:none; }
.sc-tab{ flex:none; border:1px solid var(--sc-vien); background:#fff; border-radius:999px; padding:0 16px;
  min-height:48px; font-size:1rem; font-family:inherit; color:var(--sc-muc); cursor:pointer;
  display:flex; align-items:center; gap:7px; transition:transform .15s cubic-bezier(.34,1.4,.64,1); }
.sc-tab:active{ transform:scale(.965); }
.sc-tab.on{ background:var(--sc-oliu); border-color:var(--sc-oliu); color:#fff; font-weight:700; }
.sc-tab .sc-dem{ background:rgba(0,0,0,.12); border-radius:999px; padding:1px 8px; font-size:.82rem; font-weight:700; }
.sc-tab.on .sc-dem{ background:rgba(255,255,255,.25); }

.sc-body{ padding:14px 14px calc(30px + env(safe-area-inset-bottom)); max-width:1100px; margin:0 auto; }
.sc-loi{ background:#fdecea; border:1px solid #f5c6c2; color:var(--sc-do); border-radius:14px;
  padding:12px 14px; font-size:.95rem; margin-bottom:12px; }
.sc-trong{ text-align:center; color:var(--sc-mo); padding:34px 16px; font-size:1rem; line-height:1.6; }
.sc-trong .sc-to{ font-size:2.6rem; display:block; margin-bottom:8px; }

/* ---- nút chung ---- */
.sc-nut{ border:1px solid var(--sc-vien); background:#fff; color:var(--sc-muc); border-radius:14px;
  min-height:48px; padding:0 16px; font-size:1rem; font-family:inherit; cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:transform .15s cubic-bezier(.34,1.4,.64,1); }
.sc-nut:active{ transform:scale(.965); }
.sc-nut.sc-chinh{ background:var(--sc-oliu); border-color:var(--sc-oliu); color:#fff; font-weight:700; }
.sc-nut.sc-nhe{ background:var(--sc-kem2); }
.sc-nut.sc-xoa{ background:#fdecea; border-color:#f0c8c4; color:var(--sc-do); }
.sc-nut[disabled]{ opacity:.5; cursor:default; }
.sc-hang{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }

/* ---- thẻ chữ trong lưới sổ ---- */
.sc-luoi{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
.sc-o{ position:relative; background:#fff; border:1px solid var(--sc-vien); border-radius:16px;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  font-family:inherit; transition:transform .15s cubic-bezier(.34,1.4,.64,1); }
.sc-o:active{ transform:scale(.965); }
.sc-o .sc-han{ font-size:2.5rem; line-height:1; color:var(--sc-muc); }
.sc-o .sc-cham{ position:absolute; top:8px; right:8px; width:11px; height:11px; border-radius:50%; background:var(--sc-vien); }
.sc-o.sc-loi-nguoi{ border-color:#e6b7b2; background:#fff8f7; }
.sc-o.sc-loi-nguoi .sc-cham{ background:var(--sc-do); }
.sc-o.sc-dat .sc-cham{ background:var(--sc-oliu); }
.sc-o .sc-vd{ position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:.66rem; color:var(--sc-mo); }

/* ---- thẻ chữ cần ôn (to, một cột trên điện thoại) ---- */
.sc-the{ background:#fff; border:1px solid var(--sc-vien); border-radius:18px; padding:14px; margin-bottom:12px;
  display:flex; gap:14px; align-items:flex-start; }
.sc-the .sc-mat{ flex:none; width:76px; height:76px; border-radius:14px; background:var(--sc-kem2);
  display:flex; align-items:center; justify-content:center; font-size:2.5rem; line-height:1; }
/* Nút trong thẻ chữ: gọn hơn nút thường để ba nút nằm vừa MỘT hàng ở màn 375px (vẫn ≥44px chạm được). */
.sc-nut.sc-gon{ min-height:44px; padding:0 12px; font-size:.94rem; border-radius:12px; }
.sc-hang-nut{ margin:10px 0 0; gap:8px; }
.sc-the .sc-phu{ margin-top:2px; }
.sc-the .sc-noi{ flex:1; min-width:0; }
.sc-the .sc-ten{ font-weight:800; font-size:1.05rem; }
.sc-the .sc-phu{ font-size:.88rem; color:var(--sc-mo); margin-top:3px; line-height:1.5; }
.sc-nhan{ display:inline-flex; align-items:center; gap:5px; background:#fdf1ef; border:1px solid #f0cec9;
  color:#a33a2d; border-radius:999px; padding:4px 11px; font-size:.8rem; font-weight:700; margin:4px 6px 0 0; }
.sc-nhan.sc-tot{ background:#f1f5ea; border-color:#d5e0c2; color:var(--sc-oliu-d); }

/* ---- khung viết trên màn hình ---- */
.sc-viet-khung{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.sc-o-viet{ position:relative; width:min(320px,86vw); aspect-ratio:1/1; background:#fff;
  border:2px solid var(--sc-vien); border-radius:18px; overflow:hidden; touch-action:none; }
.sc-o-viet svg, .sc-o-viet canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sc-o-viet .sc-ke{ stroke:#e8ddc8; stroke-width:2; }
.sc-o-viet .sc-mo-net{ fill:#e7dcc7; }
.sc-o-viet .sc-xong-net{ fill:#6B7A4F; }
.sc-o-viet .sc-goi-net{ fill:none; stroke:#C89A3C; stroke-width:14; stroke-linecap:round; stroke-dasharray:26 22; }
.sc-viet-tt{ font-size:1rem; font-weight:700; min-height:26px; text-align:center; }
.sc-viet-tt.sc-ok{ color:var(--sc-oliu-d); }
.sc-viet-tt.sc-sai{ color:var(--sc-do); }
.sc-kq{ background:var(--sc-kem2); border:1px solid var(--sc-vien); border-radius:16px; padding:14px;
  text-align:center; width:min(360px,90vw); }
.sc-kq .sc-diem{ font-size:2rem; font-weight:800; color:var(--sc-oliu-d); }

/* ---- video cách viết ---- */
.sc-video{ position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden;
  background:#000; margin:10px 0; }
.sc-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- nộp ảnh ---- */
.sc-anh-luoi{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin:10px 0; }
.sc-anh-o{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--sc-vien); background:#fff; }
.sc-anh-o img{ display:block; width:100%; height:auto; }
.sc-anh-o .sc-bo{ position:absolute; top:6px; right:6px; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(0,0,0,.55); color:#fff; font-size:.9rem; cursor:pointer; }
.sc-bai{ background:#fff; border:1px solid var(--sc-vien); border-radius:16px; padding:14px; margin-bottom:10px;
  cursor:pointer; }
.sc-bai .sc-tt{ font-size:.85rem; font-weight:700; border-radius:999px; padding:3px 10px; display:inline-block; }
.sc-bai .sc-tt.cho{ background:#fdf6e6; color:#8a6a1e; border:1px solid #ecd9a8; }
.sc-bai .sc-tt.dacham{ background:#f1f5ea; color:var(--sc-oliu-d); border:1px solid #d5e0c2; }

/* ảnh đã chấm: ghim lỗi trợ giảng khoanh lên ảnh */
.sc-anh-cham{ position:relative; }
.sc-ghim{ position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%;
  background:var(--sc-do); color:#fff; font-weight:800; font-size:.9rem; display:flex; align-items:center;
  justify-content:center; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3); }

/* ---- ô nhập ---- */
.sc-in{ width:100%; border:1px solid var(--sc-vien); border-radius:14px; padding:12px 14px; font-size:16px;
  font-family:inherit; background:#fff; color:var(--sc-muc); min-height:48px; }
textarea.sc-in{ min-height:90px; resize:vertical; }
.sc-nhan-tieu{ font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sc-mo); margin:16px 0 8px; }

/* ---- màn hình rộng: hai cột cho thẻ chữ ---- */
@media (min-width:760px){
  .sc-the{ display:grid; grid-template-columns:96px 1fr; }
  .sc-doi{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
}
@media (prefers-reduced-motion: reduce){
  .sc-nut, .sc-o, .sc-tab{ transition:none; }
}