/* Khung "Tài khoản của tôi" cho THÀNH VIÊN THƯỜNG (21/10/2026) — dùng chung khung/nền/thành phần của website, không phải bảng điều khiển.
   Cấu trúc: thẻ hồ sơ .ua-me › [cột điều hướng sáng .ua-nav | nội dung]. Tiền tố ua- (tên lớp không được trùng — tests/dental-class-collision.test.js).
   Mã: members/ua.js (cờ isPlain), views/partials/ua/*.ejs, views/pages/tai-khoan.ejs. Vai khác (nha sĩ, chủ cơ sở, nhân viên) vẫn dùng khung .dsh cũ. */
.ua{padding-block:var(--s-4) var(--s-6)}
.ua .flashmsg{margin-bottom:var(--s-3)}

/* ---- thẻ hồ sơ ---- */
.ua-me{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(240px,320px) auto;grid-template-areas:"av id prog act";gap:var(--s-4);align-items:center;padding:var(--s-4);margin:0 0 var(--s-3)}
.ua-av{grid-area:av;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--mint-s),var(--blue-s));color:var(--mint-d);font-size:22px;font-weight:var(--fw-semi);letter-spacing:.02em}
.ua-id{grid-area:id;min-width:0}
.ua-id h1{margin:0 0 var(--s-1);overflow-wrap:anywhere}
.ua-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s-1)}
.ua-meta{margin:0;display:flex;flex-wrap:nowrap;gap:2px var(--s-3);overflow-x:auto;overflow-y:hidden;font-size:12px;color:var(--ink-3)}
.ua-meta span{flex:none;white-space:nowrap;display:inline-flex;gap:4px;align-items:center}
.ua-meta i{font-size:14px;flex:none}
.ua-me-a{grid-area:act}
.ua-prog{grid-area:prog;min-width:0}
.ua-prog-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);font-size:13px;margin-bottom:6px}
.ua-prog-h b{font-weight:var(--fw-semi)}
.ua-prog-h span{font-size:12px;color:var(--ink-3)}
.ua-bar{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden}
.ua-bar span{display:block;height:100%;border-radius:3px;background:var(--mint)}
.ua-miss{display:flex;flex-wrap:nowrap;gap:var(--s-1);overflow-x:auto;overflow-y:hidden;margin-top:var(--s-2)}
.ua-miss a{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 var(--s-2);border-radius:var(--r-s);background:var(--mint-s);color:var(--mint-d);font-size:12px;font-weight:var(--fw-semi)}
.ua-miss a i{font-size:13px}
.ua-ok{display:flex;gap:4px;align-items:flex-start;margin-top:var(--s-2);font-size:12px;color:var(--ink-3)}
.ua-ok i{color:var(--mint);font-size:14px;flex:none}

/* ---- bố cục: điều hướng + nội dung ---- */
.ua-lay{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-areas:"nav rest";gap:var(--s-3) var(--s-4);align-items:start}
.ua-lay.ua-ov{grid-template-areas:"nav sum" "nav rest";grid-template-rows:auto 1fr}
.ua-lay>.ua-nav{grid-area:nav;position:sticky;top:116px}
.ua-sum{grid-area:sum;display:grid;gap:var(--s-3);min-width:0}
.ua-rest{grid-area:rest;display:grid;gap:var(--s-3);min-width:0;align-content:start}
.ua-ext .ua-rest{display:block;min-width:0}
/* trang con nằm ngoài tai-khoan.ejs (CV, xác minh, đăng ký nha khoa…) có khung hẹp riêng: nới ra bằng khung chuẩn khi có cột điều hướng */
.wrap:has(>.ua-ext){max-width:var(--w,1180px)!important}
.ua-h1{margin:0}
.ua-back{display:none}

