/*! * tri-note.css — v1.2.0 (26/10/2026; v1.0.0 24/10/2026) — đi kèm tri-note.js (bôi từ có màu, ghi chú từ, Sổ từ). * Dùng chung therealielts.vn / tudien / mocktest: CHÉP NGUYÊN, đổi màu bằng biến bên dưới * (đặt lại trên :root hoặc body ở site mình), không sửa file. Font kế thừa từ trang. Luôn giao diện sáng. * * Biến (mặc định = token theme.json của WordPress, có giá trị dự phòng cho site không có token): * --tri-note-primary nút chính, link, viền đang chọn (action) * --tri-note-ink chữ (navy) * --tri-note-muted chữ phụ (slate) * --tri-note-bg nền thanh / hộp / thẻ (white) * --tri-note-line viền (ice) * --tri-note-soft nền nhạt (thông báo, nút phụ) (ice-soft) * --tri-note-danger nút xoá (red) * --tri-note-z lớp chồng của thanh / hộp * --tri-note-yellow / -green / -blue / -pink / -orange màu bút dạ quang (nền chỗ bôi) * --tri-note-hl-ink màu chữ trong chỗ bôi (mặc định inherit; nền tối / tương phản cao đặt màu tối) (v1.1) */ :root{--tri-note-primary:var(--wp--preset--color--action,#0053d1);--tri-note-ink:var(--wp--preset--color--navy,#091f5b);--tri-note-muted:var(--wp--preset--color--slate,#475467);--tri-note-bg:var(--wp--preset--color--white,#fff);--tri-note-line:var(--wp--preset--color--ice,#bad6eb);--tri-note-soft:var(--wp--preset--color--ice-soft,#eef5fb);--tri-note-danger:var(--wp--preset--color--red,#d92d20);--tri-note-z:2147480000;--tri-note-yellow:#fff06a;--tri-note-green:#b7f0a4;--tri-note-blue:#b4dcff;--tri-note-pink:#ffc4e1;--tri-note-orange:#ffd29a}mark.tri-note-hl{background:var(--tri-note-yellow);color:var(--tri-note-hl-ink,inherit);-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:pointer;border-radius:.15em;padding:.05em 0;transition:box-shadow .2s}mark.tri-note-hl[data-color=green]{background:var(--tri-note-green)}mark.tri-note-hl[data-color=blue]{background:var(--tri-note-blue)}mark.tri-note-hl[data-color=pink]{background:var(--tri-note-pink)}mark.tri-note-hl[data-color=orange]{background:var(--tri-note-orange)}mark.tri-note-hl:focus-visible{outline:2px solid var(--tri-note-primary);outline-offset:2px}mark.tri-note-hl--note:after,mark.tri-note-hl--book:after{content:"";vertical-align:super;background:var(--tri-note-primary);border-radius:50%;width:.42em;height:.42em;margin-left:.12em;display:inline-block}mark.tri-note-hl--flash{animation:.8s 3 tri-note-flash}@keyframes tri-note-flash{50%{box-shadow:0 0 0 4px var(--tri-note-primary)}}.tri-note-ui,.tri-note-ui *,.tri-note-book,.tri-note-book *{box-sizing:border-box}.tri-note-bar,.tri-note-pop{z-index:var(--tri-note-z);color:var(--tri-note-ink);background:var(--tri-note-bg);border:1px solid var(--tri-note-line);color-scheme:light;border-radius:14px;font-size:14px;line-height:1.4;position:fixed;box-shadow:0 10px 30px #091f5b2e}.tri-note-bar[hidden],.tri-note-pop[hidden],.tri-note-toast[hidden],.tri-note-book [hidden]{display:none!important}.tri-note-bar{white-space:nowrap;align-items:center;gap:2px;padding:4px;display:flex}.tri-note-bar--long .tri-note-sw,.tri-note-bar--long .tri-note-btn{opacity:.45}.tri-note-bar__sep{background:var(--tri-note-line);width:1px;height:22px;margin:0 4px}.tri-note-sw,.tri-note-btn,.tri-note-pbtn,.tri-note-pop__x,.tri-note-toast__x,.tri-note-book__k{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;margin:0}.tri-note-sw{border-radius:50%;place-items:center;width:34px;height:34px;padding:0;display:inline-grid}.tri-note-sw__dot{background:var(--tri-note-yellow);border-radius:50%;width:20px;height:20px;display:block;box-shadow:inset 0 0 0 1px #091f5b2e}[data-color=green]>.tri-note-sw__dot{background:var(--tri-note-green)}[data-color=blue]>.tri-note-sw__dot{background:var(--tri-note-blue)}[data-color=pink]>.tri-note-sw__dot{background:var(--tri-note-pink)}[data-color=orange]>.tri-note-sw__dot{background:var(--tri-note-orange)}.tri-note-sw:hover,.tri-note-btn:hover,.tri-note-pop__x:hover,.tri-note-toast__x:hover{background:var(--tri-note-soft)}.tri-note-sw.is-on .tri-note-sw__dot{box-shadow:0 0 0 2px var(--tri-note-bg), 0 0 0 4px var(--tri-note-primary)}.tri-note-sw:focus-visible,.tri-note-btn:focus-visible,.tri-note-pbtn:focus-visible,.tri-note-pop__x:focus-visible,.tri-note-toast__x:focus-visible,.tri-note-book__k:focus-visible{outline:2px solid var(--tri-note-primary);outline-offset:1px}.tri-note-btn{border-radius:10px;align-items:center;gap:6px;height:34px;padding:0 10px;font-weight:600;display:inline-flex}.tri-note-ui svg,.tri-note-book svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}.tri-note-pop{width:min(340px,100vw - 16px);padding:12px}.tri-note-pop__head{align-items:flex-start;gap:8px;margin-bottom:8px;display:flex}.tri-note-pop__quote{overflow-wrap:anywhere;flex:1;font-weight:600}.tri-note-pop__x,.tri-note-toast__x{width:30px;height:30px;color:var(--tri-note-muted);border-radius:50%;flex:none;place-items:center;display:inline-grid}.tri-note-pop__colors{flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:8px;display:flex}.tri-note-pop__tag{color:var(--tri-note-muted);margin-left:6px;font-size:13px}.tri-note-pop__ta{width:100%;min-height:72px;font:inherit;color:var(--tri-note-ink);background:var(--tri-note-bg);border:1px solid var(--tri-note-line);resize:vertical;border-radius:10px;padding:8px 10px;font-size:16px;display:block}.tri-note-pop__ta:focus{outline:2px solid var(--tri-note-primary);outline-offset:0;border-color:#0000}.tri-note-pop__actions{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.tri-note-pbtn{min-height:36px;color:var(--tri-note-ink);background:var(--tri-note-soft);border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.tri-note-pbtn:hover{box-shadow:inset 0 0 0 1px var(--tri-note-line)}.tri-note-pbtn--main,.tri-note-pbtn.is-on{color:var(--tri-note-bg);background:var(--tri-note-primary)}.tri-note-pbtn--del{color:var(--tri-note-danger);background:0 0;margin-left:auto}.tri-note-pop__foot{border-top:1px solid var(--tri-note-line);flex-wrap:wrap;gap:4px 14px;margin-top:10px;padding-top:8px;font-size:13px;display:flex}.tri-note-link{color:var(--tri-note-primary);text-underline-offset:2px;font-weight:600;text-decoration:underline}.tri-note-toast{left:50%;bottom:calc(16px + var(--tri-consent-h,0px));z-index:var(--tri-note-z);width:max-content;max-width:calc(100vw - 24px);color:var(--tri-note-ink);background:var(--tri-note-bg);border:1px solid var(--tri-note-line);border-radius:14px;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 8px 10px 14px;font-size:14px;line-height:1.4;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #091f5b2e}.tri-note-toast--err{border-color:var(--tri-note-danger)}.tri-note-toast__msg{flex:200px}[data-tri-note-save].is-saved{color:var(--tri-note-bg);background:var(--tri-note-primary);border-color:var(--tri-note-primary)}.tri-note-book{color:var(--tri-note-ink);color-scheme:light;font-size:15px;line-height:1.5}.tri-note-book__notice{background:var(--tri-note-soft);border-radius:14px;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:16px;padding:12px 14px;display:flex}.tri-note-book__notice>span{flex:260px}.tri-note-book__top{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tri-note-book__search,.tri-note-book__sel,.tri-note-book__label input{min-height:40px;font:inherit;color:var(--tri-note-ink);background:var(--tri-note-bg);border:1px solid var(--tri-note-line);border-radius:10px;padding:6px 12px;font-size:16px}.tri-note-book__search{flex:240px;min-width:0}.tri-note-book__sel{flex:0 auto;max-width:100%}.tri-note-book__kind{background:var(--tri-note-soft);border-radius:999px;padding:3px;display:inline-flex}.tri-note-book__k{border-radius:999px;min-height:34px;padding:4px 14px;font-size:14px;font-weight:600}.tri-note-book__k.is-on{color:var(--tri-note-bg);background:var(--tri-note-primary)}.tri-note-book__tools{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.tri-note-book__labels{border:1px solid var(--tri-note-line);border-radius:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:12px;padding:12px;display:grid}.tri-note-book__label{align-items:center;gap:8px;display:flex}.tri-note-book__lname{width:72px;color:var(--tri-note-muted);flex:none;font-size:13px}.tri-note-book__label input{flex:1;min-width:0}.tri-note-book__count{color:var(--tri-note-muted);margin:14px 0 8px;font-size:14px}.tri-note-book__list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.tri-note-book__empty{text-align:center;color:var(--tri-note-muted);background:var(--tri-note-soft);border-radius:14px;padding:24px 16px}.tri-note-book__more{margin:14px auto 0;display:flex}.tri-note-card{background:var(--tri-note-bg);border:1px solid var(--tri-note-line);border-left:6px solid var(--tri-note-yellow);overflow-wrap:anywhere;border-radius:14px;padding:14px 16px}.tri-note-card[data-color=green]{border-left-color:var(--tri-note-green)}.tri-note-card[data-color=blue]{border-left-color:var(--tri-note-blue)}.tri-note-card[data-color=pink]{border-left-color:var(--tri-note-pink)}.tri-note-card[data-color=orange]{border-left-color:var(--tri-note-orange)}.tri-note-card__head{flex-wrap:wrap;align-items:center;gap:6px 8px;display:flex}.tri-note-card__text{margin-right:4px;font-size:17px}.tri-note-card__tag,.tri-note-card__badge{background:var(--tri-note-yellow);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600}.tri-note-card__tag[data-color=green]{background:var(--tri-note-green)}.tri-note-card__tag[data-color=blue]{background:var(--tri-note-blue)}.tri-note-card__tag[data-color=pink]{background:var(--tri-note-pink)}.tri-note-card__tag[data-color=orange]{background:var(--tri-note-orange)}.tri-note-card__badge{background:var(--tri-note-soft)}.tri-note-card__badge--lost{color:var(--tri-note-danger)}.tri-note-card__ctx,.tri-note-card__note,.tri-note-card__meta{margin:6px 0 0}.tri-note-card__ctx{color:var(--tri-note-muted)}.tri-note-card__ctx mark.tri-note-hl{cursor:default}.tri-note-card__note{white-space:pre-line}.tri-note-card__note.is-empty{color:var(--tri-note-muted);font-style:italic}.tri-note-card__meta{color:var(--tri-note-muted);font-size:13px}.tri-note-card__meta a{color:var(--tri-note-primary)}.tri-note-card__acts{flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;display:flex}.tri-note-card__acts .tri-note-pop__colors{margin:0}.tri-note-card__edit{margin-top:8px}@media (width<=600px){.tri-note-btn__txt{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tri-note-btn{padding:0 8px}.tri-note-sw{width:36px;height:36px}}@media (prefers-reduced-motion:reduce){mark.tri-note-hl--flash{box-shadow:0 0 0 3px var(--tri-note-primary);animation:none}}@media print{.tri-note-ui{display:none!important}}mark.tri-note-hl--exam.tri-note-hl--note{text-decoration:underline dotted var(--tri-note-primary);text-underline-offset:.18em;text-decoration-thickness:2px}.tri-note-pop__colors[hidden],.tri-note-pop__tag[hidden]{display:none}