/* ΣFORUM — hệ thị giác. Bảng màu lấy từ logo Cachep Studio: cam #D2802F, nâu đỏ #9C3A26.
   Ba trạng thái nền: sáng mặc định · tối theo hệ · tối do người dùng chọn.
   © 2026 HUA VAN ANH KHOA. */

:root{
  --o:#C9762A; --o2:#E0913C; --rust:#9C3A26; --rust2:#B84A30;
  --bg:#FBF6EF; --bg2:#FFFFFF; --line:#E8DDCD; --ink:#2A1D17; --dim:#6E5B4C;
  --ok:#2E7D5B; --warn:#B8722A; --bad:#A33A2A;
  --r:12px; --r2:8px; --w:1180px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#17110D; --bg2:#1F1712; --line:#33261D; --ink:#F2E7DA; --dim:#A38975;
  --o:#E0913C; --o2:#EFA24E; --rust2:#C9563A;
}}
:root[data-theme="dark"]{
  --bg:#17110D; --bg2:#1F1712; --line:#33261D; --ink:#F2E7DA; --dim:#A38975;
  --o:#E0913C; --o2:#EFA24E; --rust2:#C9563A;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--o);text-decoration:none}
a:hover{text-decoration:underline}
code{font:13px/1.5 var(--mono);background:color-mix(in srgb,var(--o) 12%,transparent);
  padding:.12em .4em;border-radius:5px}
pre{overflow-x:auto}
.wrap{max-width:var(--w);margin:0 auto;padding:0 18px}
.sr,.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--o);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.small{font-size:13px;color:var(--dim)}

/* ── thanh trên ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.bn{display:flex;flex-direction:column;line-height:1.1}
.bn b{font-size:18px;letter-spacing:.5px}
.bn i{font-style:normal;font-size:11px;color:var(--dim)}
.search{flex:1;max-width:420px}
.search input{width:100%;padding:9px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg2);color:var(--ink);font:14px var(--sans)}
.search input:focus{outline:2px solid var(--o);outline-offset:1px}
.nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:13px var(--sans);cursor:pointer}
.pill:hover{border-color:var(--o);text-decoration:none}
.pill.icon{padding:7px 9px}
.pill.on{background:var(--o);color:#fff;border-color:var(--o)}
.badge{background:var(--rust);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-left:4px}

/* ── bố cục ─────────────────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:250px 1fr;gap:22px;padding-top:20px;padding-bottom:40px;
  align-items:start;min-height:70vh}
@media (max-width:900px){ .cols{grid-template-columns:1fr} .side{order:2} }
.side{position:sticky;top:80px}
@media (max-width:900px){ .side{position:static} }

.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* ── danh sách ô ────────────────────────────────────────────────────────── */
.cell{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r2);color:var(--ink)}
.cell:hover{background:color-mix(in srgb,var(--o) 10%,transparent);text-decoration:none}
.cell.on{background:color-mix(in srgb,var(--o) 16%,transparent);font-weight:600}
.cell .n{margin-left:auto;font:11px var(--mono);color:var(--dim)}
.cell .dot{width:9px;height:9px;border-radius:3px;flex:none}

/* ── luồng ──────────────────────────────────────────────────────────────── */
.thread{display:flex;gap:12px;padding:15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg2);margin-bottom:11px;transition:border-color .15s}
.thread:hover{border-color:var(--o)}
.thread h2{margin:0 0 5px;font-size:17px;line-height:1.35}
.thread h2 a{color:var(--ink)}
.meta{font-size:12.5px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tag{font:11px var(--mono);padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--rust) 14%,transparent);color:var(--rust2)}
.sigil{border-radius:10px;background:color-mix(in srgb,var(--o) 8%,transparent);flex:none}

/* ── bài viết ───────────────────────────────────────────────────────────── */
.post{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:16px;margin-bottom:12px}
.post .body{margin-top:10px;overflow-wrap:anywhere}
.post .body p{margin:0 0 .8em}
.post .body p:last-child{margin:0}
.rn{display:inline-block;vertical-align:-4px;margin:0 1px}
.mention{font:13px var(--mono)}
.acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--ink);font:13px var(--sans);cursor:pointer}
.btn:hover{border-color:var(--o)}
.btn.p{background:var(--o);color:#fff;border-color:var(--o);font-weight:600}
.btn.p:hover{background:var(--o2)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── soạn thảo + bảng rune ──────────────────────────────────────────────── */
textarea,input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r2);
  background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);resize:vertical}
textarea:focus,input[type=text]:focus{outline:2px solid var(--o);outline-offset:1px}
.runebar{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0;max-height:120px;overflow-y:auto;
  padding:8px;border:1px dashed var(--line);border-radius:var(--r2)}
.runebar button{border:none;background:transparent;cursor:pointer;padding:3px;border-radius:6px;line-height:0}
.runebar button:hover{background:color-mix(in srgb,var(--o) 18%,transparent)}

/* ── xác minh gốc luồng ─────────────────────────────────────────────────── */
.verify{display:flex;align-items:center;gap:8px;font:12px var(--mono);padding:9px 12px;border-radius:var(--r2);
  background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);margin-bottom:14px;flex-wrap:wrap}
.verify.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}

/* ── bảng số ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:13px}
.bar{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--o),var(--rust2))}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi .k{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi .k b{display:block;font:22px/1.2 var(--mono);color:var(--o)}
.kpi .k span{font-size:12px;color:var(--dim)}

.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--o) 14%,transparent),
  color-mix(in srgb,var(--rust) 12%,transparent));border:1px solid var(--line);
  border-radius:var(--r);padding:22px;margin-bottom:18px}
.hero h1{margin:0 0 8px;font-size:26px;line-height:1.25}
.hero p{margin:0 0 12px;color:var(--dim);max-width:62ch}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;z-index:90;
  transition:.22s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.load{padding:40px;text-align:center;color:var(--dim)}
.foot{border-top:1px solid var(--line);padding:22px 0;color:var(--dim);font-size:14px;margin-top:20px}
.foot p{margin:0 0 6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── công cụ rune: bảng chọn + xem trước trực tiếp ─────────────────────── */
.rtool{border:1px solid var(--line);border-radius:var(--r2);margin:10px 0;overflow:hidden}
.rhead{display:flex;align-items:center;gap:8px;padding:8px 11px;background:color-mix(in srgb,var(--o) 8%,transparent);
  border-bottom:1px solid var(--line);font-size:13px}
.rtool .runebar{border:none;margin:0;border-radius:0;max-height:none}
.rprev{display:none;padding:11px;border-top:1px dashed var(--line);background:var(--bg)}
.rprev.on{display:block}
.rprev .small{display:block;margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.rprev img.rn{display:inline-block;vertical-align:-4px;margin:0 1px}

/* VMC-LIVE — nhãn tầng chắc chắn */
.pend{color:var(--warn);font-style:italic}
@keyframes pulse{0%,100%{opacity:.62}50%{opacity:.9}}
.thread[style*="opacity"],.post[style*="opacity"],.msg[style*="opacity"]{animation:pulse 1.6s ease-in-out infinite}