/* Header và chân trang của vùng công khai "Bàn làm việc" (ADR-0045, kế hoạch Đợt A, Task 2). Markup: web/public-header.html và web/site-footer.html,
   dùng chung cho ứng dụng (web/site-header.js) và trang do máy chủ dựng (backend/app/public_pages.py). Xưởng giữ header cũ (header.css) tới Đợt B.
   Token ở tokens.css, nút ở public-ui.css. Chữ đi qua --d-fs-* nên chữ to "Aa" tới cả header lẫn chân trang. */

/* ---- Header: logo + menu trong viên thuốc trắng + các nút. Từ 1240px trở xuống (và 1500px khi bật chữ to) thu gọn thành nút Menu. ---- */
.d-header { box-sizing: border-box; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-3) var(--d-space-4); padding: var(--d-space-4) 40px; font-family: var(--d-font-sans); }
.d-header__brand { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; min-height: var(--d-control-s); color: var(--d-ink); text-decoration: none; font: 700 calc(20px * var(--d-text-scale)) / 1.2 var(--d-font-display); }
.d-header__brand:hover, .d-header__brand:visited { color: var(--d-ink); }
.d-header__brand img { display: block; flex: none; width: 36px; height: 36px; }
.d-header__brand span { min-width: 0; overflow-wrap: anywhere; }  /* tên dài hay giãn chữ (WCAG 1.4.12) ở 320px: xuống dòng thay vì tràn */
.d-header__panel { display: flex; flex-wrap: wrap; flex: 1 1 auto; align-items: center; gap: var(--d-space-3) var(--d-space-4); min-width: 0; }
.d-header__nav { display: flex; flex: 0 0 auto; gap: 2px; margin-inline: auto; padding: 4px; border: 1px solid var(--d-line); border-radius: var(--d-radius-pill); background: var(--d-surface); }
.d-header__nav a { display: flex; align-items: center; min-height: var(--d-control-s); padding: 0 var(--d-space-4); border-radius: var(--d-radius-pill); color: var(--d-ink); text-decoration: none; white-space: nowrap; font: 600 var(--d-fs-caption) / 1.2 var(--d-font-sans); }
.d-header__nav a:hover { background: var(--d-brand-tint); }
.d-header__nav a[aria-current="page"] { background: var(--d-brand); color: #fff; font-weight: 700; }
.d-header__tools { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--d-space-3); }
.d-header__login { display: inline-flex; align-items: center; min-height: var(--d-control-m); padding: 0 var(--d-space-4); color: var(--d-ink); text-decoration: none; white-space: nowrap; font: 600 var(--d-fs-label) / 1.2 var(--d-font-sans); }
.d-header__login:hover, .d-header__login:visited { color: var(--d-ink); }
/* Giỏ hàng (ADR-0051): chỉ hiện khi giỏ có bài (web/cart.js), kèm số bài. */
.d-header__cart { gap: var(--d-space-2); }
.d-header__cart-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: var(--d-radius-pill); background: var(--d-brand); color: #fff; font: 700 var(--d-fs-caption) / 1 var(--d-font-sans); }
.d-header__trial { border-radius: var(--d-radius-pill); white-space: nowrap; }
.d-header__toggle { display: none; align-items: center; justify-content: center; gap: var(--d-space-2); min-height: var(--d-control-s); margin-left: auto; padding: 0 var(--d-space-4); border: 2px solid var(--d-line-strong); border-radius: var(--d-radius-md); background: var(--d-surface); color: var(--d-ink); cursor: pointer; font: 700 var(--d-fs-line) / 1.2 var(--d-font-sans); }
.d-header [hidden] { display: none !important; }
.d-header a:focus-visible, .d-header button:focus-visible { outline: 3px solid var(--d-brand); outline-offset: 3px; }

/* Laptop 1280px có thanh cuộn dọc chỉ còn ~1265px, và Be Vietnam Pro rộng hơn phông dự phòng: từ 1360px trở xuống bớt lề và khoảng đệm để header đầy đủ vẫn một hàng, còn dư. */
@media (max-width: 1360px) {
  .d-header { column-gap: var(--d-space-3); padding-inline: 24px; }
  .d-header__panel { column-gap: var(--d-space-3); }
  .d-header__nav a { padding-inline: var(--d-space-3); }
  .d-header__tools { gap: var(--d-space-2); }
  .d-header__login { padding-inline: 10px; }
  .d-header__trial { padding-inline: var(--d-space-5); }
}

