/* Nhật ký bình luận (#/nhat-ky-binh-luan) — quiet, editorial list.
   Markup: homeLower() in app.js. One line of numbers under the title,
   underlined text tabs, story names as plain text chips, day labels, and
   comments as light cards: name · tier · time, the story as a small text
   link, the quoted line in a book serif, the comment, muted actions.
   Every rule is "#clScope #tin-hieu"-prefixed so it beats the shared
   "#tin-hieu …" rules in signal-pulse-v1.css / signal-feed-window.css. */
#clScope{
  --cl-ink:#eef2f8; --cl-muted:#8e9ab0; --cl-faint:#5d687c; --cl-accent:#26c2dc; --cl-hot:#e9a93a; --cl-heart:#ff6b93;
  --cl-line:rgba(255,255,255,.09); --cl-card:rgba(255,255,255,.035); --cl-bg:#070b14;
}
#clScope[data-theme="light"]{
  --cl-ink:#221d16; --cl-muted:#6b655c; --cl-faint:#a39b8f; --cl-accent:#0f90a8; --cl-hot:#b9771a; --cl-heart:#d9406a;
  --cl-line:rgba(34,29,22,.1); --cl-card:#fffdf9; --cl-bg:#f7f4ee;
}
#clScope #tin-hieu.sig-wrap{padding:0 1rem 2.6rem}
#clScope #tin-hieu .sig-board{display:grid;gap:1.2rem;padding:0;color:var(--cl-ink);font-size:.9rem}

/* numbers: one muted line */
#clScope #tin-hieu .cl-pulse{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:-.6rem 0 0;color:var(--cl-muted);font-size:.84rem}
#clScope #tin-hieu .cl-pulse i{width:7px;height:7px;margin-right:.3rem;border-radius:50%;background:var(--cl-accent);animation:clBlink 2.4s ease-in-out infinite}
@keyframes clBlink{50%{opacity:.35}}
#clScope #tin-hieu .cl-pulse b{color:var(--cl-ink);font-weight:700;font-variant-numeric:tabular-nums}
#clScope #tin-hieu .cl-pulse span{color:var(--cl-faint)}

/* tools: text tabs with an underline, story names as light chips */
#clScope #tin-hieu .cl-tools{display:grid;gap:.9rem;min-width:0}
#clScope #tin-hieu .cl-sort{display:flex;gap:1.1rem;margin:0;padding:0;border:0;border-bottom:1px solid var(--cl-line);border-radius:0;background:none;overflow-x:auto;scrollbar-width:none}
#clScope #tin-hieu .cl-sort::-webkit-scrollbar{display:none}
#clScope #tin-hieu .cl-sort .sig-tab{position:relative;min-height:0;padding:.45rem 0 .6rem;border:0;border-radius:0;background:none;color:var(--cl-muted);
  font:600 .85rem/1.3 "Plus Jakarta Sans",system-ui,sans-serif;white-space:nowrap;cursor:pointer;flex:0 0 auto}
#clScope #tin-hieu .cl-sort .sig-tab.on{color:var(--cl-ink);background:none;box-shadow:none}
#clScope #tin-hieu .cl-sort .sig-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--cl-ink)}
#clScope #tin-hieu .cl-stories{display:flex;gap:.45rem;overflow-x:auto;padding:0 0 .2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#clScope #tin-hieu .cl-stories::-webkit-scrollbar{display:none}
#clScope #tin-hieu .cl-story{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border:1px solid var(--cl-line);border-radius:999px;
  background:none;color:var(--cl-muted);font:600 .8rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
#clScope #tin-hieu .cl-story em{font-style:normal;color:var(--cl-faint);font-variant-numeric:tabular-nums}
#clScope #tin-hieu .cl-story.on{border-color:var(--cl-ink);background:var(--cl-ink);color:var(--cl-bg)}
#clScope #tin-hieu .cl-story.on em{color:var(--cl-bg);opacity:.6}

/* list + day labels */
#clScope #tin-hieu .sig-list{gap:.9rem;padding:0}
#clScope #tin-hieu .cl-day{margin:.5rem 0 -.2rem;color:var(--cl-muted);font:700 .7rem/1.6 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
#clScope #tin-hieu .cl-day:first-child{margin-top:0}
#clScope #tin-hieu .cl-day:has(+ .sig-card.is-hidden){display:none}

