:root{--page:#f9f9f7;--surface:#fcfcfb;--ink:#0b0b0b;--ink2:#52514e;--muted:#898781;
  --grid:#e1e0d9;--hair:rgba(11,11,11,.10);--hair2:rgba(11,11,11,.06);
  --accent:#2a78d6;--accent-d:#1c5cab;--accent-t:rgba(42,120,214,.08);
  --good:#0ca30c;--crit:#d03b3b;--warn:#eda100;--violet:#4a3aa7;
  --r:12px;--mono:ui-monospace,'Consolas',monospace;
  --shadow:0 1px 2px rgba(11,11,11,.05),0 1px 3px rgba(11,11,11,.04)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--page);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:14px;user-select:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
svg{display:block}
/* topbar */
#topbar{display:flex;align-items:center;gap:16px;padding:0 22px;height:56px;flex:none;
  background:var(--surface);border-bottom:1px solid var(--hair)}
#logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;color:inherit;text-decoration:none}
#logo .mark{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center}
#logo em{font-style:normal;color:var(--accent)}
#logo .lv{color:#0e7a54;background:rgba(27,175,122,.12);font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:12px}
.tb-link{color:var(--ink2);font-size:13px;font-weight:500;padding:7px 11px;border-radius:8px;text-decoration:none}
.tb-link:hover{background:var(--accent-t);color:var(--accent-d)}
#run-controls{margin-left:auto;display:flex;gap:8px;align-items:center}
#btnrun{background:var(--good);color:#fff;font-weight:700;font-size:14px;padding:9px 22px;
  border-radius:10px;display:flex;gap:8px;align-items:center}
#btnrun:hover:not(:disabled){filter:brightness(1.08)}
#btnstop{background:var(--surface);color:var(--crit);border:1.5px solid var(--hair);
  font-weight:600;padding:9px 16px;border-radius:10px}
