/* Thành phần nền tảng của giao diện công khai "Bàn làm việc" (ADR-0045, kế hoạch Đợt A, Task 1). Token nằm ở tokens.css.
   Mọi thành phần dùng lớp .d-*, không phụ thuộc lớp vùng của <body> (stage, public), để Đợt B dùng lại cho Xưởng.
   Chữ đi qua --d-fs-* (đã nhân với --d-text-scale) nên chữ to "Aa" tới mọi thành phần: không viết px cố định cho chữ ở đây.
   Không blur, không bóng mờ, không gradient trang trí; ngoại lệ có chủ ý: --d-shadow-press của nút sun lớn nhất và mặt nạ mờ dần của chấm bi. */

/* ---- Chữ ---- */
.d-body { font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); color: var(--d-ink-soft); }
.d-body-l { font: 400 var(--d-fs-body-l) / var(--d-lh-body-l) var(--d-font-sans); color: var(--d-ink-soft); }
.d-caption { font: 500 var(--d-fs-caption) / var(--d-lh-caption) var(--d-font-sans); color: var(--d-muted); }
.d-badge { display: inline-flex; align-items: center; padding: var(--d-space-1) var(--d-space-3); border-radius: var(--d-radius-pill); background: var(--d-brand-tint); color: var(--d-brand-deep); font: 700 var(--d-fs-badge) / var(--d-lh-badge) var(--d-font-sans); }

/* ---- Tiêu đề nhóm (SectionHeading): vạch màu 14×30px + tên nhóm + một cụm giải thích. Đổi màu vạch bằng --d-heading-bar. ---- */
.d-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-3); }
.d-heading__bar { flex: none; width: 14px; height: 30px; border-radius: 7px; background: var(--d-heading-bar, var(--d-brand)); }
.d-heading__title { margin: 0; color: var(--d-ink); font: 700 var(--d-fs-title-m) / var(--d-lh-title-m) var(--d-font-display); }
.d-heading__note { color: var(--d-muted); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }

/* ---- Nút (Button): cao từ control-s (44px). Chính trên nền tối: sun + control-xl + bóng ấn. Chính trên nền sáng: brand + control-l. Phụ: viền line-strong. ---- */
.d-btn { --d-btn-fg: var(--d-ink); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--d-space-2); min-height: var(--d-control-m); padding: 0 var(--d-space-6);
  border: 2px solid transparent; border-radius: var(--d-radius-md); background: var(--d-surface); color: var(--d-btn-fg); cursor: pointer; text-align: center; text-decoration: none;
  font: 700 var(--d-fs-label) / var(--d-lh-label) var(--d-font-sans); }
.d-btn:hover, .d-btn:visited { color: var(--d-btn-fg); }
.d-btn--s { min-height: var(--d-control-s); padding: 0 var(--d-space-4); font-size: var(--d-fs-line); }
.d-btn--l { min-height: var(--d-control-l); padding: 0 var(--d-space-7); border-radius: var(--d-radius-lg); }
.d-btn--xl { min-height: var(--d-control-xl); padding: 0 var(--d-space-7); border-radius: var(--d-radius-lg); font-size: calc(22px * var(--d-text-scale)); }
.d-btn--sun { --d-btn-fg: var(--d-sun-ink); background: var(--d-sun); }
.d-btn--sun.d-btn--xl { box-shadow: var(--d-shadow-press); }
.d-btn--brand { --d-btn-fg: #fff; background: var(--d-brand); }
.d-btn--brand:hover { background: var(--d-brand-deep); }
.d-btn--line { border-color: var(--d-line-strong); }
.d-btn--line:hover { background: var(--d-brand-tint); }
/* Phụ gần hành động chính (Button README): viền brand, chữ brand-deep; ví dụ "Xem thử" cạnh "Mua" trên thẻ bài, "Đóng" là nút duy nhất của hộp phóng to. */
.d-btn--outline { --d-btn-fg: var(--d-brand-deep); border-color: var(--d-brand); }
.d-btn--outline:hover { background: var(--d-brand-tint); }

/* ---- Chip lọc và tab. Chip chưa chọn viền --d-line-input (đủ 3:1); đã chọn có nền brand VÀ dấu tích, không chỉ dựa vào màu. ---- */
.d-chips, .d-tabs { display: flex; flex-wrap: wrap; gap: var(--d-space-2); }
.d-chip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--d-space-1); min-height: var(--d-control-s); padding: 0 var(--d-space-4);
  border: 2px solid var(--d-line-input); border-radius: var(--d-radius-md); background: var(--d-surface); color: var(--d-ink); cursor: pointer; font: 600 var(--d-fs-label) / var(--d-lh-label) var(--d-font-sans); }