/* ---- cột điều hướng sáng ---- */
.ua-nav{background:#fff;border-radius:var(--r);box-shadow:var(--sh-card);padding:var(--s-2)}
.ua-g+.ua-g{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line-2)}
.ua-gh{display:block;padding:var(--s-1) var(--s-2);font-size:11px;font-weight:var(--fw-semi);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.ua-it{display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:36px;padding:0 var(--s-2);border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:var(--fw-medium);text-align:left;cursor:pointer}
.ua-it>i:first-child{font-size:17px;color:var(--ink-3);flex:none;width:20px}
.ua-it:hover{background:var(--bg-2);color:var(--ink)}
.ua-it.on{background:var(--mint-s);color:var(--mint-d);font-weight:var(--fw-semi);}
.ua-it.on>i:first-child{color:var(--mint)}
.ua-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-t small{display:none}
.ua-n{font-style:normal;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bg-3);color:var(--ink-2);font-size:11px;font-weight:var(--fw-semi);display:grid;place-items:center}
.ua-n.hot{background:var(--rose);color:#fff}
.ua-it.on .ua-n{background:#fff;color:var(--mint-d)}
.ua-go{display:none}
.ua-out{margin:0}

/* ---- dải số liệu bấm được ---- */
.ua-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-2)}
.ua-k{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b ic" "s s";align-items:center;gap:var(--s-1) var(--s-2);padding:var(--s-3);background:#fff;border-radius:var(--r);box-shadow:var(--sh-card);color:var(--ink);min-width:0}
.ua-k:hover{box-shadow:var(--sh-2)}
.ua-k b{grid-area:b;font-size:20px;line-height:1.1;font-weight:var(--fw-bold)}
.ua-k .ic{grid-area:ic;width:28px;height:28px;border-radius:var(--r-s);display:grid;place-items:center;font-size:16px}
.ua-k small{grid-area:s;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Cần làm tiếp · Nâng cấp ---- */
.ua-td{list-style:none;margin:0;padding:0}
.ua-td li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-2)}
.ua-td li:last-child{border:0}
.ua-td li>.btn{align-self:center}
.ua-td .ic,.ua-up .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.ua-td-t b{display:block;font-size:13px;font-weight:var(--fw-semi);line-height:1.4;overflow-wrap:anywhere}
.ua-td-t small{display:block;font-size:12px;color:var(--ink-3);line-height:1.4}
.ua-up{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-2);color:var(--ink)}
.ua-up:last-child{border:0}
.ua-up:hover{background:var(--bg-2)}
.ua-up b{display:block;font-size:13px;font-weight:var(--fw-semi);line-height:1.4}
.ua-up small{display:block;font-size:12px;color:var(--ink-3);line-height:1.4}
.ua-up>i{color:var(--ink-4);font-size:14px;align-self:center}

/* khung nội dung hẹp hơn trang đầy đủ: lưới 2 cột cũ của tab con (voucher, thông tin) xếp 1 cột sớm hơn để không tràn */
@media (max-width:1100px){
  .ua-rest .dgrid2{grid-template-columns:minmax(0,1fr)!important}
}
.ua-rest .vlist{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}

