@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Design tokens (theme XANH DUONG chuan hoa theo yeu cau khach hang,
     lay cam hung tu mockup app "Traveler") ---
     Ten bien giu nguyen (--color-navy, --color-teal...) tu cac ban thiet ke
     truoc de tranh phai sua lai toan bo file, nhung GIA TRI mau da doi
     hoan toan sang 1 tong XANH DUONG duy nhat, chuan hoa (khong con nhieu
     mau ruc ro/tim/hong nhu ban truoc). */
  --color-bg: #F3F6FC;
  --color-surface: #FFFFFF;
  --color-navy: #101B3D;
  --color-navy-soft: #2563EB;
  --color-teal: #2563EB;
  --color-teal-dark: #1D4ED8;
  --color-text: #101B3D;
  /* #64748B cu chi dat ti le tuong phan 4.40 tren nen --color-bg (#F3F6FC),
     duoi nguong WCAG AA 4.5 cho chu thuong - ma day lai la mau dung cho
     chu gian giai/ghi chu, doc ngoai nang cang kho. #5A6675 dat 5.35. */
  --color-muted: #5A6675;
  --color-border: #E2E8F0;
  --color-danger: #C0392B;
  --color-danger-bg: #FDECEA;
  --color-warning-bg: #FFF3CD;
  --color-warning-text: #7A5B00;

  --gradient-header: linear-gradient(135deg, #101B3D 0%, #2563EB 100%);
  --gradient-cta: linear-gradient(90deg, #2563EB, #1D4ED8);

  /* Mau "tile" (o icon) rieng cho tung chuc nang/nhiem vu - day la noi duy
     nhat con mau sac ruc ro, con THAN THE cua card da duoc CHUAN HOA ve
     nen trang dong nhat (xem .task-card/.engine-card ben duoi). Dung dung
     1 to mau nen nhat + 1 mau icon dam, giong cach mockup Traveler to mau
     rieng cho tung o chuc nang (Hotels/Cruises/Cars/Flights). */
  --tile-blue-bg: #E1EBFE;
  --tile-blue-fg: #2563EB;
  --tile-red-bg: #FDE3E3;
  --tile-red-fg: #DC2626;
  /* 2 mau fg duoi day truoc kia chi dat ~2.85-2.88 tren nen tile tuong ung -
     duoi ca nguong 3:1 danh cho do hoa/icon. Da dam them 1 nac: xanh la
     #15803D = 4.29, ho phach #B45309 = 4.52. */
  --tile-green-bg: #DCF6E7;
  --tile-green-fg: #15803D;
  --tile-amber-bg: #FEF1D6;
  --tile-amber-fg: #B45309;
  --tile-teal-bg: #DAF6F1;
  --tile-teal-fg: #0D9488;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 3px rgba(16, 27, 61, 0.08);
  --shadow-md: 0 10px 28px rgba(16, 27, 61, 0.14);
  --shadow-cta: 0 8px 22px rgba(37, 99, 235, 0.35);

  --font-heading: 'Be Vietnam Pro', -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;

  --touch-target: 56px;
  --header-height: 64px;
  --bottom-nav-height: 66px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .card-title, .task-title, .engine-title, .verify-label {
  font-family: var(--font-heading);
}

/* =======================================================================
   HEADER — blue gradient, curved bottom corners (mobile-app style)
   ======================================================================= */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-height);
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  min-height: calc(var(--header-height) + env(safe-area-inset-top));
  background: var(--gradient-header);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  border-radius: 0 0 28px 28px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.header-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  object-fit: contain;
  display: block;
}
.header-title {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-title .accent { color: #FDE68A; }
.subtitle {
  display: none;
  color: rgba(255, 255, 255, 0.85);
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 500;
}
.header-help {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.header-help:hover { background: rgba(255, 255, 255, 0.32); }
.header-help:active { transform: scale(0.94); }

@media (min-width: 768px) {
  .app-header { height: 76px; padding: 0 32px; }
  .header-logo { width: 42px; height: 42px; }
  .header-title { font-size: 1.2rem; }
  .subtitle { display: block; }
}

/* Help / About panel (drawer trigger by header ? hoac bottom nav) */
.help-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(16, 27, 61, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.help-panel[hidden] { display: none; }
.help-panel-inner {
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: 26px 26px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(16, 27, 61, 0.22);
  animation: slideUp 0.22s ease;
}
@media (min-width: 768px) {
  .help-panel { align-items: center; }
  .help-panel-inner { border-radius: 26px; max-height: 78vh; }
}
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.help-panel-header h3 { margin: 0; font-size: 1.05rem; }
.help-close {
  border: none;
  background: var(--color-bg);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-muted);
}
.help-panel p { font-size: 0.88rem; color: var(--color-muted); margin: 0 0 12px; }
.help-panel p strong { color: var(--color-text); }

.guide-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy-soft);
  margin: 18px 0 8px;
}
.guide-section-label:first-of-type { margin-top: 2px; }

.guide-flow { margin-bottom: 4px; }
.guide-flow-svg { width: 100%; height: auto; display: block; }
.guide-flow-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.guide-flow-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.guide-flow-label strong { font-size: 0.72rem; color: var(--color-text); line-height: 1.25; }
.guide-flow-label span { font-size: 0.66rem; color: var(--color-muted); line-height: 1.3; }

@media (max-width: 480px) {
  .guide-flow-labels { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
}

.guide-task-list {
  margin: 0 0 8px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-task-list li { font-size: 0.85rem; color: var(--color-muted); line-height: 1.5; }
.guide-task-list li strong { color: var(--color-text); }

/* About panel: dung chung shell voi help-panel, chi khac noi dung ben trong */
.about-logo {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--gradient-header);
  padding: 6px;
  object-fit: contain;
  display: block;
  margin: 4px auto 14px;
}
.about-meta {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 4px;
}

/* =======================================================================
   MAIN LAYOUT
   ======================================================================= */
#app {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  #app { max-width: 720px; padding: 28px 28px calc(var(--bottom-nav-height) + 32px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1000px) {
  #app { max-width: 780px; }
}

/* =======================================================================
   STEP BAR — compact pill on mobile, full numbered stepper on desktop
   ======================================================================= */
.step-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0 0 18px;
  box-shadow: var(--shadow-sm);
}
.step-back {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-navy);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-back[hidden] { display: none; }
.step-label {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-dots {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
}
.step-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s, transform 0.2s;
}
.step-dots span.done { background: var(--color-teal); }
.step-dots span.current { background: var(--color-navy); transform: scale(1.25); }

