/* Luyện tư duy — scoped under #tuduy so it cannot affect other hub screens. */
#tuduy [hidden]{display:none!important}
#tuduy .td-intro{font-size:15px;text-align:center;color:#5a628a;margin:2px 0 12px}
#tuduy .td-pickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#tuduy .td-shelf{grid-column:1/-1;margin:12px 0 0;font-size:18px;color:#2d3561}
#tuduy .td-pick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border:0;border-radius:20px;
  background:linear-gradient(135deg,#4d8cff,#7c5cff);color:#fff;font:inherit;box-shadow:0 5px 0 rgba(40,40,120,.25);cursor:pointer}
#tuduy .td-pick:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(40,40,120,.25)}
#tuduy .td-pick.mix{grid-column:1/-1;background:linear-gradient(135deg,#ff9f43,#ff6b9d)}
#tuduy .td-pick.review{grid-column:1/-1;background:linear-gradient(135deg,#1dd1a1,#0abde3)}
#tuduy .td-em{font-size:34px;line-height:1.1}
#tuduy .td-name{font-weight:800;font-size:17px;text-align:center}
#tuduy .td-sub{font-size:13px;opacity:.9}
#tuduy .td-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;font-size:15px;color:#5a628a}
#tuduy .td-prompt{display:flex;gap:8px;align-items:flex-start;justify-content:center;font-size:19px;font-weight:800;text-align:center;margin:8px 0 10px}
#tuduy .td-say{border:0;background:#efe8ff;border-radius:999px;font-size:18px;padding:4px 10px;cursor:pointer;flex:none}
#tuduy .td-visual{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 4px}

/* number boxes */
#tuduy .td-box{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 4px;border-radius:12px;
  background:#fff;border:3px solid #4d8cff;font-size:24px;font-weight:900;color:#2d3561;box-sizing:border-box;font-family:inherit}
#tuduy .td-box.td-plain{border-color:transparent;background:transparent;min-width:28px}
#tuduy .td-blank{border-style:dashed;border-color:#ff9f43;color:#ff9f43;cursor:pointer;background:#fff8ee}
#tuduy .td-blank.sel{box-shadow:0 0 0 4px rgba(255,159,67,.35);border-style:solid}
#tuduy .td-blank.filled{color:#2d3561}
#tuduy .td-blank.bad{border-color:#ee5253;color:#ee5253;animation:td-shake .35s}
#tuduy .td-blank.ok,#tuduy .td-box.shown{border-color:#1dd1a1;color:#10a37f;background:#eafff8;border-style:solid}
#tuduy .td-box.glow{box-shadow:0 0 0 5px rgba(254,202,87,.7);transform:scale(1.08);transition:.2s}
#tuduy .td-box.pop{animation:td-pop .45s}
#tuduy .td-op{font-size:26px;font-weight:900;margin:0 6px;color:#2d3561}
#tuduy .td-eqsign{color:#7c5cff}
#tuduy .td-eq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;font-size:20px;font-weight:800;gap:8px}

/* pyramid */
#tuduy .td-pyr{position:relative;width:min(300px,86vw);padding:6px 0 10px}
#tuduy .td-pyr-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#tuduy .td-pyr-bg path{fill:#fff3e6;stroke:#ff9f43;stroke-width:6;stroke-linejoin:round}
#tuduy .td-row{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;margin:8px 0}

/* chain */
#tuduy .td-chain{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;row-gap:12px;padding-top:30px;max-width:100%}
#tuduy .td-train{position:absolute;top:0;left:0;font-size:24px;transition:transform .6s ease}
#tuduy .td-link{display:inline-flex;align-items:flex-end;white-space:nowrap}
#tuduy .td-car{min-width:40px;height:42px;font-size:21px}
#tuduy .td-arrow{display:flex;flex-direction:column;align-items:center;font-size:13px;margin:0 1px;color:#7c5cff;min-width:26px}
#tuduy .td-arrow b{font-size:14px}
#tuduy .td-arrow i{font-style:normal;font-size:18px;line-height:1}
#tuduy .td-arrow.glow{color:#ff6b9d;transform:scale(1.2);transition:.2s}

/* sequence */
#tuduy .td-seq{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
#tuduy .td-seq .td-box{min-width:40px;height:44px;font-size:21px}

/* scales */
#tuduy .td-scales{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
#tuduy .td-scale{width:min(300px,86vw);position:relative;padding-bottom:16px}
#tuduy .td-pans{display:flex;justify-content:space-between}
#tuduy .td-pan{min-width:42%;display:flex;justify-content:center;align-items:center;gap:2px;padding:4px 6px;border-bottom:4px solid #a55eea;border-radius:0 0 30px 30px}
#tuduy .td-beam{height:5px;background:#2d3561;border-radius:3px;margin:0 6%}
#tuduy .td-pivot{width:0;height:0;margin:0 auto;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:16px solid #2d3561}
#tuduy .td-fruit{font-size:28px}
#tuduy .td-weight{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:10px;background:#feca57;font-weight:900;font-size:20px}
#tuduy .td-plus{font-weight:900;margin:0 2px}
#tuduy .td-ask{display:flex;align-items:center;gap:4px;margin-top:2px}

/* shapes */
#tuduy .td-fig{position:relative;width:min(300px,86vw)}
#tuduy .td-svg{width:100%;height:auto;display:block}
#tuduy .td-line{fill:none;stroke:#2d3561;stroke-width:4;stroke-linejoin:round}
#tuduy .td-cell{fill:#e8f7ff;stroke:#2d3561;stroke-width:4}
#tuduy .td-hl-shape{fill:rgba(255,107,157,.35);stroke:#ff6b9d;stroke-width:6;stroke-linejoin:round}
#tuduy .td-counter{position:absolute;top:4px;right:4px;background:#ff6b9d;color:#fff;font-weight:900;font-size:20px;border-radius:999px;padding:2px 12px;min-width:20px;text-align:center}
#tuduy .td-counter:empty{display:none}

/* keypad */
#tuduy .td-pad{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:12px}
#tuduy .td-choice-pad{grid-template-columns:repeat(2,minmax(0,1fr))}
#tuduy .td-choice-pad:has([data-choice="2"]:last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
#tuduy .td-key{height:48px;border:0;border-radius:14px;background:#eef3ff;color:#2d3561;font:inherit;font-size:22px;font-weight:900;box-shadow:0 3px 0 rgba(77,140,255,.35);cursor:pointer}
#tuduy .td-key:active{transform:translateY(2px);box-shadow:none}
#tuduy .td-key.del{background:#ffe9e9;color:#ee5253}
#tuduy .td-actions{display:flex;justify-content:center;gap:10px;margin-top:12px}
#tuduy .td-visual{max-width:100%;overflow:visible}
#tuduy .td-compare{width:100%;display:flex;justify-content:center;align-items:center;gap:7px}
#tuduy .td-side{display:flex;align-items:center;justify-content:center;min-width:0;flex:1;border-radius:16px;background:#eaf2ff;padding:16px 4px;font-size:clamp(19px,6vw,26px);font-weight:900;white-space:nowrap}
#tuduy .td-question{font-size:30px;color:#ff9f43;font-weight:900}
#tuduy .td-choice{border:3px solid #96b7ff;background:#f2f7ff;border-radius:14px;min-width:0;min-height:54px;padding:5px;font:inherit;font-weight:900;font-size:25px;color:#283158;cursor:pointer}
#tuduy .td-choice.chosen,#tuduy .td-order-slot.chosen{background:#ffe7ae;border-color:#ff9f43}
#tuduy .td-choice.shown,#tuduy .td-key.shown{background:#c5f5e5;border-color:#1dd1a1}
#tuduy .td-order-slots,#tuduy .td-order-source,#tuduy .td-position,#tuduy .td-number-choices,#tuduy .td-neighbor,#tuduy .td-odd{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;width:100%;max-width:390px}
#tuduy .td-order-slot{width:48px;height:52px;border:3px dashed #ff9f43;border-radius:12px;background:#fff8ee;font:inherit;font-size:22px;font-weight:900;color:#283158}
#tuduy .td-order-source .td-choice{min-width:42px}
#tuduy .td-number-choices .td-choice{min-width:50px}
#tuduy .td-position .td-choice{font-size:clamp(22px,7vw,30px);min-width:35px;flex:1}
#tuduy .td-odd .td-choice{width:calc(25% - 6px);padding:2px}
#tuduy .td-neighbor{font-size:20px;color:#7c5cff}
#tuduy .td-pattern{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px;width:min(100%,340px)}
#tuduy .td-symbol{display:inline-flex;align-items:center;justify-content:center;width:35px;height:40px;border-radius:8px;background:#f2f7ff;color:#477be8;font-size:28px}
#tuduy .td-symbol.td-missing{background:#fff2d8;color:#e58d0b}
#tuduy .td-tile-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;width:min(258px,90%);aspect-ratio:1}
#tuduy .td-grid-cell{display:flex;align-items:center;justify-content:center;border:2px solid #477be8;border-radius:10px;background:#f2f7ff;font-size:35px}
#tuduy .td-tile-svg{display:block;width:min(60px,100%);height:auto;aspect-ratio:1;margin:auto}
#tuduy .td-region{display:block;width:min(300px,95%);height:auto;overflow:visible}
#tuduy .td-region-line{fill:rgba(77,140,255,.06);stroke:#7c5cff;stroke-width:3}
#tuduy .td-region-object{font-size:27px;cursor:pointer}
#tuduy .td-region-object.chosen{paint-order:stroke;stroke:#ff9f43;stroke-width:5}
#tuduy .td-code-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
#tuduy .td-code-legend span{background:#eaf2ff;padding:7px;border-radius:10px;font-weight:800}
#tuduy .td-code-row{display:flex;justify-content:center;gap:6px;font-size:30px}
#tuduy .td-triangle{position:relative;width:min(300px,90vw);aspect-ratio:300/250}
#tuduy .td-triangle svg{width:100%;height:100%}
#tuduy .td-tri-cell{position:absolute;transform:translate(-50%,-50%)}
#tuduy .td-side.glow,#tuduy .td-order-slot.glow,#tuduy .td-position .glow,#tuduy .td-tri-cell.glow{filter:drop-shadow(0 0 8px #ff9f43);transform:scale(1.06)}
#tuduy .td-region-object.glow{paint-order:stroke;stroke:#ff9f43;stroke-width:6}

/* explanation */
#tuduy .td-explain{margin-top:12px;background:#f7f3ff;border-radius:18px;padding:12px 14px}
#tuduy .td-ex-title{font-weight:900;color:#7c5cff;margin-bottom:4px}
#tuduy .td-steps{margin:0;padding-left:22px;font-size:17px;line-height:1.5}
#tuduy .td-steps li{opacity:0;animation:td-in .4s forwards;border-radius:8px;padding:1px 4px}
#tuduy .td-steps li.lit{background:#feca57}
#tuduy .td-ex-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
#tuduy .td-ex-btns .rbtn{font-size:15px;padding:9px 14px}
#tuduy .td-done{text-align:center}
#tuduy .td-done .td-big{font-size:46px;margin:8px 0}

/* phase 2B — every figure is bounded by its card, including 5×5 and the ring. */
#tuduy .td-digit-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(300px,100%);gap:4px}
#tuduy .td-digit-cell{min-width:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#edf4ff;border:2px solid #6e8fea;border-radius:8px;font-size:clamp(18px,5vw,27px);font-weight:900}
#tuduy .td-digit-cell .td-box{min-width:0;width:100%;height:100%;font-size:inherit;padding:0}
#tuduy .td-grid-note{text-align:center;font-size:16px;font-weight:700;color:#526186;max-width:100%}
#tuduy .td-signs{gap:2px}
#tuduy .td-signs .td-box{min-width:37px;width:37px;height:42px;font-size:20px;padding:0}
#tuduy .td-signs .td-box.td-plain{min-width:22px;width:auto}
#tuduy .td-center-triangle .td-tri-cell{z-index:1}
#tuduy .td-split-numbers .td-box{min-width:42px}
#tuduy .td-add-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:min(275px,100%)}
#tuduy .td-add-table>*{width:100%;min-width:0;box-sizing:border-box;text-align:center}
#tuduy .td-add-head{display:flex;align-items:center;justify-content:center;border-radius:10px;background:#e4e5ff;font-size:23px;font-weight:900}
#tuduy .td-number-line{width:min(300px,100%)}
#tuduy .td-number-line svg{width:100%;height:auto;overflow:visible}
#tuduy .td-frog{transition:transform .35s ease}
#tuduy .td-line-equation{gap:3px}
#tuduy .td-line-equation .td-box{min-width:43px}
#tuduy .td-ring{position:relative;width:min(300px,100%);aspect-ratio:1}
#tuduy .td-ring-node,#tuduy .td-ring-op{position:absolute;transform:translate(-50%,-50%)}
#tuduy .td-ring-node{z-index:1}
#tuduy .td-ring-node .td-box{min-width:42px;width:42px;height:42px;font-size:20px;padding:0}
#tuduy .td-ring-op{font-size:12px;font-weight:900;color:#7958db;white-space:nowrap}
#tuduy .td-match{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:4px;width:min(320px,100%)}
#tuduy .td-match-col{display:flex;flex-direction:column;gap:7px;min-width:0}
#tuduy .td-match-item{border:2px solid #86a5f3;border-radius:10px;background:#f2f7ff;color:#2d3561;min-width:0;min-height:45px;font:inherit;font-size:16px;font-weight:800}
#tuduy .td-match-item.chosen{background:#ffe7ae;border-color:#ff9f43}
#tuduy .td-match-item.shown{background:#c5f5e5;border-color:#1dd1a1}
#tuduy .td-match-links{text-align:center;line-height:52px;color:#7958db;font-weight:900}
#tuduy .td-match-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#tuduy .td-ring-node.glow .td-box{box-shadow:0 0 0 5px rgba(254,202,87,.7)}
#tuduy .td-queue{display:flex;gap:4px;width:min(320px,100%)}
#tuduy .td-queue-front{width:min(320px,100%);text-align:left;font-size:16px;font-weight:900;color:#526186;margin-bottom:6px}
#tuduy .td-queue .td-choice{flex:1;min-width:0;font-size:19px;padding:3px 1px}
#tuduy .td-queue small{display:block;font-size:12px}
#tuduy .td-venn{width:min(300px,100%)}
#tuduy .td-expressions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(320px,100%)}
#tuduy .td-expressions .td-choice{font-size:17px}
#tuduy .td-dot-pattern{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;width:min(320px,100%)}
#tuduy .td-dot-pattern .td-tile-svg{width:36px}
#tuduy .td-dot-shape{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:25px;line-height:1}
#tuduy .td-dot-shape small{font-size:16px;letter-spacing:2px;color:#ef5975}
#tuduy .td-dice-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(320px,100%)}
#tuduy .td-dice-pairs>div{background:#f2f7ff;border:2px solid #86a5f3;border-radius:12px;padding:6px;font-size:15px;text-align:center}
#tuduy .td-dice-pairs b{display:block}
#tuduy .td-dice-faces{display:flex;align-items:center;justify-content:center;gap:5px;font-weight:900}
#tuduy .td-die{width:42px;height:42px;flex:none}
#tuduy .td-pyr-four{width:min(320px,100%)}
#tuduy .td-pyr-four .td-row{gap:4px;margin:5px 0}
#tuduy .td-pyr-four .td-box{min-width:0;width:43px;height:43px;font-size:20px;padding:0}

/* Làm quen: large picture targets and wrapping groups at narrow phone widths. */
#tuduy.td-level1 .td-pick,#tuduy.td-level1 .td-key,#tuduy.td-level1 .td-choice{min-height:64px}
#tuduy.td-level1 .td-choice-pad .td-key{min-height:80px;font-size:20px}
#tuduy.td-level1 .td-l1-picture-pad .td-key{font-size:40px}
#tuduy.td-level1 .td-l1-row .td-choice{min-width:64px;padding:4px}
#tuduy.td-level1 .td-pad:not(.td-choice-pad){grid-template-columns:repeat(3,minmax(0,1fr))}
#tuduy.td-level1 .td-blank{min-width:64px;height:64px}
#tuduy .td-l1-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;width:100%;font-size:23px;font-weight:900}
#tuduy .td-l1-row.vertical{flex-direction:column}
#tuduy .td-l1-number,#tuduy .td-l1-symbol{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;min-width:48px;min-height:64px;padding:4px;border-radius:12px;background:#edf4ff;color:#293d7e}
#tuduy .td-l1-symbol{font-size:40px;line-height:1.1}
#tuduy .td-l1-symbol small{font-size:14px;line-height:1;color:#36476d}
#tuduy .td-l1-dots{display:grid;grid-template-columns:repeat(var(--td-l1-columns),48px);align-items:center;justify-content:center;gap:2px;max-width:100%}
#tuduy .td-l1-dots>span{display:grid;place-items:center;width:48px;height:48px;font-size:40px;line-height:1}
#tuduy .td-l1-arrow{font-size:28px;line-height:1;font-weight:900}
#tuduy .td-l1-answer{margin-top:6px}
#tuduy .td-l1-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%}
#tuduy .td-l1-groups>div{min-width:0;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px;border-radius:14px;background:#edf4ff}
#tuduy .td-l1-inside{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
#tuduy .td-l1-circle{box-sizing:border-box;width:min(264px,100%);min-height:264px;display:grid;place-items:center;border:4px solid #7958db;border-radius:50%;padding:4px}
#tuduy .td-l1-match{display:grid;gap:8px;width:min(100%,300px)}
#tuduy .td-l1-match>div{display:grid;grid-template-columns:1fr 64px;align-items:center;justify-items:center;gap:4px;min-height:110px;padding:6px;border-radius:14px;background:#edf4ff}
#tuduy .td-l1-match .td-l1-dots{grid-column:1/-1}
#tuduy .td-l1-match .td-l1-arrow{justify-self:end}
#tuduy .td-l1-latin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(255px,100%);gap:4px}
#tuduy .td-l1-latin span{display:grid;place-items:center;aspect-ratio:1;border:2px solid #7194e8;border-radius:10px;background:#eef4ff;font-size:40px}

@keyframes td-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes td-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes td-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#tuduy *{animation:none!important;transition:none!important}#tuduy .td-steps li{opacity:1}}