/* THESIS: cong cu mot viec, dung theo giao dien mau nguoi dung ghim
   (prettify-ui-sparkle.lovable.app). O nhap van chiem man hinh dau; moi khoi
   noi dung nam trong mot the trang bo tren nen xanh rat nhat.
   OWN-WORLD: nen #f9fbfd co quang xanh toa tron sau tieu de, the trang bo goc
   22px voi vien 1px va bong hai lop rat nhe, chu Google Sans cho ca tieu de
   va than bai, icon net Lucide, nut va nhan dang vien thuoc.
   STORY: dan link -> xem so trang nhay len -> tai ve.
   FIRST VIEWPORT: nhan tren tieu de, tieu de hai tong (dong hai mau nhan),
   mot dong dan, roi the cong cu. Khong co gi khac.
   FORM: theo ban mau da ghim. Mau nhan giu #2a6fe9 theo cam ket thuong hieu
   trong PRODUCT.md, khong lay #3780f6 cua ban mau.
   FINISH: chua soat va chua ghi tai lieu thi chua xong.

   Cung la nen cua /admin — admin.css dung tiep cac token mau va cac class
   .shell .topbar .brand .panel .form .label .input .btn .hint .error */

/* THESIS: ban sao 100% prettify-ui-sparkle.lovable.app — token oklch, shadow-lift,
   reveal-up, btn-shine + btn-pulse, link-field-glow. Font: Google Sans (brief). */