/* Thu gọn: chỉ logo và nút Menu; menu, "Chữ to" và hai nút vào xếp thành cột khi mở. Chỉ khi script đã chạy (.js-ready): không có script thì mọi thứ vẫn hiện, tự xuống dòng. */
@media (max-width: 1239px) {
  .js-ready .d-header__toggle { display: inline-flex; }
  .js-ready .d-header__panel { display: none; flex-basis: 100%; }
  .js-ready .d-header__panel.is-open { display: flex; flex-direction: column; align-items: stretch; padding-bottom: var(--d-space-3); }
  .js-ready .d-header__nav { flex-direction: column; margin-inline: 0; border-radius: var(--d-radius-xl); }
  .js-ready .d-header__nav a { border-radius: var(--d-radius-lg); }
  .js-ready .d-header__tools { flex-direction: column; align-items: stretch; }
  .js-ready .d-header__tools > * { justify-content: center; text-align: center; }
}
@media (max-width: 1499px) {
  .js-ready.large-text .d-header__toggle { display: inline-flex; }
  .js-ready.large-text .d-header__panel { display: none; flex-basis: 100%; }
  .js-ready.large-text .d-header__panel.is-open { display: flex; flex-direction: column; align-items: stretch; padding-bottom: var(--d-space-3); }
  .js-ready.large-text .d-header__nav { flex-direction: column; margin-inline: 0; border-radius: var(--d-radius-xl); }
  .js-ready.large-text .d-header__nav a { border-radius: var(--d-radius-lg); }
  .js-ready.large-text .d-header__tools { flex-direction: column; align-items: stretch; }
  .js-ready.large-text .d-header__tools > * { justify-content: center; text-align: center; }
}
@media (max-width: 600px) { .d-header { padding-inline: var(--d-space-4); } }

/* ---- Chân trang: bảng đen có khung gỗ ở trên, chữ phấn. Chữ phụ ≥ 16px (quy tắc 3.1), mọi liên kết cao ≥ 44px. ---- */
.d-footer { box-sizing: border-box; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 30px; padding: 50px 56px 26px; border-top: 10px solid var(--d-wood); background: var(--d-chalk); color: var(--d-chalk-text); font-family: var(--d-font-sans); }
.d-footer > * { position: relative; }
.d-footer .d-footer__dots { position: absolute; right: -30px; top: 10px; width: 260px; height: 180px; background-image: radial-gradient(var(--d-chalk-line) 1.8px, transparent 2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.d-footer__top { display: flex; flex-wrap: wrap; gap: 30px; }
.d-footer__about { display: flex; flex: 1 1 220px; flex-direction: column; gap: 14px; }
.d-footer__brand { display: flex; align-items: center; gap: 10px; font: 700 calc(21px * var(--d-text-scale)) / 1.2 var(--d-font-display); }
.d-footer__brand img { display: block; width: 36px; height: 36px; }
.d-footer__slogan { margin: 0; color: var(--d-sun); font: 600 var(--d-fs-line) / 1.4 var(--d-font-display); }
.d-footer__maker { margin: 0; color: var(--d-chalk-muted); font: 400 var(--d-fs-caption) / 1.45 var(--d-font-sans); }
.d-footer__maker strong { color: var(--d-chalk-text); }
.d-footer__col { display: flex; flex: 1 1 140px; flex-direction: column; gap: var(--d-space-1); }
/* Chính sách: bảy tên đầy đủ, xuống dòng trong cột. Liên hệ: công ty, điện thoại, email, địa chỉ, MST, ngày và nơi cấp (ADR-0046). */
.d-footer__col--policies { flex: 1.3 1 240px; }
.d-footer__col--policies a { box-sizing: border-box; padding-block: var(--d-space-1); }  /* tên dài xuống hai dòng vẫn tách khỏi mục kế; mục một dòng vẫn cao 44px */
.d-footer__col--contact { flex: 1.6 1 280px; }
.d-footer__col h2 { margin: 0 0 var(--d-space-2); color: var(--d-sun); font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.d-footer a { display: inline-flex; align-items: center; min-height: var(--d-control-s); color: var(--d-chalk-text); text-decoration: none; font: 400 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
.d-footer a:hover { text-decoration: underline; }
.d-footer a:focus-visible { outline: 3px solid var(--d-sun); outline-offset: 3px; }
.d-footer__company { margin: 0 0 var(--d-space-2); color: var(--d-chalk-text); font: 700 var(--d-fs-caption) / 1.45 var(--d-font-sans); }
.d-footer__contact { display: flex; flex-direction: column; gap: var(--d-space-1); margin: 0; padding: 0; list-style: none; color: var(--d-chalk-text); font: 400 var(--d-fs-caption) / 1.5 var(--d-font-sans); }
.d-footer__contact a { min-height: var(--d-control-s); font-weight: 600; text-decoration: underline; }
.d-footer__label { color: var(--d-chalk-muted); }
.d-footer__copy { margin: 0; padding-top: 20px; border-top: 1px solid var(--d-chalk-line); color: var(--d-chalk-muted); font: 400 var(--d-fs-caption) / 1.45 var(--d-font-sans); }
@media (max-width: 600px) { .d-footer { padding: var(--d-space-9) var(--d-space-4) var(--d-space-6); } }
/* "Tùy chọn cookie" (analytics.js): chỉ hiện khi trang đo lường; mở lại thanh cookie. */
.d-footer__cookie { margin-left: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vts-analytics .d-footer__cookie[hidden] { display: inline; }