/* THANH_DUOI_v1 — thanh điều hướng chung ba site hobao (trang chủ + trang thường).
   Điện thoại (<768px): thanh dưới cố định, 5 ô có chữ + icon SVG tự vẽ, chừa vùng an toàn đáy.
   ≥768px: cùng 5 ô nằm NGANG trong đầu trang (nếu trang có [data-td-cho]) hoặc thành thanh dọc bên trái. Không ô nào biến mất. */
:root{--td-cao:64px}
.td{display:flex;font:600 12px/1.15 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--mo,#5b6b7f)}
.td a,.td button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;min-width:44px;padding:6px 4px;border-radius:14px;cursor:pointer;color:inherit;text-align:center;-webkit-tap-highlight-color:transparent;position:relative}
.td svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.td .td-i{display:flex;align-items:center;justify-content:center;width:52px;height:30px;border-radius:15px;transition:background .15s}
.td [aria-current=page],.td .on{color:var(--nhan,#3f8f4f)}
.td [aria-current=page] .td-i,.td .on .td-i{background:color-mix(in srgb,var(--nhan,#3f8f4f) 14%,transparent)}
.td a:focus-visible,.td button:focus-visible{outline:3px solid var(--nhan,#3f8f4f);outline-offset:-3px}
.td .td-cham{position:absolute;top:6px;left:calc(50% + 8px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--nhan,#3f8f4f);color:#fff;font:800 10.5px/17px system-ui;display:none}
.td .td-cham.co{display:block}
/* ---- điện thoại: thanh dưới ---- */
@media (max-width:767.98px){
  body.co-td{padding-bottom:calc(var(--td-cao) + 12px + env(safe-area-inset-bottom))}
  .td{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);border-top:1px solid var(--vien,#dde3ec);box-shadow:0 -6px 24px rgba(20,40,70,.08);
      padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));justify-content:space-around}
  .td > *{flex:1 1 0}
  .td a,.td button{padding:6px 1px;font-size:11.5px;letter-spacing:-.01em}
  .td .td-chu{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ---- ≥768px: trong đầu trang ---- */
@media (min-width:768px){
  [data-td-cho] .td{gap:2px}
  [data-td-cho] .td a,[data-td-cho] .td button{flex-direction:row;gap:7px;min-height:44px;padding:6px 12px;font-size:14.5px;color:var(--chu,#1d2a3a)}
  [data-td-cho] .td .td-i{width:auto;height:auto;background:none!important}
  [data-td-cho] .td a:hover,[data-td-cho] .td button:hover{background:#f1f4f8}
  [data-td-cho] .td [aria-current=page]{background:color-mix(in srgb,var(--nhan,#3f8f4f) 12%,#fff);color:var(--nhan,#3f8f4f)}
  [data-td-cho] .td .td-cham{position:static;display:none;margin-left:-2px}
  [data-td-cho] .td .td-cham.co{display:inline-block}
  [data-td-cho] .td svg{width:21px;height:21px}
  /* không có chỗ trong đầu trang ⇒ thanh dọc bên trái */
  body.co-td.td-ray{padding-left:92px}
  body.td-ray > .td{position:fixed;left:0;top:0;bottom:0;width:88px;z-index:40;flex-direction:column;justify-content:center;gap:6px;padding:12px 6px;background:#fff;border-right:1px solid var(--vien,#dde3ec)}
}
@media (min-width:768px) and (max-width:1023.98px){ [data-td-cho] .td a,[data-td-cho] .td button{padding:6px 9px;font-size:13.5px} [data-td-cho] .td svg{display:none} }

/* ---- đầu trang dùng chung cho trang chủ ---- */
.td-dau{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--vien,#dde3ec)}
.td-dau-trong{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));min-height:58px}
.td-ten{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--chu,#1d2a3a);font-weight:800;font-size:18px;white-space:nowrap;min-height:44px}
.td-ten svg{width:34px;height:34px;flex:0 0 auto}
.td-dau [data-td-cho]{flex:1;display:flex;justify-content:center;min-width:0}
.td-dau #nut-tk{display:flex;align-items:center;gap:6px;margin-left:auto}
.td-dau #nut-tk .nut{white-space:nowrap}
@media (max-width:767.98px){
  .td-dau [data-td-cho]{flex:0 0 0}
  .td-dau #nut-tk [data-thoat]{display:none}  /* còn trong trang Tài khoản; nút Quản trị GIỮ (lối vào /admin của super admin) */
  .td-dau #nut-tk a.nut{max-width:46vw;overflow:hidden;text-overflow:ellipsis}
  .td-ten{font-size:17px}
}
@media (min-width:768px) and (max-width:1023.98px){ .td-dau #nut-tk [data-thoat]{display:none} }

/* ---- bảng trượt (bạn bè, chuyển site) ---- */
.td-man{position:fixed;inset:0;z-index:60;background:rgba(29,42,58,.38);display:flex;align-items:flex-end;justify-content:center}
.td-bang{background:#fff;color:var(--chu,#1d2a3a);width:100%;max-width:520px;max-height:min(80vh,640px);max-height:min(80dvh,640px);overflow:auto;border-radius:20px 20px 0 0;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(20,40,70,.2);animation:td-len .2s ease-out;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.td-bang:before{content:"";display:block;width:42px;height:5px;border-radius:3px;background:#d6dce5;margin:4px auto 10px}
.td-bang h2{margin:0 0 4px;font-size:20px}
.td-bang .td-phu{color:var(--mo,#5b6b7f);font-size:14px;margin:0 0 12px}
.td-bang .td-dong-cuoi{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
@media (min-width:768px){ .td-man{align-items:center} .td-bang{border-radius:20px;padding:18px 22px 20px} .td-bang:before{display:none} }
@keyframes td-len{from{transform:translateY(24px);opacity:.4}}
.td-site{display:flex;align-items:center;gap:14px;padding:12px;border:2px solid var(--vien,#dde3ec);border-radius:16px;text-decoration:none;color:inherit;margin-bottom:10px;min-height:64px}
.td-site:hover{border-color:var(--m)}
.td-site.dang{border-color:var(--m);background:color-mix(in srgb,var(--m) 8%,#fff)}
.td-site svg{width:46px;height:46px;flex:0 0 auto}
.td-site b{display:block;font-size:17px}
.td-site small{display:block;color:var(--mo,#5b6b7f);font-size:13.5px}
.td-site em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;color:var(--m);white-space:nowrap}
.td-ban{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eef1f5;min-height:52px}
.td-ban .td-av{width:32px;height:32px;border-radius:9px;flex:0 0 auto}
.td-ban b{font-weight:700}
.td-ban small{display:block;color:var(--mo,#5b6b7f);font-size:13px}
.td-ban .nut{margin-left:auto}
.td-ma{font-size:22px;letter-spacing:3px;font-weight:800}
@media (prefers-reduced-motion:reduce){.td-bang{animation:none}.td .td-i{transition:none}}
/* ≥768px: đầu trang đã có nút tài khoản (#nut-tk) ngay cạnh ⇒ bỏ ô trùng trong thanh */
@media (min-width:768px){ .td-dau:has(#nut-tk) [data-td-cho] [data-td="tai-khoan"]{display:none} }