/* TASK-294: phan hoi cham dung chung (CSS) - token lay tu thuong_hieu/tokens/tokens.css (--sl-*).
   Quy uoc: [data-sl-down] = dang nhan; [data-sl-up] = dang nha (chuyen 150 ms); [data-sl-busy] = dang xu ly;
   [data-sl-press] / .sl-press = ep mot phan tu thanh "bam duoc"; [data-sl-nopress] = loai tru. Dung thuoc tinh `scale`
   (khong dung transform) de khong de len transform co san (vi du nut + giua). */
:root {
  --sl-press-in: 0ms;
  --sl-press-out: 150ms;
  --sl-press-scale: .97;
  --sl-press-scale-big: .985;
  --sl-press-filter: brightness(1.22);
  --sl-press-ring: var(--sl-info, #4FD1FF);
}
html[data-theme="light"] { --sl-press-filter: brightness(.9); }

/* 1) Bo tri hoan cham chạm, tat highlight xam cua Safari (da co hieu ung rieng), giu focus ban phim */
:where(a[href], button, [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="switch"], [role="checkbox"],
  [role="radio"], summary, label[for], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"],
  select, [onclick], [data-sl-press], .sl-press) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
:where(a[href], button, [role="button"], [role="tab"], summary, [onclick], [data-sl-press], .sl-press):focus-visible {
  outline: 2px solid var(--sl-press-ring);
  outline-offset: 2px;
}

/* 2) Nhan xuong: vao tuc thi (0 ms), :active la du phong khi JS chua nap */
[data-sl-down],
:where(a[href], button, [role="button"], [role="tab"], summary, [data-sl-press], .sl-press):not(:disabled):not([aria-disabled="true"]):active {
  scale: var(--sl-press-scale);
  filter: var(--sl-press-filter);
}
[data-sl-down][data-sl-big] { scale: var(--sl-press-scale-big); }
[data-sl-up] {
  transition: scale var(--sl-press-out) ease-out, filter var(--sl-press-out) ease-out !important;
}

/* 3) Dang xu ly: chan bam dup (JS) + nhan "Dang xu ly..." (data-sl-busy-text) + bieu tuong xoay nho */
[data-sl-busy] { cursor: progress; }
html [data-sl-busy="full"][data-sl-busy="full"] { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
[data-sl-busy="full"] > * { visibility: hidden; }
[data-sl-busy="full"]::after {
  content: attr(data-sl-busy-text);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline-start: 22px;
  color: var(--sl-busy-color, var(--sl-on-accent, #0B1220)); -webkit-text-fill-color: var(--sl-busy-color, var(--sl-on-accent, #0B1220));
  font: inherit; white-space: nowrap;
}
[data-sl-busy="full"]::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: var(--sl-busy-color, var(--sl-on-accent, #0B1220));
  animation: sl-spin 700ms linear infinite;
}
[data-sl-busy="full"][data-sl-busy-text]:not([data-sl-busy-text=""])::before { left: calc(50% - var(--sl-busy-shift, 46px)); }
[data-sl-busy="soft"] { opacity: .65; }
[data-sl-busy="soft"]::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-start: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: sl-spin 700ms linear infinite;
}
[data-sl-error] { outline: 2px solid var(--sl-danger, #FF6B6B); outline-offset: 2px; }
@keyframes sl-spin { to { transform: rotate(360deg); } }

/* 4) Chuyen man: tab/the doi trang thai ngay; thanh tien do tren dau + noi dung mo di */
html[data-sl-nav]::before {
  content: ""; position: fixed; z-index: 2147483000; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--sl-accent, #FF8A3D); transform-origin: left; animation: sl-nav 1.6s ease-out forwards;
}
html[data-sl-nav] #noi-dung, html[data-sl-nav] main { opacity: .55; transition: opacity 120ms linear; }
@keyframes sl-nav { from { transform: scaleX(.05); } to { transform: scaleX(.9); } }

/* 5) Giam chuyen dong: chi doi sang/toi, khong lun, khong xoay */
@media (prefers-reduced-motion: reduce) {
  [data-sl-down], [data-sl-down][data-sl-big],
  :where(a[href], button, [role="button"], [role="tab"], summary, [data-sl-press], .sl-press):active { scale: none; }
  [data-sl-up] { transition: filter 1ms !important; }
  [data-sl-busy="full"]::before, [data-sl-busy="soft"]::after { animation: none; }
  [data-sl-busy="full"]::before { border-right-color: currentColor; border-style: dotted; }
  html[data-sl-nav]::before { animation: none; transform: scaleX(.5); }
}

/* 6) Vung cham >= 44 px tren man cam ung: mo rong vung bam bang lop ao, KHONG doi bo cuc.
   Them lop `sl-hit` (hoac them selector vao day) cho nut/lien ket nho hon 44 px. */
@media (pointer: coarse) {
  :where(a.av, a.avatar269, a.v3-iconbtn, a.me, a.linkbtn, a.qv-lk, a[href^="/huong-dan-quay"], button.pl-foot, button.info252,
    button.weak258, button.fbtn, button.rchip, button.all, button[data-metric252], .sl-hit):not([data-sl-busy]) { position: relative; }
  :where(a.av, a.avatar269, a.v3-iconbtn, a.me, a.linkbtn, a.qv-lk, a[href^="/huong-dan-quay"], button.pl-foot, button.info252,
    button.weak258, button.fbtn, button.rchip, button.all, button[data-metric252], .sl-hit):not([data-sl-busy])::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}
@media (pointer: coarse) { select#game260 { min-height: 44px; min-width: 56px; } }