/* app.css — layout + component sieutut. Responsive, không grid px cố định (sửa nợ mockup).
   App-lock viewport như mockup v2 (anh Đạo chốt 2026-07-23): html/body KHÔNG cuộn,
   nội dung cuộn BÊN TRONG .pagescroll — cảm giác app, trang không "rung". */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* thắng mọi display của class (bẫy kinh điển) */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background:
    radial-gradient(90% 60% at 80% -10%, color-mix(in oklab, var(--accent2) 9%, transparent) 0%, transparent 60%),
    radial-gradient(80% 55% at 8% 108%, color-mix(in oklab, var(--accent) 7%, transparent) 0%, transparent 55%),
    var(--bg);
  color: var(--ink); line-height: 1.6;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
}
.pagescroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* link nằm trong đoạn văn: gạch chân để phân biệt không chỉ bằng màu (a11y link-in-text-block) */
p a, li a, .muted a { text-decoration: underline; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- header ---- */
.hd { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.hd__in { display: flex; align-items: center; gap: 18px; height: 60px; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: 'Sora', sans-serif; font-size: 17px; }
.brand b { font-weight: 800; }
.brand .tut { font-weight: 800; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { padding: 7px 13px; border-radius: 99px; color: var(--sub); font-weight: 600; font-size: 14.5px; }
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--chip); }
.nav a[aria-current="page"] { color: var(--accent-ink); background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.hd__sp { flex: 1; }
.hd__act { display: flex; align-items: center; gap: 8px; }
.iconbtn { background: var(--chip); border: 1px solid var(--line); color: var(--ink); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.iconbtn:hover { border-color: var(--accent); }
.wallet { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; font-size: 13px; font-weight: 600; }
.wallet .plus { color: var(--accent); font-weight: 800; }
.cart { position: relative; }
.badge { position: absolute; top: -6px; right: -6px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.avatar { width: 34px; height: 34px; border-radius: 99px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn--pri { border: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); box-shadow: var(--glow); }
.btn--pri:hover { opacity: 0.9; }
.btn--ghost { background: transparent; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- generic ---- */
main { flex: 1; padding: 24px 0 64px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: var(--chip); color: var(--sub); border-radius: 99px; padding: 6px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"], .chip.is-on { color: var(--accent-ink); background: linear-gradient(120deg, var(--accent), var(--accent2)); border-color: transparent; }
.muted { color: var(--faint); }
.pagehead { margin: 6px 0 20px; }
.pagehead h1 { font-size: 30px; margin: 0 0 6px; }
.pagehead p { color: var(--sub); margin: 0; }
.verify { color: var(--ok); font-weight: 700; }
.warnflag { color: var(--warn); font-weight: 700; }

/* ---- feed (bản tin) — BẢNG đúng mockup v2: 1 tin = 1 DÒNG, 6 cột cố định, ellipsis.
   Chiều ngang theo --maxw (= 100vw từ 2026-07-23: FULL MÀN HÌNH, đồng bộ mọi trang). ---- */
.homefeed { max-width: var(--maxw); margin: -24px auto 0; padding: 0 20px; }
/* --bleed-pad: canh lề thanh/panel full-bleed trùng trục nội dung --maxw (maxw=100vw → 20px) */
:root { --bleed-pad: max(20px, calc((100vw - var(--maxw)) / 2 + 20px)); }
.homebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 12px; border-bottom: 1px solid var(--line); }
.homebar__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.homebar h1 { font-family: inherit; font-size: 15px; font-weight: 800; margin: 0; white-space: nowrap; letter-spacing: 0; }
.homebar__date, .homebar__hint { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.homebar .vai { color: var(--accent); font-weight: 700; }
.homectl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--line); }
.newbar { display: block; width: 100%; text-align: center; padding: 10px; border: 0; border-bottom: 1px solid var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); color: var(--accent); font-weight: 700; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.pulse { width: 9px; height: 9px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.feed { display: flex; flex-direction: column; }
.frow { display: grid; grid-template-columns: 104px 148px 20px minmax(0,1fr) auto auto; gap: 16px; align-items: center; padding: 13px 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.12s ease; }
.frow:hover { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); } /* 14%: hover rõ (6% cũ nhạt quá — anh Đạo 2026-07-23) */
.frow__time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.frow__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow__cat--warn { color: var(--warn); }
.frow__ver { font-size: 13px; font-weight: 800; color: var(--ok); cursor: help; }
.frow__ver--ai { color: var(--accent); }
.frow__text { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.frow__text:hover { text-decoration: none; }
.frow__text b { font-weight: 700; }
.frow__title { font-weight: 600; } /* trang tin-da-xem còn dùng */
.frow__act { display: inline-flex; align-items: center; }
.frow__open { font-size: 13px; font-weight: 700; white-space: nowrap; justify-self: end; min-width: 44px; text-align: right; }
.seenbtn { width: 26px; height: 26px; border-radius: 99px; border: 1.5px solid var(--line); background: transparent; color: var(--faint); font-size: 12px; line-height: 1; cursor: pointer; }
.seenbtn:hover { border-color: var(--ok); color: var(--ok); }
.frow--simple { grid-template-columns: 104px 148px minmax(0,1fr) auto; cursor: default; padding: 13px 16px; } /* nằm trong .card (tin-da-xem) */
.new-tag { display: inline-block; font-size: 10px; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.homefeed .state { text-align: left; padding: 40px 12px; }
@media (max-width: 720px) {
  .frow { grid-template-columns: 72px minmax(0,1fr) auto; gap: 10px; }
  .frow__cat, .frow__ver, .frow__open { display: none; }
  .frow--simple { grid-template-columns: 72px minmax(0,1fr) auto; }
  .homebar__date, .homebar__hint { display: none; }
  .homefeed .state { padding: 24px 12px; }
}

/* ---- Đã xem: thanh ghim đáy màn + panel mở rộng tại chỗ (đúng mockup v2) ---- */
.seenbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px var(--bleed-pad); background: var(--surface); border: 0; border-top: 1px solid var(--line); cursor: pointer; font-family: inherit; color: var(--ink); text-align: left; }
.seenbar:hover { background: var(--chip); }
.seenbar__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sub); }
.seencount { background: var(--chip); border: 1px solid var(--line); color: var(--ink); font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.seenbar__hint { flex: 1; font-size: 12.5px; color: var(--faint); }
.seenbar__open { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
main:has([data-page="home"]) { padding-bottom: 120px; } /* chừa chỗ thanh Đã xem ghim đáy */
.seenpanel { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; }
.seenpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--bleed-pad); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.seenpanel__title { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; }
.seenpanel__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.seenpanel .frow { cursor: pointer; padding: 13px var(--bleed-pad); }
.seenpanel .frow__text { color: var(--sub); }
.seenpanel .frow__text b { font-weight: 600; color: var(--ink); }
.seenpanel .state { text-align: left; padding: 40px var(--bleed-pad); }
.seenpanel__foot { padding: 16px var(--bleed-pad); font-size: 13px; color: var(--faint); }
.restorebtn { display: none; border: 1px solid var(--line); background: transparent; color: var(--sub); font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.restorebtn:hover { border-color: var(--accent); color: var(--accent); }
[data-seen-list] .restorebtn { display: inline-flex; }
[data-seen-list] [data-seen-btn] { display: none; }
@media (max-width: 640px) {
  .seenbar { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); padding: 12px 16px; } /* nổi trên botnav */
  .seenpanel__head { padding: 16px; }
  .seenpanel__foot { padding: 16px; }
  main:has([data-page="home"]) { padding-bottom: 170px; }
}

/* ---- lưới thẻ (cửa hàng, chủ đề) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.two-col { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.prod { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.prod__img { aspect-ratio: 16/10; border-radius: 10px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, var(--surface)), color-mix(in oklab, var(--accent2) 22%, var(--surface))); }
.prod__price { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--chip); color: var(--sub); }
.pill--free { background: color-mix(in oklab, var(--ok) 20%, var(--surface)); color: var(--ok); }
.perp { font-size: 12px; color: var(--faint); }

/* ---- ô tìm ---- */
.searchbox { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px; max-width: 620px; margin: 0 auto 18px; }
.searchbox:focus-within { border-color: var(--accent); box-shadow: var(--glow); }
.searchbox input { flex: 1; background: none; border: none; color: var(--ink); font-size: 16px; outline: none; }

/* ---- trạng thái ---- */
.state { text-align: center; padding: 48px 20px; color: var(--sub); }
.skeleton { background: linear-gradient(90deg, var(--chip), var(--surface), var(--chip)); background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; border-radius: 8px; height: 16px; }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---- form ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--sub); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; color: var(--ink); font-size: 15px; font-family: inherit; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 84px; resize: vertical; }
.field .hint { display: block; margin-top: 5px; font-size: 12px; color: var(--faint); font-weight: 400; }
.field--check { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.field--check input { width: auto; }
.field--check label { margin: 0; font-weight: 500; color: var(--ink); }
.authwrap { max-width: 400px; margin: 40px auto; }
/* thông báo lỗi form đăng nhập/đăng ký — tông cảnh báo, vẫn trong hệ token của mockup */
.authloi { margin: 0 0 14px; padding: 10px 13px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in oklab, var(--warn) 16%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent); color: var(--ink); }
/* hàng thiết bị đăng nhập ở màn Tài khoản */
.dev { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dev:last-child { border-bottom: none; }
.dev__now { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.formmsg { margin: 10px 0 0; font-size: 13px; color: var(--sub); }

/* ---- stepper (giỏ hàng) — PHẢN ỨNG theo bước ---- */
.stepper { display: flex; gap: 8px; margin-bottom: 22px; }
.step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--chip); color: var(--faint); font-size: 13.5px; font-weight: 600; }
.step__n { width: 22px; height: 22px; border-radius: 99px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.step.is-active { color: var(--accent-ink); background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.step.is-done { color: var(--ok); }

/* ---- modal ---- */
.overlay { position: fixed; inset: 0; z-index: 90; background: oklch(0 0 0 / 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.overlay[hidden] { display: none; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); max-width: 460px; width: 100%; padding: 24px; }
.modal h2 { margin: 0 0 12px; font-size: 20px; }

/* ---- V048: chip người dùng + popup tài khoản + hộp thoại đè trang ----
   Hình dạng lấy nguyên từ mockup v2: ô 26px bo 7px nền --chip ở thanh trên, avatar tròn phủ
   gradient accent→accent2 ở chỗ lớn, huy hiệu xác minh 11px màu --ok, nút viên 99px. */

/* Ẩn khỏi MẮT nhưng GIỮ trong cây tiếp cận và thứ tự Tab — khác hẳn [hidden]/display:none.
   Dùng cho ô chọn tệp: che đi cho đẹp nhưng người dùng bàn phím vẫn Tab tới được. */
.vhidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.uav { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; background: var(--chip); border: 1px solid var(--line); color: var(--ink); font-weight: 800; }
.uav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uav--sm { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.uav--md, .uav--xl { border-radius: 99px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 30%, var(--chip)), color-mix(in oklab, var(--accent2) 26%, var(--chip))); }
.uav--md { width: 44px; height: 44px; font-size: 17px; }
.uav--xl { width: 72px; height: 72px; font-size: 27px; }

.um { position: relative; }
.um__chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 99px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--sub); white-space: nowrap; list-style: none; }
.um__chip::-webkit-details-marker { display: none; } /* bỏ tam giác mặc định của <summary> */
.um__chip:hover { color: var(--ink); background: var(--chip); }
.um__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.um__ten { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
/* transform-box/transform-origin phải khai RÕ cho phần tử SVG: mặc định trình duyệt quay
   quanh GÓC TRÊN TRÁI của khung SVG chứ không quanh tâm, nên mũi tên khi mở lệch hẳn đi và
   trông như dấu "<" thay vì "^" (agy bắt được lỗi này khi chấm ảnh). */
.um__mui { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.um[open] .um__mui { transform: rotate(180deg); }

.um__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 292px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; }
.um__head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.um__id { min-width: 0; }
.um__hten { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um__mail { font-size: 12.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xacminh { display: inline-block; font-size: 11px; font-weight: 700; color: var(--ok-ink); background: color-mix(in oklab, var(--ok) 12%, transparent); padding: 3px 9px; border-radius: 99px; }
.chuaxacminh { display: inline-block; font-size: 11px; font-weight: 700; color: var(--warn-ink); background: color-mix(in oklab, var(--warn) 12%, transparent); padding: 3px 9px; border-radius: 99px; }
.um__vi { display: flex; align-items: center; gap: 8px; margin: 12px 0 13px; padding: 11px 13px; border-radius: 11px; background: var(--chip); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--sub); }
.um__vi:hover { border-color: var(--accent); text-decoration: none; }
.um__viso { margin-left: auto; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.um__vinap { color: var(--accent); font-weight: 800; }
.um__nav { display: flex; flex-direction: column; gap: 2px; }
.um__nav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--sub); }
.um__nav a:hover { background: var(--chip); color: var(--ink); text-decoration: none; }
.um__nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; text-decoration: none; }
.um__ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.um__tay, .um__dong { display: none; }
.um__out { margin-top: 11px; padding-top: 12px; border-top: 1px solid var(--line); }
.um__outbtn { width: 100%; font-size: 13px; padding: 9px 0; }
.um__outbtn:hover { border-color: var(--warn); color: var(--warn); }

/* Hộp thoại dùng thẻ <dialog> GỐC của trình duyệt — xem lý do ở base.html mục "hopthoai".
   KHÁC với .overlay/.modal cũ phía trên (bản tự dựng, không có bẫy tiêu điểm). */
.dlg { width: min(480px, calc(100vw - 32px)); max-height: min(84vh, 720px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.dlg::backdrop { background: oklch(0 0 0 / 0.55); backdrop-filter: blur(3px); }
.dlg__hd { display: flex; align-items: center; gap: 12px; padding: 17px 20px 14px; border-bottom: 1px solid var(--line); }
.dlg__hd h2 { margin: 0; font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; }
.dlg__x { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--sub); font-size: 14px; cursor: pointer; }
.dlg__x:hover { color: var(--ink); border-color: var(--faint); }
.dlg__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* KHÔNG có đệm dưới: cả ba hộp thoại đều kết thúc bằng một hàng dính đáy (.frmchan hoặc
   .dlg__chan), hàng đó tự mang đệm của nó. Còn để đệm dưới ở đây thì nội dung cuộn được vào
   khoảng đệm và LÒI RA BÊN DƯỚI thanh nút — đã nhìn thấy thật ở ảnh chụp 05. */
.dlg__bd { padding: 18px 20px 0; overflow-y: auto; max-height: calc(min(84vh, 720px) - 66px); }
.dlg__mo { margin: 0 0 16px; font-size: 13px; color: var(--sub); }
.dlg__chan { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Hàng hành động DÍNH ĐÁY hộp thoại.
   Trong hộp thoại, ruột phải cuộn được nên nút chính (Lưu hồ sơ / Đổi mật khẩu / Đăng xuất
   khỏi mọi thiết bị) trôi khuất xuống dưới — người dùng sửa xong không biết bấm đâu. Hai
   nguồn chấm độc lập đều xếp lỗi này mức CAO. Ngoài hộp thoại (trang Tài khoản) thì đây chỉ
   là một khối bình thường, không dính gì. */
/* Bóng đổ lên trên: báo cho mắt biết nội dung CHẠY LUỒN XUỐNG DƯỚI thanh này, chứ không phải
   nội dung bị cắt cụt. Thiếu nó thì cả hai nguồn chấm đều đọc nhầm thành "hộp thoại lỗi bố cục". */
.dlg .frmchan, .dlg .dlg__chan { position: sticky; bottom: 0; z-index: 1; margin: 16px -20px 0; padding: 13px 20px 18px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 18px -10px oklch(0 0 0 / 0.3); }
.dlg__chan .btn:hover { border-color: var(--warn); color: var(--warn); } /* đăng xuất mọi máy = việc phá — phải có sắc thái cảnh báo */
.dlg .frmchan .formmsg, .dlg .dlg__chan .formmsg { margin-top: 7px; }
/* Danh sách thiết bị có vùng cuộn RIÊNG, để hàng hành động phía dưới không bị đẩy khuất và
   danh sách dài không kéo hộp thoại vượt màn hình. */
.dlg [data-tb-ds] { max-height: 44vh; overflow-y: auto; }
.dev__go:hover { border-color: var(--warn); color: var(--warn); } /* Gỡ máy là việc xoá — phải thấy sắc thái cảnh báo */
/* Form không kéo giãn hết bề ngang thẻ trên màn desktop rộng: ô nhập dài cả nghìn pixel để
   gõ một số điện thoại vừa loãng vừa khó bao quát. Trong hộp thoại (480px) mức trần này
   không có tác dụng gì. */
.frm { max-width: 560px; }

/* Căn ĐỈNH chứ không căn giữa: cột bên phải cao gấp đôi ảnh (tên + email + 2 nút + dòng
   hướng dẫn), căn giữa làm ảnh tụt hẳn xuống dưới tên trông lệch hàng. */
.anhk { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.anhk__ben { min-width: 0; }
.anhk__ten { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; }
.anhk__mail { font-size: 13px; color: var(--sub); margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; }
.anhk__nut { display: flex; gap: 8px; flex-wrap: wrap; }
.anhk__nut .btn { padding: 7px 14px; font-size: 13px; }
.anhk__chon { cursor: pointer; }
.vhidden:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 12.5px + --sub chứ không 11.5px + --faint: cỡ cũ bị chấm là khó đọc trên nền tối. */
.anhk__hint { margin: 9px 0 0; font-size: 12.5px; color: var(--sub); }
.tk__dauphu { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---- footer ---- */
.ft { border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; padding: 24px 0; margin-top: 40px; }

/* ---- bottom nav (mobile) — chỉ hiện màn hẹp ---- */
.botnav { display: none; }
@media (max-width: 640px) {
  .nav { display: none; }
  .hd .wallet { display: none; } /* bottom-nav đã có Số dư — tránh tràn header */
  .hd__in { gap: 10px; padding: 0 14px; }
  .botnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .botnav a { flex: 1; text-align: center; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); color: var(--sub); font-size: 11px; font-weight: 600; }
  .botnav a[aria-current="page"] { color: var(--accent); }
  main { padding-bottom: 80px; }
  /* Màn hẹp: chip co lại còn mỗi ảnh (tên + mũi tên bỏ đi cho khỏi tràn header), và popup
     đổi hẳn thành BẢNG TRƯỢT TỪ ĐÁY như ứng dụng điện thoại — đây là chỗ ngón tay với tới
     dễ nhất, và cả hai nguồn chấm đều nói bản popup-thả-xuống kiểu desktop là điểm yếu nhất
     trên di động. Kèm nền mờ để tách khỏi trang, và vùng chạm mỗi mục ≥ 44px. */
  .um__ten, .um__mui { display: none; }
  .um__chip { padding: 4px; }
  /* BẮT BUỘC phải có dòng này. backdrop-filter trên header tạo ra một KHỐI CHỨA mới, nên mọi
     phần tử con dùng position:fixed bị neo theo HEADER chứ không theo màn hình — bảng trượt
     kết thúc ở y=591 thay vì 844 (đo thật). Tắt hiệu ứng mờ của header trong lúc bảng mở là
     đủ, mà cũng không mất gì: lúc đó nền mờ toàn màn đã phủ kín header rồi. */
  /* z-index PHẢI nâng cùng lúc. .hd là tầng xếp riêng ở z-index 50, nên mọi z-index bên trong
     nó (kể cả 69 của bảng trượt) vẫn nằm dưới thanh điều hướng đáy z-index 60 — bảng bị thanh
     đáy và thanh "tin đã xem" vẽ đè lên, che mất nút Đăng xuất (nhìn thấy thật ở ảnh chụp). */
  .hd:has(.um[open]) { backdrop-filter: none; z-index: 100; }
  .um[open]::before { content: ''; position: fixed; inset: 0; z-index: 68; background: oklch(0 0 0 / 0.45); }
  .um__pop { position: fixed; z-index: 69; top: auto; right: 0; bottom: 0; left: 0; width: auto;
    max-height: 82vh; overflow-y: auto; border-radius: 20px 20px 0 0; border-bottom: none;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 44px oklch(0 0 0 / 0.42); }
  .um__tay { display: block; width: 38px; height: 4px; margin: 0 auto 6px; border-radius: 99px; background: var(--line); }
  .um__dong { display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--sub); font-size: 13px; cursor: pointer; }
  .um__dong:hover { color: var(--ink); border-color: var(--faint); }
  .um__head { margin-top: 8px; padding-right: 40px; }
  .um__nav a { padding: 13px 12px; font-size: 15px; }
  .um__vi { padding: 14px; font-size: 13.5px; }
  .um__outbtn { padding: 12px 0; font-size: 14px; }
  /* Nút chính của hộp thoại kéo hết bề ngang trên điện thoại — nếp quen của ứng dụng, và
     ngón cái với tới dễ hơn hẳn một nút nhỏ nép trái. */
  .dlg .frmchan > .btn, .dlg .dlg__chan > .btn { width: 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .um[open] .um__pop { animation: truotLen .18s ease-out; }
  }
}
@keyframes truotLen { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .um__mui { transition: none; }
}