/* Sàn Căn, p-khung.css (gói WP-2): header, thanh đáy, chân trang, tấm (sheet), tra mã, lối tắt màn Tài khoản, dải lỗi module.
   Hợp đồng: nang-cap-2026-10/thiet-ke/ban-chot.md mục A.2-A.7, B.8, C.7, C.9, C.22, C.24, D.2-D.4.
   Ngưỡng màn hình (A.2): điện thoại < 760; máy tính bảng 760-999 (điều hướng vẫn như điện thoại); máy tính >= 1000.
   Token màu lấy từ app.css; --line-strong là token mới của p-nen.css (WP-1), có giá trị dự phòng bản sáng.
   Không đụng các class .p-* cũ của app.css. */

/* ---------- header (A.3) ---------- */
header.pc-top{position:relative;top:auto;z-index:20;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.pc-top-in{display:flex;align-items:center;gap:12px;height:55px}  /* + viền 1 = cao 56 */
.pc-brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;font-family:var(--serif);font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.005em;color:var(--navy);text-decoration:none;white-space:nowrap}
.pc-tools{display:flex;align-items:center;gap:8px;flex:none}
.pc-mainnav,.pc-saved-l,header.pc-top #who{display:none}

/* nút biểu tượng (dùng ở header, đầu tấm; thanh trên trang căn dùng lại được) */
.pc-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--navy);font:600 15px/20px var(--f);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pc-iconbtn svg{width:22px;height:22px;flex:none}
.pc-iconbtn--txt{padding:0 16px 0 12px;border:1px solid var(--line-strong,#857a6b);white-space:nowrap}
@media (hover:hover){.pc-iconbtn:hover{background:var(--sunk)}}

/* số việc chờ (❶ ❷ của bản chốt): chỉ hiện khi > 0, chữ >= 13 px */
.pc-cnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 13px/20px var(--f);font-variant-numeric:tabular-nums}

/* trang căn trên điện thoại, máy tính bảng: header ẩn, thanh trên của trang căn (WP-4) thay chỗ */
@media (max-width:999.98px){html[data-page="unit"] header.pc-top{display:none}}

@media (min-width:1000px){
  header.pc-top{position:sticky;top:env(safe-area-inset-top,0px)}
  .pc-top-in{height:63px;gap:16px}  /* + viền 1 = cao 64 */
  .pc-brand{margin-right:4px}
  .pc-mainnav{display:flex;align-self:stretch;align-items:stretch;gap:2px;margin-right:auto;min-width:0}
  .pc-mainnav a{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-block:2px solid transparent;color:var(--ink);font-size:15px;line-height:20px;font-weight:600;text-decoration:none;white-space:nowrap}
  .pc-mainnav a:hover{color:var(--navy);border-bottom-color:var(--line-strong,#857a6b)}
  .pc-mainnav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--accent)}
  .pc-mainnav a:focus-visible{outline-offset:-2px}
  .pc-mainnav-sep{position:relative;margin-left:13px}
  .pc-mainnav-sep::before{content:"";position:absolute;left:-8px;top:22px;bottom:22px;width:1px;background:var(--line)}
  .pc-saved-l{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:999px;color:var(--ink);font-size:15px;line-height:20px;font-weight:600;text-decoration:none;white-space:nowrap}
  .pc-saved-l svg{width:20px;height:20px;flex:none}
  .pc-saved-l[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--accent)}
  .pc-saved-n{color:var(--muted);font-variant-numeric:tabular-nums}
  .pc-saved-l--gon .pc-saved-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  header.pc-top #who{display:flex;align-items:center;gap:8px;font-size:15px}
  header.pc-top #who .pc-btn{min-height:40px;padding-inline:16px;white-space:nowrap}
  header.pc-top #who [aria-current="page"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
  @media (hover:hover){.pc-saved-l:hover{background:var(--sunk)}}
  /* neo và tiêu điểm không nằm dưới header dính */
  #view,#view [id]{scroll-margin-top:80px}
}
/* 1000-1199: header vai chủ nhà, sale đủ mục phải nén khoảng đệm cho vừa một hàng (A.2) */
@media (min-width:1000px) and (max-width:1199.98px){
  .pc-top-in{gap:12px}
  .pc-mainnav a{padding:0 7px;font-size:14px}
  .pc-mainnav-sep{margin-left:9px}
  .pc-mainnav-sep::before{left:-5px}
  .pc-tools{gap:4px}
  .pc-saved-l{padding:0 6px}
  .pc-iconbtn--txt{padding:0 12px 0 10px}
  header.pc-top #who .pc-btn{padding-inline:12px;font-size:14px}
  /* vai chủ nhà, sale: nút Tra mã chỉ còn kính lúp (chữ "Tra mã" vẫn là tên đọc được, có title khi rê chuột) */
  header.pc-top[data-vai="cung"] .pc-tools .pc-iconbtn--txt{width:44px;padding:0;gap:0;font-size:0}
}

