/* Kiểu chung cho các trang phụ (404, giới thiệu, điện thoại); màu và cỡ chữ lấy từ tokens.css (FR-43, canvas bảng 2, 3) */
*{box-sizing:border-box}
body{margin:0;background:var(--color-surface-panel);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-subtitle);line-height:var(--font-line-height-text)}
a{color:var(--color-flow-stroke)}
a:hover{color:var(--color-accent-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
.page{max-width:720px;margin:0 auto;padding:32px 16px}
.page h1{font-size:var(--font-size-title);font-weight:var(--font-weight-semibold)}

/* đầu trang, chân trang giống trang bản đồ */
.band{background:var(--color-surface-page);border-bottom:1px solid var(--color-surface-grid-line)}
.wrap{max-width:1392px;margin:0 auto;padding:0 var(--space-3)}
.site-hdr .wrap{min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.brand{display:flex;align-items:center;gap:10px;color:var(--color-text-primary);text-decoration:none}
.brand-mark{width:34px;height:34px;flex:none;border-radius:var(--radius-lg);background:var(--color-flow-stroke);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2px;padding:6px}
.brand-mark i{border-radius:var(--radius-sm)}
.brand-mark i:nth-child(1){background:var(--color-o-tren-1-bg)}
.brand-mark i:nth-child(2),.brand-mark i:nth-child(5){background:var(--color-tool-2-fill)}
.brand-mark i:nth-child(3){background:var(--color-o-tren-3-fill)}
.brand-mark i:nth-child(4){background:var(--color-gray-200)}
.brand-mark i:nth-child(6){background:var(--color-o-duoi-3-fill)}
.brand-name{font-size:var(--font-size-title);font-weight:var(--font-weight-semibold);line-height:1.25}
.nav{display:flex;align-self:stretch;gap:var(--space-half)}
.nav a{display:flex;align-items:center;padding:0 12px;border-bottom:3px solid transparent;color:var(--color-text-secondary);text-decoration:none}
.nav a[aria-current="page"]{border-bottom-color:var(--color-flow-stroke);color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}
.site-ftr{background:var(--color-surface-page);border-top:1px solid var(--color-surface-grid-line)}
.site-ftr .wrap{padding-top:var(--space-2);padding-bottom:var(--space-2);display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:var(--font-size-label);color:var(--color-text-note)}
.site-ftr a{display:inline-block;min-height:24px;line-height:24px}

/* trang Giới thiệu và nguồn (canvas bảng 2) */
.about{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-start;padding-top:var(--space-4);padding-bottom:var(--space-4)}
.toc{flex:1 1 220px;max-width:260px;display:flex;flex-direction:column;gap:var(--space-half);position:sticky;top:var(--space-2)}
.toc a{padding:6px 10px;border-radius:var(--radius-md);text-decoration:none;min-height:24px}
.toc a:hover{background:var(--color-accent-bg)}
.about article{flex:999 1 640px;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:var(--space-4)}
.about section{display:flex;flex-direction:column;gap:12px;scroll-margin-top:var(--space-2)}
.about h1{margin:0;font-size:var(--font-size-present-title);line-height:1.25}
.about h2{margin:0;font-size:var(--font-size-title);font-weight:var(--font-weight-semibold)}
.about p,.about ul{margin:0}
.about ul{padding-left:20px;display:flex;flex-direction:column;gap:var(--space-half)}
.lead{font-size:var(--font-size-present-subtitle);color:var(--color-text-secondary)}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--radius-lg);background:var(--color-flow-stroke);color:var(--color-text-inverse);text-decoration:none;font-weight:var(--font-weight-semibold)}
.cta:hover{color:var(--color-text-inverse)}
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-half);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold)}
.grid6 div{padding:10px;border-radius:var(--radius-md)}
.o-tren-1{background:var(--color-o-tren-1-bg);color:var(--color-o-tren-1-label)}
.o-tren-2{background:var(--color-o-tren-2-bg);color:var(--color-o-tren-2-label)}
.o-tren-3{background:var(--color-o-tren-3-bg);color:var(--color-o-tren-3-label)}
.o-duoi-1{background:var(--color-o-duoi-1-bg);color:var(--color-o-duoi-1-label)}
.o-duoi-2{background:var(--color-o-duoi-2-bg);color:var(--color-o-duoi-2-label)}
.o-duoi-3{background:var(--color-o-duoi-3-bg);color:var(--color-o-duoi-3-label)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stats div{background:var(--color-surface-page);border:1px solid var(--color-surface-grid-line);border-radius:var(--radius-lg);padding:12px}
.stats b{display:block;font-size:var(--font-size-present-title);font-weight:var(--font-weight-semibold)}
.stats span{font-size:var(--font-size-label);color:var(--color-text-note)}
.note-box{background:var(--color-o-tren-2-bg);border-radius:var(--radius-lg);padding:var(--space-2)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.toc{position:static;max-width:none}}

/* màn điện thoại (canvas bảng 3) */
.phone{max-width:480px;margin:0 auto;padding:20px 16px;display:flex;flex-direction:column;gap:var(--space-2)}
.phone .brand-name{font-size:var(--font-size-subtitle)}
.phone h1{margin:0;font-size:var(--font-size-present-title);line-height:1.3}
.phone figure{margin:0;background:var(--color-surface-page);border:1px solid var(--color-surface-grid-line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.phone figure img{width:100%;height:auto;display:block}
.phone figcaption{font-size:var(--font-size-label);color:var(--color-text-note)}
.phone ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.phone .invite{background:var(--color-accent-bg);color:var(--color-accent-ink);border-radius:10px;padding:12px}
.btn{min-height:48px;border:1px solid var(--color-flow-stroke);border-radius:var(--radius-lg);background:var(--color-flow-stroke);color:var(--color-text-inverse);font:inherit;font-weight:var(--font-weight-semibold);cursor:pointer}
.phone .alt{min-height:44px;display:flex;align-items:center;justify-content:center}
.toast{position:fixed;left:50%;bottom:var(--space-3);transform:translateX(-50%);background:var(--color-text-primary);color:var(--color-text-inverse);border-radius:var(--radius-lg);padding:10px 12px;font-size:var(--font-size-label)}