.stepper {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--color-muted);
  counter-reset: step;
}
@media (min-width: 768px) {
  .step-bar { display: none; }
  .stepper { display: flex; }
}
.stepper li {
  flex: 1;
  text-align: center;
  padding-top: 34px;
  position: relative;
  font-weight: 600;
  word-break: break-word;
}
.stepper li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.78rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.stepper li::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
  z-index: -1;
}
.stepper li:first-child::after { left: 50%; }
.stepper li:last-child::after { right: 50%; }
.stepper li.done::before { background: var(--color-teal); border-color: var(--color-teal); color: #fff; content: '✓'; }
.stepper li.active { color: var(--color-navy); }
.stepper li.active::before {
  background: var(--gradient-header);
  border-color: transparent;
  color: #ffffff;
}

.step { display: none; }
.step.active { display: block; animation: fadeSlide 0.24s ease; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

h2 { font-size: clamp(1.08rem, 3.6vw, 1.28rem); font-weight: 700; margin: 4px 0 2px; }

/* =======================================================================
   TASK / ENGINE CARDS — CHUAN HOA: nen trang dong nhat cho moi the, chi
   con o ICON (tile) la to mau rieng theo tung chuc nang (xem .tile-*).
   Icon to hon (60px) de de nhan dang, dung 1 kieu the duy nhat xuyen suot.
   ======================================================================= */
.card-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
#step-engine .card-grid { flex-direction: column; }

.task-card, .engine-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  background: var(--color-surface);
  position: relative;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s;
  min-height: var(--touch-target);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}
.task-card:hover:not([disabled]), .engine-card:hover:not([disabled]) {
  transform: translateY(-2px);
  border-color: var(--color-navy-soft);
  box-shadow: var(--shadow-md);
}
.task-card:active:not([disabled]), .engine-card:active:not([disabled]) {
  transform: translateY(0) scale(0.99);
}
.task-card[disabled], .engine-card[disabled], .task-card.disabled, .engine-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tile mau rieng cho O ICON cua tung chuc nang - THAN card luon trang. */
.tile-blue  { background: var(--tile-blue-bg);  color: var(--tile-blue-fg); }
.tile-red   { background: var(--tile-red-bg);   color: var(--tile-red-fg); }
.tile-green { background: var(--tile-green-bg); color: var(--tile-green-fg); }
.tile-amber { background: var(--tile-amber-bg); color: var(--tile-amber-fg); }
.tile-teal  { background: var(--tile-teal-bg);  color: var(--tile-teal-fg); }

.task-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-icon svg { width: 30px; height: 30px; }

.task-info { flex: 1 1 auto; min-width: 0; }
.task-title, .engine-title {
  font-weight: 700;
  font-size: 0.96rem;
  margin: 0 0 3px;
  color: var(--color-text);
}
.task-subtitle, .engine-desc {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0;
}

.task-badge {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.task-arrow, .engine-arrow {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform 0.15s, color 0.15s;
}
.task-card:hover .task-arrow, .engine-card:hover .engine-arrow {
  transform: translateX(3px);
  color: var(--color-navy-soft);
}

/* Engine cards: icon + badge above description */
.engine-card { align-items: flex-start; }
.engine-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.engine-icon svg { width: 28px; height: 28px; }
.engine-info { flex: 1 1 auto; min-width: 0; }
.engine-header-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.engine-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--tile-blue-bg);
  color: var(--tile-blue-fg);
}

.engine-note {
  font-size: 0.82rem;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 4px;
}

.hint { color: var(--color-muted); font-size: 0.85rem; }
.upload-hint { margin-top: -2px; margin-bottom: 12px; }

/* =======================================================================
   REFERENCE INPUTS
   ======================================================================= */
.reference-inputs { margin: 14px 0; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) {
  .reference-inputs { flex-direction: row; flex-wrap: wrap; }
  .reference-inputs .field { flex: 1 1 220px; }
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--color-navy); }
.field input {
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  font-size: 18px; /* >=16px de tranh iOS Safari tu zoom khi focus */
  font-weight: 600;
  min-height: 56px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  font-family: var(--font-body);
}
.field input:focus {
  outline: none;
  border-color: var(--color-navy-soft);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field-help { color: var(--color-muted); font-size: 0.76rem; }

/* Checkbox tuy chon rieng cua task (VD Artemia: "phan loai chi tiet theo
   giai doan") - mac dinh tat, tick de bat, canh bao phan tich se lau hon. */
.field-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
}
.field-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--color-navy-soft);
  cursor: pointer;
}
.field-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.field-toggle-text strong { font-size: 0.85rem; color: var(--color-text); font-weight: 600; }
.field-toggle-text small { font-size: 0.74rem; color: var(--color-muted); }

/* =======================================================================
   CAPTURE AREA — 4:3 camera zone with placeholder state
   ======================================================================= */
.camera-area {
  position: relative;
  margin: 14px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0B1730;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.camera-preview, .capture-preview video, .capture-preview img {
  width: 100%;
  height: 100%;
  max-height: min(58vh, 460px);
  object-fit: contain;
  background: #0B1730;
  display: block;
}
.camera-preview:not([srcObject]) { display: none; }
.capture-preview { position: absolute; inset: 0; }
.capture-preview:empty { display: none; position: static; }

.camera-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 20px;
  cursor: pointer;
}
.camera-placeholder[hidden] { display: none; }
.camera-placeholder svg { width: 40px; height: 40px; opacity: 0.85; }
.camera-placeholder span { font-size: 0.85rem; font-weight: 600; }

/* =======================================================================
   CAPTURE CONTROLS — 2-tier button hierarchy (camera / upload)
   ======================================================================= */
.capture-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 6px;
}

.btn {
  padding: 14px 20px;
  border-radius: 16px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  min-height: var(--touch-target);
  touch-action: manipulation;
  font-family: var(--font-body);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:hover:not(:disabled) { border-color: var(--color-navy-soft); }

/* Tier 1 — primary CTA (open camera / capture photo / use image link) */
.btn-cta-primary {
  display: block;
  width: 100%;
  background: var(--gradient-cta);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-cta);
}
.btn-cta-primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-cta-primary, .btn-cta-secondary { font-size: 1rem; min-height: 58px; }