:root {
  --bg: oklch(98.8% 0.003 247.9);
  --surface: oklch(100% 0 0);
  --bg-soft: oklch(100% 0 0);
  --bg-sunken: oklch(95.8% 0.008 247.9);
  --ink: oklch(21% 0.035 265);
  --ink-soft: oklch(56.5% 0.032 257.4);
  --ink-faint: oklch(56.5% 0.032 257.4);
  --line: oklch(92.9% 0.013 255.508);
  --line-strong: oklch(92.9% 0.013 255.508);
  --accent: oklch(61.7% 0.192 259.8);
  --accent-deep: oklch(48% 0.16 259.8);
  --accent-soft: oklch(95.5% 0.025 259.8);
  --on-accent: oklch(99% 0.005 247.9);
  --ok: oklch(45% 0.12 160);
  --progress: oklch(62% 0.19 152);
  --progress-deep: oklch(48% 0.17 152);
  --progress-shine: oklch(74% 0.14 148);
  --danger: oklch(57.7% 0.245 27.325);

  --quality-low: #00b894;
  --quality-low-soft: color-mix(in srgb, #00b894 14%, white);
  --quality-mid: #00a8ff;
  --quality-mid-soft: color-mix(in srgb, #00a8ff 14%, white);
  --quality-high: #6c5ce7;
  --quality-high-soft: color-mix(in srgb, #6c5ce7 14%, white);
  --on-quality-low: #fff;
  --on-quality-mid: #fff;
  --on-quality-high: #fff;

  /* Trang thai DANG CHON (nut chat luong, the do net). Truoc day viet cung
     nen o nen toi van la nen trang chu xanh nhat — khong doc duoc. */
  --chon: #527ef1;
  --chon-nen: #f7f9fe;
  --chon-chu: var(--accent-deep);

  /* Nhan nho viet HOA (tieu de cot, nhan truong). --ink-soft chi dat 4.39:1
     tren nen sang — thieu 0.11 so voi nguong 4.5 cho chu nho. Toi hon mot
     chut la du, va mat gan nhu khong nhan ra khac biet. */
  --ink-nhan: oklch(53% 0.032 257.4);
  --danger-chu: oklch(45% 0.20 27.325);
  --tren-chon: #fff;

  --wash-1: oklch(95.5% 0.025 259.8);
  --wash-2: oklch(96% 0.02 200 / 0.7);
  --surface-2: oklch(95.8% 0.008 247.9);
  --panel-tint: oklch(100% 0 0);

  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --pill: 999px;

  --shadow-soft: 0 1px 2px oklch(21% 0.035 265 / 0.05),
    0 8px 24px -12px oklch(21% 0.035 265 / 0.12);
  --shadow-lift: 0 2px 4px oklch(21% 0.035 265 / 0.06),
    0 24px 48px -20px oklch(21% 0.035 265 / 0.22);
  --shadow-card: var(--shadow-soft);
  --shadow-btn: var(--shadow-lift);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --font: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-display: var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shell: 860px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(16% 0.02 265);
    --surface: oklch(20% 0.025 265);
    --bg-soft: oklch(20% 0.025 265);
    --bg-sunken: oklch(24% 0.03 265);
    --ink: oklch(96% 0.01 247);
    --ink-soft: oklch(72% 0.02 257);
    --ink-faint: oklch(65% 0.025 257);
    --line: oklch(28% 0.02 265);
    --line-strong: oklch(32% 0.025 265);
    --accent: oklch(72% 0.16 259.8);
    --accent-deep: oklch(82% 0.12 259.8);
    --accent-soft: oklch(28% 0.06 259.8);
    --on-accent: oklch(16% 0.02 265);
    --ok: oklch(70% 0.12 160);
    --danger: oklch(75% 0.18 27);

    --wash-1: oklch(28% 0.06 259.8);
    --wash-2: oklch(26% 0.04 200 / 0.5);
    --surface-2: oklch(28% 0.025 265);
    --panel-tint: oklch(20% 0.025 265);

    --quality-low: #00b894;
    --quality-low-soft: color-mix(in srgb, #00b894 22%, var(--surface));
    --quality-mid: #00a8ff;
    --quality-mid-soft: color-mix(in srgb, #00a8ff 22%, var(--surface));
    --quality-high: #6c5ce7;
    --quality-high-soft: color-mix(in srgb, #6c5ce7 22%, var(--surface));
    --on-quality-low: #fff;
    --on-quality-mid: #fff;
    --on-quality-high: #fff;

  /* Ban cho nen toi — xem ghi chu o khoi :root */
  --chon: #7ea2ff;
  --chon-nen: #15243c;
  --chon-chu: #7ea2ff;
  --ink-nhan: oklch(74% 0.025 257.4);
  --danger-chu: var(--danger);
  --tren-chon: #090d16;

    --shadow-soft: 0 1px 2px oklch(0% 0 0 / 0.35),
      0 8px 24px -12px oklch(0% 0 0 / 0.55);
    --shadow-lift: 0 2px 4px oklch(0% 0 0 / 0.4),
      0 24px 48px -20px oklch(0% 0 0 / 0.65);
    --shadow-card: var(--shadow-soft);
    --shadow-btn: var(--shadow-lift);
  }
}

/* Ban thu hai cua DUNG bo bien tren, cho truong hop nguoi dung TU
   CHON nen toi trong khi he dieu hanh dang de sang. CSS thuan khong
   co cach dung chung mot khoi cho ca hai truong hop — hai ban nay
   PHAI sua cung nhau. */
  :root[data-theme="dark"] {
    --bg: oklch(16% 0.02 265);
    --surface: oklch(20% 0.025 265);
    --bg-soft: oklch(20% 0.025 265);
    --bg-sunken: oklch(24% 0.03 265);
    --ink: oklch(96% 0.01 247);
    --ink-soft: oklch(72% 0.02 257);
    --ink-faint: oklch(65% 0.025 257);
    --line: oklch(28% 0.02 265);
    --line-strong: oklch(32% 0.025 265);
    --accent: oklch(72% 0.16 259.8);
    --accent-deep: oklch(82% 0.12 259.8);
    --accent-soft: oklch(28% 0.06 259.8);
    --on-accent: oklch(16% 0.02 265);
    --ok: oklch(70% 0.12 160);
    --danger: oklch(75% 0.18 27);

    --wash-1: oklch(28% 0.06 259.8);
    --wash-2: oklch(26% 0.04 200 / 0.5);
    --surface-2: oklch(28% 0.025 265);
    --panel-tint: oklch(20% 0.025 265);

    --quality-low: #00b894;
    --quality-low-soft: color-mix(in srgb, #00b894 22%, var(--surface));
    --quality-mid: #00a8ff;
    --quality-mid-soft: color-mix(in srgb, #00a8ff 22%, var(--surface));
    --quality-high: #6c5ce7;
    --quality-high-soft: color-mix(in srgb, #6c5ce7 22%, var(--surface));
    --on-quality-low: #fff;
    --on-quality-mid: #fff;
    --on-quality-high: #fff;

  /* Ban cho nen toi — xem ghi chu o khoi :root */
  --chon: #7ea2ff;
  --chon-nen: #15243c;
  --chon-chu: #7ea2ff;
  --ink-nhan: oklch(74% 0.025 257.4);
  --danger-chu: var(--danger);
  --tren-chon: #090d16;

    --shadow-soft: 0 1px 2px oklch(0% 0 0 / 0.35),
      0 8px 24px -12px oklch(0% 0 0 / 0.55);
    --shadow-lift: 0 2px 4px oklch(0% 0 0 / 0.4),
      0 24px 48px -20px oklch(0% 0 0 / 0.65);
    --shadow-card: var(--shadow-soft);
    --shadow-btn: var(--shadow-lift);
  }

*, *::before, *::after { box-sizing: border-box; }

/* Thuoc tinh `hidden` phai LUON an duoc.
   Quy tac mac dinh cua trinh duyet la `[hidden] { display: none }` — chi manh
   bang mot bo chon kieu, nen BAT KY lop nao dat `display: grid/flex/block`
   cung de len no. Khi do JS dat `el.hidden = true` ma phan tu van chiem cho.
   Da soat toan bo trang: 16 cho dinh loi nay, trong do thanh nut tren man
   hinh dang nhap admin hien ra du chua ai dang nhap.
   `!important` o day la dung cho: y nghia cua `hidden` khong phai thu de mot
   quy tac bo cuc bat ky ghi de. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ---------------- hieu ung ban mau ---------------- */

@keyframes reveal-up {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

@keyframes gradient-spin {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

@keyframes btn-shine {
  0% { left: -120%; }
  55%, 100% { left: 140%; }
}

@keyframes btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 40%, transparent), var(--shadow-lift);
  }
  50% {
    box-shadow: 0 0 0 10px color-mix(in oklch, var(--accent) 0%, transparent), var(--shadow-lift);
  }
}

/* Hero: reveal ngay khi load */
.reveal {
  opacity: 0;
  transform: translateY(12px);
}
.reveal.reveal-delay-0 { animation: reveal-up 0.7s var(--ease-out) 0s both; }
.reveal.reveal-delay-1 { animation: reveal-up 0.7s var(--ease-out) 0.08s both; }
.reveal.reveal-delay-2 { animation: reveal-up 0.7s var(--ease-out) 0.16s both; }

/* Khoi duoi: reveal khi cuon vao viewport */
.block.reveal,
.cta.reveal {
  animation: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.block.reveal.is-visible,
.cta.reveal.is-visible {
  opacity: 1;
  transform: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Be mat cua trinh duyet cung thuoc thiet ke, khong de mac dinh */
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:root { accent-color: var(--accent); caret-color: var(--accent); }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 10px;
}
::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  padding: 10px 16px; background: var(--accent); color: var(--on-accent);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 20px; }

.ico { flex: none; width: 1em; height: 1em; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- thanh tren ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 62px;
}
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  min-width: 0;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
  /* `nowrap` mot minh chi ngan xuong dong — no KHONG ngan chu tran ra ngoai
     hop. Khi thanh dau trang chat, hop nay bi ep nho lai va chu de len nut
     ben canh. Ba dong duoi bat no cat bang dau ba cham thay vi tran. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-logo {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
}
.brand-accent { color: var(--accent); }
.brand-sub { display: none; }

.top-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--bg-sunken); }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-toggle-lines {
  display: block;
  width: 20px;
  height: 14px;
  position: relative;
}
.nav-toggle-lines span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: absolute;
  left: 0;
  right: 0;
  transition: transform 0.2s var(--ease-in-out), opacity 0.15s ease, top 0.2s var(--ease-in-out);
}
.nav-toggle-lines span:nth-child(1) { top: 0; }
.nav-toggle-lines span:nth-child(2) { top: 6px; }
.nav-toggle-lines span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.lang-picker {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  min-width: 148px;
  max-width: min(100%, 180px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition:
    border-color 0.2s var(--ease-in-out),
    box-shadow 0.2s var(--ease-in-out);
}
.lang-picker:hover {
  border-color: color-mix(in oklch, var(--accent) 32%, var(--line));
  box-shadow: var(--shadow-soft);
}
.lang-picker:focus-within,
.lang-picker.is-open {
  border-color: color-mix(in oklch, var(--accent) 48%, var(--line));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lang-picker-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 0 30px 0 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.lang-picker-trigger:focus { outline: none; }
.lang-picker-flag {
  font-size: 1.12rem;
  line-height: 1;
  flex-shrink: 0;
}
.lang-picker-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-picker-chevron {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  pointer-events: none;
  transition: transform 0.2s var(--ease-in-out);
}
.lang-picker.is-open .lang-picker-chevron {
  transform: translateY(-50%) rotate(180deg);
}
.lang-picker-chevron .ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}
.lang-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-height: min(320px, 70vh);
  overflow-y: auto;
}
.lang-picker-menu[hidden] { display: none; }
.lang-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
}
.lang-picker-option:hover,
.lang-picker-option:focus {
  background: var(--bg-sunken);
  outline: none;
}
.lang-picker-option.is-selected,
.lang-picker-option[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.lang-option-flag {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.lang-option-label { min-width: 0; }
html[dir="rtl"] .top-nav { flex-direction: row-reverse; }
html[dir="rtl"] .foot-inner nav { flex-direction: row-reverse; }
html[dir="rtl"] .lang-picker-trigger { padding: 0 11px 0 30px; text-align: right; }
html[dir="rtl"] .lang-picker-chevron { right: auto; left: 9px; }
.top-link {
  padding: 7px 12px; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; border-radius: var(--pill);
  transition: color 0.15s ease, background 0.15s ease;
}
.top-link:hover { color: var(--ink); background: var(--bg-sunken); }

/* ---------------- san khau: chi co cong cu ---------------- */

.stage {
  position: relative;
  padding: 72px 0 44px;
  background:
    radial-gradient(960px 512px at 50% -192px, var(--wash-1), transparent 70%),
    radial-gradient(640px 384px at 100% 10%, var(--wash-2), transparent 70%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 6px 14px;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--pill);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.eyebrow .ico { width: 0.95em; height: 0.95em; color: var(--accent-deep); }

.stage h1 {
  margin: 24px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.6vw, 3.4rem);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
  text-wrap: balance;
}
/* Dong thu hai doi mau — chu 54px/700 la "chu lon", nguong AA la 3.0,
   do duoc 4.05 tren nen quang sang. Xem DESIGN.md muc tuong phan. */
.stage h1 span { display: block; color: var(--accent); }

.lead {
  margin: 0 0 30px; font-size: 1.06rem; color: var(--ink-soft);
  max-width: 60ch; text-wrap: pretty;
}
/* Duong ke phai chay het chieu ngang the, nen phai am ra khoi padding cua
   .panel roi dat lai padding cua chinh no. */
.formats {
  margin: 0;
  padding: 16px 20px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  background: transparent;
  border-top: none;
  border-radius: 0;
}
.formats em { font-style: normal; color: var(--ink-soft); font-weight: 600; }

/* ---------------- the cong cu ---------------- */

.panel {
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}
.panel-foot { padding: 0; }

/* Lop trong ban mau: surface-2/60, bo 1.35rem — tách vùng thao tác khỏi viền trắng */
.panel-inner {
  border-radius: 1.35rem;
  background: color-mix(in oklch, var(--surface-2) 60%, transparent);
  padding: 20px;
}
@media (min-width: 640px) {
  .panel-inner { padding: 28px; }
  .formats { padding: 16px 28px; }
}

.form { display: grid; gap: 20px; padding: 0; }

.label { display: grid; gap: 8px; }
.label > span {
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.005em; color: var(--ink-soft);
}

/* O link: icon trai | input | paste phai — grid de placeholder khong tran icon */
.field { position: relative; display: block; }
.link-field-glow {
  isolation: isolate;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 10px;
  margin-top: 2px;
  padding: 10px 12px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s var(--ease-in-out), box-shadow 0.3s var(--ease-in-out);
}
.link-field-glow::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    120deg,
    var(--accent),
    oklch(70% 0.15 200),
    var(--accent-soft),
    var(--accent)
  );
  background-size: 300% 300%;
  opacity: 1;
  z-index: -1;
  animation: gradient-spin 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.35s var(--ease-in-out);
  pointer-events: none;
}
.link-field-glow {
  border-color: color-mix(in oklch, var(--accent) 28%, var(--line));
}
.link-field-glow:focus-within {
  border-color: color-mix(in oklch, var(--accent) 60%, var(--line));
  box-shadow: var(--shadow-lift);
}
.link-field-glow:focus-within::before { opacity: 1; }
.link-field-glow .field-ico {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}
.field-slot-left {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
}
.field-paste {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s var(--ease-in-out), background 0.15s var(--ease-in-out);
}
.field-paste:hover {
  color: var(--accent-deep);
  background: var(--accent-soft);
}
.field-paste:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field-paste .ico { width: 18px; height: 18px; }
/* Chi ap absolute cho .field KHONG phai link-field-glow */
.field:not(.link-field-glow) .ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none;
}
.input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus-visible {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Thiet bi manh nhat cua quy uoc nay la o nhap chinh: no phai to hon moi thu
   khac trong bang. Chi ap cho o tren san khau — /admin cung dung .input cho
   cac o loc nho, keo het len 56px thi hang cong cu ben do cao gap doi nut. */
.stage .input,
.link-field-glow .input {
  grid-column: 2;
  min-height: 28px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 400;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  min-width: 0;
}
.link-field-glow .input::placeholder {
  font-weight: 400;
  font-style: normal;
  color: color-mix(in oklch, var(--ink-faint) 82%, transparent);
}
.field-slot-right {
  grid-column: 3;
  display: grid;
  place-items: center;
}
.stage .input:focus-visible,
.link-field-glow .input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* O chất lượng: chọn thì đảo hẳn nền-chữ, không tô nhạt */
.qualities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quality {
  position: relative;
  display: grid; gap: 3px; padding: 12px 16px;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: background 0.2s var(--ease-in-out), border-color 0.2s var(--ease-in-out),
    color 0.2s var(--ease-in-out), box-shadow 0.2s var(--ease-in-out),
    transform 0.2s var(--ease-in-out);
}
.quality strong { font-size: 0.95rem; font-weight: 600; }
.quality small {
  font-size: 0.76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.quality:hover {
  border-color: var(--chon);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.quality .tick { position: absolute; right: 13px; top: 14px; width: 15px; height: 15px; opacity: 0; }
.quality[aria-checked="true"] {
  background: var(--chon-nen);
  border-color: var(--chon);
  color: var(--chon-chu);
  box-shadow: var(--shadow-lift);
}
/* CHU dung mau dam hon vien: chu can 4.5:1 con do hoa chi can 3:1.
   Mau vien #527ef1 chi dat 3.55:1 voi chu — du cho vien, thieu cho chu. */
.quality[aria-checked="true"] strong,
.quality[aria-checked="true"] small {
  color: var(--chon-chu);
}
.quality[aria-checked="true"] small { opacity: 1; }
.quality[aria-checked="true"] .tick { opacity: 1; color: var(--chon); }

.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; font: inherit;
  font-size: 15px; font-weight: 600; text-align: center; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; border-radius: var(--pill);
  transition: background 0.15s var(--ease-in-out), transform 0.15s var(--ease-in-out),
    box-shadow 0.15s var(--ease-in-out);
}
.btn .ico { width: 16px; height: 16px; }
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover {
  background: color-mix(in oklch, var(--accent) 92%, var(--ink));
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    oklch(100% 0 0 / 0.35),
    transparent
  );
  transform: skewX(-18deg);
  animation: btn-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.btn-glow { animation: btn-pulse 2.6s ease-in-out infinite; }
.group:hover .ico-arrow { transform: translateX(2px); }
.ico-arrow {
  transition: transform 0.15s var(--ease-in-out);
}
.btn-primary:disabled {
  background: var(--line-strong); color: var(--ink-faint);
  cursor: default; box-shadow: none; transform: none;
  animation: none;
}
.btn-primary:disabled::after { animation: none; }
/* Nut tai PDF: #16a085, icon mui ten lap vo tan muot */
@keyframes download-arrow-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(5px); }
}
.btn-download {
  background: #16a085;
  color: var(--on-accent);
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s var(--ease-in-out), background 0.15s var(--ease-in-out);
}
.btn-download:hover {
  filter: none;
  background: color-mix(in srgb, #16a085 88%, white);
  transform: translateY(-2px);
}
.btn-download:active {
  transform: translateY(0);
  background: color-mix(in srgb, #16a085 92%, black);
}
.btn-download-ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  animation: download-arrow-bounce 1.1s ease-in-out infinite alternate;
  will-change: transform;
}
.btn-download-ico .ico {
  width: 18px;
  height: 18px;
}
.btn-download:active .btn-download-ico {
  animation-play-state: paused;
  transform: translateY(5px);
}
.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-strong); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }

.hint { margin: 0; font-size: 0.84rem; color: var(--ink-faint); }
.load-meta { margin-top: 18px; }

.error {
  display: none; margin: 0; padding: 11px 14px; font-size: 0.87rem;
  color: var(--danger); background: var(--bg-sunken); border-radius: var(--radius);
}
.error.is-visible { display: block; }

/* ---------------- the job ---------------- */

.jobs-list { display: grid; gap: 0; }
.jobs-list:not(:empty) { margin-top: 22px; border-top: 1px solid var(--line); }

.job-card { display: grid; gap: 9px; padding: 18px 0; border-bottom: 1px solid var(--line);
  animation: reveal-up 0.55s var(--ease-out) both;
}
.job-card:last-child { border-bottom: 0; padding-bottom: 4px; }

.status-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.status-title { font-size: 0.95rem; font-weight: 600; }
.status-meta {
  font-size: 0.85rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* Thanh tien do chay bang transform, khong phai width: animate width lam
   trinh duyet tinh lai layout moi khung hinh. Vet sang la mot lop phu rieng
   nen khong bi keo gian theo ti le. */
.progress {
  position: relative;
  height: 6px; background: var(--bg-sunken);
  border-radius: var(--pill); overflow: hidden;
}
.progress > i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(
    90deg,
    var(--progress-deep) 0%,
    var(--progress) 42%,
    var(--progress-shine) 100%
  );
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Mot khoanh khac chuyen dong duy nhat tren trang: hang dang chay */
.progress.is-active::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0 35%,
    oklch(78% 0.12 152 / 0.85) 50%,
    transparent 65% 100%
  );
  background-size: 250% 100%;
  animation: sweep 1.5s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes sweep {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

.job-id { font-size: 0.78rem; color: var(--ink-faint); }
.job-id code { font-family: var(--mono); font-size: 0.95em; }

.result { display: none; align-items: center; gap: 14px; flex-wrap: wrap; }
.result.is-visible { display: flex; }

/* ---------------- khoi noi dung ---------------- */

.block { padding: 68px 0 0; scroll-margin-top: 78px; }
.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 0 0 18px;
}
.block h2 {
  margin: 0; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.024em;
}
.block-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 0.8rem; font-weight: 500; color: var(--ink-faint);
}
.block-tag .ico { width: 14px; height: 14px; color: var(--accent-deep); }
.block h3 { margin: 0; font-size: 0.97rem; font-weight: 600; }
.block p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; max-width: 68ch; }

.seo-copy { padding: 22px 24px; }
.seo-copy h3 {
  margin: 22px 0 8px;
  font-size: 1rem; font-weight: 600; color: var(--ink);
}
.seo-copy h3:first-of-type { margin-top: 0; }
.seo-copy p { margin: 0 0 12px; max-width: none; }
.seo-copy p:last-child { margin-bottom: 0; }
.seo-copy strong { color: var(--ink); font-weight: 600; }

code {
  font-family: var(--mono); font-size: 0.87em; padding: 2px 7px;
  background: var(--bg-sunken); border-radius: 6px;
}

/* The trang bo goc lon — vo chung cua moi khoi noi dung */
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
  display: grid; grid-template-columns: 38px 1fr; gap: 4px 14px;
  align-items: start; padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.step-ico {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--pill);
}
.step-ico .ico { width: 17px; height: 17px; }
.steps h3 { display: flex; align-items: baseline; gap: 9px; }
.step-no {
  font-size: 0.86rem; font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.steps p { font-size: 0.92rem; }
/* Duong dan mau trong buoc 1 la mot chuoi khong co cho ngat. O 320px, be
   rong toi thieu cua no ep ca o luoi rong ra 323px va lam CA TRANG cuon
   ngang. Cho phep ngat giua chuoi, va go min-width mac dinh cua o luoi
   (`auto`) — chinh no la thu khong cho o co lai duoi kich thuoc noi dung. */
.steps > li, .steps > li > * { min-width: 0; }
.steps code { overflow-wrap: anywhere; }

.specs { display: grid; margin: 0 0 18px; }
.specs > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  align-items: baseline; padding: 15px 22px; border-bottom: 1px solid var(--line);
}
.specs > div:last-child { border-bottom: 0; }
.specs dt { font-size: 0.95rem; font-weight: 600; }
.specs dd { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }

