/* Direction B, "Bản vẽ mặt bằng": an architect's whiteprint by day, a blueprint at night.
   Every service is a room on one floor plan; the SSO door is the only way in. */
[data-style="b"] {
  --bg: #f2f0e9; --card: #fbfaf6; --ink: #14233f; --ink-2: #44516a; --ink-3: #6b768b; --rule: #cbcdd0;
  --accent: #1d46c9; --grid: rgb(29 70 201 / .07); --grid-2: rgb(29 70 201 / .13); --tape: rgb(231 214 160 / .78); --wash: #e7e4da;
  --font: "Archivo", system-ui, sans-serif; --display: "Archivo", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --eyebrow-font: 500 13px/1.3 var(--mono); --eyebrow-track: .08em; --no-font: 700 54px/.9 var(--display); --weight-h: 800; --track-h: -.03em;
  --radius: 0; --radius-sm: 0; --radius-btn: 0; --radius-num: 50%; --line-w: 2px; --btn-line: 2px;
  --head-bg: rgb(242 240 233 / .94); --head-line: 2px solid var(--ink); --sec-line: 2px solid var(--ink); --svc-line: 1px dashed var(--ink-3);
  --try-line: 2px solid var(--ink); --try-bg: var(--card);
  --shadow: 0 1px 1px rgb(20 35 63 / .12), 0 24px 50px -30px rgb(20 35 63 / .5);
}
[data-style="b"][data-theme="dark"] {
  --bg: #0c2346; --card: #10294f; --ink: #e9eef8; --ink-2: #b4c1da; --ink-3: #8b9bbb; --rule: #2d4a78;
  --accent: #8fb0ff; --grid: rgb(255 255 255 / .05); --grid-2: rgb(255 255 255 / .1); --tape: rgb(255 255 255 / .16); --wash: #123058;
  --head-bg: rgb(12 35 70 / .94);
  --l-chat: #ff6b5e; --l-work: #5aa7f0; --l-mail: #c597ea; --l-hr: #f283b0; --l-crm: #ffc94a; --l-git: #8ed15a; --l-live: #4fd1c0;
  --shadow: 0 1px 1px rgb(0 0 0 / .4), 0 24px 50px -26px rgb(0 0 0 / .8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-style="b"]:not([data-theme="light"]) {
    --bg: #0c2346; --card: #10294f; --ink: #e9eef8; --ink-2: #b4c1da; --ink-3: #8b9bbb; --rule: #2d4a78;
    --accent: #8fb0ff; --grid: rgb(255 255 255 / .05); --grid-2: rgb(255 255 255 / .1); --tape: rgb(255 255 255 / .16); --wash: #123058;
    --head-bg: rgb(12 35 70 / .94);
    --l-chat: #ff6b5e; --l-work: #5aa7f0; --l-mail: #c597ea; --l-hr: #f283b0; --l-crm: #ffc94a; --l-git: #8ed15a; --l-live: #4fd1c0;
    --shadow: 0 1px 1px rgb(0 0 0 / .4), 0 24px 50px -26px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}
[data-style="b"] body {
  background: linear-gradient(var(--grid-2) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--grid-2) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, var(--bg);
}
[data-style="b"] h1, [data-style="b"] h2, [data-style="b"] h3, [data-style="b"] .brand-name { font-stretch: 112%; }
[data-style="b"] .btn { text-transform: none; }
[data-style="b"] .btn-pri { box-shadow: 4px 4px 0 var(--accent); }
[data-style="b"] .btn-pri:hover { transform: translate(-2px, -2px); }

/* hero plan */
[data-style="b"] .plan { width: 100%; height: auto; display: block; overflow: visible; }
[data-style="b"] .plan .wall { fill: none; stroke: var(--ink); stroke-width: 7; }
[data-style="b"] .plan .iw { fill: none; stroke: var(--ink); stroke-width: 3; }
[data-style="b"] .plan .room { fill: var(--c); fill-opacity: 0; transition: fill-opacity .25s; }
[data-style="b"] .plan a:hover .room, [data-style="b"] .plan a:focus .room { fill-opacity: .14; }
[data-style="b"] .plan .lbl { font: 700 15px var(--display); font-stretch: 115%; fill: var(--ink); letter-spacing: .02em; }
[data-style="b"] .plan .sub { font: 500 11px var(--mono); fill: var(--ink-3); }
[data-style="b"] .plan .no { font: 600 11px var(--mono); fill: var(--c); }
[data-style="b"] .plan .dim { stroke: var(--ink-3); stroke-width: 1; }
[data-style="b"] .plan .dimt { font: 500 11px var(--mono); fill: var(--ink-3); }
[data-style="b"] .plan .door { fill: none; stroke: #c2271c; stroke-width: 2; stroke-dasharray: 4 4; }
[data-style="b"] .plan .reader { fill: #c2271c; animation: b-blink 2.4s ease-in-out infinite; }
[data-style="b"] .plan .draw { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: b-draw 1.8s cubic-bezier(.3, .7, .2, 1) .1s forwards; }
@keyframes b-draw { to { stroke-dashoffset: 0; } }
@keyframes b-blink { 50% { opacity: .25; } }
[data-style="b"] .art-b { position: relative; }
[data-style="b"] .titleblock { position: absolute; right: -6px; bottom: -40px; display: grid; grid-template-columns: auto auto; border: 2px solid var(--ink); background: var(--bg);
  font: 500 11px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
[data-style="b"] .titleblock span { padding: 6px 10px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
[data-style="b"] .titleblock span:nth-child(2n) { border-right: 0; }
[data-style="b"] .titleblock span:nth-child(n+3) { border-bottom: 0; }
[data-style="b"] .titleblock b { display: block; font: 700 13px var(--display); text-transform: none; letter-spacing: 0; color: var(--ink); }

/* facts and steps read like a drawing schedule */
[data-style="b"] .facts li { border-top-style: solid; }

/* demo accounts as a key register */
[data-style="b"] .passes { grid-template-columns: minmax(0, 1fr); gap: 0; border: 2px solid var(--ink); background: var(--bg); }
[data-style="b"] .pass + .pass { border-top: 1px solid var(--ink); }
[data-style="b"] .clip { display: none; }
[data-style="b"] .pass-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
[data-style="b"] .pass-band { flex-direction: column; justify-content: center; gap: 4px; padding: 14px; border-right: 1px solid var(--ink); background: var(--wash);
  font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
[data-style="b"] .pass-kind::before { content: "Chìa khóa"; }
[data-style="b"] .pass-no { font: 700 26px/1 var(--display); color: var(--c); letter-spacing: 0; }
[data-style="b"] .pass-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; padding: 14px 18px; }
[data-style="b"] .av { border-radius: 0; }
[data-style="b"] .copy { border: 1.5px solid var(--ink); color: var(--ink); }
[data-style="b"] .launch a { border: 2px solid var(--ink); }

/* services: rooms with pinned drawings */
[data-style="b"] .svc-no span { display: grid; place-items: center; width: 72px; height: 72px; border: 2px solid var(--c); font: 600 26px/1 var(--mono); }
[data-style="b"] .svc-no span::before { content: "P."; font-size: 13px; position: absolute; transform: translate(-22px, -22px); }
[data-style="b"] .svc-no { position: relative; }
[data-style="b"] .shot .frame { padding: 10px; background: var(--card); box-shadow: var(--shadow); transform: rotate(.35deg); }
[data-style="b"] .svc:nth-of-type(even) .shot .frame { transform: rotate(-.35deg); }
[data-style="b"] .shot .frame::before, [data-style="b"] .shot .frame::after { content: ""; position: absolute; z-index: 4; width: 96px; height: 24px; top: -10px; background: var(--tape); }
[data-style="b"] .shot .frame::before { left: 24px; transform: rotate(-4deg); }
[data-style="b"] .shot .frame::after { right: 24px; transform: rotate(3deg); }
[data-style="b"] .shot .frame { overflow: visible; }
[data-style="b"] .frame-bar { border: 1px solid var(--rule); border-bottom: 0; background: var(--bg); }
[data-style="b"] .frame-bar i { border-radius: 0; }
[data-style="b"] .canvas { border: 1px solid var(--rule); }
[data-style="b"] .try > p { font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
[data-style="b"] .layer { border-width: 2px; border-color: var(--ink); }
[data-style="b"] .switcher { border-radius: 0; }
[data-style="b"] .switcher button { border-radius: 0; }
@media (max-width: 900px) {
  [data-style="b"] .titleblock { position: static; margin-top: 14px; }
  [data-style="b"] .pass-card { grid-template-columns: 64px minmax(0, 1fr); }
  [data-style="b"] .pass-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-style="b"] .passes { margin-right: 0; padding-right: 0; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  [data-style="b"] .svc-no span { width: 56px; height: 56px; font-size: 20px; }
}
@media (max-width: 1100px) {
  [data-style="b"] .passes { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-bottom: 0; }
}