/* ---------- thanh điều hướng đáy (A.4), < 1000 ---------- */
.pc-botnav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;height:calc(56px + env(safe-area-inset-bottom,0px));padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--surface);box-shadow:0 -1px 0 var(--line-soft)}  /* vạch trên bằng bóng: ô bấm đủ 56 */
.pc-botnav a{position:relative;flex:1 1 0;min-width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font:600 13px/18px var(--f);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.pc-botnav svg{width:24px;height:24px;flex:none}
.pc-botnav a[aria-current="page"]{color:var(--navy)}
.pc-botnav a:focus-visible{outline-offset:-4px}
.pc-botnav .pc-cnt{position:absolute;top:3px;left:calc(50% + 6px)}
@media (min-width:1000px){.pc-botnav{display:none}}
@media (max-width:999.98px){
  /* :root của app.css đã đệm vùng an toàn đáy; body chỉ cần thêm chiều cao thanh */
  html:not([data-page="unit"]) body{padding-bottom:56px}
  html[data-page="unit"] .pc-botnav,html.pc-kb .pc-botnav,html.pc-sheet-mo .pc-botnav{display:none}
  /* thông báo không đè lên thanh đáy */
  html:not([data-page="unit"]) .toast{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  /* tiêu điểm bàn phím, neo #...: trình duyệt cuộn chừa chỗ cho thanh đáy 56 (G-10, WCAG 2.4.11; GD-UI-02). Trang căn có luật riêng
     ở p-can.css (thanh hành động cao hơn). Trang kết quả: chừa thêm thanh lọc dính 56 ở mép trên (Shift+Tab, "Chi tiết ›"). */
  html:not([data-page="unit"]){scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  html[data-page="list"]{scroll-padding-top:64px}
}

/* ---------- chân trang (A.5) ---------- */
footer.pc-foot{display:grid;gap:8px;padding-block:24px 32px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:13px;line-height:18px}
footer.pc-foot p{margin:0;max-width:90ch}
.pc-foot-links{display:flex;flex-direction:column}
.pc-foot-links a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;line-height:20px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong,#857a6b)}
#pc-foot-zalo{margin:4px 0 8px}
#pc-foot-zalo .pc-btn svg{width:20px;height:20px;flex:none}
@media (min-width:760px){.pc-foot-links{flex-direction:row;flex-wrap:wrap;column-gap:24px}}
@media (min-width:1000px){.pc-foot-links a{min-height:32px;font-size:13px;line-height:18px}}

/* ---------- lối tắt đầu màn Tài khoản (A.6), mỗi dòng 48 px ---------- */
.pc-shortcuts{display:grid;margin:0 0 24px;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.pc-shortcuts a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;border-top:1px solid var(--line-soft);color:var(--ink);font-size:15px;line-height:20px;font-weight:600;text-decoration:none}
.pc-shortcuts a:first-child{border-top:0}
.pc-shortcuts a span{color:var(--muted);font-size:20px;line-height:1}
.pc-shortcuts a:focus-visible{outline-offset:-3px}
@media (hover:hover){.pc-shortcuts a:hover{background:var(--sunk)}}
@media (min-width:760px){.pc-shortcuts{max-width:560px}}

/* ---------- dải lỗi module chung (B.8): cố định ngay dưới header ---------- */
#pc-degraded{position:sticky;top:env(safe-area-inset-top,0px);z-index:19;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;padding:8px 16px;border-radius:0;font-size:15px;line-height:22px}
@media (min-width:1000px){#pc-degraded{top:calc(env(safe-area-inset-top,0px) + 64px)}}

/* ---------- tấm pc-sheet (C.7): <dialog> gốc trong #modal-root ---------- */
dialog.pc-sheet{position:fixed;inset:auto 0 var(--pc-kb,0px) 0;margin:0;padding:0;border:0;width:100%;max-width:100%;max-height:min(88dvh, calc(var(--pc-vvh,100dvh) - 12px));border-radius:16px 16px 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
dialog.pc-sheet[open]{display:flex;flex-direction:column;animation:pc-sheet-in .2s ease-out}
dialog.pc-sheet::backdrop{background:rgb(12 21 38 / .45)}
.pc-sheet--auto{height:auto}
.pc-sheet--tall{height:min(88dvh, calc(var(--pc-vvh,100dvh) - 12px))}
@keyframes pc-sheet-in{from{transform:translateY(100%)}to{transform:none}}
.pc-sheet-hd{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 6px 6px 20px;border-bottom:1px solid var(--line-soft)}
.pc-sheet-hd h2{flex:1 1 auto;min-width:0;margin:0;font-family:var(--serif);font-size:18px;line-height:26px;font-weight:700;color:var(--navy)}
.pc-sheet-hd h2:focus{outline:none}
.pc-sheet-bd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px}
.pc-sheet-bd:last-child{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.pc-sheet-ft{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft);background:var(--surface)}
/* chân tấm đặt trong phần thân cuộn: dính đáy (bàn phím ảo che ô thì ô vẫn cuộn lên được nhờ scroll-margin) */
.pc-sheet-bd:has(> .pc-sheet-ft){padding-bottom:0}
.pc-sheet-bd > .pc-sheet-ft{position:sticky;bottom:0;margin:16px -20px 0}
.pc-sheet :is(input,select,textarea){scroll-margin-bottom:96px}
/* #toast được chuyển vào tấm khi tấm mở: đặt ở mép trên cho khỏi đè nút cuối tấm */
dialog.pc-sheet .toast{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}
@media (max-width:759.98px){html.pc-sheet-mo{overflow:hidden}}
@media (min-width:760px){
  dialog.pc-sheet{inset:0;margin:auto;width:calc(100% - 32px);max-width:520px;max-height:min(88dvh, 760px);border-radius:16px}
  dialog.pc-sheet[open]{animation:none}
  dialog.pc-sheet.pc-sheet--sm{max-width:440px}
  dialog.pc-sheet.pc-sheet--md{max-width:520px}
  dialog.pc-sheet.pc-sheet--lg{max-width:640px}
  .pc-sheet--tall{height:min(88dvh, 760px)}
  .pc-sheet-bd:last-child{padding-bottom:24px}
  .pc-sheet-ft{padding-bottom:12px}
}
/* Trình duyệt chưa có dvh (iOS 15.0-15.3, WebView Android < 108; HN-06): khai báo có var() ở trên KHÔNG rơi về khai báo dự phòng
   mà thành giá trị đầu (max-height:none, height:auto) → tấm cao hơn màn, mất tiêu đề và nút ✕. Khối này chỉ dùng vh, không dvh. */
@supports not (height:1dvh){
  dialog.pc-sheet{max-height:min(88vh, calc(var(--pc-vvh,100vh) - 12px))}
  .pc-sheet--tall{height:min(88vh, calc(var(--pc-vvh,100vh) - 12px))}
  @media (min-width:760px){
    dialog.pc-sheet{max-height:min(88vh, 760px)}
    .pc-sheet--tall{height:min(88vh, 760px)}
  }
}
@media (prefers-reduced-motion:reduce){dialog.pc-sheet[open]{animation:none}}

/* ---------- tra mã pc-lookup (C.9) ---------- */
.pc-lookup{display:grid;gap:8px}
.pc-lookup-l{font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
/* input.… : thắng luật input[type=text] của app.css (cùng độ ưu tiên, nạp sau) */
input.pc-lookup-in{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--line-strong,#857a6b);border-radius:12px;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:17px;line-height:24px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
input.pc-lookup-in[aria-invalid="true"]{border-color:var(--bad)}
.pc-lookup-out{min-height:48px;font-size:15px;line-height:22px;color:var(--ink)}
.pc-lookup-out p{margin:0}
.pc-lookup-out p + p{margin-top:4px}
.pc-lookup-out--err .pc-lookup-msg{color:var(--bad);font-weight:600}
.pc-lookup-list{list-style:none;margin:4px 0 0;padding:0;display:grid}
.pc-lookup-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pc-lookup-a--ma{font-family:var(--mono);letter-spacing:.04em}
.pc-lookup-go{margin-top:4px;width:100%;min-height:48px}
.pc-lookup-go:disabled{opacity:.5;cursor:not-allowed}