.d-chip[aria-pressed="true"] { border-color: var(--d-brand); background: var(--d-brand); color: #fff; }
.d-chip[aria-pressed="true"]::before { content: "✓"; }
.d-tab { box-sizing: border-box; min-height: var(--d-control-s); padding: 0 var(--d-space-4); border: 0; border-radius: var(--d-radius-md); background: transparent; color: var(--d-ink); cursor: pointer;
  font: 700 var(--d-fs-label) / var(--d-lh-label) var(--d-font-sans); }
.d-tab[aria-selected="true"], .d-tab[aria-pressed="true"] { background: var(--d-ink); color: #fff; }  /* aria-pressed: a group of filter buttons drawn as tabs (store kinds) */

/* ---- Vòng focus bàn phím: 3px brand (≥ 3:1 trên giấy), cách 3px. Thắng `button:focus-visible` của styles.css nhờ độ ưu tiên cao hơn. ---- */
.d-btn:focus-visible, .d-chip:focus-visible, .d-tab:focus-visible, .d-note:focus-visible { outline: 3px solid var(--d-brand); outline-offset: 3px; }

/* ---- Nhãn "Sắp ra mắt" (tính năng chưa chạy, ADR-0045 mục 4): nền sun-tint, chữ sun-text, như bản vẽ BaiGiangCuaToi. ---- */
.d-soon { display: inline-block; padding: 3px 10px; border-radius: var(--d-radius-pill); background: var(--d-sun-tint); color: var(--d-sun-text); vertical-align: middle; font: 700 var(--d-fs-badge) / var(--d-lh-badge) var(--d-font-sans); }
/* Chữ chỉ cho trình đọc màn hình, cả trên trang máy chủ dựng (không nạp store.css). */
.public .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Giấy nhớ (StickyNote): nền sun-tint, nhãn nhỏ sun-text, nghiêng −1,5°, góc dưới trái bo 18px. ---- */
.d-note { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px var(--d-space-4); border-radius: 4px 4px 4px 18px; background: var(--d-sun-tint); color: var(--d-sun-ink); text-decoration: none; transform: rotate(-1.5deg); }
.d-note:hover { color: var(--d-sun-ink); }
.d-note__label { color: var(--d-sun-text); font: 700 var(--d-fs-badge) / var(--d-lh-badge) var(--d-font-sans); }
.d-note__text { color: var(--d-sun-ink); font: 700 var(--d-fs-line) / var(--d-lh-line) var(--d-font-sans); }

/* ---- Chấm bi (PolkaDots): họa tiết nhận diện, dùng tiết kiệm (tối đa 2–3 cụm mỗi màn, ở mép hoặc góc), luôn mờ dần ra rìa bằng mặt nạ,
   không phủ đều nền, không đặt trước nội dung. Chỗ đặt và cỡ do nơi dùng quyết định (left/right/top/height). Nội dung nằm trên nhờ position: relative. ---- */
.d-dots { position: absolute; pointer-events: none; background-image: radial-gradient(var(--d-dot) 1.6px, transparent 1.7px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

/* ---- Màu hệ thống (Windows high contrast): nền đánh dấu chip/tab đang chọn bị bỏ, nên đang chọn có viền trong 2px; focus có vòng riêng, dày hơn và nằm ngoài. ---- */
@media (forced-colors: active) {
  .d-chip[aria-pressed="true"], .d-tab[aria-pressed="true"], .d-tab[aria-selected="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
  .d-btn:focus-visible, .d-chip:focus-visible, .d-tab:focus-visible, .d-note:focus-visible,
  .d-chip[aria-pressed="true"]:focus-visible, .d-tab[aria-pressed="true"]:focus-visible, .d-tab[aria-selected="true"]:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .d-note { transform: none; }
}

/* ---- Nhãn viên thuốc (đầu hero), chữ nhấn màu brand trong tiêu đề ---- */
.d-pill { align-self: flex-start; padding: 6px 14px; border-radius: var(--d-radius-pill); background: var(--d-brand-tint); color: var(--d-brand-deep); font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.d-pill--sky { background: var(--d-tile-sky); color: var(--d-ink); }
.d-mark { color: var(--d-brand); font-style: normal; }

/* ---- Hỏi đáp (trang chủ, trang Đề kiểm tra): <details> gốc. styles.css kẻ một đường và chừa lề trên mọi <details>/<summary>: đặt lại ở đây. ---- */
.d-faq { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 900px; margin: 0 auto; scroll-margin-top: 16px; }
.d-faq > h2 { margin: 0 0 8px; text-align: center; }
.d-faq__list { display: flex; flex-direction: column; gap: 12px; }
.d-faq__item { margin: 0; padding: 0; overflow: hidden; border: 2px solid var(--d-line); border-radius: 20px; background: var(--d-surface); }
.d-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 20px; box-sizing: border-box; color: var(--d-ink); cursor: pointer;
  list-style: none; font: 700 var(--d-fs-label) / 1.35 var(--d-font-sans); }
.d-faq__item > summary::-webkit-details-marker { display: none; }
.d-faq__item > summary:focus-visible { outline: 3px solid var(--d-brand); outline-offset: -3px; border-radius: 18px; }
.d-faq__mark { flex: none; color: var(--d-brand); font: 700 calc(24px * var(--d-text-scale)) / 1 var(--d-font-sans); }
.d-faq__mark::before { content: "+"; }
.d-faq__item[open] .d-faq__mark::before { content: "−"; }
.d-faq__item > p { margin: 0; padding: 0 20px 18px; color: var(--d-ink-soft); font: 400 var(--d-fs-body) / 1.6 var(--d-font-sans); }

@media (max-width: 760px) {
  .d-faq__item > summary { padding: 12px 16px; }
  .d-faq__item > p { padding: 0 16px 16px; }
}