/* comment card */
#clScope #tin-hieu .sig-card{box-shadow:none!important;grid-template-columns:2.4rem minmax(0,1fr);gap:.7rem}
#clScope #tin-hieu .sig-card > .sig-ava{width:2.4rem;height:2.4rem;margin-top:.15rem;border:0;box-shadow:none}
#clScope #tin-hieu .cl-tier--silver > .sig-ava{box-shadow:0 0 0 2px var(--cl-bg),0 0 0 3.5px #b8c2cc}
#clScope #tin-hieu .cl-tier--gold > .sig-ava{box-shadow:0 0 0 2px var(--cl-bg),0 0 0 3.5px #d9ac45}
#clScope #tin-hieu .cl-tier--premium > .sig-ava{box-shadow:0 0 0 2px var(--cl-bg),0 0 0 3.5px #5fcfe0}
#clScope #tin-hieu .cl-tier--vip > .sig-ava{box-shadow:0 0 0 2px var(--cl-bg),0 0 0 3.5px #a58bff}
#clScope #tin-hieu .cl-tier--luxury > .sig-ava{box-shadow:0 0 0 2px var(--cl-bg),0 0 0 3.5px #c9a24a}
#clScope #tin-hieu .sig-main{display:grid;gap:.55rem;padding:.85rem 1rem .6rem;border-radius:16px;border:1px solid var(--cl-line);background:var(--cl-card);box-shadow:none}
#clScope #tin-hieu .sig-card.is-highlight .sig-main{border-color:var(--cl-accent)}
#clScope #tin-hieu .sig-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin:0}
#clScope #tin-hieu .sig-meta b{color:var(--cl-ink);font:700 .9rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
#clScope #tin-hieu .sig-meta time{color:var(--cl-muted);font-size:.74rem}
/* tier and "nổi bật": small coloured words, no boxes */
#clScope #tin-hieu .cl-tierchip{font:700 .62rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cl-muted)}
#clScope #tin-hieu .cl-tierchip--silver{color:#8e9aa6}
#clScope #tin-hieu .cl-tierchip--gold{color:#b88a22}
#clScope #tin-hieu .cl-tierchip--premium{color:#1aa3b8}
#clScope #tin-hieu .cl-tierchip--vip{color:#8a6cf0}
#clScope #tin-hieu .cl-tierchip--luxury{color:#b8892e}
#clScope #tin-hieu .cl-hot{color:var(--cl-hot);font-size:.74rem;font-weight:700}
#clScope #tin-hieu .cl-hot::before{content:"·";margin-right:.45rem;color:var(--cl-faint);font-weight:400}
/* story: a small text link */
#clScope #tin-hieu .cl-tag{justify-self:start;max-width:100%;color:var(--cl-accent);font:700 .78rem/1.3 "Plus Jakarta Sans",system-ui,sans-serif;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#clScope #tin-hieu .cl-tag span{color:var(--cl-muted);font-weight:600}
#clScope #tin-hieu .cl-tag span::before{content:"·";margin:0 .4rem;color:var(--cl-faint)}
#clScope #tin-hieu .cl-tag:hover{text-decoration:underline;text-underline-offset:3px}
/* quoted line from the chapter */
#clScope #tin-hieu .cl-quote{margin:0;padding:.1rem 0 .1rem .85rem;border-left:2px solid var(--cl-line);background:none;border-radius:0}
#clScope #tin-hieu .cl-quote p{margin:0;color:var(--cl-muted);font:italic 500 1.06rem/1.5 "Cormorant Garamond",Georgia,serif}
#clScope #tin-hieu .cl-quote.is-long:not(.is-open) p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#clScope #tin-hieu .cl-quote-more{margin-top:.3rem;padding:0;border:0;background:none;color:var(--cl-muted);font:600 .74rem/1 "Plus Jakarta Sans",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#clScope #tin-hieu .sig-main > .sig-text{margin:0;color:var(--cl-ink);font-size:.95rem;line-height:1.6}
/* actions: muted words with thin icons */
#clScope #tin-hieu .sig-acts{gap:.2rem 1.1rem;padding:0;border:0}
#clScope #tin-hieu .sig-chip,#clScope #tin-hieu .sig-act{gap:.35rem;min-height:2rem;color:var(--cl-muted);font:600 .76rem/1 "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer}
#clScope #tin-hieu .sig-chip::before,#clScope #tin-hieu .sig-act::before{content:"";width:.95rem;height:.95rem;background:currentColor;font-size:0;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#clScope #tin-hieu .sig-chip{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E")}
#clScope #tin-hieu .sig-chip.on{color:var(--cl-heart)}
#clScope #tin-hieu .sig-chip.on::before{color:var(--cl-heart);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E")}
#clScope #tin-hieu [data-reply]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
#clScope #tin-hieu [data-quote]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 17h4l2-4V7H5v6h3zM13 17h4l2-4V7h-6v6h3z'/%3E%3C/svg%3E")}
#clScope #tin-hieu [data-report-comment]{margin-left:auto;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h11l-2 4 2 4H5'/%3E%3C/svg%3E")}
#clScope #tin-hieu .sig-act em{font-style:normal;color:var(--cl-ink);font-variant-numeric:tabular-nums}
#clScope #tin-hieu .sig-chip:hover,#clScope #tin-hieu .sig-act:hover{color:var(--cl-ink)}
/* replies */
#clScope #tin-hieu .sig-reply{margin-top:0;padding:.65rem .7rem;border:0;border-left:2px solid var(--cl-line);border-radius:0;background:none}
#clScope #tin-hieu .sig-reply .sig-acts{padding-top:0}
#clScope #tin-hieu .sig-reply .sig-text{color:var(--cl-ink);font-size:.88rem}
#clScope #tin-hieu .sig-to,#clScope #tin-hieu .sig-more-replies{color:var(--cl-muted)}
#clScope #tin-hieu .sig-empty{padding:2.4rem 1rem;border:1px dashed var(--cl-line);border-radius:16px;text-align:center;color:var(--cl-muted)}
#clScope #tin-hieu .sig-empty b{display:block;margin-bottom:.3rem;color:var(--cl-ink)}
@media (prefers-reduced-motion:reduce){#clScope #tin-hieu .cl-pulse i{animation:none}}