/* Direction A, "Sảnh chính": the lobby of an office tower. A felt letter board lists the floors,
   reception hands out visitor passes on lanyards, every service is a floor. */
[data-style="a"] {
  --bg: #e9e5dc; --bg-2: #ddd7cb; --card: #fbfbf8; --ink: #17181a; --ink-2: #484b50; --ink-3: #6c6f74; --rule: #cfc8ba;
  --accent: #c8281c; --felt: #1a1a1a; --felt-2: #232323; --letter: #f3f0e8; --letter-dim: #a39e92; --frame-hi: #e8e9ea; --frame-lo: #8d9196; --strap: #1e2b47;
  --font: "Be Vietnam Pro", system-ui, sans-serif; --display: "Be Vietnam Pro", system-ui, sans-serif; --mono: "Barlow Condensed", "Be Vietnam Pro", sans-serif;
  --eyebrow-font: 600 14px/1.2 var(--mono); --eyebrow-track: .14em; --no-font: 700 104px/.8 var(--mono); --no-color: transparent; --weight-h: 800; --track-h: -.035em;
  --radius: 8px; --radius-sm: 4px; --radius-btn: 4px; --radius-num: 50%; --line-w: 1.5px; --btn-line: 1.5px;
  --head-bg: rgb(233 229 220 / .95); --head-line: 1px solid var(--rule); --sec-line: 1px solid var(--rule); --svc-line: 1px solid var(--rule);
  --try-line: 1.5px dashed var(--rule); --try-bg: transparent;
  --shadow: 0 1px 2px rgb(20 20 15 / .15), 0 30px 60px -30px rgb(20 20 15 / .55);
}
[data-style="a"][data-theme="dark"] {
  --bg: #121315; --bg-2: #1b1c1f; --card: #1d1f23; --ink: #ecebe7; --ink-2: #b4b3ad; --ink-3: #8a8983; --rule: #2e2f33;
  --accent: #ff5a47; --felt: #0a0a0a; --felt-2: #141414; --strap: #2b3d66; --head-bg: rgb(18 19 21 / .95);
  --l-chat: #ff6b5e; --l-work: #5aa7f0; --l-mail: #c597ea; --l-hr: #f283b0; --l-crm: #ffc94a; --l-git: #8ed15a; --l-live: #4fd1c0;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .85);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-style="a"]:not([data-theme="light"]) {
    --bg: #121315; --bg-2: #1b1c1f; --card: #1d1f23; --ink: #ecebe7; --ink-2: #b4b3ad; --ink-3: #8a8983; --rule: #2e2f33;
    --accent: #ff5a47; --felt: #0a0a0a; --felt-2: #141414; --strap: #2b3d66; --head-bg: rgb(18 19 21 / .95);
    --l-chat: #ff6b5e; --l-work: #5aa7f0; --l-mail: #c597ea; --l-hr: #f283b0; --l-crm: #ffc94a; --l-git: #8ed15a; --l-live: #4fd1c0;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .85);
    color-scheme: dark;
  }
}
[data-style="a"] .facts b { font-family: var(--mono); font-size: 40px; }

/* lobby directory board */
[data-style="a"] .board { position: relative; padding: 14px; border-radius: 6px; background: linear-gradient(145deg, var(--frame-hi), var(--frame-lo)); box-shadow: var(--shadow); }
[data-style="a"] .felt { border-radius: 2px; padding: 22px 22px 18px; color: var(--letter); background: repeating-linear-gradient(180deg, var(--felt) 0 3px, var(--felt-2) 3px 31px); }
[data-style="a"] .board-h { display: flex; justify-content: space-between; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgb(255 255 255 / .08);
  font: 600 15px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--letter-dim); }
[data-style="a"] .row { display: grid; grid-template-columns: 50px auto 1fr auto; align-items: baseline; gap: 12px; height: 31px; text-decoration: none;
  font: 600 21px/31px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(6px);
  animation: a-pin .5s var(--ease) forwards; }
[data-style="a"] .row:nth-child(2) { animation-delay: .05s; } [data-style="a"] .row:nth-child(3) { animation-delay: .1s; }
[data-style="a"] .row:nth-child(4) { animation-delay: .15s; } [data-style="a"] .row:nth-child(5) { animation-delay: .2s; }
[data-style="a"] .row:nth-child(6) { animation-delay: .25s; } [data-style="a"] .row:nth-child(7) { animation-delay: .3s; }
[data-style="a"] .row:nth-child(8) { animation-delay: .35s; } [data-style="a"] .row:nth-child(9) { animation-delay: .4s; }
[data-style="a"] .row .fl { font-size: 15px; color: var(--letter-dim); }
[data-style="a"] .row .nm::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 10px; transform: translateY(-2px); }
[data-style="a"] .row i { border-bottom: 2px dotted rgb(243 240 232 / .28); transform: translateY(-6px); }
[data-style="a"] .row .ds { font-weight: 500; font-size: 17px; letter-spacing: .04em; color: var(--letter-dim); }
@keyframes a-pin { to { opacity: 1; transform: none; } }
[data-style="a"] .plate { position: absolute; right: 28px; bottom: -15px; padding: 9px 12px; border-radius: 2px; background: var(--accent); color: #fff;
  font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: var(--shadow); }

/* reception: visitor passes on lanyards */
[data-style="a"] .passes { padding-top: 0; border-top: 10px solid var(--bg-2); }
[data-style="a"] .pass { padding-top: 84px; transform-origin: 50% 0; animation: a-sway 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
@keyframes a-sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
[data-style="a"] .pass::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 94px; margin-left: -11px; background: var(--strap); border-radius: 0 0 3px 3px; }
[data-style="a"] .clip { position: absolute; top: 76px; left: 50%; z-index: 1; width: 34px; height: 22px; margin-left: -17px; border-radius: 4px; background: linear-gradient(var(--frame-hi), var(--frame-lo)); }
[data-style="a"] .pass-card { background: var(--card); border-radius: 10px; box-shadow: var(--shadow); }
[data-style="a"] .pass-band { padding: 22px 16px 10px; background: var(--ink); color: var(--bg); font: 700 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
[data-style="a"] .pass-kind::before { content: "Thẻ khách"; }
[data-style="a"] .pass-body { padding: 16px; }

/* floors */
[data-style="a"] .svc-no span { -webkit-text-stroke: 2px var(--c); }
[data-style="a"] .svc-no span::before { content: "T"; font-size: 40px; vertical-align: top; margin-right: 2px; }
[data-style="a"] .shot .frame { border-radius: 8px; border: 1px solid var(--rule); box-shadow: var(--shadow); }
[data-style="a"] .layer { border-style: solid; }
[data-style="a"] .layer-add { border-style: dashed; }
@media (max-width: 1100px) {
  [data-style="a"] .svc-no span { font-size: 72px; }
}
@media (max-width: 900px) {
  [data-style="a"] .row { grid-template-columns: 36px auto 1fr; font-size: 18px; }
  [data-style="a"] .row .ds { display: none; }
  [data-style="a"] .felt { padding: 16px 14px 12px; }
  [data-style="a"] .facts b { font-size: 30px; }
}
[data-style="a"] .kv .v { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 14px; }