/* Sơ đồ tổ chức (trang Giới thiệu), nằm thẳng, đơn vị nổi nhẹ khi rê chuột. Mọi lớp có tiền tố o3- để không trùng CSS chung. */
.o3{
  position:relative;border-radius:20px;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 420px at 50% 0%,rgba(254,217,51,.14),transparent 70%),
    radial-gradient(700px 500px at 100% 100%,rgba(198,248,134,.10),transparent 70%),
    linear-gradient(180deg,#003a7a 0%,#00264f 55%,#001a38 100%);
  box-shadow:0 30px 60px -30px rgba(0,38,79,.6);
}
.o3-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:14px}
.o3-bar{justify-content:flex-start}
@media (min-width:720px){.o3.is-live .o3-bar{position:absolute;top:0;left:0;right:0;pointer-events:none}}
.o3-legend{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none}
.o3-legend li{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:#dbe6f5;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:4px 10px 4px 6px;border-radius:999px}
.o3-legend i{width:14px;height:14px;border-radius:4px;display:block;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);outline:1px solid rgba(255,255,255,.7)}
.o3-legend li:first-child i{background:#4f93e0!important}
.o3-ctrls{display:none;gap:8px}
.o3-btn{font:600 .8125rem var(--font-sans,system-ui);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);padding:8px 14px;border-radius:999px;cursor:pointer;min-height:44px;transition:background .2s,transform .2s}
.o3-btn:hover{background:rgba(255,255,255,.2)}
.o3-btn:active{transform:translateY(1px)}
.o3-btn[aria-pressed="true"]{background:#fed933;color:#121826;border-color:#fed933}
.o3-btn:focus-visible,.o3-node:focus-visible{outline:3px solid #fed933;outline-offset:3px}
.o3-hint{display:none;position:absolute;z-index:5;bottom:10px;left:0;right:0;text-align:center;font-size:.8125rem;color:#9fb6d4;pointer-events:none}

.o3-vp{display:none;position:relative;width:100%;padding-top:64px;padding-bottom:36px;touch-action:pan-y}
.o3-fit{position:relative;transform-origin:top left}
.o3-persp{position:absolute;inset:0;perspective:2000px;perspective-origin:50% 38%}
.o3-board{position:absolute;inset:0}
.o3-floor{position:absolute;inset:-30px;border-radius:28px;transform:translateZ(-2px);
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(180deg,rgba(0,64,136,.55),rgba(0,38,79,.55));
  border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 40px 80px rgba(0,0,0,.45)}
svg.o3-lines{position:absolute;left:0;top:0;max-width:none;transform:translateZ(1px);overflow:visible;pointer-events:none}
.o3-ln{fill:none;stroke:rgba(198,248,134,.35);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;transition:opacity .25s,stroke .25s}
.o3-fl{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 15;stroke-linecap:round;opacity:.75;animation:o3-flow 1.6s linear infinite;transition:opacity .25s}
@keyframes o3-flow{to{stroke-dashoffset:-36}}
.o3-board.has-hl .o3-ln,.o3-board.has-hl .o3-fl{opacity:.12}
.o3-board.has-hl .o3-ln.on{opacity:1;stroke:#fed933;stroke-width:5}
.o3-board.has-hl .o3-fl.on{opacity:1}

.o3-node{position:absolute;transform-style:preserve-3d;transform:translateZ(var(--lift,0px));
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s;outline:none;
  animation:o3-rise .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--delay,0s)}
@keyframes o3-rise{from{transform:translateZ(-140px);opacity:0}}
.o3-node .o3-top,.o3-node .o3-f{position:absolute;backface-visibility:visible}
.o3-node .o3-top{inset:0;transform:translateZ(var(--d));border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 8px;
  background:linear-gradient(160deg,var(--c1),var(--c2));color:var(--tc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18)}
.o3-node .o3-top small{font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.8;line-height:1.2}
.o3-node .o3-top b{font-size:.9375rem;font-weight:700;line-height:1.2;margin-top:2px}
.o3-node.big .o3-top b{font-size:1.125rem}
.o3-node .o3-f.front{left:0;top:100%;width:100%;height:var(--d);transform-origin:top;transform:rotateX(90deg);background:linear-gradient(180deg,var(--s1),var(--s2));border-radius:0 0 8px 8px}
.o3-node .o3-f.right{left:100%;top:0;width:var(--d);height:100%;transform-origin:left;transform:rotateY(-90deg);background:var(--s2);filter:brightness(.82)}
.o3-node .o3-f.left{left:calc(var(--d) * -1);top:0;width:var(--d);height:100%;transform-origin:right;transform:rotateY(90deg);background:var(--s2);filter:brightness(.82)}
.o3-node .o3-sh{position:absolute;inset:6px -4px -10px;background:rgba(0,0,0,.55);filter:blur(12px);transform:translateZ(-1px);border-radius:14px}
.o3-node:hover,.o3-node:focus-visible,.o3-node.on{--lift:22px}
.o3-board.has-hl .o3-node:not(.on){opacity:.32}
.k-ld{--c1:#1a62b5;--c2:#004088;--s1:#00305f;--s2:#00264f;--tc:#fff}
.k-hd{--c1:#0a4d99;--c2:#00264f;--s1:#001a38;--s2:#00132a;--tc:#fff}
.k-hd .o3-top{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 0 #fed933}
.k-dt{--c1:#ffe978;--c2:#fed933;--s1:#c9a200;--s2:#9c7c00;--tc:#121826}
.k-ph{--c1:#dcfbb0;--c2:#c6f886;--s1:#8cc04a;--s2:#6d9b34;--tc:#0b2a14}
.k-kh{--c1:#c8dcf6;--c2:#a9c9f2;--s1:#6b97cf;--s2:#4f7cb5;--tc:#00264f}
.k-ng{--c1:#ff8a55;--c2:#fe6d2e;--s1:#c24c17;--s2:#9a3a10;--tc:#121826}

/* Danh sách: hiện khi chưa chạy được JS hoặc trên điện thoại */
.o3-list{display:block;padding:8px 16px 24px}
.o3-list h3{margin:18px 0 8px;font:700 .8125rem var(--font-sans,system-ui);letter-spacing:.08em;text-transform:uppercase;color:#fed933}
.o3-list ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.o3-list li{padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.1);border-left:6px solid var(--b,#fff);font-weight:600}

@media (min-width:720px){
  .o3.is-live .o3-list{display:none}
  .o3.is-live .o3-vp{display:block}
  .o3.is-live .o3-hint{display:block}
}
@media (prefers-reduced-motion:reduce){
  .o3-node{animation:none}.o3-fl{animation:none}
}

/* Nằm thẳng (mặc định): mặt bên không thấy được nên vẽ độ dày bằng viền và bóng đổ */
.o3-board.is-flat .o3-node .o3-f{display:none}
.o3-board.is-flat .o3-node .o3-top{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18),
    0 calc(var(--d) * .3) 0 var(--s2),0 calc(var(--d) * .3 + 10px) 18px rgba(0,0,0,.45)}
.o3-board.is-flat .k-hd .o3-top{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 0 #fed933,
    0 calc(var(--d) * .3) 0 var(--s2),0 calc(var(--d) * .3 + 10px) 18px rgba(0,0,0,.45)}
.o3-board.is-flat .o3-sh{display:none}
.o3-board.is-flat .o3-node:hover,.o3-board.is-flat .o3-node:focus-visible,.o3-board.is-flat .o3-node.on{--lift:0px;transform:translateY(-6px)}