/* ===================================================================
   NewTime — Global Styles (v4.0 • White Luxe, compact & consistent)
   - Variables, reset, utilities
   - Layout (3 columns, responsive)
   - Cards, buttons, forms, feed
   - Chat (merged: log + bottom app bar + toggle)
   - Media, animations, a11y, dark mode, reduced motion
=================================================================== */

/* --------------------------- Variables ---------------------------- */
:root{
  /* Palette */
  --bg:#f8fafc; --bg-soft:#f2f5f9; --card:#fff; --border:#e6eaf2;
  --text:#0f172a; --text-muted:#667085;
  --primary:#304ffe; --primary-600:#2a41df; --accent:#ea4c89;
  --success:#16a34a; --warning:#f59e0b; --danger:#ef4444; --focus:#9ec1ff;

  /* Radius, shadow */
  --radius:16px; --radius-sm:12px;
  --shadow:0 12px 30px rgba(16,24,40,.08);
  --shadow-soft:0 6px 18px rgba(16,24,40,.06);

  /* Layout */
  --maxw:1120px; --col-left:260px; --col-right:320px; --gutter:20px;

  /* Fonts & speed */
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --font-display:"Playfair Display",Georgia,serif;
  --speed:.2s;

  /* Chat */
  --chat-dock-h:92px; /* dynamic; JS updates based on bar height */
}

[data-theme="dark"]{
  --bg:#0e0f13; --bg-soft:#13151b; --card:#171a21; --border:#262a33;
  --text:#e8eaf1; --text-muted:#a8b0c0;
  --shadow:0 6px 24px rgba(0,0,0,.25);
  --shadow-soft:0 3px 12px rgba(0,0,0,.18);
}

/* ------------------------------ Reset ----------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}

/* ---------------------------- Utilities --------------------------- */
.visually-hidden{
  position:absolute!important;clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;height:1px!important;width:1px!important;
  overflow:hidden!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:-1px!important;
}
.u-inline{display:flex;align-items:center;gap:12px}
.u-strong{font-weight:700}
.u-muted{color:var(--text-muted)}
.notice{padding:10px 12px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--border)}
.center{display:flex;align-items:center;justify-content:center}

/* ----------------------------- Container -------------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:20px}
#page{min-height:60vh}

/* ------------------------------ Layout ---------------------------- */
.layout-3col{
  display:grid; grid-template-columns:var(--col-left) 1fr var(--col-right);
  gap:var(--gutter);
}
.col-left,.col-center,.col-right{min-width:0}
.left-sticky{position:sticky;top:72px;align-self:start}
@media (max-width:1200px){
  .layout-3col{grid-template-columns:var(--col-left) 1fr}
  .col-right{display:none}
}
@media (max-width:900px){
  .layout-3col{grid-template-columns:1fr}
  .col-left{position:static}
}