/* Khu vực hướng dẫn chọn chất lượng */
.quality-section { padding-top: 56px; }
.quality-section-head {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 42rem;
}
.quality-section-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
}
.quality-section-sub {
  margin: 10px 0 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.quality-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.quality-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  height: 100%;
  padding: 26px 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.quality-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.quality-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: var(--pill);
}
.quality-card-icon .ico {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quality-card--low .quality-card-icon {
  color: var(--quality-low);
  background: var(--quality-low-soft);
}
.quality-card--mid .quality-card-icon {
  color: var(--quality-mid);
  background: var(--quality-mid-soft);
}
.quality-card--high .quality-card-icon {
  color: var(--quality-high);
  background: var(--quality-high-soft);
}
.quality-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.quality-card--low h3 { color: var(--quality-low); }
.quality-card--mid h3 { color: var(--quality-mid); }
.quality-card--high h3 { color: var(--quality-high); }
.quality-card p {
  flex: 1 1 auto;
  margin: 0;
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 16rem;
}
.quality-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--pill);
  white-space: nowrap;
}
.quality-card-badge .ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.quality-card--low .quality-card-badge {
  color: var(--quality-low);
  background: color-mix(in oklch, var(--quality-low-soft) 72%, white);
}
.quality-card--mid .quality-card-badge {
  color: var(--quality-mid);
  background: color-mix(in oklch, var(--quality-mid-soft) 72%, white);
}
.quality-card--high .quality-card-badge {
  color: var(--quality-high);
  background: color-mix(in oklch, var(--quality-high-soft) 72%, white);
}