/* ---- điện thoại / máy tính bảng: trang hub dạng danh sách hàng, mục con có nút Quay lại ---- */
@media (max-width:900px){
  .ua-me{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"av id" "prog prog" "act act";gap:var(--s-3);padding:var(--s-3)}
  .ua-av{width:56px;height:56px;font-size:20px}
  .ua-me-a .btn{width:100%;height:var(--h-tap)}
  .ua-miss a{min-height:36px}
  /* nhóm lọc của tab con: MỘT hàng cuộn ngang (luật 3), không bóp chữ */
  .acct.ua .ua-rest .ch .r .seg2{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;flex:1 1 100%}
  .acct.ua .ua-rest .ch .r .seg2 button{flex:none;white-space:nowrap}
  .ua-lay,.ua-lay.ua-ov{grid-template-columns:minmax(0,1fr);grid-template-areas:"rest"}
  .ua-lay.ua-ov{grid-template-areas:"sum" "nav" "rest"}
  .ua-lay>.ua-nav{position:static}
  .ua-lay:not(.ua-ov)>.ua-nav{display:none}
  .ua-back{display:inline-flex;align-items:center;gap:4px;min-height:var(--h-tap);margin:calc(-1 * var(--s-2)) 0 0;color:var(--ink-2);font-size:13px;font-weight:var(--fw-semi)}
  .ua-back i{font-size:14px;color:var(--ink-3)}
  .ua-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ua-k{padding:var(--s-2) var(--s-3)}
  .ua-k b{font-size:18px}
  .ua-td li{padding:var(--s-3)}
  .ua-td li>.btn{height:36px}
  .ua-up{padding:var(--s-3)}
  /* menu hồ sơ: mỗi mục một hàng 56px, icon ô vuông, mô tả ngắn, mũi tên */
  .ua-nav{padding:0;overflow:hidden}
  .ua-home{display:none}
  .ua-g+.ua-g{margin-top:0;padding-top:0;border-top:0}
  .ua-gh{padding:var(--s-3) var(--s-3) var(--s-1);background:var(--bg-2)}
  .ua-it{align-items:flex-start;min-height:56px;padding:var(--s-2) var(--s-3);border-radius:0;border-bottom:1px solid var(--line-2);gap:var(--s-3)}
  .ua-it .ua-n,.ua-it .ua-go{align-self:center}
  .ua-it.on{background:none;box-shadow:none;color:var(--ink-2)}
  .ua-it>i:first-child{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-s);background:var(--mint-s);color:var(--mint);font-size:17px}
  .ua-t{white-space:normal;color:var(--ink);font-weight:var(--fw-semi)}
  .ua-t small{display:block;margin-top:2px;font-size:12px;font-weight:var(--fw-normal);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ua-go{display:block;flex:none;font-size:14px;color:var(--ink-4)}
  .ua-g:last-child .ua-out .ua-it{border-bottom:0}
}

