/* chrome.css — KHUNG app trang trong "Dòng" (theo bản export site/{map,qa,vehicle,
   garage}.html). Header NGANG sticky + 2 shell (app-full / app-centered). Chỉ token
   ngữ nghĩa từ tokens.css (KHÔNG hardcode hex/spacing/radius). Brand = var(--accent).
   Trang chủ "/" GIỮ shell rail cũ (home.css) — chrome.css không đụng tới. */

:root {
  --chrome-header-h: 60px;
}

/* ===== Header ngang (sticky, blur) ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.app-header-in {
  max-width: 1200px;
  margin: 0 auto;
  height: var(--chrome-header-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

/* Logo + chữ Dòng */
.ah-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
  color: var(--text);
}
.ah-brand img { border-radius: 7px; flex: none; }
.ah-brand span { font-weight: 800; font-size: 19px; letter-spacing: -.01em; }

/* ===== Nav ngang (ẩn ở mobile — đã có bottom-nav) ===== */
.ah-nav {
  display: none;
  align-items: center;
  gap: 2px;
}
.ah-link {
  padding: 7px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur, .15s) ease, color var(--dur, .15s) ease;
}
.ah-link:hover { background: var(--surface-2); color: var(--text); }
.ah-link.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.ah-link-soon { color: var(--faint); cursor: default; }
.ah-link-soon:hover { background: none; color: var(--faint); }

/* ===== Hành động bên phải ===== */
.ah-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ah-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.ah-icon-btn:hover { background: var(--surface-2); }
.ah-icon-btn .fa-icon { width: 17px; height: 17px; }
/* Override .theme-toggle của home.css (width:100%/text-align:left) cho nút tròn header */
.ah-icon-btn.theme-toggle { width: 38px; padding: 0; text-align: center; font: inherit; }
.ah-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 2px solid var(--surface);
}
.ah-avatar {
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-2);
}
.ah-avatar-img,
.ah-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-avatar-fb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
}
.ah-avatar-fb .fa-icon { width: 18px; height: 18px; }
.ah-login { width: auto; height: 38px; padding: 0 16px; min-height: 0; }

@media (min-width: 1024px) {
  .ah-nav { display: flex; }
}

/* ===== Shell FULL (bản đồ): lấp phần còn lại của viewport sau header ===== */
.app-full {
  position: relative;
  min-height: 0;
}
/* Map: cao = viewport trừ header (và trừ bottom-nav ở mobile vì nav cố định đáy). */
.app-full .map-shell { --map-offset: calc(var(--chrome-header-h) + 60px); }
@media (min-width: 1024px) {
  .app-full .map-shell { --map-offset: var(--chrome-header-h); }
}

/* ===== Shell CENTERED (garage/xe/hỏi-đáp/catalog/hub) ===== */
.app-centered {
  max-width: 1180px;
  margin: 0 auto;
  /* chừa đáy cho bottom-nav mobile cố định */
  padding: 20px 16px calc(84px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  .app-centered { padding: 24px 24px 48px; }
}

/* ===== Shell NARROW (chi tiết bài / hồ sơ / đã lưu / tag / thông báo / cài đặt) =====
   Cột đọc 1 hàng hẹp ~600 (giống cột feed trang chủ), căn giữa dưới header ngang.
   Tái dùng content cũ vốn thiết kế cho .feed-main (~600). */
.app-centered.app-narrow {
  max-width: 632px; /* 600 nội dung + 2×16 padding ngang */
}

/* Thanh con dính (.detail-bar / .feed-tabs) trong shell mới phải dính DƯỚI header
   ngang sticky (cao --chrome-header-h), không che lên header khi cuộn. */
.app-centered .detail-bar,
.app-centered .feed-tabs { top: var(--chrome-header-h); }