/* Hướng dẫn bộ 3 (doc/dev/bo-giao-dien.html mục 4.3): đè lên frontend-1/css/huong-dan.css, màu theo dashboard.css */
:root { --fg: #1846a3; --muted: #7c8ba6; --line: #e3eaf5; --soft: #f6f9fe; --bg: #f3f7fd; --card: #fff; --accent: #1846a3; --blue: #1a66e0; }
.top { background: rgb(255 255 255 / .95); color: var(--fg); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.top-in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span { display: flex; flex-direction: column; line-height: 1.2; }
.brand b { font-weight: 800; font-size: .9rem; }
.brand small { font-size: .75rem; font-weight: 600; color: var(--blue); }
.ve-app { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 12px; padding: 8px 14px; }
.ve-app:hover { background: #1a53b8; text-decoration: none; }
.the-chon { display: flex; gap: 8px; overflow-x: auto; padding-top: 2px; padding-bottom: 12px; }
.top .the-chon a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 700; padding: 7px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: #475a7d; }
.top .the-chon a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.top .the-chon a[aria-current] { background: linear-gradient(90deg, #2563eb, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px #2563eb; }
h1 { font-weight: 800; letter-spacing: -.01em; }
h2 { font-weight: 800; }
.box { border-radius: 18px; padding: 20px 24px; box-shadow: 0 6px 24px -14px rgb(15 42 95 / .25); }
.box > h2 i { color: var(--blue); }
.pick a { border-radius: 12px; }
.pick a:hover { color: var(--blue); }
.k { border-color: var(--line); border-radius: 8px; }
.k.primary { background: var(--blue); border-color: var(--blue); }
.k.ok { background: #16a34a; border-color: #16a34a; }
.k.bad { background: #e5484d; border-color: #e5484d; }
.k.on { background: #e8f0fd; border-color: #bcd3f7; color: var(--blue); }
.note, .tip, .warn { border-radius: 12px; }
.note { background: #e8f0fd; border-color: #bcd3f7; }
.st { border-radius: 8px; }
th { background: var(--soft); color: #475a7d; font-size: .85rem; }
figure img { border-radius: 14px; }
.stage { border-radius: 14px; border-top-color: var(--blue); }
details { border-radius: 12px; }
@media (max-width: 640px) {
  .ve-app span { display: none; }
  .box { padding: 16px; }
}
@media print { .the-chon, .ve-app { display: none; } }