/* ---- Khung ngoài mới của bảng quản lý nha sĩ / labo / công ty vật tư (21/10/2026): dùng lại .ua-lay/.ua-nav; chỉ đổi cách trình bày ---- */
main.pnx{max-width:var(--w,1180px);margin-inline:auto;padding-block:var(--s-4) var(--s-6)}
main.pnx .dbody{padding:0 0 90px;display:grid;gap:var(--s-3);min-width:0}
.pnx .ua-me{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"av id act"}
.pnx .ua-av.portrait{overflow:hidden}
.pnx .ua-av img{width:100%;height:100%;object-fit:cover}
.pnx-bar{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.pnx-bar>.ua-h1{flex:1;min-width:0}
.pnx-bar .hsearch{flex:0 1 280px;min-width:0;height:36px}
.pnx-pick{margin:0;flex:0 1 220px;min-width:0}
.pnx-pick select{width:100%;height:36px}
.pn-nav .pn-b{background:var(--blue);color:#fff}
.pn-nav .ua-it.on .pn-b{background:#fff;color:var(--blue)}
.pn-nav .pn-super{background:var(--orange-s);color:var(--orange-ink,var(--orange))}
.pn-nav .pn-up>i:first-child{color:var(--orange)}
.pn-nav .pn-lock{color:var(--ink-3)}
.pn-nav .pn-lock .ua-go{display:block;font-size:13px}
.pn-nav .pn-ext .ua-go{display:block;font-size:14px}
.pn-care{margin:var(--s-2) 0 0;padding:var(--s-3);border-top:1px solid var(--line-2);display:grid;gap:2px;font-size:12px;color:var(--ink-3)}
.pn-care b{font-size:13px;color:var(--ink)}
.pn-care a{color:var(--mint-d);font-weight:var(--fw-semi)}
@media (max-width:900px){
  .pnx .ua-me{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"av id" "act act"}
  .pnx-bar{flex-wrap:wrap}
  .pnx-bar>.ua-h1{flex:1 1 100%}
  .pnx-bar .hsearch,.pnx-pick{flex:1 1 100%}
  .pn-care{margin:0;border-top:0;background:var(--bg-2)}
  .pn-nav .ua-it .ua-go{align-self:center}
}
.pnx-bar h2.ua-h1{font-size:20px;line-height:1.3;font-weight:var(--fw-bold)}
.pnx .ua-tags{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.pnx .ua-tags .bdg{flex:none;white-space:nowrap}

/* ---- Màu chủ đạo theo khu vực (như menu trang chủ, p-sections.css): nha khoa xanh bạc hà · labo xanh dương · vật tư tím · nha sĩ xanh lá ---- */
.pnx{--ac:var(--mint);--ac-d:var(--mint-d);--ac-s:var(--mint-s)}
.pnx[data-ac="lab"]{--ac:#1f62d6;--ac-d:#164ba8;--ac-s:#e6eefc}
.pnx[data-ac="supplier"]{--ac:#6b4fd8;--ac-d:#5136b3;--ac-s:#efebfc}
.pnx[data-ac="dentist"]{--ac:#5d8a1e;--ac-d:#476c14;--ac-s:#eaf3dc}
.pnx .t-ac{background:var(--ac-s);color:var(--ac)}
.pnx .ua-av{background:linear-gradient(135deg,var(--ac-s),#fff);color:var(--ac-d);box-shadow:0 0 0 2px var(--ac-s)}
.pnx .ua-it.on{background:var(--ac-s);color:var(--ac-d);}
.pnx .ua-it.on>i:first-child{color:var(--ac)}
.pnx .ua-it.on .ua-n{color:var(--ac-d)}
.pnx .ua-bar span{background:var(--ac)}
.pnx .ua-miss a{background:var(--ac-s);color:var(--ac-d)}
.pn-care a{color:var(--ac-d,var(--mint-d))}
@media (max-width:900px){
  .pnx .ua-it>i:first-child{background:var(--ac-s);color:var(--ac)}
  .pnx .ua-it.on{background:none;box-shadow:none;color:var(--ink-2)}
}

/* khu nội dung của khung mới hẹp hơn khung cũ: ô trong lưới không được đẩy rộng hơn cột (ô chọn có chữ dài) */
.pnx .fgrid>*,.pnx .dgrid2>*,.pnx .trio>*,.pnx .dbody>*{min-width:0}
.pnx .inp{min-width:0;max-width:100%}
.pnx select{max-width:100%}
/* tên tài khoản / trang ở thanh trên cùng: dài thì cắt bằng dấu …, không làm tràn ngang cả trang */
.actsw-n{display:inline-block;max-width:min(260px,34vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.actsw-b{max-width:100%}
.pnx .card,.pnx .box,.pnx .pvf-side{min-width:0}
.pnx .pvf-side{grid-template-columns:minmax(0,1fr)}

/* ---- Thông báo nổi góc trên phải: bấm "Trang chủ" khi đang dùng tư cách TRANG (p-homeblock.js) ---- */
.hb-toast{position:fixed;top:56px;right:16px;z-index:300;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:start;width:min(380px,calc(100vw - 32px));padding:var(--s-3) var(--s-4);background:#fff;border-radius:var(--r);box-shadow:0 10px 30px rgba(20,33,61,.18),0 1px 3px rgba(20,33,61,.1);color:var(--ink)}
.hb-ic{font-size:22px;color:var(--blue);margin-top:1px}
.hb-tx{display:grid;gap:4px;min-width:0}
.hb-tx b{font-size:14px;font-weight:var(--fw-semi)}
.hb-tx span{font-size:13px;color:var(--ink-2);line-height:1.5}
.hb-ac{margin-top:var(--s-2)}
.hb-x{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--r-s);background:none;color:var(--ink-3);cursor:pointer;margin:-6px -8px 0 0}
.hb-x:hover{background:var(--bg-2);color:var(--ink)}
@media (max-width:640px){.hb-toast{top:48px;right:12px;left:12px;width:auto}.hb-ac .btn{width:100%;height:var(--h-tap)}}