/* Viewstats Watcher — bang dieu khien, khong phai dashboard the roi.
   Mau trang thai (moi / tang hang / loi) tach han khoi mau nhan diem. */

:root{
  color-scheme: light;
  --ground:#EAEDEC;
  --surface:#FFFFFF;
  --surface-2:#F4F7F6;
  --line:#D2DAD8;
  --line-soft:#E3E9E7;
  --text:#0F1618;
  --text-dim:#5B6B6E;
  --text-faint:#8A9799;
  --accent:#0E6C69;
  --accent-ink:#0A4F4D;
  --accent-soft:#DBEAE8;
  --new:#8F5300;
  --new-soft:#FAE7C8;
  --new-edge:#E0A84A;
  --up:#22623A;
  --up-soft:#D9EADD;
  --down:#78868A;
  --danger:#96302B;
  --danger-soft:#F8E1DE;
  --shadow:0 1px 2px rgba(15,32,34,.06), 0 6px 18px rgba(15,32,34,.05);

  --f-display:"Bahnschrift","DIN Alternate","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --f-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-num:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0C1113; --surface:#141B1E; --surface-2:#192226;
    --line:#2A3639; --line-soft:#212C30;
    --text:#E6EDEB; --text-dim:#94A4A7; --text-faint:#6C7C80;
    --accent:#4EBEB6; --accent-ink:#7FD6CF; --accent-soft:#123331;
    --new:#EBBB70; --new-soft:#38290F; --new-edge:#8A6524;
    --up:#74CB88; --up-soft:#14301C; --down:#7B898D;
    --danger:#E8877F; --danger-soft:#3A1D1A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0C1113; --surface:#141B1E; --surface-2:#192226;
  --line:#2A3639; --line-soft:#212C30;
  --text:#E6EDEB; --text-dim:#94A4A7; --text-faint:#6C7C80;
  --accent:#4EBEB6; --accent-ink:#7FD6CF; --accent-soft:#123331;
  --new:#EBBB70; --new-soft:#38290F; --new-edge:#8A6524;
  --up:#74CB88; --up-soft:#14301C; --down:#7B898D;
  --danger:#E8877F; --danger-soft:#3A1D1A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-body); font-size:15px; line-height:1.5; overflow-x:hidden;
}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
/* Man hinh rong thi dung gan het be ngang — de 1220px co dinh la tren man
   1920 hai ben bo trong gan 700px, bang nhin be xiu. */
.wrap{max-width:min(1760px, 95vw); margin:0 auto; padding:0 20px}
.eyebrow{
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
}

/* ---------------- dau trang ---------------- */
.masthead{
  border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.masthead .wrap{
  display:flex; align-items:center; gap:18px; min-height:60px;
  flex-wrap:wrap; padding-top:9px; padding-bottom:9px;
}
.brand{
  font-family:var(--f-display); font-variation-settings:"wght" 700,"wdth" 87.5;
  font-size:18px; letter-spacing:.02em; text-decoration:none; color:var(--text);
  white-space:nowrap;
}
nav.main{display:flex; gap:4px; margin-right:auto; flex-wrap:wrap}
nav.main a{
  text-decoration:none; color:var(--text-dim); padding:7px 12px; border-radius:6px;
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:14px; white-space:nowrap;
}
nav.main a:hover{background:var(--surface-2); color:var(--text)}
nav.main a.on{background:var(--accent-soft); color:var(--accent)}
nav.main a .n{
  font-family:var(--f-num); font-size:11px; margin-left:5px;
  padding:1px 6px; border-radius:9px; background:var(--surface-2); color:var(--text-faint);
}
nav.main a.on .n{background:var(--surface); color:var(--accent)}
.who{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-dim)}
.who strong{color:var(--text)}

/* ---------------- dieu khien ---------------- */
.tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.field{display:flex; align-items:center; gap:7px}
.field label{
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
}
select,input[type="search"],input[type="text"],input[type="password"],
input[type="date"],textarea,.btn{
  font:inherit; font-size:13.5px; color:var(--text); background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:7px 10px;
}
select{cursor:pointer; max-width:220px}
/* O chon moc dai hon vi con kem "— da xem NN%"; de 220px thi phan tram bi cat,
   phai mo ra moi thay, mat nua tac dung. */
