/* Hallmark · component: graph-3d (WebGL stage + HTML index + info panel) · genre: editorial · theme: site tokens (presentation.css ivory / forest / gold)
 * states: default · hover · focus · active · disabled · loading (data-mode=loading) · error (data-mode=fallback) · success (data-mode=webgl)
 * contrast: ink #173a2c on card #fff 12.3:1 · muted #526258 on paper #f0f2e9 5.6:1 · white on accent #235e43 7.9:1 · gold #87631c on card 5.4:1
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 * refine 26/09/2026 (Claude Code): danh sách 11 phần không còn nhận nav{display:flex} của site; easing token thay `ease`;
 *   iPhone ≤479px: logo 56px vẫn góc dưới phải, công cụ 2 hàng. CTA trắng-trên-trắng được sửa ở nguồn (style.css .graph a).
 */

/* Token: ánh xạ về token có sẵn của site; giá trị sau dấu phẩy chỉ dùng khi chạy demo riêng. */
.g3d{
  --g3d-paper:var(--paper,#f0f2e9);
  --g3d-card:var(--card,#fff);
  --g3d-ink:var(--white,#173a2c); /* presentation.css dùng --white làm màu chữ chính */
  --g3d-muted:var(--muted,#526258);
  --g3d-line:var(--line,#d6ddd2);
  --g3d-accent:var(--accent,#235e43);
  --g3d-on-accent:var(--on-accent,#fff);
  --g3d-gold:var(--gold,#87631c);
  --g3d-soft-gold:var(--soft-gold,#f2e7cb);
  --g3d-font:var(--font-body,Arial,sans-serif);
  --g3d-display:var(--font-display,Arial,Helvetica,sans-serif);
  --g3d-radius:12px;
  --g3d-hit:48px;
  --g3d-ease:var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.g3d-host{display:block}
/* overflow-anchor:none — đổi nội dung bảng thông tin không kéo trang cuộn theo (scroll anchoring của Chrome) */
.g3d{overflow-anchor:none;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"stage info" "index info";gap:18px 30px;margin-top:35px;padding:14px;background:var(--g3d-paper);border:1px solid var(--g3d-line);border-radius:var(--g3d-radius);color:var(--g3d-ink);font-family:var(--g3d-font);text-align:left}
.g3d *,.g3d *::before,.g3d *::after{box-sizing:border-box}
.g3d [hidden]{display:none!important}
.g3d-stagewrap{grid-area:stage;min-width:0}
.g3d-info{grid-area:info;align-self:start;min-width:0;padding:18px 6px 6px}
.g3d-index{grid-area:index;min-width:0;display:block}
.g3d-corecard{display:none}

/* Sân khấu 3D: bình thường vẫn cuộn / zoom trang được (touch-action: manipulation) */
.g3d-stage{position:relative;isolation:isolate;z-index:0;width:100%;aspect-ratio:4/3;max-height:min(70svh,640px);overflow:hidden;border-radius:9px;background:var(--g3d-paper);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none}
.g3d-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--g3d-accent)}
.g3d-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.g3d.is-interactive .g3d-stage{touch-action:none;overscroll-behavior:contain;box-shadow:inset 0 0 0 2px var(--g3d-accent)}
@media (hover:hover) and (pointer:fine){.g3d[data-mode=webgl] .g3d-stage{cursor:grab}}
.g3d .g3d-stage.is-pointing{cursor:pointer}
.g3d .g3d-stage.is-dragging{cursor:grabbing}
.g3d-status{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;color:var(--g3d-muted);font-size:14px;text-align:center}
.g3d[data-mode=webgl] .g3d-status{display:none}

/* Nhãn HTML trên canvas: không chặn con trỏ, không đè lên nhau (JS xếp chỗ) */
.g3d-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.g3d-label{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:6px;padding:5px 10px;border:1px solid var(--g3d-line);border-radius:999px;background:var(--g3d-card);color:var(--g3d-ink);font-size:14px;font-weight:600;line-height:1.25;letter-spacing:0;white-space:nowrap;will-change:transform;transition:opacity .18s var(--g3d-ease),background-color .18s var(--g3d-ease),border-color .18s var(--g3d-ease)}
.g3d-label.is-off{visibility:hidden}
.g3d .g3d-label{will-change:auto}
.g3d-brand{position:absolute;right:10px;bottom:10px;width:72px;height:72px;object-fit:contain;border:1px solid var(--g3d-line);border-radius:8px;z-index:120;pointer-events:none}
.g3d-label.is-compact{padding:4px 7px}
.g3d-label.is-compact .g3d-label-text,.g3d-label--core.is-compact span{display:none}
.g3d-label-num{color:var(--g3d-gold);font-size:11px;font-weight:700;letter-spacing:.1em}
.g3d-label.is-related{background:var(--g3d-soft-gold);border-color:var(--g3d-gold)}
.g3d-label.is-dim{color:var(--g3d-muted)}
.g3d-label.is-hover{border-color:var(--g3d-accent)}
.g3d-label.is-selected{background:var(--g3d-accent);border-color:var(--g3d-accent);color:var(--g3d-on-accent);font-size:15px;padding:6px 12px}
.g3d-label.is-selected .g3d-label-num{color:var(--g3d-on-accent)}
.g3d-label--core{flex-direction:column;align-items:center;gap:2px;padding:6px 14px;border-color:var(--g3d-gold);border-radius:14px;text-align:center}
.g3d-label--core small{color:var(--g3d-gold);font-size:10px;font-weight:700;letter-spacing:.24em}
.g3d-label--core span{font-size:13px;font-weight:700}
.g3d-label--core.is-selected small{color:var(--g3d-on-accent)}

/* Thanh điều khiển */
.g3d-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 2px 0}
.g3d-hint{flex:1 1 240px;margin:0;color:var(--g3d-muted);font-size:13px;line-height:1.5}
.g3d-tools{display:flex;flex-wrap:wrap;gap:8px}
.g3d-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--g3d-hit);min-width:var(--g3d-hit);margin:0;padding:0 16px;border:1px solid var(--g3d-line);border-radius:6px;background:var(--g3d-card);color:var(--g3d-accent);font:600 14px/1 var(--g3d-font);white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color .15s var(--g3d-ease),border-color .15s var(--g3d-ease),color .15s var(--g3d-ease),transform .12s var(--g3d-ease)}
.g3d-icon{padding:0;font-size:22px;font-weight:500}
.g3d-mode[aria-pressed=true]{background:var(--g3d-accent);border-color:var(--g3d-accent);color:var(--g3d-on-accent)}
.g3d-btn:disabled{opacity:.45;cursor:default}
.g3d-btn:active:not(:disabled){transform:translateY(1px)}
@media (hover:hover){.g3d-btn:hover:not(:disabled){border-color:var(--g3d-accent)}.g3d-mode[aria-pressed=true]:hover{background:var(--g3d-ink);border-color:var(--g3d-ink)}}

/* Bảng thông tin (HTML đọc được) */
.g3d-tag{display:inline-block;padding:5px 11px;border:1px solid var(--g3d-line);border-radius:999px;background:var(--g3d-card);color:var(--g3d-accent);font-size:12px;line-height:1.4}
.g3d-eyebrow{margin:20px 0 6px;color:var(--g3d-gold);font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
.g3d-title{margin:0 0 10px;color:var(--g3d-ink);font-family:var(--g3d-display);font-size:29px;font-style:normal;font-weight:600;line-height:1.3;overflow-wrap:anywhere;min-width:0}
.g3d-title:focus{outline:none}
.g3d-title:focus-visible{outline:2px solid var(--g3d-accent);outline-offset:4px}
.g3d-summary{margin:0 0 18px;color:var(--g3d-muted);font-size:16px;line-height:1.65}
.g3d-rellabel{margin:0 0 8px;color:var(--g3d-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.g3d-rel{display:flex;flex-wrap:wrap;gap:8px}
.g3d-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--g3d-line);border-radius:999px;background:var(--g3d-card);color:var(--g3d-ink);font:500 14px/1.2 var(--g3d-font);white-space:nowrap;cursor:pointer;touch-action:manipulation}
.g3d-chip-num{color:var(--g3d-gold);font-size:11px;font-weight:700;letter-spacing:.08em}
.g3d-chip:active{transform:translateY(1px)}
@media (hover:hover){.g3d-chip:hover{border-color:var(--g3d-gold)}}
.g3d-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:22px;padding:0 20px;border:1px solid var(--g3d-accent);border-radius:5px;background:var(--g3d-accent);color:var(--g3d-on-accent);font-weight:600;text-decoration:none;white-space:nowrap}
.g3d-cta:active{transform:translateY(1px)}
@media (hover:hover){.g3d-cta:hover{background:var(--g3d-ink);border-color:var(--g3d-ink);color:var(--g3d-on-accent)}}

/* Danh sách 11 phần: chọn bằng bàn phím / chạm, cũng là bản dự phòng khi không có WebGL */
.g3d-indexlabel{margin:0 0 8px;color:var(--g3d-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.g3d-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,142px),1fr));gap:6px;margin:0;padding:0;list-style:none}
.g3d-list li{margin:0;padding:0}
.g3d-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--g3d-hit);margin:0;padding:6px 12px;border:1px solid var(--g3d-line);border-radius:8px;background:var(--g3d-card);color:var(--g3d-ink);font:500 14px/1.3 var(--g3d-font);text-align:left;white-space:normal;cursor:pointer;touch-action:manipulation}
.g3d-item-num{min-width:2.4em;color:var(--g3d-gold);font-size:11px;font-weight:700;letter-spacing:.1em}
.g3d-item[aria-pressed=true]{background:var(--g3d-accent);border-color:var(--g3d-accent);color:var(--g3d-on-accent)}
.g3d-item[aria-pressed=true] .g3d-item-num{color:var(--g3d-on-accent)}
.g3d-item:active{transform:translateY(1px)}
@media (hover:hover){.g3d-item:hover{border-color:var(--g3d-accent)}}

.g3d-btn:focus-visible,.g3d-chip:focus-visible,.g3d-item:focus-visible,.g3d-cta:focus-visible{outline:2px solid var(--g3d-accent);outline-offset:2px}

/* Bản HTML khi không dùng được WebGL (data-mode=fallback) */
.g3d[data-mode=fallback]{grid-template-areas:"core info" "index info"}
.g3d[data-mode=fallback] .g3d-stagewrap{display:none}
.g3d[data-mode=fallback] .g3d-corecard{grid-area:core;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 16px;border:1px solid var(--g3d-line);border-radius:var(--g3d-radius);background:var(--g3d-card);text-align:center}
.g3d-corecard small{color:var(--g3d-gold);font-size:11px;font-weight:700;letter-spacing:.24em}
.g3d-corecard strong{font-family:var(--g3d-display);font-size:20px;font-weight:600}
.g3d-corecard span{color:var(--g3d-muted);font-size:13px}

@media (max-width:1099px){
  .g3d{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "info" "index"}
  .g3d[data-mode=fallback]{grid-template-areas:"core" "index" "info"}
  .g3d-info{padding:4px 4px 0}
}
@media (max-width:767px){
  .g3d{gap:14px;margin-top:24px;padding:10px}
  .g3d-stage{aspect-ratio:1/1;max-height:64svh}
  .g3d-label{padding:4px 8px;font-size:13px}
  .g3d-label.is-selected{font-size:14px;padding:5px 10px}
  .g3d-label-num{font-size:10px}
  .g3d-btn{padding:0 12px}
  .g3d-title{font-size:24px}
  .g3d-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3d-tools{gap:6px}
  .g3d-btn{padding:0 10px}
  .g3d-icon{min-width:44px}
}
/* iPhone: khung graph chỉ còn ~260–340 px — logo Nexta nhỏ lại nhưng vẫn ở góc dưới phải để nhãn có chỗ;
   công cụ xếp 2 hàng gọn: Tương tác 3D / − + Đặt lại (không để một nút đứng lẻ). */
@media (max-width:479px){
  .g3d-brand{right:8px;bottom:8px;width:56px;height:56px}
  .g3d-tools{width:100%}
  .g3d-mode{flex:1 1 100%}
  .g3d-reset{flex:1 1 auto}
}
@media (max-width:379px){
  .g3d-item{gap:6px;padding:6px 8px;font-size:13px}
  .g3d-item-num{min-width:0;font-size:10px}
}
@media (max-width:767px) and (orientation:landscape){
  .g3d-stage{aspect-ratio:16/9;max-height:78svh}
}
@media (prefers-reduced-motion:reduce){
  .g3d *,.g3d *::before,.g3d *::after{transition:none!important}
}