/* =========================================================================
   desktop.css — MAN HINH LON VA THAO TAC BANG CHUOT / BAN PHIM

   Nap sau mobile.css. Trong khi mobile.css lo "man hinh be lai", file nay lo
   chieu nguoc lai: man hinh 1440p / 4K thi trang cu 1180px nam giua, hai ben
   trong hoac.

   BON viec:
     1. Be ngang va co chu lon dan theo man hinh
     2. Them cot khi con cho (tinh nang, thu vien anh)
     3. Nhung thu chi co o may tinh: goi y phim tat, con tro, cuon muot
     4. Bang du lieu kieu "ban lam viec": dong tieu de dinh, sap xep, chon nhieu

   NGUONG:
     ≥1200px  may tinh thuong
     ≥1600px  man hinh rong (2K)
     ≥2000px  man hinh rat rong (4K, sieu rong)
   ========================================================================= */

/* ══ 1. CHI CO O MAY DUNG CHUOT ═══════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  /* Vien sang lan theo con tro chi co y nghia khi CO con tro. */
  .card--spot::before { display: block; }

  /* Con tro doi hinh cho biet cai gi bam duoc — dien thoai khong co khai
     niem nay nen de o day. */
  .tab, .chip, .subtab, .faq__q, .gallery__item, .video { cursor: pointer; }

  /* Cuon muot khi bam vao muc luc / neo trong trang. Tren dien thoai de he
     dieu hanh tu lo cho dung quan tinh cua no. */
  html { scroll-behavior: smooth; }
}


/* ══ 2. MAY TINH THUONG (≥ 1200px) ════════════════════════════════════ */

@media (min-width: 1200px) {
  /* Le hai ben rong ra cho de tho. */
  .container { padding-inline: 40px; }

  /* Tai lieu: cot noi dung rong hon mot chut, doc do moi mat hon so voi
     76ch dat cho man hinh hep. */
  .docs { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .docs__body { max-width: 82ch; }
}


/* ══ 3. MAN HINH RONG — 2K (≥ 1600px) ═════════════════════════════════ */

@media (min-width: 1600px) {
  :root {
    --maxw: 1340px;      /* noi dung rong ra thay vi de trong hai ben */
    --gap: 28px;
    --nav-h: 74px;

    /* Chu to len mot bac: man hinh rong thuong dat xa mat hon. */
    --fs-body: 1.04rem;
    --fs-sm:   .94rem;
  }

  .container--wide { max-width: 1560px; }

  /* 🔥 KHU TINH NANG KHONG CON LA LUOI (03/09/2026) — da doi thanh bang
     chuyen ngang, xem home/fcar.css. Hai dong cu dat 4 cot va o "rong gap
     doi" da bo: chung nham vao `.grid--3`, ma class do khong con tren
     trang nua. Giu lai ghi chu nay de sau khong ai di tim "sao dat 4 cot
     ma khong an". */

  /* Thu vien anh: o cao hon cho anh do net. */
  .gallery { grid-auto-rows: 230px; }

  /* Bang xep hang / cot phai dien dan rong hon. */
  .forum { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}


/* ══ 4. MAN HINH RAT RONG — 4K, sieu rong (≥ 2000px) ══════════════════
   Khong cho noi dung keo dai vo han: mot dong chu qua 90 ky tu la mat rat
   nhieu suc doc. Chi noi rong them mot chut roi dung. */

@media (min-width: 2000px) {
  :root { --maxw: 1480px; }
  .container--wide { max-width: 1760px; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ══ 5. BANG DU LIEU KIEU "BAN LAM VIEC" (≥ 701px) ════════════════════
   Duoi 700px bang da bien thanh the (mobile.css), nen moi thu o day deu
   nam trong media query tu 701px tro len. */

@media (min-width: 701px) {
  /* Dong tieu de dinh khi cuon bang dai — da co position:sticky trong
     admin.css, o day chi them nen mo va duong ke cho ro. */
  .tbl th {
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--border);
  }

  /* Cot sap xep duoc: con tro doi hinh + mui ten khi tro chuot. */
  .tbl th[data-sort] {
    cursor: pointer;
    user-select: none;
    padding-right: 26px;
    position: relative;
  }
  .tbl th[data-sort]:hover { color: var(--accent); }

  /* Mui ten mo — hien ro khi cot do dang duoc sap xep. */
  .tbl th[data-sort]::after {
    content: "";
    position: absolute;
    right: 10px; top: 50%;
    width: 0; height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .25;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .tbl th[data-sort]:hover::after { opacity: .6; }
  .tbl th.is-sort-asc::after  { opacity: 1; transform: rotate(180deg); }
  .tbl th.is-sort-desc::after { opacity: 1; }

  /* Hang dang duoc chon (co tick) — nen vang nhat de nhin ra ngay. */
  .tbl tr.is-picked { background: var(--accent-soft); }

  /* O tick chon dong: cot hep, khong keo gian ra. */
  .tbl td.pick, .tbl th.pick { width: 40px; padding-right: 0; }
  .tbl input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent-solid); cursor: pointer; }
}

/* Thanh cong cu cua bang: o tim + so dong dang chon + hanh dong hang loat. */
.tblbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tblbar__find {
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  padding: 9px 12px;
  border: var(--hair) solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.tblbar__find:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tblbar__count { font-size: var(--fs-xs); color: var(--text-faint); font-family: var(--font-mono); }

/* Nhom hanh dong hang loat: chi hien khi da chon it nhat mot dong. */
.tblbar__bulk { display: none; gap: 8px; align-items: center; margin-left: auto; }
.tblbar__bulk.is-on { display: flex; }


/* ══ 6. BANG PHIM TAT ═════════════════════════════════════════════════
   Mo bang phim "?" — chi may tinh moi co ban phim nen de o file nay. */

.keys__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 28px;
}
.keys__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: var(--hair) solid var(--border);
  font-size: var(--fs-sm);
}
.keys__row:last-child { border-bottom: 0; }
.keys__row span { color: var(--text-muted); }
.keys__row kbd + kbd { margin-left: 4px; }
.keys__k { white-space: nowrap; }