:root{
    --ground:#E3DED4;
    --stage-a:#F4F0E9;
    --stage-b:#D5CEC1;
    --panel:#FAF7F2;
    --panel-2:#EEE9DF;
    --line:#C9C1B1;
    --line-soft:#DBD4C6;
    --ink:#201C17;
    --ink-2:#5F5748;
    --ink-3:#8A8172;
    --accent:#B3651E;
    --accent-ink:#8A4C13;
    --accent-soft:rgba(179,101,30,.11);
    --mark:#1C6B67;
    --shadow:0 1px 0 rgba(255,255,255,.6), 0 6px 20px -12px rgba(40,32,20,.45);
    --label-bg:rgba(250,247,242,.93);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#131417;
      --stage-a:#282B31;
      --stage-b:#0D0E11;
      --panel:#1A1C21;
      --panel-2:#212429;
      --line:#31363E;
      --line-soft:#262A31;
      --ink:#EFE9DF;
      --ink-2:#A29A8C;
      --ink-3:#7C7568;
      --accent:#E09A4E;
      --accent-ink:#F0B674;
      --accent-soft:rgba(224,154,78,.14);
      --mark:#54B8B0;
      --shadow:0 1px 0 rgba(255,255,255,.04), 0 8px 24px -14px rgba(0,0,0,.8);
      --label-bg:rgba(26,28,33,.92);
    }
  }
  :root[data-theme="dark"]{
    --ground:#131417;
    --stage-a:#282B31;
    --stage-b:#0D0E11;
    --panel:#1A1C21;
    --panel-2:#212429;
    --line:#31363E;
    --line-soft:#262A31;
    --ink:#EFE9DF;
    --ink-2:#A29A8C;
    --ink-3:#7C7568;
    --accent:#E09A4E;
    --accent-ink:#F0B674;
    --accent-soft:rgba(224,154,78,.14);
    --mark:#54B8B0;
    --shadow:0 1px 0 rgba(255,255,255,.04), 0 8px 24px -14px rgba(0,0,0,.8);
    --label-bg:rgba(26,28,33,.92);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .app{
    min-height:100%; max-width:1280px; margin:0 auto;
    padding:20px 20px 18px;
    display:flex; flex-direction:column; gap:14px;
  }

  /* ---- header ---- */
  .hdr{display:grid; grid-template-columns:1fr auto; gap:16px 24px; align-items:end}
  .brand{display:flex; align-items:baseline; gap:11px; min-width:0}
  .brand .dot{
    width:9px; height:9px; border-radius:2px; background:var(--accent);
    transform:translateY(-2px); flex:none;
  }
  h1{
    font-family:"Fraunces", Georgia, serif; font-optical-sizing:auto;
    font-weight:600; font-size:clamp(22px,3.4vw,31px); letter-spacing:-.015em;
    margin:0; text-wrap:balance;
  }
  .tag{
    grid-column:1/2; margin:0; max-width:62ch; color:var(--ink-2); font-size:13.5px;
  }
  .specs{
    grid-row:1/3; grid-column:2/3; margin:0; display:flex; gap:22px; align-self:end;
    padding-bottom:2px;
  }
  .specs div{display:flex; flex-direction:column; gap:2px}
  .specs dt{
    font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
    font-weight:500;
  }
  .specs dd{
    margin:0; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12.5px;
    color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;
  }

  /* ---- main ---- */
  main{
    flex:1; min-height:0; display:grid; gap:14px;
    grid-template-columns:minmax(0,1fr) 268px;
  }
  .stage{
    position:relative; min-height:min(72vh,660px); max-height:min(80vh,780px); border-radius:5px;
    background:linear-gradient(168deg, var(--stage-a) 0%, var(--stage-b) 100%);
    border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow);
  }
  .stage canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
  .stage canvas.dragging{cursor:grabbing}
  .hint{
    position:absolute; left:13px; top:30px; margin:0; pointer-events:none;
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.04em;
    color:var(--ink-3);
  }
  .chapter-name{
    position:absolute; left:13px; top:11px; margin:0; pointer-events:none;
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent-ink);
  }
  .brandmark{
    position:absolute; right:13px; top:11px; z-index:5; pointer-events:none;
    display:flex; align-items:center; gap:9px;
  }
  .brandmark img{
    width:38px; height:38px; object-fit:cover; border-radius:6px; display:block;
    border:1px solid rgba(227,178,60,.34); background:#1B1C1E;
  }
  .brandmark span{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.09em;
    color:#E3B23C; opacity:.9;
  }
  #labels{position:absolute; inset:0; pointer-events:none; overflow:hidden}
  .lb{
    position:absolute; top:0; left:0; display:flex; align-items:center; gap:7px;
    transform:translate(-50%,-50%); opacity:0; transition:opacity .18s linear;
    white-space:nowrap;
  }
  .lb i{
    width:5px; height:5px; border-radius:50%; background:var(--mark); flex:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--mark) 22%, transparent);
  }
  .lb span{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.03em;
    background:var(--label-bg); border:1px solid var(--line-soft); color:var(--ink);
    padding:2px 7px; border-radius:3px;
  }
  .lb b{color:var(--mark); font-weight:500; margin-right:5px}
  .lb.dim span{
    border-color:#FF7A18; color:#FF7A18; font-size:11.5px; font-weight:500;
    padding:3px 9px; letter-spacing:.02em;
  }
  .lb.dim b{color:#FF7A18; opacity:.62; font-weight:400; margin-right:7px}
  .lb.dim u{text-decoration:none; opacity:.6; font-size:10px}

  /* ---- 2D overlays: drafting sheet + bill of materials ---- */
  .overlay{
    position:absolute; inset:0; opacity:0; pointer-events:none;
    display:flex; padding:16px 16px 96px; background:color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter:blur(2px);
  }
  .dwg svg{width:100%; height:100%; display:block; color:var(--ink)}
  .dwg .ol{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
  .dwg .th{stroke-width:.75; opacity:.75}
  .dwg .hd{fill:none; stroke:currentColor; stroke-width:.7; stroke-dasharray:5 3; opacity:.5}
  .dwg .cl{fill:none; stroke:var(--accent); stroke-width:.6; stroke-dasharray:9 3 2 3; opacity:.55}
  .dwg .fr{fill:none; stroke:currentColor; stroke-width:1.1; opacity:.55}
  .dwg .dm{fill:none; stroke:#FF7A18; stroke-width:.8}
  .dwg .fill{fill:var(--accent-soft); stroke:none}
  .dwg text{font-family:"IBM Plex Mono", monospace; fill:currentColor}
  .dwg .t-lbl{font-size:12px; letter-spacing:.12em; opacity:.62}
  .dwg .t-dim{font-size:10.5px; fill:#FF7A18; letter-spacing:.02em}
  .dwg .t-key{font-size:12.5px; letter-spacing:.04em}
  .dwg .t-big{font-size:17px; letter-spacing:.02em; font-family:"Fraunces", serif}
  .dwg .t-sm{font-size:10px; letter-spacing:.1em; opacity:.55}

  /* nesting */
  .dwg .cut{fill:var(--accent-soft); stroke:currentColor; stroke-width:1; opacity:0}
  .dwg .path{fill:none; stroke:#FF7A18; stroke-width:3.4; opacity:0; stroke-linejoin:round}
  .dwg .chip{fill:var(--accent-soft); stroke:var(--accent); stroke-width:.8}
  .dwg .t-pn{font-size:10px; opacity:.55; letter-spacing:.06em}
  .dwg .stamp{fill:none; stroke:var(--mark); stroke-width:1.6; opacity:0}
  .dwg .t-stamp{font-size:13px; letter-spacing:.16em; fill:var(--mark); opacity:0}

  /* lifecycle */
  .dwg .card{fill:var(--panel-2); stroke:var(--line); stroke-width:1}
  .dwg .card-hi{fill:none; stroke:var(--accent); stroke-width:1.8; opacity:0; transition:opacity .2s}
  .dwg .link{fill:none; stroke:currentColor; stroke-width:1.2; opacity:.45}
  .dwg .back{fill:none; stroke:var(--mark); stroke-width:1.2; stroke-dasharray:7 5; opacity:.7}
  .dwg .fmt{fill:var(--accent-soft); stroke:none}
  .dwg .t-num{font-size:11px; fill:var(--accent); letter-spacing:.1em}
  .dwg .t-node{font-size:15px; letter-spacing:.01em; font-family:"IBM Plex Sans", sans-serif; font-weight:600}
  .dwg .t-fmt{font-size:10.5px; fill:var(--accent-ink); letter-spacing:.04em}
  .dwg .t-note{font-size:10px; opacity:.55; font-family:"IBM Plex Sans", sans-serif; letter-spacing:0}
  .dwg .t-money{font-size:11px; fill:var(--mark); letter-spacing:.1em}
  .dwg .t-coin{font-size:22px; fill:var(--mark); font-weight:600}
  .dwg .pk{fill:var(--accent); stroke:none}
  .dwg .t-pk{font-size:11.5px; fill:#fff; letter-spacing:.04em}

  #bom{gap:14px; padding:52px 18px 98px}
  .bom-col{
    flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;
    background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:12px 13px;
    overflow:auto;
  }
  .bom-col > h3{
    margin:0; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-ink); font-weight:600; display:flex; justify-content:space-between; gap:10px;
  }
  .bom-col > h3 span{color:var(--ink-3); font-weight:400; letter-spacing:.04em}
  .bom-col table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
  .bom-col th{
    font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
    font-weight:600; text-align:left; padding:0 6px 5px 0; border-bottom:1px solid var(--line);
  }
  .bom-col td{
    font-size:11.5px; padding:4px 6px 4px 0; border-bottom:1px solid var(--line-soft);
    color:var(--ink); opacity:0;
  }
  .bom-col .c-n{font-family:"IBM Plex Mono", monospace; color:var(--ink-3); width:26px}
  .bom-col .c-d{font-family:"IBM Plex Mono", monospace; color:var(--ink-2); white-space:nowrap; text-align:right}
  .bom-col .c-q{font-family:"IBM Plex Mono", monospace; text-align:right; width:34px; color:var(--accent-ink)}
  .bom-col tfoot td{border:0; padding-top:8px; font-size:10.5px; color:var(--ink-3); opacity:1}

  /* ---- rail ---- */
  .rail{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    padding:15px 15px 11px; display:flex; flex-direction:column; min-height:0;
    box-shadow:var(--shadow);
  }
  .rail h2{
    margin:0 0 3px; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink-3); font-weight:600;
  }
  .rail .sub{margin:0 0 12px; font-size:11.5px; color:var(--ink-3)}
  .parts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; overflow:auto}
  .parts li{
    display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:baseline;
    padding:7px 8px; border-radius:4px; border:1px solid transparent;
    transition:background .2s, border-color .2s;
  }
  .parts li em{
    font-family:"IBM Plex Mono", monospace; font-style:normal; font-size:11px;
    color:var(--ink-3); font-variant-numeric:tabular-nums;
  }
  .parts li strong{font-weight:500; font-size:13px}
  .parts li small{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }
  .parts li.on{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 32%, transparent)}
  .parts li.on em{color:var(--accent-ink)}
  .parts li.on small{color:var(--accent-ink)}
  .matnote{
    margin-top:auto; padding-top:11px; border-top:1px solid var(--line-soft);
    display:flex; gap:14px; flex-wrap:wrap;
  }
  .sw{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-2)}
  .sw i{width:11px; height:11px; border-radius:2px; border:1px solid rgba(0,0,0,.22); flex:none}

  /* ---- transport, docked inside the stage ---- */
  .transport{
    position:absolute; left:0; right:0; bottom:0; z-index:7;
    padding:26px 14px 11px; display:flex; flex-direction:column; gap:8px;
    background:linear-gradient(to top,
      color-mix(in srgb, var(--panel) 97%, transparent) 0%,
      color-mix(in srgb, var(--panel) 92%, transparent) 62%,
      transparent 100%);
  }
  .tline{display:flex; align-items:center; gap:13px}
  .icon{
    width:32px; height:32px; flex:none; padding:0; display:grid; place-items:center;
    background:transparent; border-color:var(--line-soft);
  }
  .icon svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
  .stage.cine{
    position:fixed; inset:0; z-index:999; border-radius:0; border:0;
    min-height:0; width:100vw; height:100vh; height:100svh; max-width:none;
  }
  body.cine-lock{overflow:hidden}

  /* video-only mode: everything outside the stage steps aside */
  .app.bare{padding:0; gap:0}
  .app.bare .hdr, .app.bare .rail{display:none}
  .app.bare main{grid-template-columns:minmax(0,1fr)}
  .app.bare .stage{
    min-height:0; max-height:none; border-radius:0; border-width:0; box-shadow:none;
  }
  .icon[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-ink)}
  button{
    font:inherit; color:var(--ink); background:var(--panel-2);
    border:1px solid var(--line); border-radius:4px; cursor:pointer;
    padding:6px 11px; transition:background .15s, border-color .15s;
  }
  button:hover{border-color:var(--accent)}
  button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .play{
    width:38px; height:34px; display:grid; place-items:center; padding:0;
    background:var(--accent); border-color:var(--accent); color:#fff; flex:none;
  }
  .play:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
  .play svg{width:13px; height:13px; fill:currentColor}
  .track{flex:1; min-width:220px; position:relative; padding-top:11px}
  .ticks{position:absolute; inset:0 0 auto; height:9px; pointer-events:none}
  .ticks b{
    position:absolute; top:0; width:1px; height:6px; background:var(--line);
    transform:translateX(-.5px);
  }
  input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height:16px;
    background:transparent; margin:0; display:block; cursor:pointer;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height:3px; border-radius:2px;
    background:linear-gradient(to right, var(--accent) var(--p,0%), var(--line-soft) var(--p,0%));
  }
  input[type=range]::-moz-range-track{height:3px; border-radius:2px; background:var(--line-soft)}
  input[type=range]::-moz-range-progress{height:3px; border-radius:2px; background:var(--accent)}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
    background:var(--accent); border:2px solid var(--panel); margin-top:-5px;
  }
  input[type=range]::-moz-range-thumb{
    width:11px; height:11px; border-radius:50%; background:var(--accent);
    border:2px solid var(--panel);
  }
  input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
  .time{
    font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-2);
    font-variant-numeric:tabular-nums; flex:none;
  }
  .time b{color:var(--ink); font-weight:500}
  .chips{display:flex; gap:5px; flex-wrap:wrap; justify-content:center}
  .chips button{padding:3px 9px; font-size:11px; border-radius:99px}
  .chips button.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}

  /* ---- tablet ---- */
  @media (max-width:1024px){
    .dwg .t-lbl{font-size:14px} .dwg .t-key{font-size:14.5px} .dwg .t-dim{font-size:13px}
    .dwg .t-sm{font-size:12px} .dwg .t-big{font-size:20px} .dwg .t-note{font-size:12px}
    .dwg .t-node{font-size:17px} .dwg .t-fmt{font-size:12.5px} .dwg .t-num{font-size:13px}
    .dwg .t-pn{font-size:12px} .dwg .t-stamp{font-size:15px} .dwg .t-pk{font-size:13px}
  }
  /* ---- phone ---- */
  @media (max-width:700px){
    .app{padding:13px 12px 12px; gap:11px}
    .tag{font-size:12.5px}
    .specs{gap:12px 18px}
    .specs dd{font-size:11.5px}
    .brandmark span{display:none}
    .brandmark img{width:32px; height:32px}
    .hint{display:none}
    .transport{padding:22px 9px 9px; gap:7px}
    .track{min-width:0}
    .icon{width:29px; height:29px}
    .tline{gap:9px}
    .play{width:34px; height:31px}
    .time{font-size:11px}
    /* Man hinh THAT rat hep (dien thoai) moi cho cuon ngang. Trong khung
       nhung tren trang chu, khung rong 500-700px — cuon ngang o co do thi
       nguoi xem khong biet con nut phia sau, tuong la thieu. Xem quy tac
       o @media (max-width:480px) ben duoi. */
    .overlay{padding:11px 11px 92px}
    #bom{flex-direction:column; padding:46px 11px 92px; gap:10px; overflow:auto}
    .bom-col{padding:10px 11px}
    .bom-col td{font-size:11px; padding:3px 5px 3px 0}
    .bom-col .c-d{font-size:10.5px}
    .dwg .t-lbl{font-size:19px} .dwg .t-key{font-size:19px} .dwg .t-dim{font-size:17px}
    .dwg .t-sm{font-size:15.5px} .dwg .t-big{font-size:26px} .dwg .t-note{font-size:15px}
    .dwg .t-node{font-size:22px} .dwg .t-fmt{font-size:16px} .dwg .t-num{font-size:17px}
    .dwg .t-pn{font-size:15px} .dwg .t-stamp{font-size:19px} .dwg .t-pk{font-size:16px}
    .dwg .ol{stroke-width:2} .dwg .hd{stroke-width:1.1} .dwg .dm{stroke-width:1.3}
  }

  /* ---- dien thoai that: qua hep de xep het nut thanh hang, cho cuon ngang ---- */
  @media (max-width:480px){
    .chips{
      flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
      scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;
    }
    .chips::-webkit-scrollbar{display:none}
    .chips button{flex:none}
  }
  @media (max-width:900px){
    main{grid-template-columns:minmax(0,1fr)}
    .rail{order:2}
    .parts{flex-direction:row; overflow-x:auto; gap:6px}
    .parts li{grid-template-columns:auto auto; flex:none; align-items:center}
    .parts li small{display:none}
    .hdr{grid-template-columns:1fr}
    .specs{grid-row:auto; grid-column:1; flex-wrap:wrap; gap:14px 22px}
    .stage{min-height:min(62vh,480px); max-height:min(72vh,620px)}
  }
  @media (prefers-reduced-motion: reduce){
    .lb{transition:none}
  }