#btnstop:hover:not(:disabled){border-color:var(--crit)}
/* Nut khong bam duoc phai nhin ra la khong bam duoc */
#btnrun:disabled,#btnstop:disabled{opacity:.4;cursor:not-allowed;filter:none}
#btnrun:disabled:hover,#btnstop:disabled:hover{filter:none;border-color:var(--hair)}
#speed{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
/* layout */
#main{flex:1;display:grid;grid-template-columns:280px 1fr 1.15fr;gap:12px;padding:12px;min-height:0}
.col{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.col .hd{padding:11px 15px;border-bottom:1px solid var(--hair2);font-weight:700;font-size:11.5px;
  color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.col .bd{flex:1;overflow:auto;padding:12px;min-height:0}
/* module palette */
.mp-cap{font-size:11.5px;color:var(--muted);margin-bottom:8px;line-height:1.5}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.mp-item{border:1.5px solid var(--hair);border-radius:10px;padding:8px 6px 6px;text-align:center;
  cursor:grab;background:var(--surface);transition:border-color .15s}
.mp-item:hover{border-color:var(--accent)}
.mp-item.used{opacity:.35;pointer-events:none}
.mp-item svg{width:54px;height:40px;margin:0 auto 4px}
.mp-item b{font-size:11px;font-weight:650;display:block;line-height:1.3}
.mp-item span{font-size:9.5px;color:var(--muted)}
/* block palette */
.bp-grp{margin-bottom:4px}
.blocks-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.blk{border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:650;color:#fff;
  cursor:grab;display:inline-flex;gap:7px;align-items:center;line-height:1.3;
  box-shadow:0 1px 2px rgba(11,11,11,.15);touch-action:none}
.blk:active{cursor:grabbing}
.blk .bico{width:13px;height:13px;flex:none}
.b-act{background:#2a78d6}.b-off{background:#6d6b66}.b-wait{background:#b57d00}
.b-loop{background:#4a3aa7}.b-if{background:#0e7a54}.b-servo{background:#8a4bb8}
.blk small{font-weight:500;opacity:.85}
.blk input{width:36px;border:none;border-radius:5px;font-family:inherit;font-weight:700;
  font-size:12px;text-align:center;padding:2px;color:var(--ink)}
/* program area */
#prog{min-height:100%;padding-bottom:60px}
#prog.empty::after{content:"Kéo khối lệnh từ bên trái thả vào đây";display:block;color:var(--muted);
  font-size:12.5px;border:2px dashed var(--grid);border-radius:12px;padding:26px;text-align:center;margin-top:6px}
.pstep{margin-bottom:6px;position:relative}
.pstep>.blk{display:flex;cursor:grab;width:100%}
.pstep .del{margin-left:auto;opacity:.55;font-size:13px;padding:0 2px}
.pstep .del:hover{opacity:1}
.pstep.exec>.blk{outline:3px solid #ffd24a;outline-offset:1.5px}
.pcontainer{border-radius:10px;padding:5px 5px 5px 10px;margin-top:3px;
  border-left:4px solid;min-height:34px}
.pc-loop{background:rgba(74,58,167,.07);border-color:#4a3aa7}
.pc-if{background:rgba(14,122,84,.07);border-color:#0e7a54}
.pcontainer.empty::after{content:"thả khối vào đây";color:var(--muted);font-size:11px;
  display:block;padding:6px;text-align:center;border:1.5px dashed var(--grid);border-radius:8px}
#dropline{height:4px;background:var(--accent);border-radius:2px;margin:2px 0;box-shadow:0 0 6px rgba(42,120,214,.6)}
.blocklyToolboxDiv{background:var(--page)!important;border-right:1px solid var(--hair2)}
#ghost{position:fixed;pointer-events:none;z-index:200;opacity:.92;transform:rotate(2deg);display:none}
/* stage */
#stagebox{flex:1;min-height:0;display:grid;place-items:center;padding:8px;
  background:#eef0ea;margin:12px;border-radius:10px;border:1px solid var(--hair2);position:relative}
#stage{width:100%;height:100%}
#stagehint{position:absolute;top:12px;left:14px;font-size:11.5px;color:var(--muted);
  background:var(--surface);padding:5px 12px;border-radius:14px;border:1px solid var(--hair)}
/* cable current animation */
.cable{fill:none;stroke:#52514e;stroke-width:4;stroke-linecap:round}
.cflow{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:5 11;opacity:0;
  transition:opacity .25s}
.cflow.on{opacity:1;animation:flow .5s linear infinite}
.cflow.rev{animation-direction:reverse}
@keyframes flow{to{stroke-dashoffset:-16}}
.fanspin{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse-glow{filter:drop-shadow(0 0 8px currentColor)}
#console{height:92px;flex:none;border-top:1px solid var(--hair2);font-family:var(--mono);
  font-size:11.5px;padding:8px 14px;overflow:auto;color:var(--ink2)}
#console .ok{color:#006300}#console .info{color:var(--accent-d)}#console .err{color:var(--crit)}
@media(max-width:1100px){#main{grid-template-columns:1fr;overflow:auto}}

/* ===== Nut chuyen 2D / 3D tren san mo phong ===== */
.view-toggle{display:inline-flex;gap:0;margin-left:12px;border:1px solid var(--hair);
  border-radius:7px;overflow:hidden}
.view-toggle button{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 10px;
  color:var(--muted);background:var(--surface);border:none;cursor:pointer}
.view-toggle button.on{background:var(--accent);color:#fff}
.view-toggle button:not(.on):hover{color:var(--ink)}
#stagebox{position:relative}
#stage3d canvas{display:block;width:100%;height:100%;border-radius:8px}
#hint3d{position:absolute;left:14px;top:12px;z-index:2;background:var(--surface);
  border:1px solid var(--hair);border-radius:8px;padding:7px 12px;font-size:12px;
  color:var(--ink2);box-shadow:var(--shadow);pointer-events:none}

/* Khi Blockly bat, cot trai chi con luoi module — cho no dung het chieu cao */
.mp-grid.mp-full{max-height:none}

/* ===== Thanh chuyen cap hoc trong Studio =====
   Thay cho huy hieu tinh + hai link roi rac: mot day ba nut, cap dang xem to sang. */
.ts-caps{display:inline-flex;gap:2px;margin-left:14px;padding:3px;border-radius:9px;
  background:var(--page);border:1px solid var(--hair)}
.ts-caps a{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:6px;
  color:var(--muted);text-decoration:none;white-space:nowrap}
.ts-caps a:hover:not(.on){color:var(--ink)}
.ts-caps a.on{background:var(--accent);color:#fff}

/* ===== Thanh keo gian cot kieu IDE ===== */
.ide-gutter{width:6px;cursor:col-resize;border-radius:3px;background:transparent;
  position:relative;align-self:stretch;transition:background .12s}
.ide-gutter::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:2px;height:34px;border-radius:2px;background:var(--hair)}
.ide-gutter:hover,.ide-gutter:focus-visible{background:var(--accent-t);outline:none}
.ide-gutter:hover::before,.ide-gutter:focus-visible::before{background:var(--accent)}
body.ide-dang-keo{cursor:col-resize;user-select:none}
body.ide-dang-keo iframe,body.ide-dang-keo canvas{pointer-events:none}

/* Blockly de lai mot dai cuon xam khi hop khoi da dong — an di */
.blocklyFlyoutScrollbar{display:none!important}

/* ===== Chip du an tren thanh cong cu Studio ===== */
#ts-duan{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;
  border:1px solid var(--hair);border-radius:9px;background:var(--surface);max-width:340px}
#ts-duan.san-sang{border-color:var(--hair)}
#ts-duan-ten{font-size:13px;font-weight:600;color:var(--ink);background:none;border:none;
  cursor:pointer;padding:2px 0;max-width:150px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:left}
#ts-duan-ten:hover{color:var(--accent-d);text-decoration:underline}
#ts-duan-path{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;color:var(--muted);
  white-space:nowrap}
#ts-duan-copy{font-size:11.5px;font-weight:600;color:var(--accent-d);background:var(--accent-t);
  border:none;border-radius:6px;padding:4px 9px;cursor:pointer;white-space:nowrap}
#ts-duan-copy:hover{background:var(--accent);color:#fff}
@media(max-width:1200px){#ts-duan-path{display:none}}

/* ===== Bang chuot phai tren san mo phong ===== */
#ts-menu{position:fixed;z-index:200;display:none;min-width:196px;background:var(--surface);
  border:1px solid var(--hair);border-radius:10px;box-shadow:0 12px 34px rgba(11,11,11,.18);
  padding:6px;overflow:hidden}
#ts-menu.on{display:block}
#ts-menu .ts-menu-hd{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:7px 10px 6px}
#ts-menu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-size:13.5px;color:var(--ink);padding:8px 10px;border-radius:7px;font-family:inherit}
#ts-menu button:hover{background:var(--accent-t);color:var(--accent-d)}

/* Băng nhắc dưới thanh trên — dùng khi mở một đường dẫn chia sẻ chưa có dự án */
.ts-nhac{background:#fff8e6;border-bottom:1px solid #f0d68a;color:#6b4f10;font-size:13.5px}
.ts-nhac-in{max-width:1180px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;gap:12px;line-height:1.5}
.ts-nhac-in code{background:#fff;border:1px solid #ecd694;border-radius:5px;padding:1px 6px;font-size:12.5px}
.ts-nhac-x{margin-left:auto;flex:none;background:none;border:none;color:#96762c;cursor:pointer;
  font-size:15px;line-height:1;padding:4px 6px;border-radius:6px}
.ts-nhac-x:hover{background:#f4e6bf;color:#5a430c}
/* Bám theo nút "Giao diện tối" của trang, không theo cài đặt hệ điều hành.
 *
 * Cả theme này chuyển nền tối bằng body[data-theme="dark"]; dùng
 * prefers-color-scheme thì sai cả hai chiều — máy đặt nền tối sẽ thấy băng đen
 * giữa trang sáng, còn bấm nút tối thì băng vàng kem nằm giữa trang đen. */
body[data-theme="dark"] .ts-nhac{background:#3a2f14;border-bottom-color:#5c4a1d;color:#f3e2b6}
body[data-theme="dark"] .ts-nhac-in code{background:#2a2210;border-color:#5c4a1d;color:#f6ecd0}
body[data-theme="dark"] .ts-nhac-x:hover{background:#4d3f1a;color:#fff}

/* ============ Tài khoản học sinh ============ */
#ts-tk{display:inline-flex;align-items:center}
#ts-tk button{font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:6px 12px;border-radius:9px;border:1px solid var(--hair);
  background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:7px}
#ts-tk button:hover{border-color:var(--accent);color:var(--accent-d)}
.ts-tk-cham{width:7px;height:7px;border-radius:50%;background:#0ca30c;flex:none}

#ts-tkwrap,#ts-dswrap{position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(15,18,24,.5);backdrop-filter:blur(2px)}
#ts-tkwrap.on,#ts-dswrap.on{display:flex}
.ts-tkbox,.ts-dsbox{width:100%;max-width:400px;max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--hair);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.ts-dsbox{max-width:460px}
.ts-tkhd{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--hair)}
.ts-tkhd b{font-size:15px}
.ts-tkhd button{background:none;border:none;font-size:16px;cursor:pointer;
  color:var(--muted);padding:4px 7px;border-radius:7px;line-height:1}
.ts-tkhd button:hover{background:var(--hair-soft,rgba(128,128,128,.14));color:var(--ink)}
.ts-tkbd,.ts-dsbd{padding:16px}

.ts-tktab{display:flex;gap:6px;margin-bottom:16px;background:var(--bg-soft,rgba(128,128,128,.09));
  padding:4px;border-radius:10px}
.ts-tktab button{flex:1;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:8px 6px;border:none;border-radius:7px;background:none;color:var(--muted)}
.ts-tktab button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.ts-tkbd label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:12px}
.ts-tkbd input{display:block;width:100%;margin-top:5px;padding:10px 12px;font:inherit;font-size:14px;
  border:1px solid var(--hair);border-radius:9px;color:var(--ink);
  /* --bg không có trong theme này; --page mới là nền trang. */
  background:var(--page,#fff);
  box-sizing:border-box;font-weight:400}
.ts-tkbd input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.ts-tk-tuychon{font-weight:400;color:var(--muted);opacity:.8}
.ts-tk-luu-y{font-size:12px;color:var(--muted);line-height:1.5;margin:-4px 0 12px}
.ts-tk-them{display:none}
.ts-tk-loi{color:#b32d2e;font-size:12.5px;line-height:1.5;min-height:18px;margin-bottom:8px}
.ts-tk-gui{width:100%;font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:11px;
  border:none;border-radius:9px;background:var(--accent);color:#fff}
.ts-tk-gui:hover{background:var(--accent-d)}
.ts-tk-gui:disabled{opacity:.6;cursor:default}

.ts-dsul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ts-dsul a{display:block;padding:11px 13px;border:1px solid var(--hair);border-radius:10px;
  text-decoration:none;color:var(--ink)}
.ts-dsul a:hover{border-color:var(--accent);background:var(--bg-soft,rgba(37,99,235,.05))}
.ts-dsul b{display:block;font-size:14px;margin-bottom:2px}
.ts-dsul span{font-size:12px;color:var(--muted)}
.ts-dstrong{font-size:13.5px;color:var(--muted);line-height:1.6;margin:6px 0 2px}
.ts-dsfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:12px;color:var(--muted)}
.ts-dsfoot button{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;flex:none;
  padding:7px 13px;border:1px solid var(--hair);border-radius:8px;background:none;color:var(--ink)}
.ts-dsfoot button:hover{border-color:#b32d2e;color:#b32d2e}

.ts-tk-nhan{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:130;
  max-width:min(92vw,440px);padding:11px 17px;border-radius:11px;font-size:13.5px;line-height:1.5;
  background:#12203a;color:#eaf1ff;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:opacity .5s}
.ts-tk-nhan.di{opacity:0}

@media(max-width:560px){
  .ts-tkbox,.ts-dsbox{max-width:none}
  #ts-tk button{padding:6px 10px;font-size:12.5px}
}