/* Tier 2 — secondary outlined (upload file) */
.btn-cta-secondary {
  display: block;
  width: 100%;
  background: var(--color-surface);
  color: var(--color-teal-dark);
  border: 1.5px solid var(--color-teal);
}
.btn-cta-secondary:hover:not(:disabled) { background: #EAF1FE; }

.btn-retake {
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1.5px solid var(--color-border);
}

.btn-primary { background: var(--color-teal); color: #fff; border-color: var(--color-teal); }
.btn-primary:hover:not(:disabled) { background: var(--color-teal-dark); border-color: var(--color-teal-dark); color: #fff; }

.btn-analyze {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 800;
  min-height: 60px;
  border-radius: 20px;
  background: var(--gradient-cta);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-cta);
  font-family: var(--font-heading);
}
.btn-analyze:hover:not(:disabled) { filter: brightness(1.05); }
.btn-analyze:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn-analyze:disabled { background: #CBD9F7; box-shadow: none; cursor: not-allowed; }

.spinner {
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-link {
  background: none;
  border: none;
  color: var(--color-teal-dark);
  text-decoration: underline;
  padding: 10px 0;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.btn-back { display: block; margin-bottom: 10px; color: var(--color-muted); font-weight: 700; }

/* =======================================================================
   URL INPUT — dan link anh thay vi camera/tai len
   ======================================================================= */
.url-input-box {
  margin: 4px 0 18px;
}
.url-input-box[hidden] { display: none; }
.url-input-box::before {
  content: 'hoặc';
  display: block;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 4px 0 12px;
}
.url-input-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.url-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.url-input {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
}
.url-input:focus {
  outline: none;
  border-color: var(--color-navy-soft);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.btn-use-url { width: 100%; }
@media (min-width: 600px) {
  .url-input-row { flex-direction: row; }
  .url-input { flex: 1 1 auto; }
  .btn-use-url { flex: 0 0 auto; width: auto; padding-left: 28px; padding-right: 28px; }
}

/* =======================================================================
   CAPTCHA — subtle inline row
   ======================================================================= */
.verify-box {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: #EFF4FF;
  border: 1px solid var(--color-border);
}
.verify-helper {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
}
.verify-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.verify-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-navy);
  flex: 0 0 auto;
}
.verify-code-display {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--color-navy);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verify-arrow { color: var(--color-navy-soft); font-size: 1rem; font-weight: 700; flex: 0 0 auto; }
.verify-code-input {
  flex: 1 1 90px;
  max-width: 110px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-align: center;
  font-weight: 700;
  font-family: var(--font-body);
}
.verify-code-input:focus { outline: none; border-color: var(--color-navy-soft); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.verify-refresh {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1rem;
}
.verify-refresh:hover { border-color: var(--color-navy-soft); color: var(--color-navy); }
.verify-hint { margin: 8px 0 0; font-size: 0.72rem; }

.cooldown-banner {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.85rem;
  font-weight: 600;
}

/* =======================================================================
   RESULT STEP
   ======================================================================= */
.loading { text-align: center; padding: 28px; color: var(--color-muted); font-weight: 600; }

.skeleton-block {
  height: 18px;
  border-radius: 8px;
  margin: 10px 0;
  background: linear-gradient(90deg, #E3ECFB 25%, #F1F5FD 37%, #E3ECFB 63%);
  background-size: 400% 100%;
  animation: skeletonShine 1.4s ease infinite;
}
@keyframes skeletonShine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* =======================================================================
   PHIẾU KẾT QUẢ (.result-card)
   -----------------------------------------------------------------------
   Toàn bộ kết quả nằm gọn trong 1 thẻ duy nhất: đây vừa là thứ khách chụp
   màn hình gửi đi, vừa là thứ DUY NHẤT được in (xem @media print cuối
   file). Mọi nút bấm phải nằm NGOÀI thẻ này.
   ======================================================================= */
.result-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 18px 16px 20px;
  overflow: hidden;
}

.result-card__head { margin-bottom: 14px; }
.result-card__title {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--color-text);
}
.result-card__meta {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Ảnh đã phân tích ---
   Đính kèm ảnh gốc ngay trên số liệu để khi khách đo liên tục nhiều mẫu,
   con số không bị gán nhầm sang mẫu khác. */
.result-photo { margin: 0 0 16px; }
.result-photo img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: #0F1729;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.result-photo figcaption {
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--color-muted);
  text-align: center;
}

/* --- Số liệu dạng ô lớn (bố cục lấy từ mẫu tham khảo) ---
   Con số to, đọc lướt được trong 1 giây kể cả ngoài nắng; nhãn nhỏ bên
   dưới. Mặc định 2 cột trên điện thoại. */
.result-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Lẻ 1 ô (VD chỉ có "Số lượng tôm PL") thì cho chiếm trọn chiều ngang. */
.result-stats[data-count='1'] { grid-template-columns: minmax(0, 1fr); }

.result-stat {
  background: #F5F8FD;
  border-radius: var(--radius-sm);
  padding: 14px 14px 12px;
  min-width: 0;
}
.result-stat__value {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.result-stat__num {
  font-family: var(--font-heading);
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-teal-dark);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.result-stat__unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
}
.result-stat__label {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-muted);
}

@media (min-width: 600px) {
  .result-card { padding: 24px 22px 26px; }
  /* Màn rộng hơn: tự xếp nhiều cột nhất có thể, mỗi ô tối thiểu 190px -
     tránh phải liệt kê từng data-count một. */
  .result-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .result-stat__num { font-size: 2rem; }
}

.result-note { font-size: 0.8rem; color: var(--color-muted); margin: 12px 0 0; }
.result-warning {
  font-size: 0.8rem;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-top: 14px;
}

/* --- Hàng nút xuất phiếu (ngoài .result-card) --- */
.result-export {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.result-export__btn { min-height: var(--touch-target); }
.result-export__hint,
.result-export__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.76rem;
  color: var(--color-muted);
  text-align: center;
}
.result-export__error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-align: left;
}

/* === Antibiogram (kháng sinh đồ) chi tiết từng đĩa === */
.antibiogram-wrap { margin-top: 18px; }
.antibiogram-heading { font-size: 0.95rem; margin-bottom: 8px; color: var(--color-text); }
/* Bảng 4 cột không vừa màn hình điện thoại - cho cuộn ngang thay vì bẻ chữ
   xuống dòng làm rối. tabindex trong result-view.js giúp cuộn được bằng
   bàn phím. */
.antibiogram-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}
.antibiogram-scroll .antibiogram-table { min-width: 460px; }
.antibiogram-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
}
.antibiogram-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}
.antibiogram-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.antibiogram-table tr:last-child td { border-bottom: none; }
.antibiogram-zone { font-variant-numeric: tabular-nums; font-weight: 700; }
.antibiogram-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Chip S/I/R chua CHU (khong phai icon) nen phai dat nguong 4.5:1 chu
   khong phai 3:1 - dung mau rieng dam hon --tile-*-fg (von chi dung cho
   icon). Ti le lan luot: 5.70 / 6.34 / 5.32 / 6.40. */
.antibiogram-chip--sensitive { background: var(--tile-green-bg); color: #146C34; }
.antibiogram-chip--intermediate { background: var(--tile-amber-bg); color: #92400E; }
.antibiogram-chip--resistant { background: var(--tile-red-bg); color: #B91C1C; }
.antibiogram-chip--unknown { background: #E9ECF2; color: #475569; }

.result-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-weight: 600;
}
.result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
@media (min-width: 768px) {
  .result-actions { flex-direction: row; justify-content: center; }
  .result-actions .btn { flex: 0 1 auto; }
}

/* =======================================================================
   FOOTER — hidden on mobile, minimal on desktop (nam TREN bottom nav)
   ======================================================================= */
.app-footer { display: none; }
@media (min-width: 768px) {
  .app-footer {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-muted);
    padding: 20px 16px calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom));
  }
}

/* Huy hiệu Fanpage (Tâm 13/09/2026).
   Chân trang vốn bị ẩn trên điện thoại, mà phần lớn chủ trại xem bằng điện thoại —
   nên riêng dòng Fanpage phải hiện ở mọi cỡ màn hình, nếu không thì thêm cũng như không.
   Giữ nguyên #1877F2 của Facebook: người dùng nhận ra nền tảng bằng màu trước khi đọc chữ. */
.app-footer:has(.foot-fb) { display: block; }
@media (max-width: 767px) {
  .app-footer {
    text-align: center;
    padding: 8px 16px calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom));
  }
  .app-footer p:not(:has(.foot-fb)) { display: none; }
}
.foot-fb {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--color-muted); text-decoration: none;
  font-size: 0.78rem; font-weight: 600;
}
.foot-fb:hover { text-decoration: underline; }
.foot-fb__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 5px;
  background: #1877F2; color: #fff;
  font-weight: 800; font-size: 13px; line-height: 1;
  box-shadow: 0 1px 3px rgba(24,119,242,.45);
}

