/* Nova Đăng Nhóm — giao diện chung.
   Bảng màu theo nhận diện Nova Automation (bản chốt 27/08): nền #FDF6FA, nền phụ #FBE7F1,
   điểm nhấn #E11D8F, chữ #1F1420. Bố cục ứng dụng bám theo fbtool.net để khách từng dùng
   tool đó là dùng được ngay, nhưng màu sắc là của Nova. */

:root {
  --bg: #fdf6fa;
  --bg-alt: #fbe7f1;
  --surface: #ffffff;
  --ink: #1f1420;
  --ink-2: #6b5a67;
  --ink-3: #9a8794;
  --line: #efdce8;
  --line-strong: #e3c6d9;
  --accent: #e11d8f;
  --accent-ink: #a8146b;
  --accent-soft: #fce9f4;
  --ok: #0e7a57;
  --ok-soft: #e4f5ee;
  --warn: #8f5b00;
  --warn-soft: #fbf0da;
  --risk: #b01f34;
  --risk-soft: #fbe7ea;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(31, 20, 32, 0.05), 0 8px 24px -12px rgba(31, 20, 32, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); letter-spacing: -0.015em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 12px; }

.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: 0.02em; }
.brand svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fdf6fa; border: 0; border-radius: 9px;
  padding: 11px 18px; font-family: inherit; font-size: 0.94rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.small { padding: 7px 13px; font-size: 0.85rem; }
.btn.danger { background: var(--risk); }
.btn.block { width: 100%; }

