/* Bài đánh giá THRIVE - trang quản trị (quan-tri.html) và trang cảnh báo trình duyệt nhúng.
 * Dùng chung biến màu của app.css; mọi lớp riêng có tiền tố qt- (quản trị) hoặc inapp-. */

/* ================= trang quan tri ================= */
body.qt .app{max-width:880px}
.qt-head{display:flex;flex-direction:column;gap:8px}
.qt-who{font-size:14px;color:var(--ink-3);overflow-wrap:anywhere}
.qt-who b{color:var(--ink);font-weight:600}
.qt-who .link{font-size:14px;padding:4px 2px}
.qt-sec{display:flex;flex-direction:column;gap:12px}
.qt-gate{max-width:520px}
.qt-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.qt-h3{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--ink-2)}
.qt-sub{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* bo loc */
.qt-tools{display:flex;flex-direction:column;gap:12px}
.qt-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field select{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;min-height:46px;width:100%}
.qt-search input{background:var(--surface)}
.qt-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qt-seg{max-width:420px}
@media (max-width:420px){.qt-selects{grid-template-columns:1fr}}

/* tong quan */
.qt-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:560px){.qt-tiles{grid-template-columns:1fr 1fr}}
.qt-tile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.qt-k{font-size:12.5px;color:var(--ink-3)}
.qt-v{font-family:var(--font-voice);font-weight:600;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.qt-zones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qt-zrow{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:4px 14px;align-items:center}
.qt-zname{font-size:15px;color:var(--ink)}
.qt-zname b{font-family:var(--font-voice);font-weight:700;margin-right:6px}
.qt-zavg{display:flex;align-items:center;gap:10px}
.qt-track{flex:1;position:relative;height:10px;border-radius:0 4px 4px 0;background:var(--line)}
.qt-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0}
.qt-num{min-width:34px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.qt-zmeta{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13px;color:var(--ink-3)}
.qt-zmeta b{color:var(--ink);font-weight:600}
@media (max-width:480px){.qt-zrow{grid-template-columns:1fr}.qt-zmeta{grid-column:1}}

/* den giao thong: 4 muc diem cua bai danh gia */
:root{--lv0:#C2553F;--lv0-bg:#F8E3DD;--lv1:#C98A1B;--lv1-bg:#F8EDD5;--lv2:#5C9A55;--lv2-bg:#E3F0DF;--lv3:#0F7560;--lv3-bg:#D7ECE4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--lv0:#E58A7C;--lv0-bg:#3A221D;--lv1:#E3B05A;--lv1-bg:#372C17;--lv2:#8CC584;--lv2-bg:#20311E;--lv3:#4DBB9C;--lv3-bg:#173229}}
.qt-fill.lv0{background:var(--lv0)} .qt-fill.lv1{background:var(--lv1)} .qt-fill.lv2{background:var(--lv2)} .qt-fill.lv3{background:var(--lv3)}
.qt-badges{display:flex;flex-wrap:wrap;gap:6px}
.qt-badge{display:inline-flex;align-items:baseline;gap:5px;min-width:46px;justify-content:center;padding:3px 9px;border-radius:999px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;border:1px solid transparent}
.qt-badge b{font-family:var(--font-voice);font-weight:700}
.qt-badge.lv0{background:var(--lv0-bg);color:var(--ink);border-color:var(--lv0)}
.qt-badge.lv1{background:var(--lv1-bg);color:var(--ink);border-color:var(--lv1)}
.qt-badge.lv2{background:var(--lv2-bg);color:var(--ink);border-color:var(--lv2)}
.qt-badge.lv3{background:var(--lv3-bg);color:var(--ink);border-color:var(--lv3)}
.qt-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-3)}
.qt-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.qt-dot.lv0{background:var(--lv0)} .qt-dot.lv1{background:var(--lv1)} .qt-dot.lv2{background:var(--lv2)} .qt-dot.lv3{background:var(--lv3)}

/* danh sach */
.qt-list .tl-top{justify-content:space-between}
.qt-email{border:0;background:none;padding:2px 0;font:inherit;font-size:14.5px;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);overflow-wrap:anywhere;text-align:left}
.qt-email:hover{color:var(--ink)}
.qt-email.strong{font-family:var(--font-voice);font-weight:600;font-size:17px;color:var(--ink)}
.qt-item code{font-size:12.5px;overflow-wrap:anywhere}
.qt-item .tl-more li{grid-template-columns:120px 1fr}
.qt-delta{font-size:13.5px;color:var(--ink-2)}
.qt-list .loading,.loading span{font-family:var(--font-voice);font-style:italic;font-size:20px;color:var(--ink-2)}

/* ================= trang canh bao trinh duyet nhung ================= */
.inapp{position:fixed;inset:0;z-index:80;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;padding:28px 18px 40px;display:flex;justify-content:center;align-items:flex-start}
.inapp-card{width:100%;max-width:480px;display:flex;flex-direction:column;gap:16px}
.inapp-steps{margin:0;padding:14px 16px 14px 34px;border-radius:14px;background:var(--care-bg);border:1px solid var(--care-bd);display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--ink)}
.inapp-steps b{font-weight:600}
.inapp-actions{display:flex;flex-direction:column;gap:10px}
.inapp-url input{font-size:14px;color:var(--ink-2)}
.inapp-msg{font-size:14.5px;color:var(--ink)}
.inapp-msg:empty{display:none}
.inapp-stay{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border-top:1px solid var(--line);padding-top:14px}

/* lua chon chia se voi tac gia (trang ket qua, bang theo doi) */
.share-box{margin-top:14px;text-align:left}
.share-box .fine{margin:8px 2px 0}
.share-box #share-status:empty{display:none}
.share-box #share-status{margin:6px 2px 0}
.pill.share{background:transparent;border:1px solid var(--accent);color:var(--ink);font-weight:500}
.tl-act{gap:14px;flex-wrap:wrap}

/* nhan thu tu tac gia (bang theo doi) */
.news-row .news-name{margin-top:8px;max-width:360px}
.admin-row > .news-btns{flex:0 0 auto;flex-direction:row;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}

/* quan tri: danh sach nhan thu */
.qt-mode{max-width:460px}
.qt-tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.qt-tiles3{grid-template-columns:1fr 1fr}}
.qt-check{max-width:520px}
.qt-ctable td.qt-mail{overflow-wrap:anywhere;font-weight:500;color:var(--ink)}
.qt-ctable th,.qt-ctable td{text-align:left}
.qt-unver{color:var(--ink-3);font-style:italic}