/* =======================================================================
   BOTTOM NAV — menu shortcut dinh huong co dinh o day man hinh, giong
   thanh tab "Shop travel / Trips / Account" trong mockup tham khao.
   ======================================================================= */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 18px rgba(16, 27, 61, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px 8px;
  border: none;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-body);
  min-height: var(--touch-target);
  transition: color 0.15s, transform 0.1s;
}
.bottom-nav-item svg { width: 24px; height: 24px; }
.bottom-nav-item span { font-size: 0.68rem; font-weight: 600; }
.bottom-nav-item.active { color: var(--color-navy-soft); }
.bottom-nav-item:active { transform: scale(0.94); }

@media (min-width: 768px) {
  .bottom-nav { max-width: 720px; left: 50%; transform: translateX(-50%); border-radius: 20px 20px 0 0; }
}

/* Vung cham (link/button) toi thieu theo khuyen nghi Apple/Google cho
   thao tac ngon tay tren dien thoai/tablet. */
button, input[type="file"] + label, .btn, .task-card, .engine-card { -webkit-tap-highlight-color: transparent; }

/* =======================================================================
   ACCESSIBILITY — 3 lỗ hổng đo được khi đối chiếu checklist WCAG AA
   ======================================================================= */

/* 1) prefers-reduced-motion: trước đây KHÔNG có quy tắc nào, nên người bật
      "giảm chuyển động" trong cài đặt hệ điều hành vẫn phải chịu spinner +
      đếm số + các transition. Đây là mục bắt buộc trong checklist bàn giao.
      (Phần đếm số còn được xử lý riêng ở animateCountUp() trong
      result-view.js — CSS không tắt được animation chạy bằng JS.) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2) Focus thấy rõ cho điều hướng bàn phím. Trước đây cả file chỉ có 3 quy
      tắc :focus — không đủ để dùng app bằng bàn phím/phím Tab. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 3) Tương phản: đã sửa thẳng ở :root đầu file (--color-muted,
      --tile-green-fg, --tile-amber-fg) — xem ghi chú tại đó. */

/* =======================================================================
   BẢN IN / PDF
   -----------------------------------------------------------------------
   Chỉ in .result-card. Ẩn header, thanh điều hướng, nút bấm, các bước
   khác — người dùng bấm "In / PDF" là muốn tờ phiếu, không phải cả app.
   ======================================================================= */
@media print {
  @page { margin: 12mm; }

  body {
    background: #FFFFFF !important;
    padding: 0 !important;
  }

  .app-header,
  .bottom-nav,
  .stepper,
  .result-actions,
  .result-export,
  .no-print {
    display: none !important;
  }

  /* Ẩn mọi bước trừ bước kết quả. */
  .step:not(#step-result) { display: none !important; }

  main, #step-result, #result-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .result-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Ảnh vừa 1 trang, không bị cắt ngang giữa 2 trang. */
  .result-photo { break-inside: avoid; }
  .result-photo img {
    max-height: 100mm !important;
    border: 1px solid #CCCCCC !important;
  }

  .result-stat { break-inside: avoid; }
  .antibiogram-wrap { break-inside: auto; }
  .antibiogram-scroll { overflow: visible !important; }
  .antibiogram-scroll .antibiogram-table { min-width: 0 !important; }
  .antibiogram-table tr { break-inside: avoid; }

  /* Trình duyệt mặc định bỏ màu nền khi in - giữ lại để chip S/I/R và ô
     cảnh báo vẫn phân biệt được trên giấy/PDF. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* =======================================================================
   CẢNH BÁO CHẤT LƯỢNG — 2 lớp
   -----------------------------------------------------------------------
   Lý do tồn tại: AI LUÔN trả về một con số, kể cả khi ảnh mờ tịt hay mẫu
   mọc quá dày. Nó không tự báo "ảnh này không đọc được". Nếu không cảnh
   báo, người dùng nhìn con số thì không cách nào biết nó đang sai.

   Lớp 1 (.image-warnings) — trước khi gửi ảnh, do image-quality.js đo.
   Lớp 2 (.result-alert)   — sau khi có kết quả, do quality-warnings.js xét.
   ======================================================================= */
.image-warnings {
  margin: 12px 0 0;
  padding: 14px 15px;
  background: #FFF4E5;
  border: 1px solid #F0C48A;
  border-radius: var(--radius-sm);
}
.image-warning-heading {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: #8A4B00;
}
.image-warning-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.image-warning-list li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #7A4300;
}
.image-warning-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: #8A5B22;
}

/* Cảnh báo trên phiếu kết quả: đỏ và đặt NGAY DƯỚI số liệu, vì đây là thứ
   quyết định con số ở trên có dùng được hay không. Viền trái dày để tách
   khỏi ghi chú thường; không bo góc bên có viền đơn (xem quy tắc chung). */
.result-alert {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  border-radius: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #8E2A1E;
}

/* =======================================================================
   GIAO DIỆN v2 — Tâm 13/09/2026: "nhiều lỗi, giao diện xấu, không giống
   web app"
   -----------------------------------------------------------------------
   Bốn nguyên nhân thật, đã soi bằng trình duyệt trước khi sửa:

   1. Trình duyệt tự bôi tối. Trang không khai báo `color-scheme` nên Chrome
      ở chế độ tối tự đảo màu toàn trang. Đã vá bằng thẻ meta trong index.html.
      Đây là phần LỚN NHẤT của cảm giác "xấu" — không phải lỗi bố cục.
   2. Cột nội dung chốt 780px giữa màn hình rộng, hai bên bỏ trống mênh mông.
      Trông như trang giới thiệu, không như công cụ làm việc.
   3. Chữ quá nhỏ so với người dùng thật: tiêu đề thẻ 0,96rem (~15px), mô tả
      0,8rem (~13px). Người đọc chính là chủ trại và kỹ sư tuổi trung niên,
      chuẩn nội bộ yêu cầu thân bài tối thiểu 17px.
   4. Bốn bước hiển thị như chữ nhỏ rời rạc, không thấy mình đang ở đâu.

   Viết CHÈN GHI ĐÈ ở cuối file, không sửa luật cũ phía trên — cùng lối đã
   dùng cho menu.fisk.vn, để còn lùi lại được bằng cách xoá đúng khối này.
   ======================================================================= */

/* --- 0. Nền sáng mặc định, có bộ nền tối thật kèm nút chuyển ---
   Mặc định SÁNG vì công việc chính diễn ra ban ngày ngoài ao: ngoài nắng, nền
   sáng dễ đọc hơn do ánh sáng môi trường cộng thêm vào màn hình.
   Khai `color-scheme` để Chrome ngừng tự bôi tối — bản Chrome tự đảo màu rất
   bạc và không đồng nhất, đó mới là thứ trông xấu chứ không phải thiết kế. */