/* ------------------------------ Header ---------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:saturate(120%) blur(10px);
  background:color-mix(in oklab,#ffffff 82%,transparent);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
}
.brand{font-family:var(--font-display);font-weight:700;letter-spacing:.2px;font-size:22px}

/* ------------------------------- Cards ---------------------------- */
.sidebar-card,.composer-card,.post,.kbchat,.chat-log{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
}
.sidebar-card{padding:16px}
.sidebar-title{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.sidebar-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sidebar-list a{display:block;padding:10px 12px;border-radius:10px;border:1px solid transparent}
.sidebar-list a:hover{background:#f6f8fb;border-color:var(--border);text-decoration:none}

/* ------------------------------ Composer -------------------------- */
.composer-card{padding:16px}
.composer{display:grid;gap:12px}
.composer .row{display:grid;gap:6px}
.composer label{font-size:12px;color:var(--text-muted)}
.composer input[type="text"], .composer input:not([type]), .composer input[name], .composer input, .composer textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  transition:border-color .2s, box-shadow .2s;
}
.composer textarea{resize:vertical;min-height:96px}
.composer input[type="file"]{padding:8px;background:transparent;border:none}
.composer input:focus,.composer textarea:focus{
  outline:2px solid var(--focus);outline-offset:2px;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 28%,transparent);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:12px;border:1px solid var(--primary);
  background:var(--primary);color:#fff;font-weight:600;cursor:pointer;
  box-shadow:0 6px 18px color-mix(in oklab,var(--primary) 20%,transparent);
  transition:transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed);
}
.btn:hover{transform:translateY(-1px);background:var(--primary-600);box-shadow:0 10px 24px color-mix(in oklab,var(--primary) 22%,transparent)}
.btn:active{transform:translateY(0)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-del{margin-left:auto;padding:6px 10px;border-radius:9px;border:1px solid var(--border);color:var(--text-muted);background:transparent;font-size:12px}
.btn-del:hover{background:#f6f8fb;color:var(--text)}

/* -------------------------------- Feed ---------------------------- */
.feed{display:grid;gap:16px}
.post{overflow:hidden}
.post-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.post-hd .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.post-hd .meta{display:flex;flex-direction:column}
.post-hd .name{font-weight:700}
.post-hd .time{font-size:12px;color:var(--text-muted)}
.post-body{padding:14px 16px;display:grid;gap:12px}
.post-body .action{font-size:15px;line-height:1.7;word-break:break-word}
.post-body .media{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.post-body .media img{display:block;width:100%;height:auto;background:#fff}
.post-body .media video{width:100%;height:auto;background:#000}
.post-ft{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.post-ft .btn{padding:7px 12px;border-radius:10px;font-weight:600}
.post-ft .feel{margin-left:auto;color:var(--text-muted);font-size:13px}

/* ------------------------------ Welcome --------------------------- */
.welcome{margin-bottom:16px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.welcome .u-avatar img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.welcome .u-name{font-family:var(--font-display);font-size:22px;letter-spacing:.2px}

/* ============================== Chat ============================== */
/* Merged chat: log + bottom app bar + floating toggle */
.chat-zone{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;flex-direction:column;max-height:80vh;
  background:#fff;border-top-left-radius:16px;border-top-right-radius:16px;
  box-shadow:0 -10px 28px rgba(16,24,40,.12);
  transform:translateY(100%);transition:transform .35s ease;
}
.chat-zone.active{transform:translateY(0)}
/* content area */
.chat-logs{flex:1;overflow:auto;padding:12px}
.chat-log{
  padding:16px;min-height:120px;max-height:360px;overflow:auto;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);
  /* leave space so long messages aren’t hidden by the dock */
  scroll-padding-bottom:10px;padding-bottom:calc(var(--chat-dock-h) + 12px);
}
/* message bubbles */
.chat-log .message{
  padding:10px 14px;border-radius:14px;margin:8px 0;max-width:85%;
  line-height:1.65;word-wrap:break-word;overflow-wrap:anywhere;background:#fff;
  border:1px solid var(--border);box-shadow:0 2px 6px rgba(16,24,40,.05);font-size:15px;
}
.chat-log .message.user{margin-left:auto;background:color-mix(in oklab,var(--primary) 12%,#fff)}
.chat-log .message.bot{white-space:pre-line}

/* custom scrollbar (webkit) */
.chat-log::-webkit-scrollbar{height:10px;width:10px}
.chat-log::-webkit-scrollbar-track{background:transparent}
.chat-log::-webkit-scrollbar-thumb{background:#e7ebf2;border-radius:999px;border:2px solid #fff}

/* bottom app bar */
.chat-dock{
  border-top:1px solid var(--border);
  background:color-mix(in oklab,#ffffff 82%,transparent);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 -8px 20px rgba(16,24,40,.10);
  padding:10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
}
.chat-dock__inner{width:100%;max-width:920px;margin:0 auto}
.chat-input{display:grid;align-items:center;gap:10px;grid-template-columns:1fr auto}
#userInput{
  min-height:44px;max-height:160px;width:100%;
  padding:10px 12px;border-radius:999px;resize:none;line-height:1.5;
  border:1px solid var(--border);background:#f8fafc;color:var(--text);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
#userInput:focus{
  outline:2px solid var(--focus);outline-offset:2px;background:#fff;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 28%,transparent);
}
.chat-send{
  height:40px;padding:0 14px;border-radius:12px;white-space:nowrap;cursor:pointer;
  border:1px solid var(--border);color:var(--text);
  background:color-mix(in oklab,var(--primary) 20%,#fff);
  transition:background .15s, box-shadow .15s, transform .05s;
}
.chat-send:hover{background:color-mix(in oklab,var(--primary) 28%,#fff);box-shadow:0 2px 10px rgba(16,24,40,.10)}
.chat-send:active{transform:translateY(1px)}
.chat-send[disabled]{opacity:.6;cursor:not-allowed}
.footer__credit{margin-top:8px;color:var(--text-muted);font-size:12.5px}

/* floating toggle */
.chat-toggle{
  position:fixed;right:16px;bottom:16px;z-index:50;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--primary);color:#fff;font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .1s;
}
.chat-toggle:hover{background:color-mix(in oklab,var(--primary) 90%,#000)}
.chat-toggle:active{transform:scale(.96)}

/* ------------------------------- KB Chat --------------------------- */
/* (giữ style cơ bản; ẩn controls nếu dùng dock chung) */
.kbchat{padding:12px}
.kbchat__messages{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;max-height:300px;overflow:auto;box-shadow:var(--shadow-soft)}
.kbchat__row{display:flex;margin:10px 0}
.kbchat__row--usr{justify-content:flex-end}
.kbchat__bubble{
  max-width:80%;padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:#fff;line-height:1.65;box-shadow:0 2px 6px rgba(16,24,40,.05);
}
.kbchat__row--usr .kbchat__bubble{background:color-mix(in oklab,var(--primary) 12%,#fff)}
.kbchat__controls{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
#kbchatInput{
  flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
  background:#fff;color:var(--text);min-height:46px;resize:vertical;transition:border-color .2s, box-shadow .2s;
}
#kbchatInput:focus{
  outline:2px solid var(--focus);outline-offset:2px;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 28%,transparent);
}
.kbchat__clear{
  border:1px solid var(--border);background:#fff;color:var(--text);
  padding:9px 12px;border-radius:12px;cursor:pointer;transition:background .15s, box-shadow .15s;
}
.kbchat__clear:hover{background:#f6f8fb;box-shadow:0 2px 8px rgba(16,24,40,.08)}

/* ----------------------------- Animations -------------------------- */
@keyframes heartUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}
.heart-fx{position:fixed;z-index:99999;pointer-events:none;font-size:20px;animation:heartUp 1s ease-out both}

/* ------------------------------- Media ---------------------------- */
video,audio{outline:none;border-radius:12px}
figure.media{background:#f3f6fa}
figure.media img{background:#fff}

/* ------------------------------- Tables --------------------------- */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff
}
th,td{padding:10px 12px;border-bottom:1px solid var(--border)}
thead th{text-align:left;background:#f6f8fb}
tbody tr:last-child td{border-bottom:0}

/* -------------------------- Badges/Chips -------------------------- */
.badge{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;
  border:1px solid var(--border);font-size:12px;color:var(--text-muted);background:#fff
}
.tag{background:#f6f8fb}

/* -------------------------- Forms / a11y -------------------------- */
input:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:color-mix(in oklab,var(--text) 35%,transparent)}
input:focus,textarea:focus{
  outline:2px solid var(--focus);outline-offset:2px;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 28%,transparent);
}

/* -------------------------- Footer spacing ------------------------ */
.footer{margin:24px 0;color:var(--text-muted);font-size:13px}

/* ------------------------ Reduced motion -------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------ Responsive tweaks ----------------------- */
@media (max-width:1024px){
  .chat-dock__inner{border-left:0;border-right:0;border-radius:0}
}
@media (max-width:768px){
  .chat-log{max-height:320px}
}
@media (max-width:420px){
  .chat-log{max-height:300px}
}
/* ======================= Mobile-only overrides ======================= */
/* Ngưỡng mobile: ≤ 640px (có thể đổi sang 768px nếu muốn) */
@media (max-width: 640px){

  /* 1) Chat sheet full-width, cao theo 100dvh để an toàn bàn phím iOS/Android */
  .chat-zone{
    left:0; right:0; bottom:0;
    max-height:100dvh;              /* tránh bị tràn khi mở bàn phím */
    border-top-left-radius:16px;
    border-top-right-radius:16px;
  }

  /* 2) App bar: cố định đáy + safe-area; tăng z-index để luôn nổi trên log */
  .chat-dock{
    position:fixed;
    left:0; right:0; bottom:0; z-index:100;
    padding:8px max(10px, env(safe-area-inset-left))
            calc(8px + env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-right));
    box-shadow:0 -8px 18px rgba(16,24,40,.14);
    backdrop-filter:saturate(160%) blur(8px);
  }
  .chat-dock__inner{
    max-width:100%; margin:0; border-left:0; border-right:0; border-radius:0;
  }

  /* 3) Layout thanh nhập: [textarea] [send]  — nút luôn có slot riêng */
  .chat-input{
    display:grid;
    grid-template-columns: 1fr auto;  /* input co giãn, nút cố định */
    align-items:center; gap:8px;
    margin:0;
  }

  /* 4) Textarea: không che nút, giới hạn 5 dòng; cho scroll nội bộ khi dài */
  #userInput{
    min-height:42px; max-height:120px;
    padding:10px 12px;
    border-radius:999px;
    resize:none;                     /* auto-grow bằng JS; fallback thì scroll */
    overflow:auto;
    background:#fff;                 /* tương phản với bar mờ */
  }

  /* 5) Nút gửi: kích thước chạm tốt, luôn hiển thị */
  .chat-send{
    height:42px; min-width:72px;
    padding:0 14px;
    border-radius:12px;
    flex:0 0 auto;                   /* không co lại khi input dài */
    white-space:nowrap;
  }

  /* 6) Khoảng trống cho log: chừa đúng độ cao bar di động */
  :root{ --chat-dock-h: 72px; }      /* fallback nếu JS chưa cập nhật */
  .chat-logs{ padding:8px 8px 0 }
  .chat-log{
    padding:12px;
    padding-bottom: calc(var(--chat-dock-h) + 12px); /* chừa chỗ cho thanh nhập */
    max-height: calc(100dvh - var(--chat-dock-h) - 90px);
    /* 90px ~ phần viền + header khối; chỉnh lại nếu UI khác */
  }

  /* 7) Tối ưu chạm và đọc trên mobile */
  .chat-log .message{ font-size:15px; line-height:1.65 }
  .footer__credit{ display:none }    /* gọn hơn trên mobile */

  /* 8) Nút toggle nổi: nhích lên khỏi safe-area khi bar mở */
  .chat-toggle{
    right:12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width:52px; height:52px; font-size:21px;
    box-shadow:0 6px 14px rgba(0,0,0,.25);
  }
}
/* =========================
   Tokens & base
========================= */
:root{
  --ntc-bg:#ffffff;
  --ntc-text:#111827;
  --ntc-muted:#6b7280;
  --ntc-border:#e5e7eb;
  --ntc-soft:#f9fafb;
  --ntc-primary:#2563eb;
  --ntc-primary-600:#1e4fd7;
  --ntc-shadow-sm:0 1px 4px rgba(0,0,0,.08);
  --ntc-shadow-md:0 6px 14px rgba(0,0,0,.18);
  --tap-min:44px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =========================
   Chat (mobile-first)
========================= */
@media (max-width: 768px){
  .chat-zone{
    max-height: 100dvh; /* iOS/Android keyboard-safe */
    border-radius: 16px 16px 0 0;
    background: var(--ntc-bg);
  }

  .chat-dock{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 100;
    padding: 8px max(12px, env(safe-area-inset-left))
             calc(8px + env(safe-area-inset-bottom))
             max(12px, env(safe-area-inset-right));
    background: color-mix(in oklab, #fff 88%, transparent);
    backdrop-filter: saturate(160%) blur(8px);
    box-shadow: 0 -8px 18px rgba(16,24,40,.14);
  }
  .chat-dock__inner{
    margin: 0; max-width: 100%;
    border-radius: 12px; border: 1px solid var(--ntc-border);
    background: #fff;
    padding: 8px;
  }

  .chat-input{
    display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  }

  #userInput{
    font-size: 16px; /* tránh iOS zoom */
    min-height: var(--tap-min); max-height: 120px;
    padding: 10px 12px;
    background: #fff; color: var(--ntc-text);
    border: 1px solid var(--ntc-border); border-radius: 999px;
    resize: none; overflow: auto; outline: none;
  }
  #userInput:focus{ box-shadow: 0 0 0 3px rgba(37,99,235,.15) }

  .chat-send{
    height: var(--tap-min); min-width: 84px;
    padding: 0 16px;
    border: none; border-radius: 12px;
    background: var(--ntc-primary); color: #fff; font-weight:600;
    transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  }
  .chat-send:hover{ background: var(--ntc-primary-600) }
  .chat-send:active{ transform: translateY(1px) }
  .chat-send[disabled]{ opacity:.6; pointer-events:none }

  .chat-logs{ padding: 8px 8px 0 }
  .chat-log{
    padding: 12px;
    padding-bottom: calc(var(--chat-dock-h, 64px) + 12px);
    max-height: calc(100dvh - var(--chat-dock-h, 64px) - 90px);
    overflow: auto;
  }

  .footer__credit{ display: none }
  .chat-toggle{
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; font-size: 21px;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
  }
}

/* =========================
   Chat FAB
========================= */
.chat-fab{
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#6366f1,#3b82f6);
  color: #fff; font-size: 24px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.08);
  transition: transform .2s ease, filter .2s ease;
}
.chat-fab:hover{ transform: translateY(-2px) scale(1.05); filter: brightness(1.06) }
.chat-fab:active{ transform: scale(.96) }
.chat-fab:focus-visible{
  outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,.3), 0 6px 20px rgba(0,0,0,.25);
}

/* =========================
   Share link (nhẹ, hiện đại)
========================= */
.btn-share{
  display: inline-flex; align-items: center; gap: 6px;
  color: #304ffe; font-weight: 600; text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.btn-share:hover{ background: rgba(48,79,254,0.08); color: #1a2edb }
.btn-share svg{ flex-shrink: 0 }

/* =========================
   Media & Lightbox
========================= */
.media{ position: relative }
.nt-thumb-btn{
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--tap-min);
  padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--ntc-border); background: #fff; color: var(--ntc-text);
  box-shadow: var(--ntc-shadow-sm);
  cursor: pointer; font-weight: 600;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.nt-thumb-btn:hover{ background: var(--ntc-soft); box-shadow: 0 2px 8px rgba(0,0,0,.08) }
.nt-thumb-btn:active{ transform: translateY(1px) }
.nt-thumb-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.2) }

.nt-lightbox{
  position: fixed; inset: 0; z-index: 99999; display: none;
  background: rgba(0,0,0,.86);
  align-items: center; justify-content: center; cursor: zoom-out;
  padding: 4dvh 4dvw;
}
.nt-lightbox.on{ display: flex }
.nt-lightbox img{ max-width: 92vw; max-height: 92vh; object-fit: contain }

/* =========================
   Post action bar (mảnh, dễ bấm)
========================= */
.post-actions{
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px solid #eee;
  flex-wrap: wrap;
}
.post-actions.slim{ gap: 6px; padding-top: 8px }

.btn-action{
  --pad-x: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-min);
  padding: 0 var(--pad-x);
  border-radius: 12px;
  border: 1px solid var(--ntc-border);
  background: #fff; color: var(--ntc-text);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background .15s ease, border-color .15s ease,
              transform .08s ease, box-shadow .15s ease, color .15s ease;
}
.btn-action:hover{
  background: var(--ntc-soft);
  box-shadow: var(--ntc-shadow-sm);
}
.btn-action:active{ transform: translateY(1px) }
.btn-action[aria-busy="true"]{ opacity:.6; pointer-events:none }
.btn-action:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.2) }

.btn-action .btn-icon{ font-size: 18px; line-height: 1 }
.btn-action .label{ font-weight: 600 }
.btn-action .count{
  padding-left: 2px; color: var(--ntc-muted);
  font-variant-numeric: tabular-nums;
}

/* Biến thể ghost (không viền, chỉ nền nhẹ khi hover) */
.btn-action--ghost{
  border-color: transparent; background: transparent;
}
.btn-action--ghost:hover{ background: var(--ntc-soft) }

/* Màn rất hẹp: ưu tiên icon + số, ẩn chữ */
@media (max-width: 380px){
  .post-actions .btn-action .label{ display: none }
  .post-actions{ gap: 4px }
  .btn-action{ --pad-x: 10px; border-radius: 10px }
  .btn-action .btn-icon{ font-size: 17px }
}

/* =========================
   A11y utils
========================= */
.sr-only{
  position: absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,1px,1px); white-space:nowrap; border:0;
}
/* ===== Post action bar: tròn chịa – slim – dễ bấm ===== */
:root{
  --pa-border:#e5e7eb;
  --pa-bg:#fff;
  --pa-text:#111827;
  --pa-muted:#6b7280;
  --pa-ring:rgba(37,99,235,.24);
  --tap:44px;                /* kích thước chạm tối thiểu */
}

.post-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-top:10px; border-top:1px solid #eee;
}
.post-actions.slim{ gap:6px; padding-top:8px }

/* Nút pill mảnh, cân đối */
.btn-iconic{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--tap); padding:0 14px;
  border:1px solid var(--pa-border); border-radius:999px;
  background:var(--pa-bg); color:var(--pa-text);
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease,
             transform .08s ease, box-shadow .15s ease, color .15s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.btn-iconic:hover{ background:#f9fafb; box-shadow:0 1px 6px rgba(0,0,0,.06) }
.btn-iconic:active{ transform:translateY(1px) }
.btn-iconic:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pa-ring) }
.btn-iconic[aria-busy="true"]{ opacity:.6; pointer-events:none }

/* Icon & số đếm */
.btn-iconic .ico{ font-size:18px; line-height:1 }
.btn-iconic .num{
  min-width:1.5ch; padding-left:2px;
  color:var(--pa-muted); font-variant-numeric:tabular-nums;
}

/* Cực hẹp: ưu tiên icon + số, giữ form pill */
@media (max-width:380px){
  .post-actions{ gap:4px }
  .btn-iconic{ padding:0 12px }
  .btn-iconic .ico{ font-size:17px }
}

/* A11y helper (đã có trong dự án, giữ lại) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}
/* Mobile full-screen layout */
@media (max-width: 768px) {
  html, body { height: 100%; margin: 0; }
  body { background:#fff; }

  /* Container & main chiếm trọn màn hình */
  .container { width: 100%; max-width: none; padding: 0; }
  #main { min-height: 100dvh; /* dùng dải an toàn cho mobile */ }

  /* Ẩn breadcrumb & sidebar để nhường chỗ */
  .breadcrumb { display: none; }
  .layout-3col { display:block; }
  .col-left { display: none !important; }
  .col-main { width: 100%; padding: 0 12px 12px; }

  /* Chào mừng & composer gọn trên mobile */
  .welcome { padding: 12px; }
  .composer-card { padding: 12px; }

  /* Bài viết full width, giảm biên */
  .post { margin: 0 0 12px; border-radius: 12px; }
  .post-hd, .post-body, .post-actions { padding: 12px; }
  .media img, .media video { width: 100%; height: auto; display:block; }

  /* FAB chat không đè nội dung quan trọng */
  .chat-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 999; }

  /* Chat overlay full-screen trên mobile */
  #chatOverlay[hidden] { display: none !important; }
  #chatOverlay .chat-overlay__backdrop { inset: 0; }
  #chatOverlay .chat-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;        /* trừ thanh địa chỉ trên mobile */
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  #chatOverlay .chat-panel > div:first-child { /* header của panel */
    padding-top: max(8px, env(safe-area-inset-top));
  }
  #chatOverlay form { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* Tránh body cuộn khi overlay mở (chat/composer đã set class no-scroll) */
body.is-modal-open, body.no-scroll { overflow: hidden; }