input[type="text"], input[type="password"], textarea, select {
  width: 100%; font-family: inherit; font-size: 0.94rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 10px 12px;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

.pill { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.risk { background: var(--risk-soft); color: var(--risk); }
.pill.accent { background: var(--accent-soft); color: var(--accent-ink); }

.alert { border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; border: 1px solid; font-size: 0.9rem; }
.alert.err { background: var(--risk-soft); border-color: var(--risk); color: var(--risk); }
.alert.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.alert.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.alert:empty { display: none; }

.muted { color: var(--ink-3); font-size: 0.85rem; }
.hidden { display: none !important; }

/* ---------- Trang giới thiệu & trang rủi ro ---------- */

.page { max-width: 940px; margin: 0 auto; padding: 40px 22px 80px; }
.page.narrow { max-width: 660px; }

.hero { padding: 30px 0 20px; }
.hero p.sub { font-size: 1.08rem; color: var(--ink-2); max-width: 54ch; }

.plans { display: grid; gap: 14px; margin: 26px 0; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.plans.bon-goi { grid-template-columns: 1fr; }
@media (min-width: 620px) { .plans.bon-goi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .plans.bon-goi { grid-template-columns: repeat(4, 1fr); } }
.plan .price { font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.plan .price small { font-size: 0.8rem; font-weight: 500; color: var(--ink-3); }
.plan ul { margin: 12px 0 0; padding-left: 18px; font-size: 0.9rem; color: var(--ink-2); }
.plan li { margin-bottom: 5px; }
.plan li::marker { color: var(--accent); }

.google-btn {
  display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 12px 18px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; cursor: pointer;
}
.google-btn:hover { background: var(--bg-alt); }
.google-btn svg { width: 18px; height: 18px; flex: none; }

/* Ô nhập có biểu tượng đứng trước — dùng ở khối đăng nhập ngoài trang chủ. */
.o-ico { position: relative; }
.o-ico .ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; line-height: 1; pointer-events: none;
}
.o-ico input { padding-left: 40px; }

/* Công tắc đồng ý điều khoản. Mặc định TẮT: đánh dấu sẵn hộ khách thì không còn là đồng ý
   nữa, mà chỉ là một hình vẽ. */
.dong-y {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin: 16px 0; font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  text-transform: none; letter-spacing: 0;
}
.dong-y input { position: absolute; opacity: 0; width: 0; height: 0; }
.dong-y .ray {
  width: 44px; height: 25px; border-radius: 999px; background: var(--line-strong);
  flex: none; position: relative; transition: background 0.15s;
}
.dong-y .ray::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
}
.dong-y input:checked + .ray { background: var(--ok); }
.dong-y input:checked + .ray::after { transform: translateX(19px); }
.dong-y input:focus-visible + .ray { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Nút Google khi chưa đồng ý điều khoản: mờ đi cho biết chưa bấm được, nhưng VẪN bấm được
   để còn hiện ra lời nhắc — nút chết không nói gì là kiểu bí nhất với người dùng. */
.google-btn.chua-the { opacity: 0.5; }

/* ---------- Ứng dụng ---------- */

.topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  flex-wrap: nowrap; overflow: hidden; /* co nội dung lại thay vì tràn ngang trang trên điện thoại hẹp */
}
.topbar .grow { flex: 1; min-width: 8px; }
.topbar .who { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; min-width: 0; }
.topbar .who img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.topbar .who span { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .topbar { gap: 6px; padding: 9px 10px; }
  .topbar .who span { display: none; } /* màn hẹp: giữ ảnh đại diện, bỏ tên cho đỡ chật — vẫn có nút Đăng xuất */
  .topbar .btn.small { padding: 7px 10px; font-size: 0.8rem; }
}

.shell { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 50px); padding-bottom: 64px; }
@media (min-width: 1000px) { .shell { grid-template-columns: 190px 1fr 1fr; padding-bottom: 0; } }

/* Điện thoại (mặc định): thanh chuyển màn hình nằm CỐ ĐỊNH Ở ĐÁY MÀN HÌNH, có chữ — đây là
   cách điều hướng DUY NHẤT của khách trên điện thoại, nên không được ẩn đi như bản cũ (trước
   đây .rail bị display:none dưới 1000px, khiến khách dùng điện thoại kẹt cứng ở màn "Đăng
   bài", không có cách nào bấm sang "Khoá đăng nhập" để kết nối Facebook). Từ 1000px trở lên
   (máy tính) mới chuyển về thanh dọc bên trái, chỉ icon, như thiết kế gốc. */
.rail {
  display: flex; flex-direction: row; justify-content: space-around; align-items: stretch;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--line); padding: 4px 2px;
  box-shadow: 0 -4px 14px rgba(31, 20, 32, 0.06);
}
@media (min-width: 1000px) {
  .rail {
    position: static; flex-direction: column; justify-content: flex-start; align-items: center;
    gap: 6px; padding: 14px 0; border-top: 0; border-right: 1px solid var(--line); box-shadow: none;
  }
}
.rail button {
  flex: 1; min-width: 0; max-width: 100%; overflow: hidden; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-3); cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 6px 2px;
}
.rail .rail-ico { font-size: 1.15rem; line-height: 1; }
.rail .rail-nhan {
  font-size: 0.62rem; font-weight: 600; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 420px) {
  /* Màn rất hẹp: 5 nhãn chữ không đủ chỗ, dễ tràn đè lên nhau — bớt chữ, giữ icon là đủ để bấm đúng. */
  .rail .rail-nhan { font-size: 0.56rem; }
}
@media (max-width: 360px) {
  .rail .rail-nhan { display: none; }
}
/* Nhãn dài chỉ dành cho màn rộng — xem ghi chú ở app.html. */
.rail .rail-nhan-dai { display: none; }
@media (min-width: 1000px) {
  /* Máy tính: thanh rộng ra, mỗi mục là một dòng "icon + chữ" đọc thẳng, không phải đoán
     icon nghĩa là gì (trước đây chỉ có icon 38px, khách phải rê chuột chờ tooltip). */
  .rail { align-items: stretch; padding: 14px 10px; gap: 2px; }
  .rail button {
    flex: none; width: 100%; height: auto; flex-direction: row; justify-content: flex-start;
    gap: 9px; padding: 9px 10px; font-size: 0.85rem; font-weight: 600; text-align: left;
  }
  .rail .rail-ico { font-size: 1.05rem; flex: none; }
  .rail .rail-nhan { display: none; } /* nhãn ngắn chỉ dùng cho thanh dưới đáy trên điện thoại */
  .rail .rail-nhan-dai {
    display: block; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
}
/* Màn 1000–1149px: hai cột nội dung đã hẹp sẵn, thu thanh lại một chút cho đỡ bóp nội dung. */
@media (min-width: 1000px) and (max-width: 1149px) {
  .rail button { padding: 8px; gap: 7px; }
  .rail .rail-nhan-dai { font-size: 0.78rem; }
}
.rail button.on { background: var(--accent-soft); color: var(--accent-ink); }
.rail button:hover { background: var(--bg-alt); }

.pane { padding: 18px; border-bottom: 1px solid var(--line); min-width: 0; }
/* Cuộn CẢ TRANG như fbtool, không chia hai khung cuộn riêng: khách quen lăn chuột một mạch từ
   đầu tới nút Đăng, không phải để ý con trỏ đang nằm ở cột nào. Thanh điều hướng dính lại nên
   vẫn bấm sang màn khác được ở mọi vị trí cuộn. */
@media (min-width: 1000px) {
  .pane { border-bottom: 0; }
  .pane.left { border-right: 1px solid var(--line); }
  .rail { position: sticky; top: 50px; align-self: start; max-height: calc(100vh - 50px); }
}

.pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pane-head h2 { margin: 0; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; padding-bottom: 1px; }
.tabs button {
  border: 0; background: transparent; color: var(--ink-3); font-family: inherit;
  font-size: 0.82rem; font-weight: 600; padding: 6px 11px; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabs button.filled::after { content: "•"; color: var(--accent); margin-left: 4px; }

.field { margin-bottom: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .row-2 { grid-template-columns: 1fr 1fr; } }

/* Tuỳ chọn nâng cao — gộp các mục ít dùng (tag, giãn cách, hẹn giờ, giới hạn ngày) vào một
   khối gấp lại, đóng theo mặc định, để màn đăng bài không phải cuộn dài như trước — học theo
   cách fbtool.net trình bày dồn mọi thứ gọn trong một màn không cần kéo xuống. */
.tuy-chon-nang-cao { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--bg-alt); }
.tuy-chon-nang-cao summary {
  cursor: pointer; list-style: none; padding: 10px 14px; font-size: 0.85rem; font-weight: 600;
  color: var(--accent-ink); display: flex; align-items: center; gap: 8px;
}
.tuy-chon-nang-cao summary::-webkit-details-marker { display: none; }
.tuy-chon-nang-cao summary::before { content: "▸"; transition: transform 0.15s; }
.tuy-chon-nang-cao[open] summary::before { transform: rotate(90deg); }
.tuy-chon-nang-cao > .field, .tuy-chon-nang-cao > .row-2 { padding: 0 14px; }
.tuy-chon-nang-cao > .field:last-of-type, .tuy-chon-nang-cao > *:last-child { padding-bottom: 14px; }
.tuy-chon-nang-cao .alert:empty { display: none; }

.bai-gan-day { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.bai-gan-day button {
  /* Một dòng duy nhất, cắt bớt bằng dấu … — danh sách này chỉ để nhận ra bài cũ rồi bấm dùng
     lại, không phải để đọc; ngày giờ đã bỏ cho gọn (nội dung đầy đủ vẫn nằm ở tooltip). */
  flex: none; max-width: 190px; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 11px; font-size: 0.78rem; color: var(--ink-2); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bai-gan-day button:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Hàng gọn: nhãn + ô chọn + tab nằm chung một dòng, thay vì mỗi thứ chiếm một hàng riêng —
   mục tiêu là khách mở màn Đăng bài ra thấy ngay ô soạn và nút đăng, không phải cuộn. */
.hang-gon { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hang-gon .nhan-gon {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-3); white-space: nowrap;
}
.hang-gon .chon-gon { width: auto; flex: 0 1 170px; min-width: 110px; }
.hang-gon .tabs { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; flex: 1 1 auto; min-width: 40px; }
.hang-gon .tabs button { padding: 3px 7px; }
/* Đúng một dòng: dải tab tự cuộn ngang khi màn hẹp thay vì đẩy mọi thứ xuống hàng dưới. */
/* Bảng hạn mức của gói đang dùng: mỗi ô một con số, đọc lướt là thấy mình đang được gì. */
.goi-han-muc {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.goi-han-muc .o {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg);
}
.goi-han-muc .o .so { font-size: 1.15rem; font-weight: 700; }
.goi-han-muc .o .nhan { font-size: 0.78rem; color: var(--ink-2); }
.goi-han-muc .o.khong .so { color: var(--ink-3); font-weight: 600; }

/* Danh sách nhóm để đánh dấu ưu tiên bình luận. Cuộn trong khung riêng: khách có thể có tới
   hàng trăm nhóm, đổ hết ra thì phần lịch sử bên dưới bị đẩy đi mất hút. */
.ds-nhom-bl {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 4px;
}
.ds-nhom-bl .dong {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px;
}
.ds-nhom-bl .dong input { width: auto; margin: 0; flex: none; }
.ds-nhom-bl .dong:hover { background: var(--bg); }
.ds-nhom-bl .dong.tat { opacity: 0.5; }
.ds-nhom-bl .ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-nhom-bl .so { font-size: 0.78rem; color: var(--ink-3); flex: none; }

/* Chọn bảng màu cho ảnh tự dựng: mỗi ô là một mẫu màu thật, khách nhìn là biết ngay sẽ ra
   màu gì — hơn hẳn một danh sách chữ "Xanh dương / Cam / Tím". */
.ds-mau { display: flex; flex-wrap: wrap; gap: 8px; }
.o-mau {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 7px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--surface);
  cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--ink-2);
}
.o-mau:hover { border-color: var(--ink-3); }
.o-mau.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.o-mau .cham {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
@media (pointer: coarse) {
  .o-mau { padding: 9px 13px 9px 9px; font-size: 0.85rem; }
}

/* Hướng dẫn lấy khoá Facebook: đánh số rõ ràng, chữ nhỏ hơn thân bài một nấc vì đây là phần
   đọc một lần rồi thôi. */
.huong-dan-khoa { margin: 0; padding-left: 20px; font-size: 0.85rem; line-height: 1.65; color: var(--ink-2); }
.huong-dan-khoa li { margin-bottom: 7px; }
.huong-dan-khoa code {
  background: var(--bg-alt); padding: 1px 5px; border-radius: 5px; font-size: 0.92em; word-break: break-all;
}
/* Nhãn "vĩnh viễn" / "có hạn" trong danh sách Trang. */
.the-khoa { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.the-khoa.vinh-vien { background: #e7f6ec; color: #1a7f43; }
.the-khoa.co-han { background: #fdeceb; color: #b3261e; }

/* Nút Tuỳ chọn nâng cao: để nguyên chữ thì hàng này dài quá, đẩy nút xuống dòng (Công báo
   02/09/2026). Thu về một bánh răng vừa tiết kiệm ~55px vừa dễ nhận ra — nhưng phải để nổi
   bật hẳn (nền hồng nhạt, viền hồng) chứ không được chìm thành một icon xám khách không thấy. */
.nut-banh-rang {
  flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent);
  cursor: pointer; transition: transform 0.18s ease, background 0.18s ease;
}
.nut-banh-rang:hover { background: var(--accent); color: #fff; transform: rotate(35deg); }
.nut-banh-rang.on { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .nut-banh-rang { transition: none; }
  .nut-banh-rang:hover { transform: none; }
}

/* Hàng "Đăng bằng ... Tuỳ chọn": ưu tiên nằm gọn MỘT hàng, nhưng khi cột hẹp thì phải cho
   xuống dòng. Cấm xuống dòng (nowrap) khiến nút cuối LÒI HẲN RA NGOÀI cột, đè lên cột bên
   cạnh — thấy thật 02/09/2026 sau khi thanh điều hướng bên trái nới rộng để hiện chữ. */
.hang-gon.mot-hang { flex-wrap: wrap; column-gap: 8px; }
.hang-gon.mot-hang .btn { white-space: nowrap; flex: none; }
.hang-gon .bai-gan-day { flex: 1 1 auto; min-width: 0; }

.switch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; font-size: 0.9rem; }
.switch input { display: none; }
.switch .track { width: 34px; height: 19px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background 0.15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { left: 17px; }

.dropzone { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 18px; text-align: center; color: var(--ink-3); font-size: 0.85rem; cursor: pointer; background: var(--bg); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs figure { position: relative; margin: 0; }
.thumbs img, .thumbs video { width: 64px; height: 64px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); display: block; background: #000; }
.thumbs button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--risk); color: #fff; cursor: pointer; font-size: 0.7rem; line-height: 1; }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.grid th { text-align: left; font-size: 0.65rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); padding: 7px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid tr.off { opacity: 0.55; }
.gname { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

.history-item { border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 0.86rem; }
.history-item:last-child { border-bottom: 0; }
.history-item .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.history-item .top strong { margin-right: auto; }
.history-item .err { color: var(--risk); font-size: 0.8rem; margin-top: 4px; }

.modal-bg { position: fixed; inset: 0; background: rgba(31, 20, 32, 0.45); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal { background: var(--surface); border-radius: 14px; padding: 24px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow); }

.steps { counter-reset: s; padding-left: 0; list-style: none; margin: 12px 0; }
.steps li { counter-increment: s; position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 0.88rem; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 0.72rem; font-weight: 700; display: grid; place-items: center;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Ngưỡng bài/ngày bị vượt — chữ đổi màu để khách thấy ngay, không phải lỗi nên không dùng màu đỏ báo lỗi. */
.canh-bao { color: #B54708; font-weight: 600; }

/* ---- Badge bấm được (mở cửa sổ chọn gói) ---- */
.pill.bam-duoc { cursor: pointer; }
.pill.bam-duoc:hover { filter: brightness(0.95); }

/* ---- Cửa sổ chọn gói & thanh toán ---- */
.modal-nen {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(31, 20, 32, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal-nen.hidden { display: none; }
.modal {
  position: relative;
  background: var(--nen, #fff);
  border-radius: 18px;
  padding: 28px;
  width: 100%; max-width: 640px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}
.modal.rong-goi { max-width: 1000px; }
.modal-dong {
  position: absolute; top: 14px; right: 16px;
  border: none; background: transparent;
  font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--nhat, #7A6472);
}
.goi-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .goi-luoi { grid-template-columns: 1fr; } }
/* Modal 4 gói: co giãn theo bề rộng (4 → 2 → 1 cột). */
.goi-luoi.bon-goi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 860px) { .goi-luoi.bon-goi { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .goi-luoi.bon-goi { grid-template-columns: 1fr; } }
.goi-the { display: flex; flex-direction: column; padding: 18px; min-width: 0; }
.goi-the.noi-bat { border-color: var(--nhan, #E11D8F); box-shadow: 0 0 0 2px rgba(225, 29, 143, 0.18); }
.goi-the ul { flex: 1; margin: 10px 0 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.7; }
.goi-the .btn { margin-top: 12px; }

.qr-hop { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.qr-hop img { border-radius: 12px; border: 1px solid var(--vien, #F3D9E7); background: #fff; }
.qr-tt { flex: 1; min-width: 200px; }
.qr-dong { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--vien, #F3D9E7); }
.qr-dong span { color: var(--nhat, #7A6472); }
.qr-code { font-family: ui-monospace, "Cascadia Code", monospace; letter-spacing: 0.5px; }
.cho-thanh-toan { margin-top: 14px; color: var(--nhat, #7A6472); display: flex; align-items: center; gap: 10px; }
.xoay {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--vien, #F3D9E7);
  border-top-color: var(--nhan, #E11D8F);
  border-radius: 50%; animation: quay 0.8s linear infinite;
}
@keyframes quay { to { transform: rotate(360deg); } }

/* ---- Nút gạt kỳ hạn (1 tháng / 1 năm) ---- */
.ky-han { display: inline-flex; gap: 4px; background: var(--nen-alt, #FBE7F1); padding: 4px; border-radius: 12px; margin: 4px 0 18px; }
.ky-han-nut {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 18px; border-radius: 9px; font: inherit; font-weight: 600;
  color: var(--nhat, #7A6472);
}
.ky-han-nut.on { background: #fff; color: var(--muc, #1F1420); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.giam-nhan { color: var(--nhan, #E11D8F); font-weight: 700; font-size: 0.85em; margin-left: 2px; }

.gia-khoi { margin-top: 10px; }
.gia-goc { color: var(--nhat, #7A6472); text-decoration: line-through; font-size: 0.95rem; }
.gia-tong { margin-top: 2px; font-size: 0.9rem; }


/* Khối gấp có nút mở riêng nằm ở hàng trên (xem #nut-nang-cao) thì giấu thanh tiêu đề của
   chính nó đi, tránh hiện hai chỗ mở cùng một thứ. */
.tuy-chon-nang-cao.an-summary > summary { display: none; }

/* Bảng chọn icon — gắn vào mọi ô soạn nội dung. Tự viết chứ không nạp thư viện ngoài: chỉ cần
   một bảng emoji hay dùng của người bán hàng, không cần bộ đủ vài nghìn ký tự. */
.o-co-icon { position: relative; }
.nut-icon {
  position: absolute; right: 8px; bottom: 10px; width: 28px; height: 28px; padding: 0;
  border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--ink-2);
}
.nut-icon:hover { background: var(--accent-soft); border-color: var(--accent); }
.bang-icon {
  position: absolute; right: 8px; bottom: 44px; z-index: 40; width: 268px; max-height: 214px;
  overflow-y: auto; padding: 8px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.bang-icon .nhom { font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 6px 2px 4px; }
.bang-icon .nhom:first-child { margin-top: 0; }
.bang-icon .luoi { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.bang-icon button {
  border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; line-height: 1;
  padding: 4px 0; border-radius: 6px;
}
.bang-icon button:hover { background: var(--accent-soft); }


/* Thanh công cụ của ô soạn nội dung — chỉ icon cho gọn, rê chuột mới hiện tên (fbtool làm vậy
   và tiết kiệm được cả một hàng chữ). Tên đặt bằng thẻ tự vẽ chứ không dùng title mặc định của
   trình duyệt vì title hiện chậm cả giây. */
.thanh-cong-cu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-top: -6px; margin-bottom: 10px; }
.thanh-cong-cu .cc {
  position: relative; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.thanh-cong-cu .cc:hover { background: var(--accent-soft); color: var(--accent-ink); }
.thanh-cong-cu .cc.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.thanh-cong-cu .cc::after {
  content: attr(data-ten); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 0.68rem; font-weight: 600; white-space: nowrap;
  padding: 3px 7px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.12s;
  z-index: 20;
}
.thanh-cong-cu .cc:hover::after { opacity: 1; }
.thanh-cong-cu .ngan { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }

/* Chọn kiểu đăng — dải nút liền nhau, cái đang chọn nổi lên. */
.kieu-dang { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.kieu-dang button {
  flex: 1; border: 0; background: var(--surface); color: var(--ink-2); font-family: inherit;
  font-size: 0.8rem; font-weight: 600; padding: 7px 8px; cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--line);
}
.kieu-dang button:last-child { border-right: 0; }
.kieu-dang button.on { background: var(--accent); color: #fff; }
.kieu-dang button:not(.on):hover { background: var(--accent-soft); color: var(--accent-ink); }

/* Danh sách tài khoản cho kiểu đăng chéo */
.ds-tk { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-tk label {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 0.82rem; cursor: pointer;
}
.ds-tk label:hover { border-color: var(--accent); }


/* Bảng nhỏ bật ra từ một icon trên thanh công cụ (hiện dùng cho gắn thẻ). */
.thanh-cong-cu { position: relative; }
.bang-cc {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(340px, 92vw);
  padding: 12px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.bang-cc label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.thanh-cong-cu .cc.co-so::before {
  content: attr(data-so); position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px;
  background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}


/* Thanh Đăng dính đáy màn hình: soạn bài dài tới đâu thì nút Đăng vẫn nằm trong tầm mắt, khách
   không phải cuộn xuống tìm — đúng cách fbtool đặt nút "Bắt Đầu". */
.thanh-dang {
  position: fixed; left: 0; right: 0; bottom: 58px; z-index: 15; padding: 10px 14px 12px;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px rgba(31, 20, 32, 0.05);
}
/* Chừa chỗ ở cuối cột soạn bài để thanh Đăng không đè lên nội dung cuối cùng. */
#view-dang-bai-trai { padding-bottom: 120px; }

@media (min-width: 1000px) {
  /* Máy tính: thanh Đăng chỉ chiếm đúng bề ngang cột trái (lưới 56px + 1fr + 1fr), không đè
     sang bảng nhóm bên phải. */
  .thanh-dang { left: 56px; width: calc((100vw - 56px) / 2); right: auto; bottom: 0; padding: 12px 18px 14px; }
}

/* Ghi chú bố cục: logo + gói + hạn dùng đã được đẩy sang phải bằng cách đặt khoảng giãn
   (.grow) lên ĐẦU thanh trong app.html — không dùng order để khỏi rối thứ tự khi đọc mã. */


/* Khu soạn bài: 1/3 trái là ảnh, 2/3 phải là chữ — học cách fbtool đặt khung ảnh ngay cạnh ô
   nội dung thay vì bắt cuộn xuống mới thấy. */
.khu-soan { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
@media (min-width: 620px) { .khu-soan { grid-template-columns: 1fr 2fr; } }
.khu-soan .cot-anh { min-width: 0; }
.khu-soan .cot-chu { min-width: 0; display: flex; flex-direction: column; }
.khu-soan .cot-chu .field { flex: 1; }
.khu-soan textarea { height: 100%; min-height: 190px; }

/* Khung thả ảnh kiểu fbtool: hình minh hoạ mờ + hai dòng chữ nhạt. */
.dropzone.hinh {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 190px; height: 100%; padding: 16px 12px; text-align: center; line-height: 1.45;
}
.dropzone.hinh svg { width: 64px; height: 48px; margin-bottom: 6px; }
.dropzone.hinh svg rect { fill: var(--accent-soft); stroke: var(--line-strong); stroke-width: 1.5; }
.dropzone.hinh svg rect.sau { fill: var(--surface); }
.dropzone.hinh svg .dam { fill: var(--accent); opacity: 0.55; }
.dropzone.hinh strong { font-size: 0.9rem; color: var(--ink-2); }
.dropzone.hinh .muted { font-size: 0.76rem; }
.dropzone.hinh:hover strong { color: var(--accent-ink); }


/* ---------- Nén khoảng trắng cho mọi màn (01/09/2026) ---------- */
.pane { padding: 12px 18px 18px; }
.pane-head { margin-bottom: 8px; }
.pane-head h2 { font-size: 1.2rem; }
.pane-head h3 { font-size: 1rem; }
.field { margin-bottom: 9px; }
.field label { margin-bottom: 4px; }
.card { padding: 14px 16px; }
.hang-gon { margin-bottom: 6px; }
.tuy-chon-nang-cao summary { padding: 8px 14px; }
h1, h2, h3, h4 { margin-bottom: 9px; }
.alert { margin-bottom: 8px; }

/* Màn Đăng bài chật nhất nên siết thêm một nấc. */
#khoi-bai-gan-day { margin-bottom: 6px; }
#kieu-dang-mo-ta { margin-top: 4px !important; font-size: 0.78rem; }
#view-dang-bai-trai .kieu-dang button { padding: 6px 8px; }
#view-dang-bai-trai .bai-gan-day button { padding: 3px 10px; }
#view-dang-bai-trai .thanh-cong-cu { margin-top: -2px; margin-bottom: 6px; }
#view-dang-bai-trai .khu-soan { margin-bottom: 8px; }


/* ---------- Dải 10 tab cách viết: hiện đủ, không cuộn trong ô (01/09/2026) ---------- */
/* Trước đây .tabs có overflow-x:auto nên trên hàng gọn chỉ thấy tới số 9, khách phải kéo một
   thanh cuộn nhỏ xíu mới tới tab 10. Nay thu nhỏ số và cấm co lại để 10 số nằm đủ trên hàng. */
.hang-gon.mot-hang .tabs { overflow-x: visible; flex: 0 0 auto; gap: 1px; }
.hang-gon.mot-hang .tabs button { padding: 3px 5px; font-size: 0.78rem; }
.hang-gon.mot-hang .tabs button.filled::after { margin-left: 2px; }
/* Ô chọn tài khoản nhường chỗ trước, vì nó co lại vẫn đọc được còn dãy số thì không. */
.hang-gon.mot-hang .chon-gon { flex: 0 1 120px; min-width: 92px; }
/* Cột soạn bài hẹp (màn 1000–1319px): siết thêm một nấc để hàng vẫn nằm gọn MỘT dòng — Công
   yêu cầu nút bánh răng phải ở cùng hàng với dãy số, không được rớt xuống dòng dưới. Chữ
   "Đăng bằng" ẩn đi về mặt hình ảnh nhưng VẪN nằm trong mã trang cho trình đọc màn hình. */
@media (min-width: 1000px) and (max-width: 1319px) {
  .hang-gon.mot-hang .nhan-gon {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; margin: 0; padding: 0;
  }
  .hang-gon.mot-hang .chon-gon { flex: 0 1 105px; min-width: 88px; }
  .hang-gon.mot-hang .tabs button { padding: 3px 4px; }
}

/* Màn hẹp thật (điện thoại) thì đành cho cuộn lại, còn hơn vỡ hàng. */
@media (max-width: 640px) {
  .hang-gon.mot-hang .tabs { overflow-x: auto; flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   ĐIỆN THOẠI — sửa 02/09/2026 sau khi đo thật ở khổ iPhone (390px).
   Hai lỗi tìm được: hàng nút bị CẮT CỤT chứ không phải tràn ra rồi cuộn được
   (khách không bấm nổi lựa chọn cuối), và nút chỉ cao 23-28px trong khi ngón
   tay cần tối thiểu 44px.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Ba cách đăng: xếp dọc thay vì nhồi một hàng. .kieu-dang có overflow:hidden
     nên phần tràn bị cắt mất luôn, không cuộn tới được — xếp dọc là cách duy
     nhất vừa thấy đủ chữ vừa bấm được. */
  .kieu-dang { flex-direction: column; }
  .kieu-dang button {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
    text-align: left;
    padding: 11px 12px;
  }
  .kieu-dang button:last-child { border-bottom: 0; }
  #view-dang-bai-trai .kieu-dang button { padding: 11px 12px; }

  /* Hàng "Đăng bằng…": bỏ ép một dòng, cho xuống hàng. Ép một dòng trên màn
     hẹp làm nút cuối (Tuỳ chọn) trôi ra ngoài mép. */
  .hang-gon.mot-hang { flex-wrap: wrap; }
  .hang-gon .chon-gon { flex: 1 1 140px; }
}

/* Màn hình chạm: nút phải đủ cao để bấm bằng ngón tay, không phải bằng chuột. */
@media (pointer: coarse) {
  .kieu-dang button,
  .hang-gon .btn,
  .btn.small { min-height: 40px; }
  .tabs button { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  /* Thanh nút biểu tượng khi soạn bài (emoji, ảnh, nền màu…): nút vuông 40px. */
  .cc { min-height: 40px; min-width: 40px; }
  .nut-icon { min-height: 40px; min-width: 40px; }
  .hang-gon .tabs button { padding: 7px 10px; }
}

/* ---------------------------------------------------------------------------
   KHUNG ẢNH — sửa 02/09/2026.
   1) Ảnh đã chọn hiện NGAY TRONG khung thả (trước nằm tách bên dưới, khung vẫn
      trống trơn dù đã tải ảnh).
   2) Trên điện thoại: ô soạn nội dung lên TRƯỚC, khung ảnh xuống sau và thu nhỏ
      — khung ảnh cao 190px ở màn một cột đẩy ô soạn ra khỏi màn hình, khách mở
      lên chỉ thấy chỗ chọn ảnh chứ không thấy chỗ viết bài.
--------------------------------------------------------------------------- */
.thumbs .them-anh {
  position: static;
  width: 64px; height: 64px;
  border: 1px dashed var(--line-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink-3);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.thumbs .them-anh:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dropzone.hinh .thumbs { justify-content: center; }
/* Đã có ảnh: thu gọn phần minh hoạ để ảnh là thứ chiếm chỗ, không phải cái biểu tượng. */
.dropzone.hinh.co-anh { min-height: 0; padding: 12px; justify-content: flex-start; }
.dropzone.hinh.co-anh svg { width: 34px; height: 26px; margin-bottom: 2px; }
.dropzone.hinh.co-anh strong { font-size: 0.9rem; }

@media (max-width: 619px) {
  /* Viết bài mới là việc chính — cho nó lên trên. */
  .khu-soan .cot-chu { order: -1; }
  .dropzone.hinh { min-height: 110px; padding: 12px; }
  .dropzone.hinh svg { width: 40px; height: 30px; margin-bottom: 2px; }
  .dropzone.hinh strong { font-size: 0.92rem; }
  .khu-soan textarea { min-height: 150px; }
}

/* ---------------------------------------------------------------------------
   ĐIỆN THOẠI: chừa chỗ cho thanh "Bắt đầu đăng" — sửa 02/09/2026.
   Trên máy tính thanh Đăng chỉ nằm trong cột trái nên chỉ cột trái cần chừa chỗ.
   Trên điện thoại hai cột xếp chồng thành một dòng cuộn, mà thanh Đăng vẫn dính
   đáy — nên nó đè lên phần CUỐI CÙNG của trang, tức là danh sách nhóm. Cuộn hết
   cỡ vẫn không đọc được mấy nhóm cuối.
--------------------------------------------------------------------------- */
@media (max-width: 999px) {
  /* KHOẢNG TRẮNG LỚN GIỮA CÁC KHỐI: .shell là lưới có min-height 100vh, nên khi nội dung
     ngắn hơn màn hình thì các hàng bị KÉO GIÃN đều nhau và chỗ thừa biến thành khoảng trống
     giữa các khối (đo được 432px ở màn Đăng bài, 288px ở Bình luận). Xếp từ trên xuống là hết. */
  .shell { align-content: start; }
  /* Chừa chỗ cho thanh điều hướng dính đáy: 64px cũ vẫn để nút cuối màn (ví dụ "Lưu cài đặt"
     ở màn Trang) thò xuống dưới đáy 8px, bấm không tới. */
  .shell { padding-bottom: 132px; }

  /* 58px thanh điều hướng dưới + 88px thanh Đăng + thở một chút. */
  #view-dang-bai-phai { padding-bottom: 150px; }
  /* Cột trái không còn là phần cuối trang nữa nên không cần chừa nhiều như trước. */
  #view-dang-bai-trai { padding-bottom: 16px; }
}

/* Chip gói + chip số ngày ở thanh trên cùng: giờ chip ngày hiện với mọi gói nên chuỗi dài hơn
   ("Nâng cao" + "Còn 312 ngày"). Trên màn hẹp mà để xuống dòng thì thanh trên vỡ ba tầng, đè
   lên tên thương hiệu — thà cắt đuôi bằng dấu ba chấm, còn con số ngày thì không được cắt. */
#chip-goi, #chip-han {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42vw; flex: 0 1 auto; min-width: 0;
}
#chip-han { flex-shrink: 0; }
.topbar { flex-wrap: nowrap; }
@media (max-width: 480px) {
  #chip-goi { max-width: 30vw; }
  #chip-han { max-width: 46vw; }
}

/* Dải "Đã có bản mới" — nằm trên thanh điều hướng đáy, không che nút nào. */
.dai-ban-moi {
  position: fixed; left: 12px; right: 12px; bottom: 70px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(31, 20, 32, 0.25);
}
.dai-ban-moi .btn { background: #fff; color: var(--ink); border: 0; }
@media (min-width: 1000px) { .dai-ban-moi { left: auto; right: 20px; bottom: 20px; max-width: 340px; } }

/* ---------------------------------------------------------------------------
   BẢNG NHÓM VỪA MÀN ĐIỆN THOẠI — sửa 02/09/2026.
   Bỏ ba cột rồi mà bảng vẫn rộng 597px trên màn 390px, vì các ô tự giãn theo
   nội dung dài nhất. Ép bảng đúng bề ngang khung và cắt chữ thừa bằng dấu ba
   chấm; tên đầy đủ vẫn đọc được ở chú giải khi chạm giữ.
--------------------------------------------------------------------------- */
@media (max-width: 999px) {
  #bang-nhom { table-layout: fixed; width: 100%; }
  #bang-nhom th, #bang-nhom td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #bang-nhom th:nth-child(1), #bang-nhom td:nth-child(1) { width: 26px; }   /* ô tích */
  #bang-nhom th:nth-child(2), #bang-nhom td:nth-child(2) { width: auto; }   /* tên nhóm — phần co giãn */
  #bang-nhom th:nth-child(3), #bang-nhom td:nth-child(3) { width: 52px; }   /* số thành viên */
  #bang-nhom th:nth-child(4), #bang-nhom td:nth-child(4) { width: 72px; }   /* tình trạng */
  #bang-nhom th:nth-child(5), #bang-nhom td:nth-child(5) { width: 74px; }   /* lượt đăng vừa rồi */
  #bang-nhom th:nth-child(6), #bang-nhom td:nth-child(6) { width: 46px; }   /* nút Rời */
  /* Tên nhóm được xuống hai dòng rồi mới cắt — dễ đọc hơn cắt ngay ở dòng đầu. */
  #bang-nhom td:nth-child(2) { white-space: normal; }
  #bang-nhom .gname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #bang-nhom .ma-nhom { white-space: nowrap; }
}

/* Tên nhóm giờ là liên kết mở nhóm. Giữ nguyên dáng chữ thường (không xanh, không gạch chân)
   để bảng không rối; gạch chân khi rê chuột để người dùng biết bấm được. */
a.gname { color: inherit; text-decoration: none; }
a.gname:hover { text-decoration: underline; color: var(--accent-ink); }