:root { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0E1522;
  --color-surface: #172133;
  /* --color-navy vốn là màu chữ đậm nhất, nền tối thì phải đảo thành gần trắng */
  --color-navy: #E9EEF8;
  --color-text: #E9EEF8;
  /* #9FB0C7 trên nền #0E1522 đạt khoảng 7,3:1 — thừa ngưỡng cho chữ ghi chú */
  --color-muted: #9FB0C7;
  --color-border: #2B3A54;

  /* Xanh gốc #2563EB trên nền tối chỉ khoảng 3,3:1, không đủ cho chữ.
     Sáng lên một nấc thành #60A5FA, đạt khoảng 7,0:1. */
  --color-navy-soft: #60A5FA;
  --color-teal: #60A5FA;
  --color-teal-dark: #3B82F6;

  --color-danger: #FCA5A5;
  --color-danger-bg: #3A1A16;
  --color-warning-bg: #3A2E10;
  --color-warning-text: #FCD34D;

  --gradient-header: linear-gradient(135deg, #0B1220 0%, #1D4ED8 100%);
  --gradient-cta: linear-gradient(90deg, #3B82F6, #2563EB);

  /* Ô icon: nền tối lại, chữ/icon sáng lên, giữ đúng sắc để vẫn phân biệt
     được 5 nhiệm vụ bằng màu như ở nền sáng */
  --tile-blue-bg: #16294B;  --tile-blue-fg: #7CB2FF;
  --tile-red-bg: #3A1B1B;   --tile-red-fg: #FCA5A5;
  --tile-green-bg: #123322; --tile-green-fg: #6EE7A0;
  --tile-amber-bg: #3A2C11; --tile-amber-fg: #FCD34D;
  --tile-teal-bg: #10312D;  --tile-teal-fg: #5EEAD4;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.6);
  --shadow-cta: 0 8px 22px rgba(37, 99, 235, 0.45);
}
/* Vài chỗ trong file trên còn ghi mã màu cứng, phải đảo riêng */
html[data-theme="dark"] .result-alert { color: #FFC9C0; }
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .engine-card { border-color: #35476400; border-color: #354764; }
html[data-theme="dark"] .task-subtitle,
html[data-theme="dark"] .engine-desc,
html[data-theme="dark"] .hint { color: #A9B9CE; }

/* Nút chuyển nền sáng/tối trên thanh tiêu đề */
.header-theme {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.header-theme:hover { background: rgba(255, 255, 255, 0.24); }
.header-theme:focus-visible { outline: 3px solid #F59E0B; outline-offset: 2px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* --- 1. Cỡ chữ: nâng lên mức đọc được ngoài nắng, trên điện thoại --- */
.task-title, .engine-title { font-size: 1.06rem; line-height: 1.4; }
.task-subtitle, .engine-desc { font-size: 0.92rem; line-height: 1.55; }
.task-badge { font-size: 0.78rem; padding: 5px 11px; }
.hint { font-size: 0.92rem; line-height: 1.6; }
#app h2 { font-size: 1.35rem; letter-spacing: -0.01em; }

/* --- Ô icon dùng ẢNH minh hoạ thay cho icon vector một màu ---
   Ảnh đã có sẵn nền và màu riêng nên KHÔNG tô nền tile phía sau, nếu tô sẽ
   thành hai lớp màu đá nhau. Ô to hơn ô icon vector vì ảnh có nhiều chi tiết
   hơn, nhỏ quá sẽ nhoè thành một vệt màu. */
.task-icon--img {
  width: 96px;
  height: 96px;
  background: transparent;
  border-radius: 16px;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-icon--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Nền tối: ảnh vẽ trên nền sáng nên cần một tấm lót rất nhạt để không bị
   chìm, nhưng vẫn phải mờ đủ để không thành ô trắng chói giữa nền tối. */
html[data-theme="dark"] .task-icon--img {
  background: rgba(255, 255, 255, 0.07);
}

/* Trong LƯỚI thẻ dọc, ảnh là thứ người dùng nhận dạng nhiệm vụ trước khi kịp
   đọc chữ — nên cho nó thành mảng ảnh chiếm trọn bề ngang đầu thẻ, không phải
   một ô vuông nhỏ nép bên trái. Thẻ đang thừa rất nhiều chỗ trống. */
@media (min-width: 768px) {
  #step-task .card-grid .task-card .task-icon--img {
    width: 100%;
    height: 140px;
    border-radius: 14px;
    margin-bottom: 2px;
  }
  /* Thẻ lẻ chiếm trọn bề ngang vẫn là hàng ngang, giữ ảnh vuông bên trái */
  #step-task .card-grid .task-card:last-child:nth-child(odd) .task-icon--img {
    width: 120px;
    height: 120px;
    margin-bottom: 0;
  }
}

/* Điện thoại: thẻ xếp hàng ngang, ảnh vuông bên trái nhưng phải to hơn hẳn
   mức 62px cũ thì mới nhìn ra hình vẽ gì. */
@media (max-width: 767px) {
  .task-icon--img { width: 84px; height: 84px; }
}
@media (max-width: 400px) {
  .task-icon--img { width: 72px; height: 72px; }
}

/* =======================================================================
   THẺ NHIỆM VỤ CÓ MÀU RIÊNG (Tâm 13/09/2026)
   -----------------------------------------------------------------------
   Sáu thẻ trắng giống hệt nhau xếp cạnh nhau thì mắt phải đọc chữ mới phân
   biệt được. Cho mỗi nhiệm vụ một tông màu nền và viền riêng, trùng với màu
   ô icon của chính nó, thì liếc một cái là nhận ra — nhất là với người đã
   dùng quen, họ nhớ "cái ô xanh lá" chứ không đọc lại tên mỗi lần.
   Nền để rất nhạt, đủ phân biệt mà không làm chữ khó đọc.
   ======================================================================= */
/* BỎ CẦU VỒNG (Tâm 13/09/2026: "trông quá AI").
   Gán mỗi thẻ một màu khác nhau là dấu hiệu giao diện máy sinh rõ nhất: sáu
   màu song song không mang ý nghĩa gì, chỉ nói "tôi có sáu thứ". Ứng dụng
   chuyên nghiệp dùng MỘT màu thương hiệu cộng thang xám, và chỉ dùng màu khi
   màu mang nghĩa — đang chọn, đang lỗi, đang cảnh báo.
   Sáu nhiệm vụ nay phân biệt bằng HÌNH VẼ, thứ vốn đã rất khác nhau. Màu chỉ
   còn sót lại trong chính hình vẽ và trong vạch nhấn rất mảnh. */
.task-card--tinted {
  border-width: 1px;
  background: var(--color-surface);
  border-color: var(--color-border);
}
/* Vạch nhấn mảnh, màu trung tính; chỉ ăn màu thương hiệu khi CHẠM vào */
.task-card--tinted::before { background: var(--color-border); }

/* Tông thứ sáu vẫn cần cho những chỗ còn dùng ô icon vector (bước chọn cách
   xử lý), dù thẻ nhiệm vụ đã thôi dùng màu nền. */
:root { --tile-indigo-bg: #E5E4FB; --tile-indigo-fg: #4338CA; }
html[data-theme="dark"] { --tile-indigo-bg: #1E1B44; --tile-indigo-fg: #A5B4FC; }
.tile-indigo { background: var(--tile-indigo-bg); color: var(--tile-indigo-fg); }

/* =======================================================================
   ƯU TIÊN CẢM ỨNG, KHÔNG PHẢI CHUỘT (Tâm 13/09/2026)
   -----------------------------------------------------------------------
   Sai sót của tôi: đổ hiệu ứng vào `:hover` trong khi app này dùng chủ yếu
   trên điện thoại. Màn hình cảm ứng KHÔNG có trạng thái rê chuột, nên những
   hiệu ứng đó không bao giờ chạy với người dùng thật. Tệ hơn, trên iOS trạng
   thái hover hay bị "dính" lại sau khi chạm, thẻ cứ sáng mãi tới khi chạm
   chỗ khác.
   Cách đúng: phản hồi nằm ở `:active` (đang nhấn ngón tay xuống), và mọi
   luật hover phải bọc trong `@media (hover: hover)` để chỉ áp cho thiết bị
   thật sự có chuột.
   ======================================================================= */

/* Đang nhấn ngón tay: lún xuống, viền và vạch nhấn ăn màu thương hiệu.
   Đây là phản hồi DUY NHẤT mà người dùng điện thoại thực sự nhìn thấy. */
.task-card--tinted:active {
  transform: scale(0.975);
  border-color: var(--color-teal);
  background: var(--tile-blue-bg);
}
.task-card--tinted:active::before { background: var(--color-teal); }

/* Viền nét khi điều hướng bằng bàn phím hoặc khi trình duyệt tự focus */
.task-card--tinted:focus-visible {
  border-color: var(--color-teal);
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}

/* Chỉ máy có chuột thật mới nhận hiệu ứng rê. Máy cảm ứng bỏ qua khối này. */
@media (hover: hover) and (pointer: fine) {
  .task-card--tinted:hover:not([disabled]) {
    border-color: var(--color-teal);
    box-shadow: 0 10px 26px -10px rgba(26, 122, 74, 0.5);
  }
  .task-card--tinted:hover::before { background: var(--color-teal); }
}

/* Vạch nhấn mảnh ở mép trên thẻ, chỉ 3px — đủ để thẻ có điểm neo thị giác
   mà không thành dải màu loè loẹt. */
@media (min-width: 768px) {
  #step-task .card-grid .task-card--tinted::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 3px;
    border-radius: 0;
    opacity: 1;
  }
}

/* --- 2. Thẻ nhiệm vụ: rõ thứ bậc, bấm thấy phản hồi --- */
.task-card, .engine-card { padding: 18px; gap: 16px; border-width: 1px; }
.task-card:focus-visible, .engine-card:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}
/* Vạch màu bên trái lấy đúng màu ô icon của nhiệm vụ đó — liếc là phân biệt
   được 5 nhiệm vụ, không phải đọc chữ. */
.task-card::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--color-border);
  transition: background 0.15s;
}

/* --- 3. THANH TIẾN TRÌNH NGANG TRÊN CÙNG ---
   Tâm 13/09/2026: bỏ cột bước bên trái, đưa lên thành thanh ngang dạng
   "bước 1 › bước 2 › bước 3 › bước 4".
   Lý do: điện thoại cầm đứng là cách dùng chính. Cột trái chỉ tồn tại được
   trên màn hình rộng, nghĩa là điện thoại và máy tính có hai kiểu điều hướng
   khác nhau — người dùng phải học hai lần. Thanh ngang dùng chung cho cả hai,
   lại chiếm ít chiều cao nên nhường chỗ cho khung ảnh, thứ quan trọng nhất. */
.stepper {
  display: flex !important;   /* bản gốc ẩn dưới 768px, nay dùng ở mọi cỡ */
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-size: 0.9rem;
}
/* Thanh dạng viên nén cũ trên điện thoại nay thừa, đã có thanh ngang này */
.step-bar { display: none !important; }

.stepper li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: background 0.18s, color 0.18s;
}
/* Đường nối ngang kiểu cũ bỏ đi, thay bằng mũi nhọn phân cách giữa các bước */
.stepper li::after {
  content: '';
  display: block;
  position: absolute;
  right: -1px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: transparent;
  left: auto;
}
.stepper li:last-child::after { display: none; }

/* Số thứ tự: trả về dòng chảy bình thường để nằm cạnh chữ thay vì phía trên */
.stepper li::before {
  position: static;
  transform: none;
  margin: 0;
  flex: 0 0 24px;
  width: 24px; height: 24px; line-height: 24px;
  font-size: 0.8rem;
}
.stepper li.active {
  background: var(--tile-blue-bg);
  color: var(--color-navy);
  font-weight: 700;
}
.stepper li.done { color: var(--color-teal); }

/* Điện thoại hẹp: chỉ giữ số, ẩn chữ để 4 bước vẫn vừa một hàng.
   Bước đang làm vẫn hiện chữ, vì đó là thông tin người dùng cần nhất. */
@media (max-width: 560px) {
  .stepper { font-size: 0.82rem; }
  .stepper li { padding: 11px 4px; gap: 6px; font-size: 0; }
  .stepper li.active { font-size: 0.82rem; flex: 2 1 0; }
  .stepper li::before { font-size: 0.78rem; }
}

/* --- 3a. Vùng làm việc một cột, canh giữa --- */
@media (min-width: 1080px) {
  #app {
    max-width: 980px;
    padding-bottom: 48px;
  }
  #step-task .card-grid,
  #step-engine .card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- 3b. Thẻ trong lưới phải XẾP DỌC, không giữ kiểu hàng ngang ---
   Lỗi gặp thật khi deploy lần đầu 13/09/2026: giữ nguyên kiểu hàng ngang
   (icon | chữ | nhãn | mũi tên) trong ô lưới rộng khoảng 265px thì phần chữ
   chỉ còn khoảng 90px, tiêu đề rớt xuống mỗi dòng một hai chữ, mô tả chạy
   dính vào tiêu đề. Trong lưới phải đổi sang xếp dọc: icon trên, tiêu đề,
   mô tả, rồi nhãn và mũi tên xuống đáy thẻ. */
@media (min-width: 768px) {
  #step-task .card-grid .task-card,
  #step-engine .card-grid .engine-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    min-height: 210px;
  }
  #step-task .card-grid .task-info,
  #step-engine .card-grid .engine-info {
    width: 100%;
    flex: 1 1 auto;
  }
  /* Tiêu đề và mô tả phải là khối riêng, nếu không mô tả sẽ chạy dính đuôi tiêu đề */
  #step-task .card-grid .task-title,
  #step-task .card-grid .task-subtitle,
  #step-engine .card-grid .engine-title,
  #step-engine .card-grid .engine-desc {
    display: block;
    width: 100%;
  }
  #step-task .card-grid .task-title { margin-bottom: 6px; }
  /* Thẻ engine vẫn còn nhãn và mũi tên, gom xuống chân thẻ.
     Thẻ nhiệm vụ đã bỏ cả hai (xem ghi chú trong app.js) nên không cần luật. */
  #step-engine .card-grid .engine-badge { align-self: flex-start; }
  #step-engine .card-grid .engine-arrow {
    position: absolute; right: 18px; bottom: 16px;
  }
  /* Vạch màu bên trái đổi thành vạch ngang trên đỉnh cho hợp thẻ dọc */
  #step-task .card-grid .task-card::before {
    left: 18px; right: 18px; top: 0; bottom: auto;
    width: auto; height: 4px; border-radius: 0 0 4px 4px;
  }
}