#moc{max-width:340px}
input[type="search"]{width:220px}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
.btn{
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; text-decoration:none; line-height:1.3;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.on,.btn[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;
}
.btn.primary{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
.btn.quiet{background:none; border-color:transparent; color:var(--text-faint)}
.btn.quiet:hover{color:var(--danger); border-color:var(--danger)}
.btn:disabled{cursor:default; opacity:.75}

/* ---------------- khoang thoi gian ---------------- */
/* Cot thoi gian nam DOC ben trai, canh bang xep hang. Man hep thi tra ve
   thanh ngang cuon duoc o tren (xem @media duoi cung cua khoi nay). */
/* Hai so nay dung chung cho ca trinh phat: no phai tu thu lai de con du cho
   cho cot doc va cho bang (bang co min-width 880px, duoi do la sinh cuon ngang
   va nuot mat cot Kho). */
:root{--cot-doc:176px; --cho-bang:930px}
.bxh{display:flex; align-items:flex-start}
.windows{
  flex:none; width:176px; align-self:stretch;
  background:var(--surface); border-right:1px solid var(--line);
}
.windows .wrap{
  display:flex; flex-direction:column; gap:2px;
  max-width:none; padding:16px 10px; position:sticky; top:14px;
}
.win{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  text-decoration:none; padding:9px 12px; border-radius:8px;
  color:var(--text-dim); border-left:2.5px solid transparent;
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:13.5px;
}
.win:hover{color:var(--text); background:var(--surface-2)}
.win.on{
  color:var(--accent); border-left-color:var(--accent);
  background:var(--accent-soft); border-radius:0 8px 8px 0;
}
.bxh main.wrap{flex:1; min-width:0; margin:0; max-width:none; padding:0 22px}
.win .dot{
  display:inline-block; margin-left:auto; padding:1px 6px; border-radius:9px;
  background:var(--new-soft); color:var(--new); border:1px solid var(--new-edge);
  font-family:var(--f-num); font-size:10.5px; font-variation-settings:normal;
}

/* ---------------- tom tat ---------------- */
.rollup{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end; padding:18px 0 14px}
.stat .k{display:block}
.stat .n{
  font-family:var(--f-display); font-variation-settings:"wght" 700,"wdth" 87.5;
  font-size:25px; line-height:1.15; font-variant-numeric:tabular-nums;
}
.stat.is-new .n{color:var(--new)}
.stat.is-up .n{color:var(--up)}
.stat.is-time .n{font-size:19px; font-variation-settings:"wght" 600,"wdth" 87.5}
.note{
  margin-left:auto; max-width:36ch; font-size:12.5px; color:var(--text-faint);
  text-align:right; line-height:1.45;
}

/* ---------------- bang ---------------- */
.board{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:34px;
}
.scroller{overflow-x:auto}
.grid{min-width:880px}
.row{
  display:grid;
  grid-template-columns:54px 132px minmax(0,1fr) 130px 104px 104px 120px;
  align-items:center; gap:14px; padding:11px 18px;
}
.head{
  border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
  padding-top:10px; padding-bottom:10px;
}
.rows{list-style:none; margin:0; padding:0}
.rows li{border-bottom:1px solid var(--line-soft)}
.rows li:last-child{border-bottom:0}
.rows li:hover{background:var(--surface-2)}
.rank{
  font-family:var(--f-display); font-variation-settings:"wght" 700,"wdth" 75;
  font-size:23px; font-variant-numeric:tabular-nums; color:var(--text-faint);
  text-align:right; letter-spacing:-.01em;
}
li.new .rank{color:var(--new)}
.thumb{
  width:100px; aspect-ratio:16/9; border-radius:5px; overflow:hidden; display:block;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------------- phat ngay trong danh sach ---------------- */
/* Boc lay the <a> san co de dat nut ▶ len tren. Dung o ca bang xep hang lan
   kho luu tru (kieu Danh sach: .thumb-o, kieu Luoi: .shot-o). */
.thumb-o{position:relative; width:132px}
.thumb-o .thumb{width:100%}
.shot-o{position:relative}
.phat{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:5px; cursor:pointer; font-size:14px; line-height:1;
  color:#fff; background:color-mix(in srgb, #000 52%, transparent);
  opacity:0; transition:opacity .12s;
}
.rows li:hover .phat, .card:hover .phat, .phat:focus-visible{opacity:1}
/* Man hinh cam tay khong co "ro chuot" nen phai hien san, chi lam mo bot */
@media (hover:none){ .phat{opacity:1; background:color-mix(in srgb, #000 32%, transparent)} }
li.dang-phat{background:var(--accent-soft)}
.card.dang-phat{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
li.dang-phat .phat, .card.dang-phat .phat{
  opacity:1; background:color-mix(in srgb, var(--accent) 78%, transparent);
}

#may-phat{
  position:fixed; right:18px; bottom:18px; z-index:60;
  /* To het muc ma van chua du ~1040px cho bang (bang can chung do de hien
     het cot, thieu la no sinh thanh cuon ngang va nuot mat cot Kho). */
  width:clamp(360px, calc(100vw - var(--cho-bang) - var(--cot-doc) - 24px), 880px);
  max-width:calc(100vw - 24px);
  /* Xep doc ngay o day chu KHONG dat trong .doc: dat trong .doc thi luat do
     dung do uu tien voi #may-phat[hidden]{display:none} ma lai nam sau, nen
     khung khong the an di duoc — bam ✕ hay Esc deu vo tac dung. */
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 12px 34px rgba(0,0,0,.34); overflow:hidden;
}
#may-phat[hidden]{display:none}
.mp-dau{
  display:flex; align-items:center; gap:9px; padding:8px 10px 8px 12px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
.mp-ten{
  flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mp-x{
  border:0; background:none; color:var(--text-dim); cursor:pointer;
  font-size:14px; line-height:1; padding:3px 5px; border-radius:5px;
}
.mp-x:hover{background:var(--line); color:var(--text)}
.mp-khung{aspect-ratio:16/9; background:#000; position:relative}
/* Anh thumb dap len khung khi clip bi chan — do nhin man den trong tron */
.mp-anh{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; z-index:2;
}
.mp-anh[hidden]{display:none}
.mp-anh::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.55)}
.mp-anh-nut{
  position:relative; padding:9px 15px; border-radius:8px; font-size:13.5px;
  font-weight:600; text-decoration:none; color:#fff;
  background:rgba(20,20,20,.85); border:1px solid rgba(255,255,255,.35);
}
.mp-anh-nut:hover{background:#c00; border-color:#c00}
.mp-bo{margin-left:0}
.mp-bo.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

/* Khung doc (Shorts) keo cao het man hinh cho de xem. Be ngang suy ra tu chieu
   cao con lai theo ti le 9:16 — tru phan dau, HAI hang nut va le (156px) — nen video
   vua khit, khong vien den hai ben. Chan o 46vw de con nhin thay danh sach. */
#may-phat.doc{
  top:12px; bottom:12px;
  /* To het chieu cao man, nhung khong duoc lan sang phan danh cho bang */
  width:clamp(300px,
              min(calc((100vh - 156px) * 9 / 16),
                  calc(100vw - var(--cho-bang) - var(--cot-doc) - 24px)),
              560px);
}
#may-phat.doc .mp-khung{aspect-ratio:auto; flex:1; min-height:0}
.mp-khung iframe{width:100%; height:100%; border:0; display:block}
.mp-loi{
  padding:13px 14px; font-size:12.5px; color:var(--danger);
  background:color-mix(in srgb, var(--danger) 10%, transparent);
}
.mp-loi[hidden]{display:none}
.mp-loi strong{display:block; margin-bottom:3px}
.mp-loi span{color:var(--text-dim)}
.mp-nut{display:flex; align-items:center; gap:7px; padding:9px 10px; flex-wrap:wrap}
/* Hang duoi: viec cua kenh va cach luot — tach khoi hang viec cua clip */
.mp-nut2{padding-top:0; border-top:1px solid var(--line-soft); padding-top:9px; margin:0 10px 0;
         padding-left:0; padding-right:0}
.mp-theo.dang{background:var(--up-soft); border-color:var(--up); color:var(--up)}
.mp-kqt.dang{
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-color:var(--danger); color:var(--danger);
}
.mp-theo[hidden], .mp-kqt[hidden]{display:none}
.mp-nut .btn{font-size:12.5px; padding:5px 9px}
.mp-luu{margin-left:auto}
.mp-nut2 .mp-bo{margin-left:auto}
.mp-luu.saved{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.mp-luu.saved:hover{
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-color:var(--danger); color:var(--danger);
}
/* Trinh phat noi len tren danh sach — phai chua cho cho no, khong thi no de
   len cot Kho. Kich thuoc do bang JavaScript vi khung co gian theo man hinh. */
/* Chua cho o cap TRANG chu khong bop rieng bang: bang co thanh cuon ngang
   rieng, thu hep no lai la cot Kho bi cuon ra ngoai tam nhin. */
body.co-may-phat{padding-right:calc(var(--mp-rong, 0px) + 24px)}
body.co-may-phat main.wrap{padding-bottom:calc(var(--mp-cao, 0px) + 28px)}

@media (max-width:760px){
  #may-phat{right:8px; left:8px; bottom:8px; width:auto}
  /* Man hinh hep: khung nam ngang duoi day, khong con chuyen ne sang trai */
  body.co-may-phat{padding-right:0}
  #may-phat.doc{top:auto; width:auto}
  #may-phat.doc .mp-khung{aspect-ratio:16/9; flex:none}
}
.title{
  font-weight:600; font-size:15.5px; line-height:1.36; color:var(--text);
  text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
a.title:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.chan{margin-top:3px; font-size:12.5px; color:var(--text-dim);
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.views{
  font-family:var(--f-num); font-size:13.5px; font-variant-numeric:tabular-nums;
  text-align:right; color:var(--accent); font-weight:600;
}
.when{font-size:12.5px; color:var(--text-faint); text-align:right}
.move{text-align:right}
.act{text-align:right}
.chip{
  display:inline-block; padding:2px 8px; border-radius:11px;
  font-family:var(--f-display); font-variation-settings:"wght" 700,"wdth" 87.5;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap;
}
.chip.n{background:var(--new-soft); color:var(--new); border-color:var(--new-edge)}
.chip.u{background:var(--up-soft); color:var(--up)}
.delta{font-family:var(--f-num); font-size:12.5px;
       font-variant-numeric:tabular-nums; color:var(--down)}
.delta.u{color:var(--up); font-weight:600}
.flat{color:var(--text-faint)}
.was{display:block; margin-top:2px; font-family:var(--f-num);
     font-size:11px; color:var(--text-faint)}
.save-btn{font-size:12.5px; padding:5px 10px}
.save-btn.saved{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
}
/* Nut nay bam duoc de bo khoi kho, nen phai co dau hieu la bam duoc. Ro nhat
   la doi han sang mau canh bao khi ro chuot vao — nguoi dung thay truoc khi
   bam chu khong phai bam roi moi biet. */
.save-btn.saved:hover, .save-btn.saved:focus-visible{
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-color:var(--danger); color:var(--danger);
}

/* ---------------- kho luu tru ---------------- */
.vault{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px; margin-bottom:36px;
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.card .shot{display:block; aspect-ratio:16/9; background:var(--surface-2);
            border-bottom:1px solid var(--line-soft)}
.card .shot img{width:100%; height:100%; object-fit:cover; display:block}
.card .shot.none{
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:12.5px; text-align:center; padding:12px;
}
.card .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
.card .title{-webkit-line-clamp:3}
.card .facts{
  display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--text-dim);
}
.card .facts .v{font-family:var(--f-num); color:var(--accent); font-weight:600}
.card .foot{
  display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:9px;
  border-top:1px solid var(--line-soft);
}
.card .foot .grow{margin-right:auto; font-size:11.5px; color:var(--text-faint)}
.card textarea{width:100%; min-height:52px; resize:vertical; font-size:13px}
.origin{
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint);
}

/* ---------------- trang dang nhap ---------------- */
.gate{
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:28px 20px;
}
.gate .panel{
  width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:28px;
}
.gate h1{
  font-family:var(--f-display); font-variation-settings:"wght" 700,"wdth" 87.5;
  font-size:22px; margin:6px 0 4px; letter-spacing:.01em;
}
.gate p.lead{margin:0 0 20px; color:var(--text-dim); font-size:13.5px}
.gate form{display:flex; flex-direction:column; gap:13px}
.gate label.f{display:flex; flex-direction:column; gap:5px}
.gate label.f span{
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
}
.gate input{width:100%; padding:9px 11px; font-size:14.5px}
.gate .btn.primary{justify-content:center; padding:10px; font-size:14.5px}
.gate .alt{margin-top:17px; padding-top:15px; border-top:1px solid var(--line-soft);
           font-size:13px; color:var(--text-dim); text-align:center}

/* ---------------- trang thai ---------------- */
.alert{
  padding:10px 13px; border-radius:7px; font-size:13.5px; margin:0;
  background:var(--danger-soft); color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.banner{padding:11px 16px; background:var(--accent-soft); color:var(--accent);
        border-bottom:1px solid var(--line); font-size:13px}
/* Dai bao "dang hien so lieu cu" — dung mau canh bao, khong dung mau nhan
   manh, de khong bi nham voi dai "ban dang xem mot moc cu". Chi dung bien
   --danger (co o ca hai nen sang/toi) nen khong can khai bao rieng cho nen toi. */
.banner.cu{background:color-mix(in srgb, var(--danger) 12%, transparent);
           color:var(--danger);
           border-bottom-color:color-mix(in srgb, var(--danger) 30%, transparent)}
.empty{padding:52px 24px; text-align:center; color:var(--text-dim)}
.empty strong{display:block; margin-bottom:7px; color:var(--text); font-size:16px}
.empty code{
  display:inline-block; margin-top:11px; padding:7px 11px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line);
  font-family:var(--f-num); font-size:12px; color:var(--text-dim); text-align:left;
}
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:var(--text); color:var(--ground); padding:10px 17px; border-radius:8px;
  font-size:13.5px; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:50; max-width:90vw;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
footer{padding:0 0 40px; color:var(--text-faint); font-size:12.5px}

/* Man hep: cot doc se an het be ngang cua bang — tra ve thanh ngang cuon duoc */
@media (max-width:1100px){
  :root{--cot-doc:0px}
  .bxh{display:block}
  .windows{
    width:auto; border-right:0; border-bottom:1px solid var(--line);
  }
  .windows .wrap{
    flex-direction:row; padding:0 20px; position:static;
    overflow-x:auto; scrollbar-width:thin; max-width:min(1760px, 95vw);
  }
  .win{
    border-left:0; border-bottom:2.5px solid transparent; border-radius:0;
    padding:11px 15px 9px; white-space:nowrap;
  }
  .win:hover{background:none}
  .win.on{
    background:none; border-radius:0;
    border-left-color:transparent; border-bottom-color:var(--accent);
  }
  .win .dot{margin-left:7px}
  .bxh main.wrap{padding:0 20px; max-width:min(1760px, 95vw); margin:0 auto}
}

@media (max-width:900px){
  .grid{min-width:0}
  .head{display:none}
  .row{
    grid-template-columns:40px 88px minmax(0,1fr) auto;
    grid-template-areas:
      "rank thumb main  main"
      "rank thumb views move"
      "rank thumb act   act";
    row-gap:6px; column-gap:11px; padding:11px 14px;
  }
  .row .rank{grid-area:rank; font-size:19px; align-self:start; padding-top:2px}
  .row .thumb{grid-area:thumb; width:88px; align-self:start}
  .row .thumb-o{grid-area:thumb; width:88px; align-self:start}
  .row .main{grid-area:main; min-width:0}
  .row .views{grid-area:views; text-align:left; font-size:12.5px}
  .row .move{grid-area:move; text-align:right}
  .row .act{grid-area:act; text-align:left}
  .row .when{display:none}
  .was{display:inline; margin-left:6px}
  .note{margin-left:0; text-align:left; max-width:none}
  input[type="search"]{width:100%}
  .field:has(input[type="search"]){flex:1 1 190px; width:100%}
  nav.main{width:100%; order:3; overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------------- kho: kieu danh sach ---------------- */
.switch{display:inline-flex; gap:0}
.switch .btn{border-radius:0}
.switch .btn:first-child{border-radius:6px 0 0 6px}
.switch .btn:last-child{border-radius:0 6px 6px 0; margin-left:-1px}

.row.vault-row{
  grid-template-columns:44px 132px minmax(0,1fr) 108px minmax(240px, 22%) 64px;
}
.note-cell{display:flex; flex-direction:column; gap:3px; margin:0; min-width:0}
/* O viet kich ban: tu cao dan theo so dong, den 460px thi cho cuon trong o */
.kb-o{
  width:100%; min-width:0; font-size:13px; padding:6px 9px; line-height:1.5;
  resize:vertical; min-height:34px; font-family:inherit;
}
/* Hang duoi o kich ban: nut chep + trang thai tu luu */
.kb-hang{display:flex; align-items:center; gap:8px}
.kb-chep{
  appearance:none; cursor:pointer; flex:none;
  padding:1px 8px; border-radius:11px;
  background:var(--surface-2); color:var(--text-faint); border:1px solid var(--line);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:11px; letter-spacing:.03em;
}
.kb-chep:hover{border-color:var(--accent); color:var(--accent)}
.kb-chep.xong{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.kb-trang-thai{
  font-size:11px; color:var(--text-faint); min-height:14px;
  font-family:var(--f-display); font-variation-settings:"wght" 500,"wdth" 87.5;
}
.kb-trang-thai.hong{color:var(--danger)}
.card .kb-o{min-height:64px}
.card .foot /* Hang duoi o kich ban: nut chep + trang thai tu luu */
.kb-hang{display:flex; align-items:center; gap:8px}
.kb-chep{
  appearance:none; cursor:pointer; flex:none;
  padding:1px 8px; border-radius:11px;
  background:var(--surface-2); color:var(--text-faint); border:1px solid var(--line);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:11px; letter-spacing:.03em;
}
.kb-chep:hover{border-color:var(--accent); color:var(--accent)}
.kb-chep.xong{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.kb-trang-thai{margin-left:auto}
.vault-row .thumb{width:132px}
.vault-row .rank{font-size:17px}
.vault-row .act{margin:0}

@media (max-width:900px){
  .row.vault-row{
    grid-template-columns:40px 88px minmax(0,1fr) auto;
    grid-template-areas:
      "rank thumb main  main"
      "rank thumb views act"
      "note note  note  note";
  }
  .vault-row .note-cell{grid-area:note}
  .vault-row .act{grid-area:act; text-align:right}
  /* Man hinh hep: cho dong "luu ngay · hang" xuong dong thay vi bi cat cut */
  .vault-row .chan{white-space:normal}
  .vault-row .chan .origin{display:block; margin:2px 0 0 !important}
}

/* ---------------- danh dau da xem ---------------- */
.stat.is-seen .n{color:var(--text-dim)}

.seen-chip{margin:4px 0 0}
.seen-chip button{
  appearance:none; cursor:pointer; display:inline-block;
  padding:1px 8px; border-radius:11px;
  background:var(--surface-2); color:var(--text-faint);
  border:1px solid var(--line);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:11px; letter-spacing:.05em;
}
.seen-chip button:hover{border-color:var(--danger); color:var(--danger)}

/* Chi lam mo o BANG XEP HANG, de mat huong toi clip chua xem.
   TRONG KHO KHONG LAM MO — day la nguyen tac cua nguoi dung: clip nao cung da
   xem roi moi luu, mo het thi khong con phan biet duoc gi. Trong kho chi mot
   thu duy nhat lam mo: clip da danh dau "da dung y tuong" (xem .da-dung ben
   duoi) — va do la do nguoi dung tu bam. */
/* Kenh khong quan tam: lam mo GIONG het clip da xem, chi khac o cho no khong
   bao gio het mo — va nut duoi ten kenh doi thanh dau hieu de nhan ra. */
.rows:not(.vault-rows) li.bo-qua .title{color:var(--text-dim); font-weight:500}
.rows:not(.vault-rows) li.bo-qua .thumb{opacity:.45}
.rows:not(.vault-rows) li.bo-qua:hover .thumb{opacity:.8}
.rows:not(.vault-rows) li.bo-qua .rank,
.rows:not(.vault-rows) li.bo-qua .views,
.rows:not(.vault-rows) li.bo-qua .chan{opacity:.7}
.kenh-qt{margin:0}
.td-kenh.mo{opacity:0; transition:opacity .12s}
.rows li:hover .td-kenh.mo, .td-kenh.mo:focus-visible{opacity:1}
@media (hover:none){ .td-kenh.mo{opacity:1} }
.td-kenh.bo{color:var(--danger); border-color:transparent}
.td-kenh.bo:hover{border-color:var(--danger)}
.rows:not(.vault-rows) li.seen .title{color:var(--text-dim); font-weight:500}
.rows:not(.vault-rows) li.seen .thumb{opacity:.62}
.rows:not(.vault-rows) li.seen:hover .thumb{opacity:1}
.rows:not(.vault-rows) li.seen .rank{opacity:.7}

/* ---------------- thu muc trong kho ---------------- */
.tm-tabs{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:10px 12px; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
}
.tm-slot{display:inline-flex; align-items:center; gap:2px; position:relative}
.tm{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:5px 11px; border-radius:7px; white-space:nowrap;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:13px;
}
.tm:hover{color:var(--text); border-color:var(--accent)}
.tm.on{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
}
.tm .n{
  font-family:var(--f-num); font-size:11px; font-variation-settings:normal;
  color:var(--text-faint);
}
.tm.on .n{color:var(--accent)}
.tm-sua > summary, .tm-them > summary{
  list-style:none; cursor:pointer; color:var(--text-faint);
  padding:4px 6px; border-radius:6px; font-size:12px;
}
.tm-sua > summary::-webkit-details-marker, .tm-them > summary::-webkit-details-marker{display:none}
.tm-sua > summary:hover, .tm-them > summary:hover{color:var(--accent); background:var(--surface-2)}
.tm-them{position:relative}
.tm-them > summary{
  border:1px dashed var(--line); font-size:12.5px; padding:5px 11px;
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
}
.tm-sua[open] > .edit-pop, .tm-them[open] > .edit-pop{display:block}
.tm-sua .edit-pop, .tm-them .edit-pop{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:250px;
}
/* O chon thu muc tren tung clip */
.tm-form{margin:0}
.tm-chon{
  font-size:12px; padding:2px 7px; border-radius:11px; max-width:190px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-faint);
}
.tm-chon.co{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.tm-chon:disabled{opacity:.5}

/* ---------------- chua nhap tag ---------------- */
/* Do ruc va luon dung dau: day la viec dang do, khong phai mot tag de loc. */
/* Phai co .tagbar dan truoc: luat chung cua .tagbar .pill nam sau trong file
   nen do uu tien cao hon, khong chen thi nhan do bi ve nhu tag thuong. */
.tag.chua-tag, .tagbar .pill.chua-tag{
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border:1px solid var(--danger); color:var(--danger);
  text-decoration:none; font-weight:600;
}
/* Thu tu hien: "chua nhap tag" -> tag dang duoc chon -> con lai.
   Tag dang loc phai nhin thay ngay, khong phai xoe ca thanh ra do xem minh
   dang loc theo cai gi. Chi doi CHO HIEN, thu tu that trong HTML khong doi. */
.tagbar .pill.chua-tag{order:-2}
.tagbar .tag-slot:has(.pill.on){order:-1}
.tagbar .pill.chua-tag:hover{border-color:var(--danger); background:color-mix(in srgb, var(--danger) 20%, transparent)}
.tagbar .pill.chua-tag .n{color:var(--danger); opacity:.9}
.tagbar .pill.chua-tag.on{background:var(--danger); border-color:var(--danger); color:#fff}
.tagbar .pill.chua-tag.on .n{color:#fff}
.tag.chua-tag{padding:1px 9px; border-radius:11px; font-size:12px}

/* Dang lay danh sach moi ve: lam mo nhe cho biet co viec dang chay, khong
   dung spinner — doi chi khoang mot phan muoi giay, spinner nhay len roi tat
   ngay con roi mat hon la khong co gi. */
main.wrap.dang-loc{opacity:.55; transition:opacity .12s}
main.wrap{transition:opacity .12s}

/* Vach chay mong tren dinh trang khi doi sang trang khac. Doi trang lay du
   lieu lau hon doi bo loc, lam mo ca trang luc do thay nang. */
#vach-tien{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:120;
  background:var(--accent); opacity:0; pointer-events:none;
}
#vach-tien.chay{opacity:1; width:70%; transition:width 1.4s cubic-bezier(.2,.8,.3,1)}
#vach-tien.xong{width:100%; opacity:0; transition:width .18s, opacity .3s .12s}
@media (prefers-reduced-motion:reduce){ #vach-tien{transition:none !important} }

/* O tim tag + so ket qua */
.tagbar-dau{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.tagbar-tim{
  width:190px; max-width:100%; font-size:12.5px; padding:4px 10px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text);
}
.tagbar-tim:focus{outline:none; border-color:var(--accent)}
.tagbar-so{font-size:12px; color:var(--text-faint)}
.tagbar-so.khong{color:var(--danger)}
/* .tag-slot la inline-flex nen phai ep, khong thi thuoc tinh hidden vo tac dung */
.tag-slot[hidden], .pill[hidden]{display:none !important}

/* Thanh loc tag gap lai — mac dinh chi hai hang */
.tagbar.thu-gon .tagbar-row{max-height:74px; overflow:hidden}
.tagbar-mo{
  appearance:none; cursor:pointer; margin-top:8px;
  background:none; border:0; padding:2px 0; color:var(--accent);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:12.5px;
}
.tagbar-mo:hover{text-decoration:underline}
.btn.quiet.trong{opacity:.6}

/* ---------------- thung rac + thanh hoan tac ---------------- */
#hoan-tac{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px 10px 16px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:13.5px; max-width:min(560px, calc(100vw - 24px));
}
#hoan-tac[hidden]{display:none}
.ht-chu{color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ht-form{margin:0}
.ht-dem{
  font-family:var(--f-num); font-size:12px; color:var(--text-faint);
  min-width:14px; text-align:right;
}
.ht-x{
  appearance:none; border:0; background:none; cursor:pointer;
  color:var(--text-faint); font-size:14px; line-height:1; padding:2px 4px;
}
.ht-x:hover{color:var(--text)}
/* Trinh phat neo goc phai duoi — day thanh hoan tac len khoi no */
body.co-may-phat #hoan-tac{bottom:calc(var(--mp-cao, 0px) + 30px)}
.row.rac-row{grid-template-columns:44px 132px minmax(0,1fr) 96px auto}
.rac-viec{display:flex; gap:8px; justify-content:flex-end}
.rac-row .thumb{width:132px}
.rac-row .rank{font-size:17px}
.rac-row .act{margin:0}
.rac-row .views.sap-het{color:var(--danger)}
@media (max-width:900px){
  .row.rac-row{
    grid-template-columns:40px 88px minmax(0,1fr) auto;
    grid-template-areas:
      "rank thumb main main"
      "rank thumb views act";
  }
  .rac-row .thumb{width:88px}
}

/* ---------------- da dung y tuong ----------------
   Chi co trong kho. Danh dau xong thi dong do mo han di de mat luot qua, nhung
   van bam vao xem lai duoc — va ro chuot vao thi sang len nhu cu. */
.rows li.da-dung .title, .card.da-dung .title{color:var(--text-dim); font-weight:500}
.rows li.da-dung .thumb, .card.da-dung .shot{opacity:.4}
.rows li.da-dung:hover .thumb, .card.da-dung:hover .shot{opacity:.85}
.rows li.da-dung .rank,
.rows li.da-dung .views,
.rows li.da-dung .chan,
.card.da-dung .chan{opacity:.65}
/* Hai dau trang thai cua mot muc trong kho nam chung mot hang */
.dau-muc{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.dd-form{margin:0; display:inline}
.dd-nut{
  appearance:none; cursor:pointer; display:inline-block;
  padding:1px 8px; border-radius:11px;
  background:var(--surface-2); color:var(--text-faint);
  border:1px solid var(--line);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:11px; letter-spacing:.05em;
}
.dd-nut:hover{border-color:var(--accent); color:var(--accent)}
.dd-nut.on{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:var(--accent); color:var(--accent);
}

/* ---------------- tag ---------------- */
.tagbar{
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
  padding:12px 14px; margin-bottom:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
}
.tagbar .eyebrow{margin-right:3px}
.tagbar a{
  text-decoration:none; padding:3px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim);
  font-size:13px; white-space:nowrap;
}
.tagbar a:hover{border-color:var(--accent); color:var(--accent)}
.tagbar a.on{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.tagbar a .n{
  font-family:var(--f-num); font-size:11px; margin-left:5px; opacity:.75;
}
.tagbar .clear{margin-left:auto; border-color:transparent; background:none}
.tagbar .clear:hover{color:var(--danger); border-color:var(--danger)}

.tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px}
.tag{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--accent-soft); background:var(--accent-soft);
  border-radius:12px; overflow:hidden;
}
.tag .tag-name{
  text-decoration:none; color:var(--accent); font-size:12.5px;
  padding:2px 3px 2px 9px; font-weight:600;
}
.tag .tag-name:hover{text-decoration:underline}
.tag form{margin:0; display:flex}
.tag button{
  appearance:none; border:0; background:none; cursor:pointer; color:var(--accent);
  padding:2px 7px 3px 3px; font-size:14px; line-height:1; opacity:.6;
}
.tag button:hover{opacity:1; color:var(--danger)}

.tag-add{display:flex; gap:0; margin:0}
.tag-add input{
  width:86px; padding:2px 9px; font-size:12.5px; border-radius:12px 0 0 12px;
  border-right:0; background:var(--surface-2);
}
.tag-add input:focus{width:150px}
.tag-add button{
  cursor:pointer; font:inherit; font-size:12px; padding:2px 10px;
  border:1px solid var(--line); border-radius:0 12px 12px 0;
  background:var(--surface-2); color:var(--text-faint);
}
.tag-add button:hover{border-color:var(--accent); color:var(--accent)}

/* ---------------- bang mau tag ---------------- */
/* Moi mau dinh nghia rieng cho nen sang va nen toi — khong dao mau may moc,
   vi chu tren nen toi can sang hon de doc duoc. */
[data-color="teal"]  {--tg:#0E6C69; --tg-bg:#DBEAE8; --tg-dot:#0E6C69}
[data-color="blue"]  {--tg:#1D4F91; --tg-bg:#DCE6F5; --tg-dot:#1D4F91}
[data-color="violet"]{--tg:#5B3A8E; --tg-bg:#E7DFF4; --tg-dot:#5B3A8E}
[data-color="rose"]  {--tg:#9B2F5B; --tg-bg:#F8DDE7; --tg-dot:#9B2F5B}
[data-color="amber"] {--tg:#8F5300; --tg-bg:#FAE7C8; --tg-dot:#8F5300}
[data-color="green"] {--tg:#22623A; --tg-bg:#D9EADD; --tg-dot:#22623A}
[data-color="orange"]{--tg:#9A4318; --tg-bg:#FADFD1; --tg-dot:#9A4318}
[data-color="slate"] {--tg:#41525A; --tg-bg:#E2E8EA; --tg-dot:#41525A}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-color="teal"]  {--tg:#5CC8C0; --tg-bg:#123331; --tg-dot:#5CC8C0}
  :root:not([data-theme="light"]) [data-color="blue"]  {--tg:#7FB0F0; --tg-bg:#14243D; --tg-dot:#7FB0F0}
  :root:not([data-theme="light"]) [data-color="violet"]{--tg:#B79AE8; --tg-bg:#231A38; --tg-dot:#B79AE8}
  :root:not([data-theme="light"]) [data-color="rose"]  {--tg:#EE93B4; --tg-bg:#361622; --tg-dot:#EE93B4}
  :root:not([data-theme="light"]) [data-color="amber"] {--tg:#EBBB70; --tg-bg:#38290F; --tg-dot:#EBBB70}
  :root:not([data-theme="light"]) [data-color="green"] {--tg:#74CB88; --tg-bg:#14301C; --tg-dot:#74CB88}
  :root:not([data-theme="light"]) [data-color="orange"]{--tg:#EFA173; --tg-bg:#38200F; --tg-dot:#EFA173}
  :root:not([data-theme="light"]) [data-color="slate"] {--tg:#A6B6BC; --tg-bg:#222C30; --tg-dot:#A6B6BC}
}
:root[data-theme="dark"] [data-color="teal"]  {--tg:#5CC8C0; --tg-bg:#123331; --tg-dot:#5CC8C0}
:root[data-theme="dark"] [data-color="blue"]  {--tg:#7FB0F0; --tg-bg:#14243D; --tg-dot:#7FB0F0}
:root[data-theme="dark"] [data-color="violet"]{--tg:#B79AE8; --tg-bg:#231A38; --tg-dot:#B79AE8}
:root[data-theme="dark"] [data-color="rose"]  {--tg:#EE93B4; --tg-bg:#361622; --tg-dot:#EE93B4}
:root[data-theme="dark"] [data-color="amber"] {--tg:#EBBB70; --tg-bg:#38290F; --tg-dot:#EBBB70}
:root[data-theme="dark"] [data-color="green"] {--tg:#74CB88; --tg-bg:#14301C; --tg-dot:#74CB88}
:root[data-theme="dark"] [data-color="orange"]{--tg:#EFA173; --tg-bg:#38200F; --tg-dot:#EFA173}
:root[data-theme="dark"] [data-color="slate"] {--tg:#A6B6BC; --tg-bg:#222C30; --tg-dot:#A6B6BC}

/* Chip tag lay mau tu bien tren chinh no */
.tag{background:var(--tg-bg, var(--accent-soft)); border-color:var(--tg-bg, var(--accent-soft))}
.tag .tag-name{color:var(--tg, var(--accent))}
.tag button{color:var(--tg, var(--accent))}

/* Tag dang duoc loc: chip tren tung clip sang len bang chinh mau cua no, dung
   mot kieu voi pill tren thanh loc de nhin la biet hai cai la mot. */
.tag.dang-loc{
  background:var(--tg, var(--accent)); border-color:var(--tg, var(--accent));
  box-shadow:0 0 0 1px var(--tg, var(--accent));
}
.tag.dang-loc .tag-name, .tag.dang-loc button{color:var(--surface)}
.tag.dang-loc button{opacity:.75}
.tag.dang-loc button:hover{opacity:1; color:var(--surface)}
.tag.chua-tag.dang-loc{
  background:var(--danger); border-color:var(--danger); color:#fff;
  box-shadow:0 0 0 1px var(--danger);
}

.tagbar{flex-direction:column; align-items:stretch; gap:10px}
.tagbar-row{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.tagbar .pill{
  text-decoration:none; padding:3px 10px; border-radius:12px; white-space:nowrap;
  font-size:13px; border:1px solid var(--tg-bg); background:var(--tg-bg); color:var(--tg);
}
.tagbar .pill:hover{border-color:var(--tg)}
.tagbar .pill.on{background:var(--tg); border-color:var(--tg); color:var(--surface); font-weight:600}
.tagbar .pill .n{font-family:var(--f-num); font-size:11px; margin-left:5px; opacity:.75}
.tagbar .clear{
  margin-left:auto; text-decoration:none; font-size:13px; color:var(--text-faint);
  padding:3px 10px; border-radius:12px; border:1px solid transparent;
}
.tagbar .clear:hover{color:var(--danger); border-color:var(--danger)}
.tagbar .hint{margin:0; font-size:12.5px; color:var(--text-faint)}


/* ---- mau tu chon: chi luu MAU GOC, nen va chu suy ra rieng cho tung nen ----

   Dung oklch(from ...) de GHIM DO SANG cua chu va nen, chi giu lai tone mau
   nguoi dung chon. Tron theo ti le co dinh (color-mix voi den/trang) khong
   dung duoc: mau sang nhu vang chanh tron 82% voi den van ra vang nhat, dat
   len nen vang nhat nua thi tuong phan chi 1.9 — khong doc noi.
   color-mix o duoi la duong lui cho trinh duyet cu. */
[data-color="custom"]{
  --tg-bg:var(--surface-2); --tg:var(--text); --tg-dot:var(--tg-base, var(--accent));
  --tg-bg:color-mix(in srgb, var(--tg-base) 16%, #fff);
  --tg:color-mix(in srgb, var(--tg-base) 82%, #000);
  --tg-dot:var(--tg-base);
}
@supports (color: oklch(from red l c h)){
  [data-color="custom"]{
    --tg:oklch(from var(--tg-base) 0.40 c h);
    --tg-bg:oklch(from var(--tg-base) 0.94 calc(c * 0.28) h);
  }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-color="custom"]{
    --tg-bg:color-mix(in srgb, var(--tg-base) 26%, #0C1113);
    --tg:color-mix(in srgb, var(--tg-base) 68%, #fff);
  }
  @supports (color: oklch(from red l c h)){
    :root:not([data-theme="light"]) [data-color="custom"]{
      --tg:oklch(from var(--tg-base) 0.82 calc(c * 0.9) h);
      --tg-bg:oklch(from var(--tg-base) 0.26 calc(c * 0.45) h);
    }
  }
}
:root[data-theme="dark"] [data-color="custom"]{
  --tg-bg:color-mix(in srgb, var(--tg-base) 26%, #0C1113);
  --tg:color-mix(in srgb, var(--tg-base) 68%, #fff);
}
@supports (color: oklch(from red l c h)){
  :root[data-theme="dark"] [data-color="custom"]{
    --tg:oklch(from var(--tg-base) 0.82 calc(c * 0.9) h);
    --tg-bg:oklch(from var(--tg-base) 0.26 calc(c * 0.45) h);
  }
}

/* ---- hang chon mau ngay o o go tag ---- */
/* Tat ca tren MOT hang: o nhap, nut Them, hang mau.
   Truoc day xep chong 2 dong nen cac chip bi canh giua so voi khoi cao do,
   nhin lech han. */
.tag-add{flex-direction:row; align-items:center; gap:7px; flex-wrap:wrap}
.tag-add-row{display:flex; align-items:center}
/* Hien thuong truc, KHONG an sau focus.
   Truoc day hang mau chi hien khi o nhap co focus, nen nguoi dung buoc phai go
   truoc roi moi chon mau duoc — ma luc do o goi y (datalist) dang bung ra, cu
   bam dau tien chi de dong dropdown do va bi nuot mat. Hien san thi chon mau
   truoc, go sau, khong con va cham. */
.tag-colors{display:flex; gap:5px; align-items:center}

.pick{display:inline-flex; cursor:pointer; position:relative; line-height:0}
.pick input[type="radio"]{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.pick .swatch{
  width:16px; height:16px; border-radius:50%; display:block;
  background:var(--tg-dot); border:2px solid transparent;
  transition:transform .12s ease;
}
.pick:hover .swatch{transform:scale(1.2)}
.pick input[type="radio"]:checked + .swatch{
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--text);
  transform:scale(1.2);
}
.pick input[type="radio"]:focus-visible + .swatch{outline:2px solid var(--accent); outline-offset:3px}

/* O nhap doi vien sang mau dang chon — bao cho biet tag sap tao se mang mau nao */
.tag-add:has(input[name="color"]:checked) input[name="tag"]{
  border-color:var(--tg-pick, var(--accent));
  box-shadow:0 0 0 1px var(--tg-pick, var(--accent));
}

.pick.custom input[type="color"]{
  width:17px; height:17px; padding:0; border:1px dashed var(--line);
  border-radius:50%; background:none; cursor:pointer; overflow:hidden;
}
.pick.custom input[type="color"]::-webkit-color-swatch-wrapper{padding:1px}
.pick.custom input[type="color"]::-webkit-color-swatch{border:0; border-radius:50%}
.pick.custom input[type="radio"]:checked ~ input[type="color"]{
  border:2px solid var(--text); border-style:solid;
}

/* O mau tu chon trong bang doi mau */
.custom-form{display:flex; align-items:center; gap:4px; margin-left:4px}
.custom-form input[type="color"]{
  width:19px; height:19px; padding:0; border:1px dashed var(--line);
  border-radius:50%; background:none; cursor:pointer;
}
.custom-form input[type="color"].on{border:2px solid var(--text); border-style:solid}
.custom-form input[type="color"]::-webkit-color-swatch-wrapper{padding:1px}
.custom-form input[type="color"]::-webkit-color-swatch{border:0; border-radius:50%}
.custom-form .apply{
  font:inherit; font-size:11px; padding:2px 7px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--text-faint);
}
.custom-form .apply:hover{border-color:var(--accent); color:var(--accent)}

/* Tag vua go: hien ngay, dang cho luu xong o nen */
.tag.pending{opacity:.55}
.tag.pending .tag-name{padding-right:9px; cursor:default}
.tag.pending::after{
  content:""; width:5px; height:5px; margin:0 7px 0 -4px; border-radius:50%;
  background:var(--tg); align-self:center; animation:cho 1s ease-in-out infinite;
}
@keyframes cho{0%,100%{opacity:.25} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.tag.pending::after{animation:none}}

/* ---------------- sua tag ngay tren thanh loc ---------------- */
.tag-slot{position:relative; display:inline-flex; align-items:center}
.tag-slot .pill{border-top-right-radius:0; border-bottom-right-radius:0}

.tag-edit{display:inline-flex}
.tag-edit > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:3px 8px; font-size:12px; line-height:1.35;
  border:1px solid var(--tg-bg); border-left:0;
  border-radius:0 12px 12px 0;
  background:var(--tg-bg); color:var(--tg); opacity:.65;
}
.tag-slot:has(.pill.on) .tag-edit > summary{background:var(--tg); color:var(--surface); border-color:var(--tg)}
.tag-edit > summary::-webkit-details-marker{display:none}
.tag-edit > summary:hover{opacity:1}
.tag-edit[open] > summary{opacity:1}

/* <details> dong lai: Chrome dung content-visibility:hidden nen o popup KHONG
   nhin thay duoc nhung VAN CHIEM CHO, day trang tran ngang tren man hinh hep.
   Phai an han bang display:none. */
.tag-edit:not([open]) .edit-pop,
.kenh-sua:not([open]) .edit-pop{display:none}

.edit-pop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:40; width:288px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:14px;
  display:flex; flex-direction:column; gap:11px;
}
.edit-pop .f{display:flex; flex-direction:column; gap:5px}
.edit-pop .f > span{
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
}
.edit-pop input[type="text"]{width:100%; font-size:14px}
.edit-pop .btn.primary{justify-content:center}

.xoa-tag{border-top:1px solid var(--line-soft); padding-top:10px}
.xoa-tag > summary{
  list-style:none; cursor:pointer; font-size:12.5px; color:var(--text-faint);
  width:fit-content;
}
.xoa-tag > summary::-webkit-details-marker{display:none}
.xoa-tag > summary::before{content:"⚠ "}
.xoa-tag > summary:hover{color:var(--danger)}
.canh-bao{
  margin-top:9px; padding:10px; border-radius:7px;
  background:var(--danger-soft); border:1px solid var(--danger);
}
.canh-bao p{margin:0 0 9px; font-size:12.5px; line-height:1.45; color:var(--danger)}
.btn.nguy-hiem{
  width:100%; justify-content:center; font-weight:600;
  background:var(--danger); border-color:var(--danger); color:var(--surface);
}
.btn.nguy-hiem:hover{filter:brightness(1.1); color:var(--surface)}

@media (max-width:640px){
  .edit-pop{position:fixed; left:12px; right:12px; width:auto; top:auto; bottom:12px}
}

/* ---------------- them link tu nen tang khac ---------------- */
.them-link{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  margin-bottom:18px;
}
.them-link > summary{
  list-style:none; cursor:pointer; padding:11px 14px;
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:13.5px; color:var(--accent); width:fit-content;
}
.them-link > summary::-webkit-details-marker{display:none}
.them-link > summary:hover{text-decoration:underline}
.them-link form{
  padding:2px 14px 16px; display:flex; flex-direction:column; gap:12px;
  max-width:660px;
}
.them-link .loi-nhac{margin:0; font-size:12.5px; color:var(--text-faint); line-height:1.45}
.them-link .f{display:flex; flex-direction:column; gap:5px}
.them-link .f > span{
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
}
.them-link input[type="url"],.them-link input[type="text"]{width:100%; font-size:14px}
.them-link .doi{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.them-link .btn.primary{width:fit-content; padding:9px 18px}

.flash{
  margin:0 0 16px; padding:10px 14px; border-radius:8px; font-size:13.5px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.nen-tang{
  display:inline-block; padding:1px 8px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:11px; letter-spacing:.04em;
}
@media (max-width:640px){ .them-link .doi{grid-template-columns:1fr} }

/* ---------------------------------------------------- kich ban do AI viet */
/* Mau rieng cho AI: khong dung --accent (mau nhan dien) va khong dung mau
   trang thai moi/tang/loi — de mat phan biet duoc ngay day la thu do may viet. */
:root{ --ai:#5B4BC4; --ai-soft:#E8E5F8; --ai-edge:#BDB4EA; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ai:#A79BF0; --ai-soft:#221D3D; --ai-edge:#453B78; }
}
:root[data-theme="dark"]{ --ai:#A79BF0; --ai-soft:#221D3D; --ai-edge:#453B78; }

.kb-nut{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px}
.kb-nut .btn.kb-viet,.kb-nut .btn.kb-xem{
  padding:4px 10px; font-size:12.5px; border-color:var(--ai-edge); color:var(--ai);
}
.kb-nut .btn.kb-viet:hover,.kb-nut .btn.kb-xem:hover{
  background:var(--ai-soft); border-color:var(--ai);
}
.kb-nut .btn.kb-xem{background:var(--ai-soft)}
.kb-loi{
  font-size:11.5px; color:var(--danger); max-width:34ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kb-huy{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--text-faint); font:inherit; font-size:11.5px; text-decoration:underline;
}
.kb-huy:hover{color:var(--danger)}

.kb-dang{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ai)}
.quay{
  width:11px; height:11px; flex:none; border-radius:50%;
  border:2px solid var(--ai-edge); border-top-color:var(--ai);
  animation:quay .8s linear infinite;
}
@keyframes quay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .quay{animation:none; border-top-color:var(--ai-edge); opacity:.6}
}

/* ------------------------------------------------------- trang kich ban */
.kb-trang{max-width:760px}
.lui{margin:16px 0 0}
.lui a{color:var(--text-dim); text-decoration:none; font-size:13.5px}
.lui a:hover{color:var(--accent)}

.kb-dau{display:flex; gap:16px; align-items:flex-start; padding:14px 0 18px}
.kb-dau .anh{flex:none; width:132px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2)}
.kb-dau .anh img{display:block; width:100%; height:auto}
.kb-dau h1{margin:0 0 4px; font-family:var(--f-display); font-size:20px; line-height:1.3}
.kb-dau h1 a{color:var(--text); text-decoration:none}
.kb-dau h1 a:hover{color:var(--accent)}
.kb-dau .chan{margin:0 0 8px; color:var(--text-dim); font-size:13.5px}

.kb-cho,.kb-trong{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ai);
  border-radius:8px; padding:16px 18px; margin-bottom:18px;
}
.kb-trong{display:block}
.kb-cho .buoc{color:var(--ai); font-family:var(--f-display)}
.kb-cho p,.kb-trong p{margin:6px 0 0; color:var(--text-dim); font-size:13.5px}
.kb-trong form{margin-top:12px}
.canh-bao-dong{color:var(--danger) !important}

.kb-tomtat{
  margin:0 0 18px; padding:12px 16px; border-radius:8px;
  background:var(--ai-soft); border:1px solid var(--ai-edge);
  font-size:15.5px; line-height:1.55;
}
.kb-than{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:6px 22px 18px; box-shadow:var(--shadow);
}
.kb-than p{margin:14px 0; line-height:1.72; font-size:15px}

.kb-thoai{
  margin:16px 0 0; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:8px; padding:0 16px;
}
.kb-thoai summary{
  cursor:pointer; padding:11px 0; font-size:13.5px; color:var(--text-dim);
  font-family:var(--f-display);
}
.kb-thoai p{margin:0 0 14px; font-size:14px; line-height:1.7; color:var(--text-dim)}

.kb-chan{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin:18px 0 40px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--text-faint); font-family:var(--f-num);
}
.kb-chan .canh-bao-nhe{font-family:var(--f-body); color:var(--text-dim)}
.kb-chan form{margin-left:auto}

/* ----------------------------------------------------------- tag de xuat */
.kb-goiy{margin-bottom:20px}
.kb-goiy h2{margin:0 0 2px; font-family:var(--f-display); font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim)}
.goiy-hang{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.goiy{
  display:inline-flex; align-items:center; gap:2px;
  border:1px dashed var(--ai-edge); border-radius:999px;
  background:var(--surface); padding:0 4px 0 0;
}
.goiy .nhan{
  background:none; border:0; cursor:pointer; font:inherit; font-size:13px;
  color:var(--ai); padding:5px 4px 5px 12px;
}
.goiy:hover{background:var(--ai-soft)}
.goiy .bo{
  background:none; border:0; cursor:pointer; color:var(--text-faint);
  font:inherit; font-size:14px; line-height:1; padding:4px 6px;
}
.goiy .bo:hover{color:var(--danger)}
.goiy .moi{
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--new); background:var(--new-soft); border-radius:3px;
  padding:2px 5px; margin-right:5px;
}
.goiy.san-co{border-style:solid}

.han-muc{color:var(--text-dim)}
.han-muc strong{font-family:var(--f-num); color:var(--ai)}

@media (max-width:640px){
  .kb-dau{flex-direction:column}
  .kb-dau .anh{width:100%; max-width:220px}
  .kb-chan form{margin-left:0}
}

/* ------------------------------------------------- theo doi kenh YouTube */
.masthead .n.moi{
  background:var(--new-soft); border-color:var(--new-edge); color:var(--new);
}

.kenh-ds{display:flex; flex-direction:column; gap:12px; margin-bottom:28px}
.kenh{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:14px 18px; box-shadow:var(--shadow);
}
.kenh.tam-dung{opacity:.62}
.kenh header{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline}
.kenh .ten{font-family:var(--f-display); font-size:16.5px}
.kenh .ten a{color:var(--text); text-decoration:none}
.kenh .ten a:hover{color:var(--accent)}
.kenh .handle{margin-left:7px; font-size:12.5px; color:var(--text-faint);
  font-family:var(--f-body)}
.nhan-dung{
  margin-left:8px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line);
  border-radius:3px; padding:2px 6px; font-family:var(--f-body);
}
.kenh .tom-tat{font-size:13px; color:var(--text-dim)}
.kenh .tom-tat strong{font-family:var(--f-num); color:var(--text)}

.kenh .so-lieu{
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center;
  margin-top:10px; font-size:13px;
}
.kenh .cho-duyet{
  color:var(--new); background:var(--new-soft); border:1px solid var(--new-edge);
  border-radius:4px; padding:3px 9px; text-decoration:none; font-size:12.5px;
}
.kenh .cho-duyet:hover{border-color:var(--new)}
.kenh .khong{color:var(--text-faint)}
.kenh-loi{
  margin:10px 0 0; padding:8px 12px; border-radius:6px; font-size:12.5px;
  background:var(--new-soft); border:1px solid var(--new-edge); color:var(--new);
}
.kenh-nut{display:flex; gap:8px; align-items:center; margin-top:12px}
/* position:relative BAT BUOC: .edit-pop dinh vi tuyet doi theo phan tu cha
   duoc dinh vi gan nhat. Thieu dong nay thi o popup van mo nhung nhay ra tan
   dau trang — nhin nhu la nut khong an duoc. */
.kenh-sua{position:relative; display:inline-flex}
.kenh-sua > summary{
  cursor:pointer; list-style:none; user-select:none;
  font-size:12.5px; color:var(--text-dim);
  border:1px solid var(--line); border-radius:6px; padding:6px 11px;
  background:var(--surface-2);
}
.kenh-sua > summary::-webkit-details-marker{display:none}
.kenh-sua > summary:hover{color:var(--accent); border-color:var(--accent)}
.kenh-sua[open] > summary{color:var(--accent); border-color:var(--accent)}
/* O sua kenh chua ca "Loai clip" lan cac dong dieu kien nam ngang nhau, nen
   phai rong hon o sua tag. Duoi 760px thi truy van media xep chung lai doc. */
.edit-pop.rong{width:min(620px, calc(100vw - 40px))}
/* Nhieu dong dieu kien: moi dong la mot cap (luot xem, so ngay).
   Loai clip va khoi dieu kien nam ngang nhau tren man hinh rong. */
.dk-hang{display:flex; gap:18px; align-items:flex-start}
.dk-loai{flex:none; width:150px}
.dk-loai select{width:100%}
.dk-khoi{flex:1; min-width:0}
.dk-cac-dong{display:flex; flex-direction:column; gap:7px; margin:7px 0 9px}
.dk-dong{
  /* Cho XUONG HANG: khi mo them o "tu ngay" thi mot hang khong du cho, va
     flex-wrap:nowrap se day o ngay tran ra ngoai mep — bi cat mat. */
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:7px;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:7px; padding:6px 9px;
}
/* Do uu tien phai cao hon `.them-link input[type="text"]{width:100%}` va
   `.edit-pop input[type="text"]{width:100%}`, neu khong o se gian het chieu
   ngang va moi dong bi be thanh bon hang. */
.dk-khoi .dk-dong input[type="text"]{
  width:96px; min-width:0; flex:none;
  font-size:13.5px; padding:5px 8px; text-align:right;
}
.dk-tu,.dk-nhan,.dk-trong{
  font-size:12.5px; color:var(--text-dim); white-space:nowrap; flex:none;
}
.dk-bo{
  margin-left:auto; background:none; border:0; cursor:pointer; font:inherit;
  font-size:16px; line-height:1; color:var(--text-faint); padding:2px 4px; flex:none;
}
.dk-bo:hover{color:var(--danger)}
.dk-cac-dong .dk-dong:only-child .dk-bo{visibility:hidden}
.dk-them{
  background:none; border:1px dashed var(--line); border-radius:6px; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--text-dim); padding:5px 11px;
}
.dk-them:hover{border-color:var(--accent); color:var(--accent)}
.dk-them[hidden]{display:none}
.dk-nhac{margin:9px 0 0}

/* Tom tat dieu kien tren the kenh */
.dk-chip{
  display:inline-block; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:4px; padding:1px 7px; font-size:12.5px; margin:2px 0;
}
.dk-chip.thieu{color:var(--danger); border-color:var(--danger)}
.hoac{font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-faint); margin:0 2px}
label.bat{
  display:flex; gap:9px; align-items:flex-start; margin:12px 0;
  font-size:13px; color:var(--text-dim); cursor:pointer;
}
label.bat input{margin-top:2px; flex:none}

/* --------------------------------------------------- danh sach cho duyet */
.row.ph-row{
  grid-template-columns:100px minmax(0,1fr) 116px 68px 168px;
}
.ph-row .thumb{width:100px}
.ph-row .ngay{
  text-align:right; font-family:var(--f-num); font-size:13px; color:var(--text-dim);
}
.ph-row .viec{display:flex; gap:6px; justify-content:flex-end; align-items:center}
.ph-row .viec .btn{padding:5px 11px; font-size:12.5px}

@media (max-width:760px){
  /* Man hinh hep: xep doc lai, va cho o co gian de dong khong tran ra ngoai.
     align-items PHAI doi sang stretch: o truc doc, flex-start lam con co theo
     NOI DUNG chu khong theo be rong cua cha — dong dieu kien se phinh ra
     ngoai mep trang thay vi thu lai. */
  .dk-hang{flex-direction:column; align-items:stretch; gap:12px}
  .dk-loai{width:100%}
  /* Cho dong XUONG HANG thay vi bop o hep lai. O bi bop thi so 50000000 hien
     thanh 5000000 — mat dung chu so dau, doc nham sai han mot bac do lon.
     Xuong hang thi xau hon mot chut nhung khong bao gio doc sai. */
  .dk-khoi .dk-dong input[type="text"]{flex:1 1 96px; width:auto; min-width:96px}
}
@media (max-width:900px){
  .row.ph-row{
    grid-template-columns:88px minmax(0,1fr) auto;
    grid-template-areas:
      "thumb main  main"
      "thumb views ngay"
      "viec  viec  viec";
  }
  .ph-row .thumb{grid-area:thumb; width:88px}
  .ph-row .main{grid-area:main}
  .ph-row .views{grid-area:views}
  .ph-row .ngay{grid-area:ngay}
  .ph-row .viec{grid-area:viec; justify-content:flex-start; margin-top:6px}
}

/* ------------------------------------- nut "theo doi kenh" canh ten kenh */
.td-kenh{
  margin-left:8px; font-size:11.5px; white-space:nowrap; text-decoration:none;
  color:var(--text-faint); border-bottom:1px dotted currentColor;
}
/* Lop nay von viet cho the <a>; nut "khong quan tam" la <button> nen phai
   khu het kieu mac dinh cua nut, neu khong no thanh cai nut xam co vien. */
button.td-kenh{
  background:none; border:0; border-bottom:1px dotted currentColor;
  padding:0; font:inherit; font-size:11.5px; line-height:1.2; cursor:pointer;
}
.td-kenh:hover{color:var(--accent); border-bottom-color:var(--accent)}
.td-kenh.dang{color:var(--up); border-bottom-style:none; cursor:default}
.td-kenh.dang:hover{color:var(--up)}
/* Man hinh hep: dong ten kenh da chat, cho nut xuong dong rieng */
@media (max-width:640px){
  .td-kenh{display:block; margin:3px 0 0}
}

/* Khoi bao "da tra ra kenh" khi sang tu bang xep hang / kho luu tru */
.da-tra{
  margin:0; padding:10px 13px; border-radius:7px; font-size:13px; line-height:1.5;
  background:var(--accent-soft); border:1px solid var(--accent);
  color:var(--accent-ink);
}
.da-tra strong{font-family:var(--f-display)}
.da-tra .handle{
  font-family:var(--f-num); font-size:12px; opacity:.85; margin-left:3px;
}

/* ------------------------- clip cho duyet so ngay duoi the kenh */
.cho-khoi{margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px}
.cho-khoi > summary{
  cursor:pointer; list-style:none; user-select:none; width:fit-content;
  font-family:var(--f-display); font-variation-settings:"wght" 600,"wdth" 87.5;
  font-size:12.5px; color:var(--new);
}
.cho-khoi > summary::-webkit-details-marker{display:none}
.cho-khoi > summary::before{content:"▾ "; font-family:var(--f-body)}
.cho-khoi:not([open]) > summary::before{content:"▸ "}
.cho-khoi > summary .dem{
  font-family:var(--f-num); background:var(--new-soft); border:1px solid var(--new-edge);
  border-radius:9px; padding:1px 7px; margin-right:5px;
}

.cho-ds{list-style:none; margin:10px 0 0; padding:0}
.cho-ds li{
  display:flex; align-items:center; gap:12px;
  padding:8px 0; border-top:1px solid var(--line-soft);
}
.cho-ds li:first-child{border-top:0}
.cho-ds .anh{
  flex:none; width:86px; border-radius:5px; overflow:hidden;
  background:var(--surface-2); line-height:0;
}
.cho-ds .anh img{width:100%; height:auto; display:block}
.cho-ds .giua{flex:1; min-width:0}
.cho-ds .ten{
  display:block; color:var(--text); text-decoration:none; font-size:14px;
  line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cho-ds .ten:hover{color:var(--accent)}
.cho-ds .phu{margin-top:2px; font-size:12px; color:var(--text-faint)}
.cho-ds .phu .v{font-family:var(--f-num); color:var(--text-dim)}
.cho-ds .da-xem{color:var(--up)}
.cho-ds .viec{display:flex; gap:6px; flex:none}
.cho-ds .viec .btn{padding:5px 11px; font-size:12.5px}
.cho-them{margin:10px 0 0; font-size:12.5px}
.cho-them a{color:var(--text-faint); text-decoration:none}
.cho-them a:hover{color:var(--accent)}

@media (max-width:640px){
  .cho-ds li{flex-wrap:wrap}
  .cho-ds .anh{width:72px}
  /* width:100% CONG margin-left thi tong vuot qua be rong dong -> tran ngang.
     Tru thang phan le ra khoi be rong. */
  .cho-ds .viec{width:calc(100% - 84px); margin-left:84px}
}
.cho-them .con-nua{
  color:var(--new); font-family:var(--f-display);
  font-variation-settings:"wght" 600,"wdth" 87.5;
}
.cho-them .con-nua:hover{color:var(--new); text-decoration:underline}

/* --------------------------------------------- danh so trang cho duyet */
.trang{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft);
}
.trang a,.trang span{
  min-width:28px; text-align:center; padding:4px 8px; border-radius:5px;
  font-size:12.5px; font-family:var(--f-num); text-decoration:none;
  border:1px solid transparent;
}
.trang a{color:var(--text-dim); border-color:var(--line)}
.trang a:hover{color:var(--accent); border-color:var(--accent)}
.trang .dang{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.trang .tat{color:var(--text-faint); opacity:.5}
.trang .tong{
  margin-left:auto; font-family:var(--f-body); color:var(--text-faint);
  border:0; padding-right:0;
}
@media (max-width:640px){ .trang .tong{width:100%; margin:4px 0 0; text-align:left} }

/* --------------------------------- o chon ngay: tuy chon, mac dinh dong lai */
input[type="date"]{
  /* Bao trinh duyet ve phan native (lich, mui ten) theo dung nen dang dung —
     khong co dong nay thi Chrome ve mot o xam sang giua nen toi. */
  color-scheme:inherit;
  font-family:var(--f-num); font-size:12.5px; padding:5px 7px;
}
/* Chu trong o ngay phai theo mau chu cua giao dien, khong de trinh duyet tu chon */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field{color:var(--text)}
input[type="date"]:invalid::-webkit-datetime-edit{color:var(--text-faint)}
input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; filter:invert(var(--dao-mau, 0));
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
:root{--dao-mau:0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--dao-mau:1} }
:root[data-theme="dark"]{--dao-mau:1}

.tu-ngay{flex:none}
.tu-ngay > summary{
  cursor:pointer; list-style:none; user-select:none; white-space:nowrap;
  font-size:12.5px; color:var(--text-faint);
  border:1px dashed var(--line); border-radius:6px; padding:5px 9px;
}
.tu-ngay > summary::-webkit-details-marker{display:none}
.tu-ngay > summary::before{content:"+ "}
.tu-ngay > summary:hover{color:var(--accent); border-color:var(--accent)}
.tu-ngay[open] > summary{
  border-style:solid; border-color:transparent; color:var(--text-dim); padding-right:4px;
}
.tu-ngay[open] > summary::before{content:""}
.tu-ngay[open]{display:inline-flex; align-items:center; gap:5px}
.dk-nhac code{
  font-family:var(--f-num); font-size:11.5px; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:4px; padding:1px 5px;
}

/* ------------------------------------ mo ca nhom clip tren bang xep hang */
.mo-loat{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.mo-loat .btn{
  font-family:var(--f-num); font-size:12.5px; padding:5px 11px; min-width:66px;
  justify-content:center;
}
.mo-loat .btn:disabled{opacity:.5}
.mo-loat .note{max-width:none; text-align:left}
@media (max-width:640px){
  .mo-loat .note{width:100%; margin:2px 0 0}
}

/* Bao khi trinh duyet chan cua so bat len — phai o lai tren trang, khong
   phai toast bay mat sau 3 giay, vi nguoi dung can doc va lam theo. */
.mo-chan{
  width:100%; margin-top:4px; padding:11px 14px; border-radius:8px;
  background:var(--new-soft); border:1px solid var(--new-edge); color:var(--new);
}
.mo-chan p{margin:0 0 6px; font-size:13px; line-height:1.5}
.mo-chan .cach{color:var(--text-dim); font-size:12.5px}
.mo-chan .btn{background:var(--surface); border-color:var(--new-edge); color:var(--new)}
.mo-chan .btn:hover{border-color:var(--new)}
.mo-links{
  width:100%; margin-top:8px; height:96px; font-family:var(--f-num); font-size:12px;
}

/* ---------------- bang de xuat bo loc (trang Kenh theo doi) ---------------- */
.loc-bang{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px 16px; margin-bottom:16px; box-shadow:var(--shadow);
}
.loc-bang h2{font-size:16px; margin:0 0 6px; display:flex; align-items:center; gap:8px}
.loc-bang h2 .n{
  font-family:var(--f-num); font-size:12px; padding:1px 7px; border-radius:9px;
  background:var(--surface-2); color:var(--text-dim);
}
.loc-bang .ghi{margin:0 0 12px; font-size:12.5px; color:var(--text-dim); max-width:78ch}
.loc-ds{display:flex; flex-direction:column; gap:7px}
.loc-the{
  display:flex; align-items:flex-start; gap:10px; padding:9px 12px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:8px;
}
.loc-the:hover{border-color:var(--accent)}
.loc-the input[type="radio"]{margin-top:3px; flex:none}
.loc-noi{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.loc-dk{font-size:13px; color:var(--text-dim)}
.loc-dk strong{font-family:var(--f-num); color:var(--text)}
.loc-dung{font-size:11.5px; color:var(--text-faint)}
.loc-the:has(input:checked){border-color:var(--accent); background:var(--surface)}
.loc-xoa{
  background:none; border:0; cursor:pointer; font:inherit; font-size:15px;
  line-height:1; color:var(--text-faint); padding:2px 4px; flex:none;
}
.loc-xoa:hover{color:var(--danger)}
/* O go bo loc moi chi hien khi dang chon "Dat bo loc moi". Lam bang CSS chu
   khong bang JavaScript: tat JS thi o van hien ra, van go va gui duoc. */
.loc-moi-o{margin:12px 0 0}
.loc-form:has(.loc-the:not(.loc-the-moi) input:checked) .loc-moi-o{display:none}
.loc-nut{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:13px}
.loc-nut .dem-chon{font-family:var(--f-num)}
.loc-khi-them > summary{
  cursor:pointer; font-size:12.5px; color:var(--text-dim); margin:10px 0;
}
.loc-khi-them[open] > summary{color:var(--accent)}

/* O tich chon kenh de ap bo loc hang loat */
.kenh-chon{display:flex; align-items:center; flex:none; cursor:pointer; padding:2px}
.kenh-chon input{width:16px; height:16px; cursor:pointer}
.kenh:has(.kenh-chon input:checked){border-color:var(--accent)}
.can-loc{
  color:var(--new); background:var(--new-soft); border:1px solid var(--new-edge);
  border-radius:4px; padding:3px 9px; text-decoration:none; font-size:12.5px;
}
.can-loc:hover{border-color:var(--new)}
.go-loc{margin:12px 0 0}
.go-loc .btn{font-size:12px}

/* ---------------- kenh khong quan tam (trang Kenh theo doi) ---------------- */
.kqt{margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}
.kqt h2{font-size:16px; margin:0 0 6px; display:flex; align-items:center; gap:8px}
.kqt h2 .n{
  font-family:var(--f-num); font-size:12px; padding:1px 7px; border-radius:9px;
  background:var(--surface-2); color:var(--text-dim);
}
.kqt .ghi{margin:0 0 12px; font-size:12.5px; color:var(--text-dim); max-width:70ch}
.kqt-ds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.kqt-ds li{
  display:flex; align-items:center; gap:11px; padding:9px 13px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
}
.kqt-ds .ten{font-weight:600; font-size:13.5px}
.kqt-ds .tay{flex:1; font-size:12px; color:var(--text-faint)}

/* ---------------- gan tag ngay sau khi luu ---------------- */
#tag-nhanh{
  position:fixed; z-index:70; width:280px; padding:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}
#tag-nhanh[hidden]{display:none}
.tn-dau{font-size:11.5px; color:var(--text-dim); margin-bottom:8px}
.tn-form{display:flex; gap:6px; margin:0}
.tn-o{
  flex:1; min-width:0; padding:7px 9px; border-radius:7px; font-size:13px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
}
.tn-o:focus{outline:none; border-color:var(--accent)}
.tn-form .btn{font-size:12.5px; padding:6px 11px}
.tn-da{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.tn-da:empty{display:none}
.tn-da span{
  font-size:11.5px; padding:2px 8px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent);
}
.tn-cu{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;
       padding-top:9px; border-top:1px solid var(--line-soft)}
.tn-goi{
  font-size:11.5px; padding:3px 9px; border-radius:9px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
}
.tn-goi:hover{border-color:var(--accent); color:var(--accent)}

/* ---------------- trang cong dong ---------------- */
.cd-dau{display:flex; gap:24px; align-items:flex-start; justify-content:space-between;
        flex-wrap:wrap; padding:22px 0 18px}
.cd-dau h1{margin:0 0 6px; font-size:22px}
.cd-dau .ghi{margin:0; font-size:13px; color:var(--text-dim); max-width:66ch}
.cd-cong-tac{
  flex:none; max-width:320px; margin:0; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
}
.cd-cong-tac .tt{font-size:13px; margin-bottom:9px}
.cd-cong-tac .dang{color:var(--up); font-weight:600}
.cd-cong-tac .rieng{color:var(--text-dim)}
.cd-cong-tac .note{margin:9px 0 0; font-size:11.5px; color:var(--text-faint); text-align:left}

.cd-ds{list-style:none; margin:0 0 30px; padding:0;
       display:flex; flex-direction:column; gap:8px}
.cd-ds li{
  display:flex; align-items:center; gap:13px; padding:12px 15px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.cd-ds .ten{font-weight:600; font-size:15px; color:var(--text); text-decoration:none}
.cd-ds .ten:hover{color:var(--accent)}
.cd-ds .so{font-family:var(--f-num); font-size:13px; color:var(--accent)}
.cd-ds .khi{flex:1; font-size:12px; color:var(--text-faint)}
.chip-toi{
  font-size:11px; padding:2px 8px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent);
}
.cd-tag{display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0}
.cd-tag .tag-chip{
  font-size:11.5px; padding:2px 9px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
}
.cd-ghi{
  margin:8px 0 0; padding:8px 10px; border-radius:8px; font-size:12.5px;
  background:var(--surface-2); color:var(--text-dim); white-space:pre-wrap;
}
.btn.chep{margin-top:10px; width:100%}
.btn.chep.da-co{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

/* ---------------- doi thu tu tab ---------------- */
.tt-sua{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft)}
.tt-sua summary{
  cursor:pointer; font-size:11.5px; color:var(--text-faint);
  list-style:none; padding:4px 12px; border-radius:7px;
}
.tt-sua summary::-webkit-details-marker{display:none}
.tt-sua summary:hover{color:var(--accent); background:var(--surface-2)}
.tt-sua ol{list-style:none; margin:8px 0 0; padding:0;
           display:flex; flex-direction:column; gap:3px}
.tt-sua li{display:flex; align-items:center; gap:3px; padding:2px 6px 2px 12px}
.tt-sua .ten{flex:1; font-size:11.5px; color:var(--text-dim);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tt-sua form{margin:0}
.tt-sua button{
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim);
  border-radius:6px; width:22px; height:22px; line-height:1; cursor:pointer; font-size:11px;
}
.tt-sua button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.tt-sua button:disabled{opacity:.35; cursor:default}
.tt-md{margin:9px 12px 0}
.tt-md .btn{width:100%; font-size:11.5px; padding:5px}
.tt-sua .note{margin:8px 12px 0; font-size:11px; color:var(--text-faint);
              text-align:left; max-width:none}

/* ============================================================ nhap tu goi du lieu
   Trang /nhap va /nhap/<lo>. Dung chung bien mau voi ca app, khong dat mau cung. */

.np-dau h1{margin:0 0 .3rem}
.np-dau .ghi{max-width:62ch}

.np-tai{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.1rem; margin:1.1rem 0; box-shadow:var(--shadow);
}
.np-tha{
  flex:1 1 22rem; display:flex; flex-direction:column; gap:.25rem;
  border:1.5px dashed var(--line); border-radius:10px; padding:.9rem 1rem;
  cursor:pointer; background:var(--surface-2); transition:border-color .15s, background .15s;
}
.np-tha:hover, .np-tha.keo{border-color:var(--accent); background:var(--accent-soft)}
.np-tha input[type=file]{margin-bottom:.35rem; max-width:100%}
.np-tha span{color:var(--text-dim); font-size:.87rem}
.np-tha .np-ten{color:var(--accent-ink); font-weight:600}
.np-tai .note{flex:1 1 100%; margin:0; color:var(--text-faint); font-size:.83rem}

.np-hd{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.9rem 1.1rem; margin-bottom:1.4rem;
}
.np-hd > summary{cursor:pointer; font-family:var(--f-display); font-size:1.02rem}
.np-hd-cot{display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1.4rem; margin-top:1rem}
.np-hd-cot h2{font-size:1rem; margin:0 0 .5rem}
.np-hd-cot ol{margin:0; padding-left:1.2rem; line-height:1.65}
.np-hd-cot li{margin-bottom:.3rem}
.np-luu-y{
  margin:.7rem 0 0; padding:.6rem .75rem; font-size:.87rem; line-height:1.55;
  background:var(--new-soft); border-left:3px solid var(--new-edge); border-radius:0 6px 6px 0;
}
.np-vi-sao{margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--line-soft);
  color:var(--text-dim); font-size:.86rem; line-height:1.6; max-width:78ch}

.np-lo-tieu{font-size:1.05rem; margin:1.6rem 0 .6rem}
.np-lo-ds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.np-lo-ds li{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.6rem .85rem;
}
.np-lo-ds .ten{font-weight:600; margin-right:.2rem}
.np-lo-ds .so{color:var(--text-dim); font-size:.87rem}
.np-lo-ds .da{color:var(--up); font-size:.87rem}
.np-lo-ds .dang{color:var(--accent); font-size:.87rem}
.np-lo-ds .khi{color:var(--text-faint); font-size:.83rem; margin-left:auto}
.np-xoa{margin:0}

/* ------------------------------------------------------------- trang xem lo */
.np-ve{color:var(--text-dim); font-size:.87rem; text-decoration:none}
.np-ve:hover{color:var(--accent)}
.np-xem-dau h1{margin:.2rem 0 .3rem; word-break:break-all}

.np-chay{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.9rem 1.1rem; margin:1rem 0 1.2rem; box-shadow:var(--shadow);
}
.np-so{flex:1 1 20rem; display:flex; flex-direction:column; gap:.45rem}
.np-vach{display:block; height:7px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--line-soft); overflow:hidden}
.np-vach i{display:block; height:100%; background:var(--accent); transition:width .5s ease}
.np-chu{font-size:.9rem; color:var(--text-dim)}
.np-chu .np-xong{color:var(--up); font-family:var(--f-num)}
.np-chu .np-loi{color:var(--danger)}
.np-chay .note{flex:1 1 100%; margin:0; color:var(--text-faint); font-size:.83rem}

.np-loc{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.8rem}
.np-loc-nhan{color:var(--text-dim); font-size:.87rem; margin-right:.2rem}
.np-chip{
  display:inline-flex; align-items:center; gap:.3rem; padding:.24rem .6rem;
  border:1px solid var(--line); border-radius:99px; background:var(--surface);
  color:var(--text-dim); font-size:.84rem; text-decoration:none;
}
.np-chip:hover{border-color:var(--accent); color:var(--accent)}
.np-chip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.np-chip .n{font-family:var(--f-num); font-size:.78rem; opacity:.75}

.np-hang-loat{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.6rem}
.np-dem{color:var(--text-dim); font-size:.87rem; margin-left:auto}

.np-bang{width:100%; border-collapse:collapse; font-size:.88rem; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
.np-bang th{
  text-align:left; padding:.55rem .7rem; background:var(--surface-2);
  border-bottom:1px solid var(--line); font-weight:600; color:var(--text-dim);
  font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
}
.np-bang td{padding:.5rem .7rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
.np-bang tr:last-child td{border-bottom:0}
.np-bang .c-tich{width:2.2rem}
.np-bang .c-khi{width:6rem; color:var(--text-faint); font-family:var(--f-num); font-size:.82rem; white-space:nowrap}
.np-bang .c-tt{width:7rem; white-space:nowrap}
.np-bang .c-nhom{max-width:14rem; color:var(--text-dim)}
.np-bang .c-link a{word-break:break-all}
.np-bang tr.tt-xong, .np-bang tr.tt-trung{opacity:.55}

.np-nt{display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border-radius:99px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:.75rem}
.np-lan{margin-left:.35rem; color:var(--text-faint); font-size:.78rem}
.np-ai{display:block; color:var(--text-faint); font-size:.8rem}
.np-ok{color:var(--up)}
.np-co{color:var(--text-faint)}
.np-dang{color:var(--accent)}
.np-hong{color:var(--danger); cursor:help; border-bottom:1px dotted var(--danger)}

.np-luu-chon{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:.8rem}
.np-luu-chon .note{margin:0; color:var(--text-faint); font-size:.84rem}

@media (max-width:640px){
  .np-bang .c-nhom, .np-bang .c-khi{display:none}
}

/* ---------------- sua tag ngay canh chip ---------------- */
.tag-sua-nhanh{
  border:0; background:none; padding:0 2px; margin:0 1px 0 3px; cursor:pointer;
  color:inherit; opacity:.55; font-size:10.5px; line-height:1;
}
.tag-sua-nhanh:hover, .tag-sua-nhanh:focus-visible{opacity:1}
#sua-tag{
  position:fixed; z-index:70; width:290px; padding:13px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}
#sua-tag[hidden]{display:none}
#sua-tag .f{display:block; margin-bottom:10px; font-size:11.5px; color:var(--text-dim)}
#sua-tag .f > span{display:block; margin-bottom:5px}
#sua-tag input[type="text"]{
  width:100%; padding:7px 9px; border-radius:7px; font-size:13px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
}
#sua-tag input[type="text"]:focus{outline:none; border-color:var(--accent)}
#sua-tag .btn{width:100%}
#sua-tag .xoa-tag{margin-top:11px; padding-top:10px; border-top:1px solid var(--line-soft)}
#sua-tag .xoa-tag summary{cursor:pointer; font-size:11.5px; color:var(--danger)}
#sua-tag .canh-bao p{margin:8px 0; font-size:11.5px; color:var(--text-dim)}

/* ---------------- danh sach goi y tag tu ve ---------------- */
#goi-y{
  position:fixed; z-index:80; max-width:280px; padding:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  display:flex; flex-direction:column; gap:1px;
}
#goi-y[hidden]{display:none}
.gy-mot{
  border:0; background:none; color:var(--text); cursor:pointer;
  text-align:left; padding:6px 10px; border-radius:6px; font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gy-mot:hover, .gy-mot.on{background:var(--accent-soft); color:var(--accent)}

/* ---------------- nut chay len dau / xuong cuoi ---------------- */
/* Dat CHINH GIUA: mui ten len o canh tren, mui ten xuong o canh duoi — vi tri
   trung voi huong no dua minh toi, va khong lan voi trinh phat o goc phai. */
#chay-trang{display:contents}
#chay-trang button{
  position:fixed; left:50%; transform:translateX(-50%); z-index:55;
  width:40px; height:32px; border-radius:9px; cursor:pointer; font-size:15px;
  background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
  box-shadow:0 4px 14px rgba(0,0,0,.24); opacity:.75; transition:opacity .12s;
}
#chay-trang button:hover{opacity:1; border-color:var(--accent); color:var(--accent)}
#chay-trang button[hidden]{display:none}
#chay-trang [data-chay="len"]{top:10px}
#chay-trang [data-chay="xuong"]{bottom:10px}
@media (max-width:760px){
  /* Man hep: trinh phat nam ngang duoi day nen day nut duoi len tren no */
  #chay-trang [data-chay="xuong"]{bottom:calc(10px + var(--mp-cao, 0px))}
}