/* =====================================================================
   Giao diện mẫu D: màu "vở ô li" (giấy kem kẻ ô, chữ xanh than, nhấn cam)
   + chữ đậm nghiêng, nút viền dày có bóng lệch. Ưu tiên màn hình máy tính.
   File này nạp sau app.css và ghi đè; bỏ dòng <link> là về giao diện cũ.
   ===================================================================== */
:root body.td.td.td{
  --paper:#FBF7EE; --surface:#FFFFFF; --surface-2:#F4EFE2;
  --grid:#DCE6F2; --grid-major:#B9C5D8; --line:#C9D3E3;
  --ink:#1F2A44; --ink-soft:#4B5875;
  --pen:#C2410C; --pen-soft:#FDE6D6;
  --sun:#FFC93C; --sun-soft:#FFF1C2;
  --leaf:#0E7A4B; --leaf-soft:#D2F4E5;
  --sky:#1E5BFF; --sky-soft:#DCE5FF;
  --pot:#C2410C;
  --hero:#1F2A44; --hero-ink:#FFFFFF; --hero-soft:#C9D3E8; --hero-grid:#2B3858; --on-accent:#FFFFFF;
  --hot:#E8590C;
  --display:"Be Vietnam Pro","Baloo 2",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
body.td{background-color:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 31px,#DCE6F2 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,#EEF2F8 31px 32px);background-attachment:fixed;padding-left:0;padding-right:0}
body.td .wrap{max-width:1200px;padding-inline:max(16px,env(safe-area-inset-left,0px))}
body.td #app{padding-top:24px}

/* ---------- chữ ---------- */
body.td h1,body.td h2,body.td h3{font-family:var(--display);font-weight:900;font-style:italic;letter-spacing:-.02em}
body.td .dash{display:inline-block;width:22px;height:10px;background:var(--hot);transform:skewX(-20deg);margin-right:10px;vertical-align:middle;font-style:normal}

/* ---------- thanh trên cùng ---------- */
body.td .top{position:sticky;top:0;z-index:20;display:block;background:var(--surface);border-bottom:3px solid var(--ink);padding:10px 0}
body.td .top-in{max-width:1200px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
body.td .brand{margin-right:0;font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:24px;letter-spacing:-.02em;line-height:1.1}
body.td .brand::after{left:0;right:0;bottom:-4px;height:5px;background:var(--hot);border-radius:0;transform:skewX(-20deg)}
body.td .brand small{font-style:normal;text-transform:none;color:var(--pen);font-weight:800}
body.td .tabs{flex:1;border:0;background:none;padding:0;gap:6px;flex-wrap:wrap;border-radius:0}
body.td .tabs button{border:2px solid transparent;border-radius:8px;padding:8px 14px;font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px}
body.td .tabs button:hover{border-color:var(--line);color:var(--ink)}
body.td .tabs button[aria-pressed="true"]{background:var(--sun-soft);border-color:var(--ink);color:var(--ink);font-weight:900;font-style:italic;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink)}
body.td .tabs .nb{background:var(--hot);color:#FFFFFF;border-radius:6px;padding:0 6px;font-size:12px;font-style:normal;line-height:1.5}
body.td #navGames .nb{background:var(--ink)}
body.td #tabParent{margin-left:auto}
body.td .chips{gap:8px}
body.td .starchip{border:2px solid var(--ink);border-radius:8px;background:var(--sun);color:var(--ink);font-family:var(--display);font-weight:900;font-style:italic;transform:skewX(-8deg);padding:5px 12px}
body.td .starchip.tk{background:var(--surface)}
body.td .starchip.clk,body.td .starchip.sync{background:var(--surface);border-style:dashed;border-color:var(--grid-major);font-style:normal;transform:none}
@media (max-width:820px){body.td .tabs{order:3;flex-basis:100%}body.td #tabParent{margin-left:0}body.td .chips{margin-left:auto}}

/* ---------- nút ---------- */
body.td .primary{background:var(--pen);color:#FFFFFF;border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.03em}
body.td .primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
body.td .primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
body.td .ghost{border:2px solid var(--ink);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:800;box-shadow:2px 2px 0 var(--ink)}
body.td .ghost:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- trang chủ: hàng chào + nhiệm vụ ---------- */
body.td .hd-row{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
body.td .hd-hello{flex:1 1 320px;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
body.td .who{margin:0}
body.td .avatar{width:50px;height:50px;border-radius:10px;border:2px solid var(--ink);background:var(--sun);box-shadow:3px 3px 0 var(--hot);transform:rotate(-4deg);font-size:28px}
body.td .eyebrow{color:var(--ink-soft);text-transform:none;letter-spacing:0;font-size:14px}
body.td .hd-hello h1{font-size:clamp(30px,3.6vw,42px);line-height:1.08}
body.td .lede{margin:0;font-size:17px;font-weight:700;color:var(--ink-soft)}
body.td .lede b{color:var(--pen)}
body.td .tline{display:flex;align-items:center;gap:12px;color:var(--ink);font-family:var(--display);font-weight:900;font-style:italic}
body.td .tline .tbar{flex:0 1 300px}
body.td .tbar{height:16px;border:2px solid var(--ink);border-radius:4px;background:var(--surface)}
body.td .tbar i{background:var(--hot);border-radius:0}
body.td .today{flex:2 1 520px;margin:0;background:var(--surface);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:16px 20px 12px;gap:4px;align-content:start}
body.td .today-h h2{font-size:21px;text-transform:uppercase}
body.td .mcount{background:var(--sun-soft);border:2px solid var(--ink);border-radius:6px;font-family:var(--display);font-style:italic;font-weight:900}
body.td .mcount.all{background:var(--leaf-soft);color:var(--leaf);border-color:var(--leaf)}
body.td .missions{gap:0}
body.td .ms{background:none;border:0;border-top:2px dashed var(--line);border-radius:0;padding:10px 0}
body.td .ms .ck{border:2px solid var(--ink);border-radius:6px;transform:none;width:28px;height:28px}
body.td .ms.done{background:none}
body.td .ms.done .ck{background:var(--leaf-soft);border-color:var(--ink);color:var(--leaf)}
body.td .ms .mtx small{text-transform:none;letter-spacing:0;font-size:12px}
body.td .ms .mtx b{font-family:var(--body);font-weight:800;font-size:16px}
body.td .ms.done .mtx b{color:var(--ink-soft)}
body.td .okt{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;color:var(--leaf)}
body.td .mfoot{padding-top:8px;border-top:2px dashed var(--line)}

/* ---------- tab môn học (bìa vở) ---------- */
body.td .subtabs{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-bottom:3px solid var(--ink);scroll-margin-top:90px}
body.td .subtabs button{border:3px solid transparent;border-bottom:0;background:none;border-radius:12px 12px 0 0;padding:10px 22px 8px;box-shadow:none;margin-bottom:-3px}
body.td .subtabs button span{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:16px;color:var(--ink-soft)}
body.td .subtabs button small{color:var(--ink-soft)}
body.td .subtabs button:hover span{color:var(--ink)}
body.td .subtabs button[aria-selected="true"]{background:var(--surface);border-color:var(--ink);box-shadow:none}
body.td .subtabs button[aria-selected="true"] span{color:var(--pen);font-weight:900}
body.td .subtabs button[aria-selected="true"] small{color:var(--ink-soft)}
@media (max-width:640px){body.td .subtabs{gap:6px;border-bottom:0}body.td .subtabs button{flex:1 1 40%;border:2px solid var(--ink);border-radius:10px;margin:0;background:var(--surface)}body.td .subtabs button[aria-selected="true"]{background:var(--sun-soft)}}
body.td .tabpane{background:var(--surface);border:3px solid var(--ink);border-top:0;border-radius:0 0 14px 14px;padding:18px 18px 24px}
@media (max-width:640px){body.td .tabpane{border:0;background:none;padding:14px 0 0}}
body.td .tabsum{color:var(--ink-soft)}
body.td .tabsum .tbar{height:12px}

/* ---------- thẻ mục học ---------- */
body.td .cats{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
body.td .cat{background:var(--surface);border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);padding:14px;gap:10px}
body.td .cat.today{border-color:var(--leaf);box-shadow:5px 5px 0 var(--leaf)}
body.td .cat-h .ic{width:46px;height:46px;border:2px solid var(--ink);border-radius:10px;background:var(--sun-soft);transform:rotate(-5deg);font-size:26px}
body.td .cat-h h3{font-size:19px}
body.td .badge-ok{background:var(--leaf);border-radius:6px}
body.td .mode{border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);background:var(--surface);padding:9px 12px}
body.td .mode:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
body.td .mode:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
body.td .mode .mt b{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
body.td .mode .md{color:var(--ink-soft)}
body.td .mode.adv{background:var(--hero);color:var(--hero-ink)}
body.td .mode.adv .mt b::after{content:" ★";color:var(--sun)}
body.td .mode.adv .md,body.td .mode.adv .lv{color:var(--hero-soft)}
body.td .mode.adv .mck{border-color:var(--hero-soft)}
body.td .pips i{width:16px;height:7px;border-radius:1px;transform:skewX(-20deg)}
body.td .pips i.on{background:var(--hot)}
body.td .mode.adv .pips i{background:#3A4766} body.td .mode.adv .pips i.on{background:var(--sun)}
body.td .mck{border-radius:5px;border-color:var(--ink)}
body.td .mode.done .mck{background:var(--leaf);border-color:var(--leaf)}
body.td .st{border-radius:6px}
body.td .mode.adv .st{background:#2B3858;color:var(--hero-soft)}
body.td .mode.adv .st-done{background:var(--leaf-soft);color:var(--leaf)}
body.td .mode.adv .st-new{background:transparent;color:var(--hero-soft);border-color:#56637F}

/* ---------- khu vui chơi (trang riêng) ---------- */
body.td .pg-page{display:grid;gap:16px}
body.td .pg-title{font-size:30px;text-transform:uppercase}
body.td .playground{margin:0;background:var(--surface);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:18px 20px}
body.td .pg-h .ic{border:2px solid var(--ink);border-radius:10px;background:var(--sun-soft);transform:rotate(-5deg)}
body.td .ticket{border:2px solid var(--ink);border-radius:8px;background:var(--sun);font-family:var(--display);font-style:italic;font-weight:900;transform:skewX(-8deg)}
body.td .games{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
body.td .gcard{background:var(--surface);border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);padding:16px 8px}
body.td .gcard:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
body.td .gcard b{font-family:var(--display);font-style:italic;font-weight:900}
body.td .gcard.locked{opacity:.6;box-shadow:none;border-style:dashed}

/* ---------- làm bài: đề trái, đáp án phải ---------- */
body.td .playbar{background:var(--surface);border:3px solid var(--ink);border-radius:12px;padding:10px 14px;margin-bottom:22px;box-shadow:4px 4px 0 var(--ink)}
body.td .ptopic{font-family:var(--display);font-style:italic;font-weight:900;color:var(--ink);font-size:18px}
body.td .dots i{width:26px;height:11px;border-radius:2px;transform:skewX(-15deg);background:#D5DCE8}
body.td .dots i.cur{background:var(--hot);transform:skewX(-15deg) scale(1.2)}
body.td .dots i.ok{background:var(--leaf)} body.td .dots i.miss{background:var(--sun)}
body.td .sheet{background:var(--surface);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink)}
body.td .sheet::before{opacity:.35}
body.td .qnum{font-family:var(--display);font-style:italic;font-weight:900;background:var(--hot);color:#FFFFFF;padding:2px 10px;border-radius:6px;transform:skewX(-8deg)}
body.td .qtext{font-family:var(--display);font-weight:800}
body.td .speak{border:2px solid var(--ink);border-radius:10px;background:var(--sun-soft);box-shadow:3px 3px 0 var(--ink)}
body.td .playgrid.two{display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}
body.td .playgrid.two .qsheet{flex:3 1 520px;min-width:0;align-self:flex-start}
body.td .playgrid.two .qsheet .visual{min-height:200px;justify-content:center}
body.td .acol{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
body.td .khint{margin:0;font-weight:800;font-size:14px;color:var(--ink-soft)}
@media (hover:none){body.td .khint{display:none}}
body.td .acol .answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.td .acol .answers.long{grid-template-columns:1fr;gap:12px}
body.td .acol .answers.pics{grid-template-columns:repeat(2,minmax(0,1fr))}
body.td .choice{position:relative;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);background:var(--surface);font-family:var(--display);font-weight:900;min-height:78px}
body.td .answers.long .choice{font-family:var(--body);font-weight:800;min-height:58px;padding-left:40px}
body.td .choice:hover:not(:disabled){border-color:var(--ink);box-shadow:5px 5px 0 var(--sky);transform:translate(-1px,-1px)}
body.td .choice:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
body.td .choice.right{border-color:var(--leaf);background:var(--leaf-soft);box-shadow:4px 4px 0 var(--leaf);color:#0B4D31}
body.td .choice.wrong{border-color:var(--pen);background:var(--pen-soft);box-shadow:4px 4px 0 var(--pen)}
body.td .choice .kn,body.td .choice.pic .kn{position:absolute;top:5px;left:9px;font-family:var(--body);font-size:12px;font-weight:800;color:var(--ink-soft);line-height:1}
@media (hover:none){body.td .choice .kn{display:none}body.td .answers.long .choice{padding-left:16px}}
body.td .fb{border:3px solid var(--ink);border-radius:12px;background:var(--surface)}
body.td .fb b{font-family:var(--display);font-style:italic;font-weight:900}
body.td .fb.ok{border-color:var(--leaf);background:var(--surface)}
body.td .fb.ok b{color:#0B4D31}
body.td .fb.hint{border-color:#B7791F;background:var(--sun-soft)}
body.td .fb.reveal{border-color:var(--sky);background:var(--sky-soft)}
body.td .stamp{border-color:var(--pen);color:var(--pen);font-family:var(--display);font-weight:900}
body.td .acol .fb .primary{width:100%}
body.td .result .grade{border-radius:6px;font-style:italic;font-family:var(--display);font-weight:900}
body.td .tile{border:3px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);font-family:var(--display);font-weight:800}
body.td .wallet .note{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}

/* ---------- trang bố mẹ ---------- */
body.td .card{border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink)}
body.td .ph h1{text-transform:none}
body.td .tline span{white-space:nowrap}
body.td .playground .pg-h h3{font-size:26px;text-transform:uppercase}
@media (max-width:640px){body.td .tabs button{padding:6px 10px;font-size:14px}body.td .brand{font-size:21px}body.td .hd-hello h1{font-size:30px}body.td .today{padding:12px 14px 10px}}

/* ---------- sửa chỗ viền mờ / chữ trắng trên nền trắng ---------- */
:root body.td.td.td{--dash:#7D8AA3}
/* các ô trên thanh đầu trang: viền đậm, chữ đậm, không dùng chữ trắng */
body.td .top .starchip{border:2px solid var(--ink);border-style:solid;color:var(--ink);transform:skewX(-8deg);box-shadow:2px 2px 0 var(--ink);padding:5px 12px;font-style:italic;font-weight:900;min-width:0}
body.td .top .starchip.tk{background:var(--sky-soft);color:var(--ink)}
body.td .top .starchip.clk{background:var(--surface)}
body.td .top .starchip.clk.goal{background:var(--leaf-soft);color:#0B4D31}
body.td .top .starchip.clk.paused{opacity:1;background:var(--surface-2);color:var(--ink-soft)}
body.td .top .starchip.sync{background:var(--surface);font-style:normal;font-weight:800;font-size:14px}
body.td .top .starchip.sync[data-s="offline"],body.td .top .starchip.sync[data-s="error"]{background:var(--sun-soft)}
@media (max-width:640px){body.td .top .starchip{padding:4px 9px;font-size:14px}}
/* hộp thoại */
body.td .modal{background:color-mix(in srgb,var(--ink) 55%,transparent)}
body.td .mbox{border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink)}
body.td .mbox input{border:2px solid var(--ink);background:var(--surface)}
body.td .gopt{border:2px solid var(--ink);background:var(--surface);border-radius:10px;box-shadow:2px 2px 0 var(--ink)}
body.td .gopt[aria-pressed="true"]{background:var(--sun-soft);border-color:var(--ink);box-shadow:3px 3px 0 var(--hot)}
body.td .gopt[aria-pressed="true"]::after{content:"✓ Đang chọn";font-size:11px;font-weight:900;color:var(--pen)}
/* ô nhập, ô chọn */
body.td .wrap .form input,body.td .wrap .form select,body.td .wrap select,body.td .wrap input[type=text],body.td .wrap input[type=password],body.td .wrap input[type=number],body.td .wrap input[type=time]{border:2px solid var(--ink-soft);border-radius:8px;background:var(--surface)}
body.td .wrap .form input:focus,body.td .wrap select:focus{border-color:var(--ink);outline:3px solid var(--sun);outline-offset:1px}
/* viền đứt: đậm hơn */
body.td .pc-none,body.td .st-new,body.td .key .k-new{border-color:var(--dash)}
body.td .st-new{color:var(--ink-soft)}
body.td .tray{border-color:var(--dash);border-width:3px;background:var(--surface)}
body.td .gcard.locked{border-color:var(--dash)}
/* thanh tiến độ ở mọi nơi có viền */
body.td .tbar{border:2px solid var(--ink);background:var(--surface)}
body.td .card .tbar{height:12px}
/* đáp án sai: vẫn đọc rõ */
body.td .choice.wrong:disabled{opacity:1;color:var(--pen)}
/* hộp thưởng ở trang kết quả */
body.td .reward{border:3px solid var(--ink);border-radius:12px;background:var(--sun-soft);box-shadow:4px 4px 0 var(--ink)}
/* bảng tiến độ trang bố mẹ */
body.td .prog tr.pgrp th{background:var(--sun-soft);color:var(--ink)}
body.td .prog th,body.td .prog td{border-bottom-color:#D5DCE8}
body.td .kidrow{border:2px solid var(--ink-soft)}

/* ---------- trang bố mẹ: chia tab ---------- */
body.td .ph{margin-bottom:10px}
body.td .ph h1{font-size:clamp(24px,3vw,30px)}
body.td .ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
body.td .ptabs button{border:2px solid var(--ink);border-radius:8px;background:var(--surface);padding:8px 16px;font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
body.td .ptabs button[aria-selected="true"]{background:var(--sun);font-style:italic;font-weight:900;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink)}
body.td .pv>.cols:first-child,body.td .pv>.cols3:first-child{margin-top:0}
body.td .pv .cols{align-items:start}
body.td .pv .tiles+.cols,body.td .pv .tiles+.card{margin-top:16px}
body.td .pv[data-pv="prog"] .card{max-width:900px}
@media (max-width:760px){body.td .cols{grid-template-columns:1fr}body.td .tiles{grid-template-columns:1fr}}
@media (min-width:900px){
  body.td .pv[data-pv="set"] .card:first-child .form,body.td .pv[data-pv="today"] .cols>.card:first-child .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-items:end}
  body.td .pv[data-pv="set"] .card:first-child .form>:not(label),body.td .pv[data-pv="today"] .cols>.card:first-child .form>:not(label){grid-column:1/-1}
}
body.td .meter{border:2px solid var(--ink);border-radius:4px;background:var(--surface);height:12px}
body.td .meter i{background:var(--hot)}

/* ---------- vào thẳng trang bố mẹ ---------- */
.sp-go.parent-go{margin-top:16px;background:var(--sp-glass);color:var(--sp-white);border:2px solid var(--sp-line);box-shadow:none}
.sp-go.parent-go:hover{background:rgba(255,255,255,.18)}
body.td .pkids{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
body.td .pkid{border:2px solid var(--ink);border-radius:8px;background:var(--surface);padding:6px 12px;font-family:var(--display);font-weight:800;box-shadow:2px 2px 0 var(--ink)}
body.td .pkid small{font-weight:700;color:var(--ink-soft)}
body.td .pkid[aria-pressed="true"]{background:var(--sun);font-style:italic;font-weight:900}
.modal{z-index:80}