/* Giữ ĐÚNG 2 cột ở mọi cỡ màn hình lớn, không lên 3 cột.
   Lý do: có 5 nhiệm vụ. Xếp 3 cột thì hàng cuối còn 2 ô lẻ trông cụt; xếp 2
   cột thì chỉ thừa đúng 1 ô, và ô đó cho chiếm trọn bề ngang (luật ngay bên
   dưới) nên nhìn ra chủ ý chứ không phải lỗi dàn trang.
   Đây cũng là yêu cầu của Tâm 13/09/2026: "nút lẻ thì nhân đôi kích cỡ". */
#step-task .card-grid .task-card:last-child:nth-child(odd),
#step-engine .card-grid .engine-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* Thẻ chiếm trọn bề ngang thì quay lại kiểu hàng ngang cho cân, đừng để một
   khối vuông khổng lồ chỉ chứa vài chữ. */
@media (min-width: 768px) {
  #step-task .card-grid .task-card:last-child:nth-child(odd) {
    flex-direction: row;
    align-items: center;
    min-height: 96px;
  }
  #step-task .card-grid .task-card:last-child:nth-child(odd)::before {
    left: 0; right: auto; top: 14px; bottom: 14px;
    width: 4px; height: auto; border-radius: 0 4px 4px 0;
  }
  #step-task .card-grid .task-card:last-child:nth-child(odd) .task-arrow {
    position: static;
  }
}

