/* Xuân Thu · giao diện v3, KHUNG app (brief thiết kế lại 02/11/2026 §1 và §3, mock-up design/reference). Nạp SAU mọi tệp CSS cũ, không @layer nên thắng app.css.
   1) Đổi token cũ (nền, chữ, viền, cam) sang bảng màu --ds-*: mọi màn đổi màu nền và chữ ngay, chưa đổi bố cục từng màn.
   2) Thanh trên, thanh bên (máy tính, thu gọn được), thanh đáy kính (điện thoại), tiêu đề lớn, nút ? trên thanh trên ở mọi bề rộng.
   Màu trạng thái cũ (--status-*) giữ nguyên tới khi đổi từng màn (bước 2). */

/* ---------- 1. token cũ → bảng màu mới ---------- */
:root {
  --bg-app: var(--ds-page); --bg-surface: var(--ds-surface); --bg-sunken: var(--ds-sunken); --bg-hover: var(--ds-sunken); --bg-selected: var(--ds-tint); --bg-rail: var(--ds-surface);
  --fg-primary: var(--ds-text); --fg-secondary: var(--ds-text-2); --fg-muted: var(--ds-text-3);
  --border-subtle: var(--ds-hairline); --border-default: #E5E7EB; --border-strong: #D1D5DB; --border-focus: var(--ds-primary);
  --accent: var(--ds-primary); --accent-strong: var(--ds-primary); --accent-hover: var(--ds-primary-hover); --accent-active: var(--ds-primary-hover); --accent-subtle-bg: var(--ds-tint); --accent-fg: var(--ds-on-primary); --accent-text: var(--ds-primary-text);
  --badge-bg: var(--ds-badge); --badge-fg: var(--ds-on-badge);
  --font-ui: var(--ds-font);
  --v2-card-r: var(--ds-r-card); --v2-ctl-r: var(--ds-r-ctl); --v2-shadow: var(--ds-shadow); --v2-shadow-lift: var(--ds-shadow-lift);
  --topbar-h: 56px; --tabbar-h: 64px; --sidebar-w: 248px; --sidebar-w-min: 72px;
}
:root[data-theme="dark"] { --border-default: #2C3542; --border-strong: #3A4553; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --border-default: #2C3542; --border-strong: #3A4553; } }
body { background: var(--ds-page); font-family: var(--ds-font); }

/* ---------- 2. thanh trên ---------- */
#topbar { height: var(--topbar-h); gap: 8px; padding: 0 var(--ds-gutter); background: var(--ds-surface); border-bottom: 1px solid var(--ds-hairline); }
#topbar .wm { font-size: var(--ds-fs-17); font-weight: 700; color: var(--ds-text); }
#topbar .wm i { color: var(--ds-brand); }
#topbar .crumb { font-size: var(--ds-fs-15); } #topbar .crumb b { font-weight: 600; }
#topbar .srch { height: 40px; border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); color: var(--ds-text-3); font-size: var(--ds-fs-15); padding: 0 12px; gap: 8px; }
#topbar .srch kbd { border: 0; background: var(--ds-surface); }
#topbar .ib { width: 40px; height: 40px; border-radius: 50%; color: var(--ds-text); font-size: 22px; }
#topbar .ib:hover { background: var(--ds-sunken); }
#topbar .tb-hoi { display: grid; }   /* nút ? ở mọi bề rộng, không còn nút nổi */
#topbar .av { width: 36px; height: 36px; background: var(--ds-brand); color: #FFFFFF; font-size: var(--ds-fs-15); }
.hoi-app-nut { display: none !important; }
#topbar .tb-so { background: var(--ds-badge); color: var(--ds-on-badge); }

/* ---------- 3. thanh bên (máy tính) ---------- */
#side { background: var(--ds-surface); border-right: 1px solid var(--ds-hairline); padding: 12px 12px 16px; gap: 2px; }
#side .grp { font-size: 12px; letter-spacing: .06em; color: var(--ds-text-3); font-weight: 700; padding: 16px 12px 6px; }
#side .grp.on { color: var(--ds-text-2); }
#side a { height: 44px; gap: 12px; padding: 0 12px; border-radius: var(--ds-r-ctl); color: var(--ds-text-2); font-size: var(--ds-fs-15); font-weight: 600; }
#side a .ds-ic { width: 22px; height: 22px; color: var(--ds-text-3); }
#side a:hover { background: var(--ds-sunken); color: var(--ds-text); }
#side a.on { background: var(--ds-tint); color: var(--ds-on-tint); font-weight: 600; }
#side a.on::before { display: none; }
#side a.on .ds-ic { color: var(--ds-primary-text); }
#side a.sub { height: 36px; padding-left: 46px; font-size: var(--ds-fs-13); }
#side a .nb { background: var(--ds-badge); color: var(--ds-on-badge); min-width: 20px; height: 20px; border-radius: 10px; }
#side .side-gon { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--ds-r-ctl); background: transparent; color: var(--ds-text-3); font: 600 var(--ds-fs-15) var(--ds-font); cursor: pointer; white-space: nowrap; }
#side .side-gon:hover { background: var(--ds-sunken); color: var(--ds-text); }
#side .side-gon .ds-ic { width: 22px; height: 22px; flex: none; }
#side .who { border-top: 1px solid var(--ds-hairline); font-size: var(--ds-fs-13); padding: 12px; }
#side .whoout { border-radius: var(--ds-r-ctl); }
#side details.ng > summary::after { border-color: var(--ds-text-3); }
@media (min-width: 1024px) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  #side .grp { display: flex; } #side a { justify-content: flex-start; padding: 0 12px; } #side a span, #side .who { display: revert; } #side .who { display: flex; }
  #side details.ng > summary { font-size: 12px; height: auto; margin: 0; border-top: 0; justify-content: flex-start; padding: 16px 12px 6px; }
  #side details.ng > summary::after { margin-left: auto; width: 6px; height: 6px; }
  #topbar .ctx { display: inline; }
  /* nội dung rộng tối đa 1.200, giữa màn */
  #view { padding: 24px var(--ds-gutter) 64px; }
  #view > * { max-width: var(--ds-maxw); margin-left: auto; margin-right: auto; }
  .foot { max-width: none; }
}
/* thu gọn: dải icon 72 px (tự động ở 768 đến 1.023 px, hoặc khi chị bấm Thu gọn menu) */
@media (min-width: 768px) and (max-width: 1023px) { .app { grid-template-columns: var(--sidebar-w-min) minmax(0, 1fr); } #side .side-gon { display: none; } }
@media (min-width: 768px) {
  html.side-gon .app { grid-template-columns: var(--sidebar-w-min) minmax(0, 1fr); }
  html.side-gon #side .grp, html.side-gon #side a span, html.side-gon #side .who, html.side-gon #side .side-gon span, html.side-gon #side a .nb { display: none; }
  html.side-gon #side details.ng > summary { font-size: 0; height: 12px; padding: 0; margin: 6px 12px 2px; border-top: 1px solid var(--ds-hairline); }
  html.side-gon #side details.ng > summary::after { display: none; }
  html.side-gon #side a, html.side-gon #side .side-gon { justify-content: center; padding: 0; }
  html.side-gon #side .side-gon .ds-ic { transform: scaleX(-1); }
}
@media (min-width: 768px) and (max-width: 1023px) { #side a { justify-content: center; padding: 0; } #side a .ds-ic { margin: 0; } #side a .nb { display: none; } }

/* ---------- 4. tiêu đề màn: tiêu đề lớn 30 px, không gạch dưới ---------- */
.bar { border-bottom: 0; padding: 4px 0 12px; margin-bottom: 8px; gap: 12px; }
#view .bar .wm { font-size: max(var(--ds-fs-30), var(--t-title)); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }   /* #view: thắng các luật cũ theo vai (body.vt-order .bar .wm) */
.bar .sub { font-size: var(--ds-fs-15); color: var(--ds-text-2); margin-top: 4px; }
.bar .back { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); color: var(--ds-text); }

/* ---------- 5. điện thoại: thanh trên mỏng, thanh đáy kính, tiêu đề lớn thu lên thanh trên khi cuộn ---------- */
@media (max-width: 767px) {
  #topbar { padding: 0 8px 0 16px; background: var(--ds-page); border-bottom-color: transparent; transition: background-color var(--ds-dur-fast), border-color var(--ds-dur-fast); }
  body.da-cuon #topbar { border-bottom-color: var(--ds-hairline); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.da-cuon #topbar { background: var(--ds-glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); } }
  #topbar .srch { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; background: transparent; margin-left: auto; font-size: 22px; color: var(--ds-text); border-radius: 50%; }
  #topbar .srch span, #topbar .srch kbd { display: none; }
  #topbar .tb-sang-toi { display: none; }   /* điện thoại: đổi sáng tối nằm trong menu tài khoản (chữ cái tên) */
  /* tên màn thay chữ Xuân Thu khi tiêu đề lớn đã cuộn khuất */
  #topbar .crumb { display: flex; position: absolute; left: 64px; right: 160px; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--ds-dur-fast); }
  #topbar .crumb > span:first-child, #topbar .crumb .crumb-ngan { display: none; }
  #topbar .crumb b { font-size: var(--ds-fs-17); overflow: hidden; text-overflow: ellipsis; }
  body.td-an #topbar .crumb { opacity: 1; } body.td-an #topbar .wm { opacity: 0; }
  #topbar .wm { transition: opacity var(--ds-dur-fast); }
  .bar { position: static; background: transparent; margin: 0 0 8px; padding: 4px 0 8px; }
  #view .bar .wm { font-size: var(--ds-fs-30); }
  #view { padding: 8px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px + var(--foot-h, 0px)); }   /* chừa chỗ cho thanh hành động (.foot) như app.css */
  #tabbar { height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); background: var(--ds-surface); border-top: 1px solid var(--ds-hairline); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { #tabbar { background: var(--ds-glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); } }
  #tabbar a, #tabbar button { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 0 2px; min-height: var(--tabbar-h); font-size: 12px; font-weight: 600; color: var(--ds-text-3); }
  #tabbar a .ds-ic { width: 24px; height: 24px; }
  #tabbar a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #tabbar a.on, #tabbar a[aria-current="page"] { color: var(--ds-primary-text); font-weight: 700; }
  #tabbar a.on::before { display: none; }
  #tabbar .nbt { top: 6px; background: var(--ds-badge); color: var(--ds-on-badge); box-shadow: 0 0 0 2px var(--ds-surface); }
  .foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-transparency: reduce) { #tabbar, body.da-cuon #topbar { background: var(--ds-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }