/* PinCoup — no-build CSS. Không Tailwind, không bundler: sửa file là thấy ngay.
   Lưới do JS đặt vị trí tuyệt đối (xem js/feed.js), CSS ở đây chỉ lo hình thức từng ô. */

:root {
  --ink: #1b1230;
  --muted: #6b6580;
  --line: #e8e5ef;
  --bg: #fff;
  --accent: #5b3df5;      /* tím LAT, dùng chung mọi dự án lat.vn */
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Chốt chặn: không thành phần nào được rộng hơn màn hình. Gộp ở đây thay vì khai body lần
     hai ở cuối file - khai trùng selector chính là thứ đã làm sập lưới lần trước. */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.top {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  /* Dính trên cùng: ở lưới dài vô tận, mất ô search khi cuộn là mất đường đi chính. */
  position: sticky; top: 0; z-index: 60; background: var(--bg);
}
/* Điều hướng đẩy sang phải, và CUỘN NGANG khi chật thay vì bị ẩn đi.
   Bản trước ẩn hẳn .tlink dưới 640px, tức là trên điện thoại người dùng mất sạch điều hướng,
   kể cả nút Đăng nhập. */
/* KHÔNG dùng overflow-x: auto ở đây. CSS ép overflow-y thành non-visible theo, nên nút bo tròn
   và menu thả xuống đều bị cắt. Thanh này giờ chỉ còn 3 phần tử nên không cần cuộn nữa. */
/* Ba phần cùng MỘT hàng: logo | search | tài khoản. Thứ tự đã đúng trong HTML nên KHÔNG dùng
   order ở đây (order đổi thứ tự nhìn thấy mà không đổi thứ tự tab bàn phím). Logo và nhóm tài
   khoản không co; search nuốt hết chỗ trống ở giữa. */
/* Gộp mọi thuộc tính của .brand vào MỘT chỗ. Trước đó nằm rải ba nơi trong file - đúng kiểu
   rải rác đã gây ra lỗi sập lưới (.tile khai hai lần, luật sau đè luật trước). */
.brand {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--accent);
}
.tnav { display: flex; align-items: center; gap: 14px; flex: none; }
.tnav > * { flex: none; }

/* --- Nút tài khoản + menu thả xuống --- */
.acct { position: relative; }
.abtn {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--accent); color: #fff; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.abtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abtn-letter { font-weight: 800; font-size: 16px; }
.abtn:hover { filter: brightness(1.08); }
/* Chấm báo có thông báo mới, đặt ngoài vùng overflow:hidden của ảnh nên không bị cắt. */
.adot {
  position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: #e0483c; border: 2px solid #fff;
}
.amenu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 10px 34px rgba(28, 24, 64, .16);
}
.amenu[hidden] { display: none; }
.amenu a, .amenu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px;
  font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.amenu a:hover, .amenu button:hover { background: #f3f1f8; }
.amenu .ahead { border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; margin-bottom: 4px; padding-bottom: 10px; }
.amenu .ahead b { display: block; }
.amenu .ahead span { color: var(--muted); font-size: 13px; }
.tag { margin: 0; color: var(--muted); font-size: 13px; }

main { padding: 22px 20px 40px; }
.h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em; }
.intro { margin: 0 0 14px; color: var(--muted); }
.empty, .status { color: var(--muted); text-align: center; padding: 30px 0; }

/* --- Lưới masonry --- */
.grid { position: relative; margin-top: 16px; }

.tile { position: absolute; top: 0; left: 0; }

.shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: #f3f1f8; border: 1px solid var(--line);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile:hover .shot { box-shadow: 0 8px 26px rgba(28, 24, 64, .16); }

.play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.dur, .off {
  position: absolute; font-size: 12px; padding: 2px 8px; border-radius: 20px;
  background: rgba(0, 0, 0, .68); color: #fff;
}
.dur { right: 8px; bottom: 8px; }
.off { left: 8px; top: 8px; background: var(--accent); font-weight: 700; }
.off.inline { position: static; display: inline-block; }

.meta { padding: 8px 2px 0; }
.ttl { margin: 0; font-size: 13px; line-height: 1.35; }
.price { margin: 4px 0 0; font-size: 14px; }
.price b { font-weight: 700; }
.price s { color: var(--muted); font-weight: 400; margin-left: 6px; }
.store { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.store:hover { color: var(--accent); }

/* --- Trang chi tiết --- */
.detail { max-width: 1010px; margin: 0 auto; }
.back { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.back:hover { color: var(--accent); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb .sep { opacity: .55; }
.crumb span[aria-current] { color: var(--ink); }
.vmeta { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.dlrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.dlbtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.dlbtn::before { content: "\2193"; font-weight: 700; }
.dlbtn:hover { border-color: var(--accent); color: var(--accent); }
.alt-cta { margin: 2px 0 0; font-size: 13px; }
.alt-cta a { color: var(--muted); text-decoration: underline; }
.alt-cta a:hover { color: var(--accent); }
/* Khối "More like this": tách khỏi thẻ pin bằng khoảng trống rộng và một đường kẻ mảnh. */
.more { max-width: 1010px; margin: 44px auto 0; border-top: 1px solid var(--line); padding-top: 26px; }
.more h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
/* --- Bình luận --- */
.cmts { max-width: 720px; margin: 44px auto 0; border-top: 1px solid var(--line); padding-top: 26px; }
.cmts h2 { margin: 0 0 14px; font-size: 19px; letter-spacing: -.01em; }
.cform textarea {
  width: 100%; padding: 12px 16px; font: inherit; color: var(--ink);
  background: #f5f3fa; border: 1px solid var(--line); border-radius: 14px; resize: vertical;
  overflow: hidden;   /* cao dần theo nội dung, JS lo phần chiều cao */
}
.cform textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.cbtn {
  margin-top: 8px; padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700;
}
.cbtn:hover { filter: brightness(1.08); }
.cerr { color: #a12a2a; font-size: 14px; margin: 8px 0 0; }
/* Tên có tiền tố cm- vì .cnote và .cwhen ĐÃ có nghĩa khác: khối danh sách mã coupon
   ở trang pin dùng chúng. Đặt trùng là hai tính năng đè nhau. */
.cm-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.cm-note a { color: var(--accent); }
/* Ô nhập: avatar bên trái, ô chữ cao dần theo nội dung */
.crow { display: flex; gap: 10px; align-items: flex-start; }
.cgrow { flex: 1; min-width: 0; }
.cfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.cfoot .counter { margin: 0; text-align: left; }
.creplying {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  padding: 7px 14px; border-radius: 999px; background: #f3f1f8; font-size: 13px; color: var(--muted);
}
/* BẮT BUỘC: thuộc tính hidden chỉ đặt display:none ở mức trình duyệt, mà luật display:flex
   viết tay ở trên đè mất nó. Thiếu dòng này thì thanh "Replying to" hiện thường trực với tên
   trống. Cùng loại lỗi với .amenu[hidden] đã gặp ở menu tài khoản. */
.creplying[hidden] { display: none; }
.creplying b { color: var(--ink); }
.avatar.sm.guest { background: #e8e5ef; color: var(--muted); }

.clist2 { margin: 26px 0 0; }
.cm { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cwho { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.cwho:hover b { color: var(--accent); }
.cm-when { color: var(--muted); font-size: 12px; font-weight: 400; }
.cbody { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmeta { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cmeta:empty { display: none; }
/* Trả lời thụt vào MỘT tầng và chỉ một tầng, có vạch dọc để mắt bám được mạch. */
.creplies { margin-left: 22px; padding-left: 18px; border-left: 2px solid var(--line); }
.creplies .cm:last-child { border-bottom: 0; padding-bottom: 4px; }

/* Ghi chú riêng khi lưu: gập lại, bấm mới mở */
.savenote-wrap { margin-top: 12px; }
.savenote-wrap summary {
  cursor: pointer; font-size: 13px; color: var(--muted); list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.savenote-wrap summary::before { content: "+"; font-weight: 700; }
.savenote-wrap[open] summary::before { content: "\2212"; }
.savenote-wrap summary:hover { color: var(--accent); }
.savenote-wrap::-webkit-details-marker, .savenote-wrap summary::-webkit-details-marker { display: none; }

.clist { list-style: none; padding: 0; margin: 14px 0 0; max-width: 720px; }
.clist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.clist a { flex: 1 1 240px; }
.clist a:hover { color: var(--accent); }
.cwhen { font-size: 12px; color: var(--muted); }
.cnote { margin: 14px 0 0; font-size: 14px; }
.cnote a { color: var(--accent); }
.card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; border-radius: 30px; overflow: hidden;
  box-shadow: 0 3px 30px rgba(28, 24, 64, .15);
}
.card-media { background: #f3f1f8; display: flex; align-items: center; justify-content: center; }
/* contain chứ không cover: ảnh coupon là bảng mã, cắt mất một cột là mất thông tin. */
.card-media img, .card-media video {
  display: block; width: 100%; max-height: 660px; object-fit: contain;
}
.card-body { padding: 30px 32px 34px; }
.card-body h1 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; }
.price.big { font-size: 24px; }
.by { color: var(--muted); }
.by a { color: var(--accent); }
.cta {
  display: inline-block; margin: 14px 0; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700;
}
.cta:hover { filter: brightness(1.08); }
.desc { margin-top: 14px; color: var(--muted); font-size: 14px; }

@media (max-width: 720px) {
  .card { grid-template-columns: 1fr; border-radius: 22px; }
  .card-body { padding: 20px 18px 26px; }
  .card-media img, .card-media video { max-height: 460px; }
}

.foot {
  border-top: 1px solid var(--line); padding: 22px 20px 40px;
  color: var(--muted); font-size: 13px;
}
.foot p { margin: 0 0 6px; }
.disc { font-size: 12px; }

/* --- Trang chữ (about / legal) --- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.01em; }
.prose h2 { font-size: 17px; margin: 26px 0 8px; }
.prose p, .prose li { color: #3a3350; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose code { background: #f3f1f8; padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.meta-note { color: var(--muted); font-size: 13px; }

.fnav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.fnav a { color: var(--ink); }
.fnav a:hover { color: var(--accent); }

/* --- Header: thương hiệu + ô search --- */
.brand img { display: block; border-radius: 7px; }
.tlink { color: var(--muted); font-size: 14px; }
.tlink:hover { color: var(--accent); }

/* Trọn chiều ngang, không giới hạn. */
.search { display: flex; flex: 1 1 auto; min-width: 0; }
.search input {
  flex: 1; min-width: 0; padding: 9px 15px; font: inherit;
  border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px;
  background: #f5f3fa; color: inherit;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.search button {
  padding: 9px 20px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 0 999px 999px 0;
}
.search button:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  /* Vẫn MỘT hàng, chỉ thu nhỏ lại. Ẩn chữ PinCoup, giữ logo, để search đủ chỗ thở. */
  .top { padding: 10px 12px; gap: 10px; }
  .tag { display: none; }
  .brand span { display: none; }
  .tnav { gap: 8px; }
  .tlink { font-size: 13px; }
  .amenu { position: fixed; left: 10px; right: 10px; top: 58px; min-width: 0; }
  .search input { padding: 9px 12px; font-size: 15px; }
  .search button { padding: 9px 12px; font-size: 13px; }
  main { padding: 16px 12px 40px; }
  .foot { padding: 18px 12px 36px; }
}

/* Dưới 420px: nút Search rút còn kính lúp, Boards/People nhường chỗ (vẫn vào được từ chân trang). */
@media (max-width: 420px) {
  .search button { font-size: 0; padding: 9px 14px; }
  .search button::after { content: "\1F50D"; font-size: 15px; }
  .tnav .tlink:not(.cta-sm) { display: none; }
}

.empty a { color: var(--accent); text-decoration: underline; }

/* --- Trang lỗi --- */
.oops { max-width: 560px; margin: 60px auto; text-align: center; }
.oops h1 { font-size: 26px; margin: 0 0 10px; letter-spacing: -.01em; }
.oops p { color: var(--muted); margin: 0 0 18px; }
.olinks .cta { margin: 0; }
.omore { font-size: 14px; }
.omore a { color: var(--accent); }

/* --- Đoạn mô tả do AI viết trên trang store/category --- */
.lede { max-width: 720px; margin: 10px 0 4px; color: #3a3350; font-size: 15px; line-height: 1.65; }
.lede br + br { content: ""; display: block; margin-top: 10px; }

/* --- Dấu thời gian: lần cuối kiểm tra / hạn dùng --- */
.stamps { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stamp {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: #f3f1f8; color: var(--muted); border: 1px solid var(--line);
}
.stamp.live { background: #eaf7ef; color: #1c6b3c; border-color: #c9e8d5; }
.stamp.dead { background: #fdecec; color: #a12a2a; border-color: #f0cccc; }
.warn { margin: 10px 0 0; font-size: 13px; color: #a12a2a; }
.soon {
  position: absolute; right: 8px; top: 8px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,.94); color: #a12a2a;
}
.soon.pending { left: 8px; right: auto; color: #7a5a00; background: rgba(255,244,214,.96); }

/* --- Cộng đồng: đăng nhập, hồ sơ, board, nút save --- */
.auth { max-width: 380px; margin: 50px auto; }
.auth h1 { font-size: 22px; margin: 0 0 6px; }
.auth .sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.auth .alt { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* Nút Google + đường kẻ "or" */
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.gbtn:hover { background: #f5f3fa; color: var(--ink); }
.orline { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* :not(.follow) là bắt buộc: luật này đặc hiệu hơn .follow nên nếu để trần, nút Follow
   dạng thẻ <a> (khách chưa đăng nhập) bị đổi chữ sang tím, nằm trên nền tím -> mất chữ. */
.auth .alt a, .phead a:not(.follow) { color: var(--accent); }
/* Bẫy bot: phải ở ngoài màn hình chứ không display:none, vì bot bỏ qua phần tử bị ẩn hẳn. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tlink.plain { background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); }
/* .linkish trước đó CHỈ có trong admin.css, mà trang công khai không nạp file đó, nên nút
   Reply/Report/Delete dưới bình luận hiện ra thành nút xám mặc định của trình duyệt. */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--muted);
}
.linkish:hover { color: var(--accent); }
.tlink.cta-sm { background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 999px; }
.tlink.cta-sm:hover { filter: brightness(1.08); color: #fff; }
form.inline { display: inline; }

.phead { text-align: center; margin: 10px 0 30px; }
.phead .avatar { margin-left: auto; margin-right: auto; }
.phead h1 { margin: 0 0 3px; font-size: 33px; font-weight: 800; letter-spacing: -.02em; }
.phead .sub { margin: 0; color: var(--muted); }
.pbio { color: #3a3350; max-width: 520px; margin: 12px auto 0; }
.plinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.plinks a {
  font-size: 13px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); background: #fff;
}
.plinks a:hover { border-color: var(--accent); color: var(--accent); }
.pwhere { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.pstats { display: flex; justify-content: center; gap: 22px; margin: 12px 0 16px; color: var(--muted); font-size: 14px; }
.pstats b { color: var(--ink); }

.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; margin-top: 18px; }
.bcard { display: block; }
/* Bìa ghép: 1 ảnh lớn bên trái + tối đa 2 ảnh nhỏ xếp chồng bên phải, đúng lối Pinterest.
   Một ảnh thì phủ kín cả khung. Thiếu ảnh thì ô trống để lộ nền, không cần luật riêng. */
.bshot {
  display: grid; aspect-ratio: 3/2; border-radius: 16px; overflow: hidden;
  background: #f3f1f8; margin-bottom: 9px; gap: 2px; position: relative;
}
.bshot.multi { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.bshot.multi img:first-child { grid-row: span 2; }
.bshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bempty { align-self: center; text-align: center; color: var(--muted); font-size: 13px; }
.bcard:hover .bshot::after {
  content: ""; position: absolute; inset: 0; background: rgba(27, 18, 48, .14);
}
.bcard b { display: block; font-size: 15px; }
.bmeta { font-size: 12px; color: var(--muted); }

.saverow { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.save {
  display: inline-block; padding: 10px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: #1b1230; color: #fff; font: inherit; font-weight: 700;
}
.save:hover { filter: brightness(1.25); color: #fff; }
.save.done { background: #eaf7ef; color: #1c6b3c; }
.savecount { font-size: 13px; color: var(--muted); }

/* Nút save trên ô lưới: chỉ hiện khi rê chuột, để lưới không bị nút phủ kín */
.tsave {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: #1b1230; color: #fff; font: inherit; font-size: 12px; font-weight: 700;
  opacity: 0; transition: opacity .12s;
}
.tile:hover .tsave, .tsave:focus, .tsave.done { opacity: 1; }
.tsave.done { background: #eaf7ef; color: #1c6b3c; }
/* KHÔNG đặt .tile { position: relative } ở đây: masonry đã đặt .tile { position: absolute }
   phía trên, và luật viết sau sẽ ĐÈ MẤT nó, làm sập toàn bộ lưới. Phần tử absolute vốn đã là
   containing block cho .tsave rồi, không cần thêm gì. */

.auth.wide { max-width: 520px; }
.ssep { border: 0; border-top: 1px solid var(--line); margin: 34px 0 24px; }

/* --- Phân trang --- */
.pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 30px 0 6px; }
.pg-btn, .pg-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.pg-num { padding: 0; }
.pg-btn:hover, .pg-num:hover { border-color: var(--accent); color: var(--accent); }
/* Tên là .pg-dead chứ KHÔNG phải .off: trong dự án này .off đã có nghĩa "nhãn phần trăm giảm
   giá" và nó là position:absolute; left:8px; top:8px. Đặt trùng tên thì nút Previous thừa
   hưởng luôn position:absolute và bay ra khỏi hàng - đã dính thật, ảnh chụp mới thấy. */
.pg-btn.pg-dead { color: var(--muted); background: #f5f3fa; border-color: var(--line); cursor: default; }
.pg-btn.pg-dead:hover { color: var(--muted); border-color: var(--line); }
.pg-num.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-num.on:hover { color: #fff; border-color: var(--accent); }
.pg-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-gap { color: var(--muted); padding: 0 2px; }
/* Điện thoại: giấu số trang, giữ Previous/Next vì đó mới là thứ ngón tay bấm được. */
@media (max-width: 560px) { .pg-nums { display: none; } }
.danger { margin: 18px 0 0; }
.linkdanger { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: #a12a2a; text-decoration: underline; }
.linkdanger:hover { color: #7a1f1f; }
.sh2 { font-size: 18px; margin: 0 0 14px; letter-spacing: -.01em; }
.dnote { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.viewme { margin: 0 0 20px; font-size: 14px; }
.viewme a { color: var(--accent); font-weight: 600; }
.viewme .hint { display: block; margin-top: 2px; }
.counter { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
.counter.near { color: #a12a2a; }
.frow { display: flex; flex-wrap: wrap; gap: 12px; }
.frow label { flex: 1 1 140px; }
.danger-btn { background: #a12a2a; }
.danger-btn:hover { filter: brightness(1.12); }
.okmsg { background: #eaf7ef; color: #1c6b3c; padding: 9px 14px; border-radius: 10px; font-size: 14px; }
/* Thông báo sau thao tác, dùng chung mọi trang công khai. */
.flash {
  margin: 0; padding: 12px 20px; background: #eaf7ef; color: #1c6b3c;
  font-size: 14px; border-bottom: 1px solid #c9e8d5;
}
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); display: block; margin-bottom: 10px; }
.avatar.big { width: 118px; height: 118px; font-size: 42px; margin-bottom: 14px; }

/* Khám phá người dùng + nút theo dõi */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; margin-top: 18px; }
.pcard { display: block; text-align: center; }
.pcard .avatar { margin: 0 auto 8px; width: 66px; height: 66px; }
.avatar.blank {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 24px;
}
.pcard b { display: block; font-size: 14px; }
.pcard .bmeta { display: block; }

.follow {
  display: inline-block; margin-top: 8px; padding: 9px 22px; border-radius: 999px; border: 0;
  cursor: pointer; background: var(--accent); color: #fff; font: inherit; font-weight: 700;
}
.follow:hover { filter: brightness(1.08); color: #fff; }
.follow.done { background: #f3f1f8; color: var(--ink); }
.follow.ghost { background: #f3f1f8; color: var(--ink); }
.follow.ghost:hover { background: #e8e5ef; color: var(--ink); }

/* --- Biểu mẫu: đăng ký, đăng nhập, cài đặt, ô lọc --- */
.auth form label { display: block; margin-bottom: 15px; font-size: 14px; font-weight: 600; }
.auth .hint { display: block; margin: 3px 0 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.auth input, .auth textarea, .auth select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 16px;
  font: inherit; font-weight: 400; color: var(--ink);
  background: #f5f3fa; border: 1px solid var(--line); border-radius: 14px;
}
.auth input:focus, .auth textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.auth input[type="checkbox"] { width: auto; display: inline-block; }
/* Ô chọn ảnh: viền đứt cho ra dáng vùng thả ảnh, nút bấm bo tròn theo màu thương hiệu
   thay vì nút xám mặc định của trình duyệt. */
.auth input[type="file"] { padding: 10px 12px; border-style: dashed; }
.auth input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.auth input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }
.auth .cta { width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.err {
  list-style: none; margin: 0 0 15px; padding: 11px 15px; font-size: 14px;
  background: #fdecec; color: #a12a2a; border-radius: 12px;
}
.err li + li { margin-top: 4px; }

.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; }
.filter.center { justify-content: center; }
.filter input[type="text"], .filter input[type="search"] {
  flex: 0 1 260px; min-width: 0; padding: 11px 18px; font: inherit; color: var(--ink);
  background: #f5f3fa; border: 1px solid var(--line); border-radius: 999px;
}
.filter input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.filter button {
  padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--accent); color: #fff;
}
.filter button:hover { filter: brightness(1.08); }
.filter .row { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.filter .row input { margin: 0; }

/* Thông báo */
.notes { list-style: none; padding: 0; margin: 14px 0 0; }
.notes li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.notes li.fresh { background: #f7f5ff; border-radius: 10px; }
.notes a { color: var(--accent); }
.avatar.sm { width: 38px; height: 38px; font-size: 15px; margin: 0; flex: none; }

.savepick { width: auto; margin: 0; padding: 8px 12px; border-radius: 999px; }
.savenote { margin-top: 8px; width: 100%; border-radius: 14px; }
.pnote { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* Bảng admin có nhiều cột: cho cuộn ngang trong khung của nó thay vì đẩy cả trang tràn ngang. */
.atab { display: block; overflow-x: auto; white-space: nowrap; }
.atab td, .atab th { white-space: normal; }
img, video, table, pre { max-width: 100%; }