.quality-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--line));
  border-radius: var(--radius-lg);
}
.quality-callout .ico {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  color: var(--accent-deep);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quality-callout p {
  margin: 0;
  max-width: none;
  font-size: inherit;
  color: inherit;
}

.note {
  display: flex; gap: 12px; max-width: none;
  padding: 16px 20px; font-size: 0.9rem; color: var(--ink-soft);
  background: var(--accent-soft); border-radius: var(--radius-lg);
}
.note .ico { width: 17px; height: 17px; margin-top: 3px; color: var(--accent-deep); }
.note p { max-width: 68ch; color: inherit; font-size: inherit; }

.doc-list { margin: 0; padding: 0; list-style: none; }
.doc-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; border-bottom: 1px solid var(--line);
}
.doc-list li:last-child { border-bottom: 0; }
.doc-list .ico { width: 17px; height: 17px; color: var(--ink-faint); }
.doc-name {
  flex: 1; min-width: 0; font-size: 0.93rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-name:is(a) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.doc-name:is(a):hover { color: var(--accent-deep); }
.doc-meta {
  flex: none; font-size: 0.85rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

details { border-bottom: 1px solid var(--line); }
details:last-of-type { border-bottom: 0; }
details summary {
  position: relative; padding: 16px 50px 16px 22px;
  font-size: 0.97rem; font-weight: 500;
  cursor: pointer; list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "";
  position: absolute; right: 24px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
details p { padding: 0 22px 18px; }

/* Loi moi vao khu quan tri — the dac mau nhan */
.cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 68px; padding: 28px 26px;
  color: var(--on-accent); background: var(--accent);
  border-radius: var(--radius-lg);
}
/* Cho khoi chu gian ra thay vi bi nut ep xuong, neu khong dong cuoi rot lai
   mot tu le loi */
.cta > div { flex: 1 1 340px; }
.cta h2 {
  margin: 0 0 5px; font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em;
}
.cta p { margin: 0; max-width: 48ch; font-size: 0.92rem; color: var(--on-accent); opacity: 0.92; }

/* ---------------- chan trang ---------------- */

.foot {
  margin-top: 52px; padding: 26px 0 44px;
  border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-faint);
}
.foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.foot p { margin: 0; }
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--ink-faint); text-decoration: none; }
.foot a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ---------------- trang con (hướng dẫn, FAQ, pháp lý) ---------------- */