/* --- 4. Màn hình vừa (máy tính bảng, laptop nhỏ): nới khung, 2 cột thẻ --- */
@media (min-width: 768px) and (max-width: 1079px) {
  #app { max-width: 900px; }
  #step-task .card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- 5. Thanh tiêu đề: canh theo cùng khung với nội dung --- */
@media (min-width: 1080px) {
  .app-header { padding-left: max(24px, calc((100vw - 1200px) / 2)); padding-right: max(24px, calc((100vw - 1200px) / 2)); }
}

/* --- 6. Bảng bước trên điện thoại: to và rõ hơn --- */
.step-bar { padding: 10px 14px; }
.step-label { font-size: 0.98rem; }

/* =======================================================================
   PHẦN NỘI DUNG HIỆN RÕ DƯỚI ỨNG DỤNG
   -----------------------------------------------------------------------
   Ràng buộc trình bày lấy từ _rules\QUY_TAC_VAN_PHONG_VN.md phần C: thân bài
   tối thiểu 17px, giãn dòng 1,7, dòng dài tối đa khoảng 70 ký tự. Người đọc
   chính là chủ trại và kỹ sư tuổi trung niên, đọc trên điện thoại ngoài ao.
   ======================================================================= */
.doc {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 40px 20px calc(var(--bottom-nav-height) + 32px + env(safe-area-inset-bottom));
}
.doc__inner {
  max-width: 68ch;           /* giới hạn độ dài dòng, không phải giới hạn khung */
  margin: 0 auto;
}
.doc h2 {
  font-family: var(--font-heading);
  font-size: 1.34rem;
  line-height: 1.3;
  margin: 34px 0 12px;
  color: var(--color-navy);
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  line-height: 1.35;
  margin: 22px 0 8px;
  color: var(--color-navy);
}
.doc p, .doc li {
  font-size: 1.06rem;        /* khoảng 17px */
  line-height: 1.7;
  color: var(--color-text);
}
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 10px; }
.doc a { color: var(--color-teal); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--color-teal-dark); }
.doc strong { font-weight: 700; }
/* Bảng tra: trên điện thoại cho cuộn ngang thay vì bóp chữ nhỏ lại */
.doc__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 16px;
}
.doc__table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 1.02rem;
}
.doc__table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 10px;
  font-size: 0.94rem;
  color: var(--color-muted);
  line-height: 1.55;
}
.doc__table th,
.doc__table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}
.doc__table th:first-child,
.doc__table td:first-child { text-align: left; }
.doc__table thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  border-bottom-width: 2px;
}
.doc__table tbody tr:nth-child(even) { background: var(--color-bg); }

.doc__note {
  margin-top: 28px;
  padding: 14px 16px;
  border-left: 4px solid var(--color-border);
  background: var(--color-bg);
  font-size: 0.98rem !important;
  color: var(--color-muted);
}

/* Màn hình lớn: canh phần nội dung theo cùng khung với ứng dụng phía trên */
@media (min-width: 1080px) {
  .doc { padding-left: 32px; padding-right: 32px; }
}

/* Khi xoay ngang điện thoại, người dùng đang thao tác chụp mẫu chứ không đọc
   tài liệu — ẩn đi để không phải cuộn qua một đoạn dài mới tới chân trang. */
@media (orientation: landscape) and (max-height: 560px) {
  .doc { display: none; }
}

/* Bản in chỉ in phiếu kết quả, không in tài liệu hướng dẫn */
@media print {
  .doc { display: none !important; }
}

/* --- 7. Tôn trọng cài đặt giảm chuyển động ---
   Không phải chuyện thẩm mỹ: có người bị chóng mặt hoặc buồn nôn thật khi
   nhìn chuyển động lặp. Họ đã bật cài đặt này trong máy, mình phải nghe theo. */
@media (prefers-reduced-motion: reduce) {
  .task-card, .engine-card, .task-card::before { transition: none !important; }
  .app-header::after { animation: none !important; }
  #step-task.active .task-card,
  #step-engine.active .engine-card { animation: none !important; opacity: 1; transform: none; }
  .task-card:hover .task-icon--img img { transform: none; }
  .btn-analyze:disabled[aria-busy="true"],
  .btn-analyze.is-working { animation: none !important; }
}

/* =======================================================================
   HIỆU ỨNG — Tâm 13/09/2026: "làm giao diện thật pro, ấn tượng, có thể bổ
   sung một số hiệu ứng con tôm, chuyển động như ở fisk.vn"
   -----------------------------------------------------------------------
   Nguyên tắc tự đặt cho mình ở đây: hiệu ứng phải phục vụ công việc, không
   phải để khoe. Đây là công cụ đo đếm dùng ngoài trại, người dùng đang cầm
   đĩa Petri trên tay — hoạt hình nhảy múa giữa màn hình sẽ làm phiền chứ
   không gây ấn tượng. Nên chỉ làm ba thứ:
     1. Đàn tôm bơi rất mờ ở nền thanh tiêu đề — nhận ra ngành nghề ngay,
        nhưng không tranh chú ý với nội dung.
     2. Thẻ nhiệm vụ hiện dần khi vào trang, so le nhau — mắt được dẫn theo
        thứ tự thay vì bị dội cả 5 thẻ cùng lúc.
     3. Phản hồi khi chạm vào thẻ và nút.
   Toàn bộ đều tắt khi máy bật chế độ giảm chuyển động (mục cuối cùng).
   ======================================================================= */