.subpage-main { padding: 36px 0 56px; }
.subpage-content {
  padding: 28px 28px 24px;
  max-width: none;
}
.subpage-content h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.02em;
}
.subpage-cta { margin: 24px 0 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { padding: 14px 44px 14px 22px; }
.faq-list p { padding: 0 22px 18px; }
.legal-body .seo-copy h2 { margin-top: 22px; }
.legal-body .seo-copy h4 {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.legal-body .seo-copy ul,
.legal-body .seo-copy ol {
  margin: 0 0 12px;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}
.legal-body .seo-copy li { margin-bottom: 6px; }

/* ---------------- man hinh hep ---------------- */

@media (max-width: 768px) {
  .topbar-inner {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 56px;
  }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { font-size: 1rem; }
  .brand-logo { width: 24px; height: 24px; }
  .topbar-tools {
    /* Cho phep co lai. `0 0 auto` nghia la "giu nguyen 265px du man hinh
       chi rong 375px", va phan thua duoc lay tu cho cua logo. */
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0;
    order: 2;
  }
  .nav-toggle { display: grid; }
  .lang-picker {
    min-width: 0;
    max-width: min(148px, 42vw);
    flex: 1 1 auto;
  }
  .lang-picker-trigger { min-height: 38px; font-size: 0.78rem; padding-right: 28px; }
  .lang-picker-flag { font-size: 1.05rem; }
  .lang-picker-menu {
    left: auto;
    right: 0;
    min-width: 180px;
  }
  .top-nav {
    order: 3;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 35;
    display: none;
    flex-direction: column;
    gap: 2px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
  }
  .top-nav.is-open { display: flex; }
  .top-link {
    display: block;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.9rem;
    white-space: normal;
    border-radius: var(--radius);
  }
  .quality-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .link-field-glow {
    grid-template-columns: 20px minmax(0, 1fr) 30px;
    column-gap: 4px;
    padding: 8px 6px 8px 8px;
  }
  .field-slot-left {
    width: 20px;
    height: 22px;
  }
  .link-field-glow .field-ico {
    width: 16px;
    height: 16px;
  }
  .field-paste {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .field-paste .ico { width: 16px; height: 16px; }
  .link-field-glow .input {
    padding: 0;
    font-size: 14px;
  }
}

@media (max-width: 620px) {
  /* Nhan phu xuong dong rieng thay vi bop tieu de */
  .block-head { flex-wrap: wrap; gap: 4px 12px; }
  .stage { padding: 44px 0 32px; }
  .panel { padding: 6px; }
  .panel-inner { padding: 18px 16px; }
  .formats { padding: 14px 16px; }
  /* Ba mức chất lượng luôn một hàng — thu nhỏ chữ/padding thay vì xuống cột */
  .qualities { gap: 6px; }
  .quality {
    padding: 10px 6px 10px 8px;
    text-align: center;
  }
  .quality strong { font-size: 0.82rem; }
  .quality small {
    font-size: 0.68rem;
    line-height: 1.25;
    display: block;
  }
  .quality .tick { right: 5px; top: 7px; width: 12px; height: 12px; }
  .quality-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quality-card {
    padding: 16px 8px 14px;
    border-radius: var(--radius);
  }
  .quality-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  .quality-card-icon .ico { width: 20px; height: 20px; }
  .quality-card h3 { font-size: 0.88rem; margin-bottom: 6px; }
  .quality-card p {
    font-size: 0.72rem;
    line-height: 1.4;
    max-width: none;
    min-height: 2.6em;
  }
  .quality-card-badge {
    margin-top: auto;
    padding: 5px 8px;
    font-size: 0.66rem;
    gap: 4px;
  }
  .quality-card-badge .ico { width: 11px; height: 11px; }
  .quality-section-head h2 { font-size: 1.28rem; }
  .quality-section-sub { font-size: 0.84rem; }
  .quality-callout { padding: 14px 16px; font-size: 0.82rem; }
  .actions { align-items: stretch; }
  .actions .btn { width: 100%; }
  .status-row { flex-direction: column; gap: 2px; }
  .seo-copy { padding: 18px 17px; }
  .specs > div { grid-template-columns: 1fr; gap: 3px; padding: 13px 17px; }
  .doc-list li { padding: 13px 17px; }
  details summary { padding: 14px 44px 14px 17px; }
  details summary::after { right: 19px; }
  details p { padding: 0 17px 15px; }
  .note { padding: 14px 16px; }
  .cta { padding: 24px 20px; }
  .cta .btn { width: 100%; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Trang /file/{short_id} */
.file-page .subpage-main { padding-top: 24px; }
.file-card { padding: 10px; overflow: hidden; }
.file-card-inner {
  padding: 28px 28px 0;
  border-radius: 1rem;
  background: color-mix(in oklch, var(--surface-2) 60%, transparent);
  overflow: hidden;
}
.file-card-grid {
  display: grid;
  grid-template-columns: minmax(216px, 288px) minmax(0, 1fr);
  gap: 24px 28px;
  align-items: start;
}
.file-thumb-slot { min-width: 0; }
.file-main {
  min-width: 0;
  max-width: 620px;
}
.file-thumb-wrap,
.file-thumb-placeholder {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.file-thumb-wrap[hidden],
.file-thumb-placeholder[hidden] {
  display: none !important;
}
.file-thumb {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.file-thumb-placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--ink-faint);
  background: var(--bg-sunken);
}
.file-thumb-placeholder .ico { width: 52px; height: 52px; }
.file-title {
  margin: 0 0 18px;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--ink);
}
.file-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.file-meta-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.file-meta-ico-wrap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 42px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.file-meta-ico-wrap .ico {
  width: 22px;
  height: 22px;
  color: var(--accent-deep);
}
.file-meta-text { min-width: 0; }
.file-meta-text dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.3;
}
.file-meta-text dd {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.file-actions {
  display: none;
}
.file-actions.is-visible {
  display: block;
}
.file-download-panel {
  display: grid;
  gap: 14px;
}
.file-quality-block {
  display: grid;
  gap: 10px;
}
.file-quality-heading {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.file-q-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.file-q-card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  min-height: 64px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.05);
  transition: border-color 0.15s var(--ease-in-out), box-shadow 0.15s var(--ease-in-out);
}
.file-q-card:hover {
  border-color: color-mix(in oklch, var(--chon) 40%, var(--line));
}
.file-q-card[aria-checked="true"] {
  border-color: var(--chon);
  box-shadow: 0 0 0 1px var(--chon);
}
.file-q-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}
.file-q-size {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.file-q-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chon);
  color: var(--tren-chon);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s var(--ease-in-out), transform 0.15s var(--ease-in-out);
}
.file-q-card[aria-checked="true"] .file-q-check {
  opacity: 1;
  transform: scale(1);
}
.file-q-check .ico { width: 11px; height: 11px; }
.file-download-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.file-download-btn {
  flex: none;
  min-width: 172px;
  padding: 13px 26px;
  font-size: 0.98rem;
}
.file-download-meta {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.file-progress {
  display: none;
  margin-bottom: 14px;
}
.file-progress.is-visible {
  display: block;
}
.file-share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px -28px 0;
  padding: 16px 28px;
  background: oklch(0.99 0 0);
  border-top: 1px solid var(--line);
}
.file-share-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.file-share-ico .ico { width: 17px; height: 17px; }
.file-share-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  word-break: break-all;
}
.file-share-text a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.file-share-text a:hover { text-decoration: underline; }
.file-page-link { display: none; word-break: break-all; margin-top: 6px; }
.file-page-link.is-visible { display: block; }
.file-page-link a { font-weight: 600; }
/* Cau dan chiem mot dong rieng, tach khoi cau huong dan + lien ket ngay duoi.
   Dat o day de dung chung cho ca the job tren trang chu lan trang /file. */
.luu-link-dan { display: block; }

@media (max-width: 768px) {
  .file-page .subpage-main { padding: 16px 0 40px; }
  .file-card { padding: 8px; }
  .file-card-inner {
    padding: 16px 14px 0;
    border-radius: 0.875rem;
  }
  .file-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .file-thumb-slot {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .file-thumb-placeholder { min-height: 180px; }
  .file-main { max-width: none; width: 100%; }
  .file-title {
    font-size: 1.1rem;
    margin-bottom: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .file-meta {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .file-meta-cell { padding: 10px; gap: 8px; }
  .file-meta-ico-wrap { width: 36px; height: 38px; }
  .file-meta-ico-wrap .ico { width: 18px; height: 18px; }
  .file-meta-text dt { font-size: 0.7rem; }
  .file-meta-text dd { font-size: 0.88rem; }
  .file-quality-heading { font-size: 0.88rem; }
  .file-q-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .file-q-card {
    padding: 12px 14px;
    min-height: auto;
  }
  .file-download-panel { gap: 12px; }
  .file-download-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .file-download-btn {
    width: 100%;
    justify-content: center;
  }
  .file-download-meta {
    text-align: center;
    font-size: 0.82rem;
  }
  .file-share-bar {
    margin: 16px -14px 0;
    padding: 14px;
    gap: 10px;
    align-items: flex-start;
  }
  .file-share-ico { width: 32px; height: 32px; }
  .file-share-text { font-size: 0.82rem; line-height: 1.4; }
}

@media (max-width: 400px) {
  .file-meta { grid-template-columns: 1fr; }
}

/* Dong han muc duoi form tren trang chu */
.han-muc {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.han-muc.het {
  color: var(--danger);
}

/* --- Nut doi giao dien sang/toi + nut tai khoan -------------------------- */

.nut-giao-dien {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
              background 0.15s var(--ease-out);
}

.nut-giao-dien:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.nut-giao-dien .ico {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-tk {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.btn-tk:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.btn-tk .ico {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Man hinh hep: giu bieu tuong, bo chu — thanh dieu huong da chat cho */
@media (max-width: 30rem) {
  .btn-tk span {
    display: none;
  }
  .btn-tk {
    padding: 0 0.6rem;
  }
}

.nut-giao-dien:focus-visible,
.btn-tk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tat moi hoat anh trong dung khoanh khac doi sang/toi — xem nut-giao-dien.js.
   Dat o cuoi file va dung !important vi phai thang MOI khai bao transition
   khac, ke ca cac khai bao cu the hon. */
.dang-doi-giao-dien,
.dang-doi-giao-dien *,
.dang-doi-giao-dien *::before,
.dang-doi-giao-dien *::after {
  transition: none !important;
  animation: none !important;
}

/* Tai lai ban moi — hanh dong pha huy, nen de dang chu chim duoi nut tai.
   Khong dung mau canh bao: no dung, nhung nguoi tao link se can no khi ban
   luu bi loi, va mot nut do choi la ho ngai bam dung luc can nhat. */
.file-phu {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.file-phu-nut {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 1rem;
}
.file-refetch-btn {
  border: 0;
  background: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, background 0.15s ease;
}
.file-refetch-btn:hover:not(:disabled) { color: var(--ink); background: var(--bg-sunken); }
.file-refetch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-refetch-btn:disabled { opacity: 0.55; cursor: default; text-decoration: none; }
.file-refetch-msg {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-align: center;
}
.file-refetch-msg.loi { color: var(--danger); }

/* --- Hop bao loi --------------------------------------------------------
   Dung <dialog> that chu khong phai mot lop div phu: trinh duyet tu lo bay
   focus, phim Esc, va chan tuong tac voi phan con lai cua trang — ba thu ma
   ban tu lam gan nhu luon sot mot. */
.bl-hop {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.22);
}
.bl-hop::backdrop { background: rgb(0 0 0 / 0.45); }
.bl-hop form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.25rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.bl-dau { display: flex; align-items: center; gap: 0.75rem; }
.bl-dau h2 { margin: 0; font-size: 1.0625rem; flex: 1; }
.bl-dong {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  border-radius: 0.4rem;
}
.bl-dong:hover { color: var(--ink); }
.bl-dan { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.bl-nhom { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bl-nhom legend {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bl-chon {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  cursor: pointer;
  font-size: 0.9375rem;
}
.bl-chon:hover { border-color: var(--accent); }
.bl-chon:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.bl-chon:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bl-chon input { margin-top: 0.15rem; accent-color: var(--accent); }
.bl-o-chu {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--bg-soft);
  resize: vertical;
}
.bl-o-chu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bl-q { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bl-q-nut {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.bl-q-nut[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.bl-q-nut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-captcha { min-height: 78px; }
.bl-loi {
  margin: 0;
  font-size: 0.875rem;
  color: var(--danger);
}
.bl-cuoi { display: flex; justify-content: flex-end; gap: 0.6rem; }
@media (max-width: 30rem) {
  .bl-cuoi { flex-direction: column-reverse; }
  .bl-cuoi .btn { width: 100%; }
}

/* Thong bao sau khi gui bao loi. Mau OK chu khong phai mau canh bao: viec
   nguoi dung vua lam da THANH CONG — cai dang cho la he thong, khong phai
   loi cua ho. */
.file-bao {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ok);
  border-left-width: 3px;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* --- Dau trang tren man hinh hep ---------------------------------------
   O 375px, o ngon ngu hien du chu ("Tieng Viet") chiem 123px — mot phan ba
   chieu ngang — va day logo xuong con 58px. La co da du de biet dang o ngon
   ngu nao; ten day du van con trong danh sach khi mo ra, va ten tro nang
   (aria-labelledby) khong doi. */
@media (max-width: 480px) {
  .topbar-inner { padding-left: 14px; padding-right: 14px; }
  .lang-picker { max-width: none; flex: 0 0 auto; }
  .lang-picker-trigger { padding: 0 10px; min-width: 0; }
  .lang-picker-label,
  .lang-picker-chevron { display: none; }
  html[dir="rtl"] .lang-picker-trigger { padding: 0 10px; }
  /* Con lai bao nhieu thi logo lay het — va gio no cat duoc, khong tran. */
  .brand { flex: 1 1 auto; min-width: 0; }
}

/* Nut moi Dang ky / Dang nhap duoi cau bao loi han muc.
   Dat thanh nut vien chu khong phai chu gach chan: day la buoc tiep theo ma
   nguoi dung nen bam, khong phai mot ghi chu ben le. */
.error-hanh-dong {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.65rem 0 0;
}
.error-hanh-dong a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.error-hanh-dong a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.error-hanh-dong a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Link trong dong han muc duoi form */
.han-muc a {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 0.2em;
}
.han-muc.het a { color: inherit; text-decoration: underline; }