/* --- Đàn tôm bơi trong thanh tiêu đề --- */
.app-header { position: sticky; overflow: hidden; }
.app-header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Bóng tôm vẽ bằng SVG nội tuyến, lặp ngang. Để độ mờ rất thấp (0.13) vì
     đây là hoa văn nền, không phải hình minh hoạ. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.9'%3E%3Cpath d='M18 30c7-6 16-4 18 4 1.8 5.5-1.2 9.6-5.4 10.2'/%3E%3Cpath d='M14 28c-2.4-1.8-4.8-2.4-7.2-2.2'/%3E%3Cpath d='M96 44c6-5 13.7-3.4 15.4 3.4 1.5 4.7-1 8.2-4.6 8.7'/%3E%3Cpath d='M92.6 42.4c-2-1.5-4.1-2-6.2-1.9'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 64px;
  opacity: .13;
  animation: acSwim 38s linear infinite;
}
@keyframes acSwim { from { background-position: 0 0; } to { background-position: 160px 0; } }
/* Nội dung thanh tiêu đề phải nằm TRÊN lớp hoa văn */
.header-left, .header-actions { position: relative; z-index: 1; }

/* --- Thẻ nhiệm vụ hiện dần, so le --- */
@keyframes acRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#step-task.active .task-card,
#step-engine.active .engine-card {
  animation: acRise .42s cubic-bezier(.22, 1, .36, 1) both;
}
#step-task.active .task-card:nth-child(1) { animation-delay: .02s; }
#step-task.active .task-card:nth-child(2) { animation-delay: .08s; }
#step-task.active .task-card:nth-child(3) { animation-delay: .14s; }
#step-task.active .task-card:nth-child(4) { animation-delay: .20s; }
#step-task.active .task-card:nth-child(5) { animation-delay: .26s; }

/* --- Ảnh icon phản hồi khi CHẠM, không phải khi rê chuột ---
   Trên điện thoại chỉ có `:active`. Luật hover để riêng cho máy có chuột. */
.task-card .task-icon--img img { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.task-card:active .task-icon--img img { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .task-card:hover .task-icon--img img { transform: scale(1.06) translateY(-2px); }
}

/* --- Nhịp chờ khi đang phân tích: vòng sáng chạy quanh nút --- */
@keyframes acPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
  60%      { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
}
.btn-analyze:disabled[aria-busy="true"],
.btn-analyze.is-working { animation: acPulse 1.6s ease-out infinite; }

/* =======================================================================
   NGOÀI THỰC ĐỊA — Tâm 13/09/2026
   -----------------------------------------------------------------------
   Bối cảnh dùng thật quyết định thiết kế ở đây: người dùng đứng ngoài ao
   hoặc trong trại giống, một tay cầm điện thoại, tay kia cầm đĩa Petri hoặc
   vợt, nắng chói vào màn hình, ngón tay có thể ướt. Ba hệ quả:

   - Nút phải TO và ĐẶC MÀU. Chuẩn WCAG là 44px, nhưng đó là cho người ngồi
     trong nhà; ở đây lấy 60px cho nút chính.
   - Tương phản phải mạnh hơn mức tối thiểu 4,5:1, vì ngoài nắng độ tương
     phản thực tế nhìn thấy giảm mạnh so với trong phòng.
   - Phải dùng được khi XOAY NGANG. Chụp đĩa Petri hay buồng đếm người ta
     hay xoay ngang cho dễ canh khung, mà màn hình ngang chỉ cao chừng 360px:
     bố cục dọc sẽ đẩy nút chụp xuống dưới màn hình, phải cuộn mới bấm được.
   ======================================================================= */

/* --- Nút chính: to, đặc màu, chữ lớn --- */
.btn-cta-primary, .btn-analyze {
  min-height: 60px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 16px;
}
.btn-cta-secondary, .btn-retake {
  min-height: 54px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 16px;
}
/* Nút chính bị vô hiệu vẫn phải đọc được là nút gì, không mờ tới mức biến mất */
.btn-analyze:disabled { opacity: 0.55; }
/* Viền nét khi dùng bàn phím hoặc khi nắng làm khó nhìn con trỏ */
.btn:focus-visible, .btn-cta-primary:focus-visible, .btn-analyze:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 3px;
}

/* Trên điện thoại dựng đứng, nút hành động chiếm trọn bề ngang cho dễ trúng */
@media (max-width: 767px) {
  .capture-controls { flex-direction: column; gap: 10px; }
  .capture-controls .btn { width: 100%; }
  .btn-analyze { width: 100%; }
}

/* --- Tương phản: đậm viền và chữ phụ so với bản gốc --- */
.task-card, .engine-card { border-color: #CBD5E1; }
.task-subtitle, .engine-desc, .hint { color: #4B5563; }
.verify-label, .url-input-label { color: var(--color-navy); font-weight: 700; }

/* --- XOAY NGANG trên điện thoại ---
   Điều kiện `max-height: 560px` để chỉ bắt điện thoại nằm ngang, không dính
   máy tính bảng hay laptop (những máy đó tuy cũng "landscape" nhưng cao hơn
   nhiều và đã có bố cục hai cột riêng ở trên). */
@media (orientation: landscape) and (max-height: 560px) {
  /* Thu gọn mọi thứ không phải việc chính để nhường chiều cao cho khung ảnh */
  :root { --header-height: 48px; --bottom-nav-height: 52px; }
  .app-header { height: 48px; min-height: 48px; }
  .subtitle { display: none; }
  .stepper { display: none; }

  #app {
    max-width: none;
    padding: 10px 14px calc(var(--bottom-nav-height) + 10px);
  }

  /* Bước chụp ảnh chia đôi màn hình: khung ngắm bên trái, thao tác bên phải.
     Nhờ vậy nút "Chụp ảnh" luôn nằm trong tầm ngón cái, không phải cuộn. */
  #step-capture.active {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    column-gap: 16px;
    align-items: start;
  }
  #step-capture > h2,
  #step-capture > .btn-back { grid-column: 1 / -1; margin: 0 0 6px; }
  #step-capture > h2 { font-size: 1.1rem; }
  .camera-area { grid-column: 1; grid-row: 3 / span 8; margin: 0; }
  .camera-preview, .capture-preview img { max-height: calc(100vh - 150px); }

  /* Cột phải: gợi ý, ô nhập tham chiếu, nút bấm, mã xác nhận */
  #capture-hint, .reference-inputs, .capture-controls,
  .url-input-box, .verify-box, #cooldown-banner, #btn-analyze { grid-column: 2; }

  .capture-controls { flex-direction: column; gap: 8px; margin-top: 0; }
  .capture-controls .btn { width: 100%; }
  .btn-cta-primary, .btn-analyze { min-height: 52px; font-size: 1rem; }
  .btn-cta-secondary, .btn-retake { min-height: 46px; }

  /* Ô dán link ảnh ít dùng ngoài đồng, thu lại cho đỡ chiếm chỗ */
  .url-input-box { margin-top: 8px; }
  .url-input-label { font-size: 0.82rem; }
  .verify-hint { display: none; }

  /* Bảng trợ giúp khi xoay ngang phải cuộn được, không tràn ra ngoài */
  .help-panel-inner { max-height: calc(100vh - 24px); overflow-y: auto; }
}

/* Màn hình rất thấp khi xoay ngang: bỏ nốt thanh điều hướng dưới,
   người dùng vẫn quay lại được bằng nút của trình duyệt. */
@media (orientation: landscape) and (max-height: 430px) {
  .bottom-nav { display: none; }
  .app-footer { display: none; }
  #app { padding-bottom: 12px; }
}