/* Investigation board ("Bàn điều tra"). Engine UI only: papers are styled per case. */

.cc-page {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0c0e0c;
  -webkit-font-smoothing: antialiased;
}
html:has(.cc-page) { height: 100%; overflow: hidden; overscroll-behavior: none; }

.cc-page {
  --cc-ink: #191c19;
  --cc-paper: #fbf8f1;
  --cc-ground: #f2e9d4;
  --cc-field: #ebe5d6;
  --cc-line: rgba(25, 28, 25, 0.14);
  --cc-muted: #4b514a;
  --cc-accent: #ffda3d;
  --cc-dark: #121512;
  --cc-desk: #262b25;
  --cc-red: #c4262e;
  --cc-right: #236341;
  --cc-right-soft: #e6f0e9;
  --cc-wrong: #a02d2d;
  --cc-near: #7a5200;
  --cc-near-soft: #fbf0cf;
  --cc-top-h: 60px;
  --cc-gap: 16px;
  --cc-index-w: 252px;
  --cc-panel-w: 384px;
  --cc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cc-zoom: 1;
  color: var(--cc-ink);
  font: 400 15px/1.55 "Be Vietnam Pro", system-ui, sans-serif;
}
.cc-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: var(--cc-top-h) minmax(0, 1fr);
  overflow: hidden;
  overflow: clip;
}
.cc-shell [hidden] { display: none !important; }
.cc-shell :where(button, input, textarea) { font: inherit; color: inherit; }
.cc-shell :where(button) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-shell :where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cc-accent);
  outline-offset: 2px;
}
.cc-shell ::selection { background: var(--cc-accent); color: var(--cc-ink); }

.cc-skip {
  position: fixed;
  z-index: 60;
  top: 10px;
  left: 12px;
  padding: 10px 16px;
  background: var(--cc-accent);
  color: var(--cc-ink);
  font-weight: 600;
  transform: translateY(-220%);
}
.cc-skip:focus { transform: none; }

/* ───────── top bar ───────── */
.cc-top {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 0 12px 0 8px;
  background: #050605;
  color: var(--cc-ground);
}
.cc-top__brand { display: block; flex: none; line-height: 0; }
.cc-top__brand img { width: 112px; height: 47px; object-fit: contain; }
.cc-top__case { min-width: 0; margin-right: auto; }
.cc-top__eyebrow {
  margin: 0;
  overflow: hidden;
  color: rgba(242, 233, 212, 0.66);
  font: 500 12px/1.3 "Be Vietnam Pro", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-top__title {
  margin: 0;
  overflow: hidden;
  font: 600 24px/1.05 "Barlow Condensed", sans-serif;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-top__progress {
  flex: none;
  margin: 0;
  color: rgba(242, 233, 212, 0.75);
  font: 500 13px/1 "Be Vietnam Pro", sans-serif;
  white-space: nowrap;
}
/* The progress pill can open the conclusion panel (it replaces the toolbar button on phones). */
button.cc-top__progress { display: flex; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cc-top__progress b {
  display: inline-block;
  min-width: 40px;
  margin-left: 6px;
  padding: 6px 8px;
  background: var(--cc-accent);
  color: var(--cc-ink);
  font-weight: 700;
  text-align: center;
}
.cc-top__help {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(242, 233, 212, 0.32);
  background: transparent;
  color: var(--cc-ground);
  font-weight: 500;
}
.cc-top__help:hover { border-color: var(--cc-ground); }

/* ───────── desk ───────── */
.cc-stage { position: relative; min-height: 0; overflow: hidden; overflow: clip; }
.cc-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background-color: var(--cc-desk);
  background-image: radial-gradient(circle, rgba(242, 233, 212, 0.085) 1.1px, transparent 1.4px);
  background-size: 32px 32px;
}
.cc-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
}
.cc-viewport.is-panning,
.cc-viewport.is-grab { cursor: grabbing; }
.cc-viewport:focus-visible { outline: none; }
.cc-shell[data-input="keyboard"] .cc-viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--cc-accent); }
.cc-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}
.cc-viewport.is-moving .cc-world { will-change: transform; }

/* ───────── papers ───────── */
.cc-doc {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 600px);
  transform-origin: 50% 0;
  outline: none;
}
.cc-shell[data-tool="move"] .cc-doc { cursor: grab; }
.cc-doc.is-dragging { cursor: grabbing; }
.cc-doc__paper {
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px rgba(0, 0, 0, 0.32);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.cc-doc.is-dragging .cc-doc__paper {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.32), 0 30px 64px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px) scale(1.004);
}
.cc-doc:focus-visible .cc-doc__paper,
.cc-doc.is-flash .cc-doc__paper { outline: 4px solid var(--cc-accent); outline-offset: 6px; }
.cc-doc.is-flash .cc-doc__paper { animation: cc-flash 900ms ease-out forwards; }
@keyframes cc-flash { 0%, 60% { outline-color: var(--cc-accent); } 100% { outline-color: transparent; } }

/* The tab above each paper stays readable when zoomed out. */
.cc-doc__bar {
  --k: max(var(--cc-zoom), 0.42);
  position: absolute;
  left: 0;
  bottom: 100%;
  display: flex;
  align-items: center;
  gap: calc(4px / var(--k));
  max-width: 100%;
  height: calc(32px / var(--k));
  padding: 0 calc(4px / var(--k)) 0 calc(10px / var(--k));
  background: var(--cc-dark);
  color: var(--cc-ground);
  font: 600 calc(12.5px / var(--k)) / 1 "Be Vietnam Pro", sans-serif;
  touch-action: none;
  cursor: grab;
}
.cc-doc__grip {
  flex: none;
  width: calc(8px / var(--k));
  height: calc(14px / var(--k));
  background-image: radial-gradient(circle, rgba(242, 233, 212, 0.55) 1px, transparent 1.3px);
  background-size: calc(4px / var(--k)) calc(4px / var(--k));
}
.cc-doc__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-doc__label span { color: var(--cc-accent); margin-right: 0.35em; }
.cc-doc__actions { display: flex; flex: none; gap: calc(2px / var(--k)); margin-left: calc(6px / var(--k)); }
.cc-doc__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(5px / var(--k));
  height: calc(26px / var(--k));
  min-width: calc(26px / var(--k));
  padding: 0 calc(6px / var(--k));
  border: 0;
  background: transparent;
  color: var(--cc-ground);
  font: 600 calc(11.5px / var(--k)) / 1 "Be Vietnam Pro", sans-serif;
}
.cc-doc__btn:hover { background: rgba(242, 233, 212, 0.14); }
.cc-doc__btn svg {
  width: calc(15px / var(--k));
  height: calc(15px / var(--k));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-doc__btn[aria-pressed="true"] { background: var(--cc-accent); color: var(--cc-ink); }
.cc-doc__btn--dock { display: none; }
.cc-doc.is-folded:not(.is-docked) .cc-doc__btn--dock { display: inline-flex; background: var(--cc-accent); color: var(--cc-ink); }
.cc-doc.is-pinned .cc-doc__bar { background: var(--cc-red); }
.cc-doc.is-pinned .cc-doc__label span { color: #fff; }
.cc-doc.is-pinned .cc-doc__paper::before {
  content: attr(data-pin-label);
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  padding: 6px 12px 5px;
  border: 3px solid var(--cc-red);
  color: var(--cc-red);
  font: 700 20px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(4deg);
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.cc-doc.is-pinned .cc-doc__paper { box-shadow: 0 0 0 4px var(--cc-red), 0 14px 30px rgba(0, 0, 0, 0.32); }

/* tools on paper */
.cc-doc [data-hl].is-hl {
  background-image: linear-gradient(transparent 10%, rgba(255, 214, 10, 0.62) 10%, rgba(255, 214, 10, 0.62) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cc-shell[data-tool="hl"] .cc-viewport,
.cc-shell[data-tool="hl"] .cc-doc { cursor: crosshair; }
.cc-shell[data-tool="hl"] .cc-doc [data-hl]:hover { background-color: rgba(255, 218, 61, 0.28); }
.cc-shell[data-tool="string"] .cc-viewport,
.cc-shell[data-tool="string"] .cc-doc { cursor: crosshair; }
.cc-shell[data-tool="string"] .cc-doc [data-key]:hover,
.cc-shell[data-tool="string"] .cc-note:hover { outline: 2px dashed var(--cc-red); outline-offset: 2px; }
.cc-shell .is-string-source { outline: 3px solid var(--cc-red) !important; outline-offset: 2px; }
.cc-shell[data-tool="note"] .cc-viewport,
.cc-shell[data-tool="note"] .cc-doc { cursor: copy; }

/* choosing a statement line */
.cc-shell.is-picking .cc-doc:not([data-evidence="statement"]) { opacity: 0.28; filter: grayscale(0.6); transition: opacity 200ms; }
.cc-shell.is-picking .cc-doc[data-evidence="statement"] [data-line] { cursor: pointer; }
.cc-shell.is-picking .cc-doc[data-evidence="statement"] [data-line]:hover { background-color: rgba(196, 38, 46, 0.14); box-shadow: inset 4px 0 0 var(--cc-red); }
.cc-pickbar {
  position: absolute;
  z-index: 30;
  top: var(--cc-gap);
  left: 50%;
  display: none;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px;
  background: var(--cc-red);
  color: #fff;
  font-weight: 600;
  transform: translateX(-50%);
}
.cc-shell.is-picking .cc-pickbar { display: flex; }
.cc-pickbar button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; font-weight: 600; }

/* ───────── red strings ───────── */
.cc-strings {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90000;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.cc-string__hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; vector-effect: non-scaling-stroke; }
.cc-string__shadow { fill: none; stroke: rgba(0, 0, 0, 0.3); stroke-width: 4; transform: translate(3px, 4px); vector-effect: non-scaling-stroke; }
.cc-string__line { fill: none; stroke: #d12a33; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cc-string__pin { fill: #d12a33; stroke: #4d0b0f; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cc-string.is-selected .cc-string__line { stroke: #ff5a5a; stroke-width: 4.5; }
.cc-string.is-pending .cc-string__line { stroke-dasharray: 9 7; }
.cc-string-del {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90001;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: var(--cc-dark);
  color: #fff;
  font: 600 13px/1 "Be Vietnam Pro", sans-serif;
  transform-origin: 0 0;
  white-space: nowrap;
}

/* ───────── sticky notes ───────── */
.cc-note {
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
  background: #ffe680;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 22px rgba(0, 0, 0, 0.3);
}
.cc-note__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 4px 0 12px;
  background: rgba(60, 45, 0, 0.08);
  color: #5a4400;
  font: 600 12px/1 "Be Vietnam Pro", sans-serif;
  cursor: grab;
  touch-action: none;
}
.cc-note__del { display: grid; place-items: center; width: 28px; height: 26px; border: 0; background: transparent; color: inherit; }
.cc-note__del svg,
.cc-slot__clear svg,
.cc-sheet__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cc-note__text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 150px;
  padding: 10px 14px 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: #2a2614;
  font: 400 19px/1.35 "Patrick Hand", "Comic Sans MS", cursive;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}
.cc-note__text::placeholder { color: rgba(42, 38, 20, 0.45); }

/* ───────── floating panels ───────── */
.cc-index,
.cc-panel {
  position: absolute;
  z-index: 20;
  top: var(--cc-gap);
  display: flex;
  flex-direction: column;
  background: var(--cc-paper);
  color: var(--cc-ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.cc-index { left: var(--cc-gap); width: var(--cc-index-w); max-height: calc(100% - 112px); }
.cc-panel { right: var(--cc-gap); bottom: var(--cc-gap); width: var(--cc-panel-w); }
.cc-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px 18px;
  border-bottom: 1px solid var(--cc-line);
}
.cc-sheet__title { margin: 0; font: 600 20px/1.1 "Barlow Condensed", sans-serif; letter-spacing: 0.01em; }
.cc-sheet__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; }
.cc-sheet__close:hover { background: var(--cc-field); }
.cc-sheet__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cc-index__list { margin: 0; padding: 6px 0 8px; list-style: none; }
.cc-index__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 9px 16px 9px 18px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
}
.cc-index__item:hover { background: var(--cc-field); }
.cc-index__kind { color: var(--cc-muted); font: 600 13px/1 "Barlow Condensed", sans-serif; letter-spacing: 0.04em; }
.cc-index__item.is-pinned .cc-index__name::after {
  content: "Bằng chứng";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  background: var(--cc-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
}
.cc-index__foot { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--cc-line); color: var(--cc-muted); font-size: 12.5px; line-height: 1.5; }

/* ───────── questions ───────── */
.cc-mission { padding: 18px 20px 16px; background: var(--cc-accent); }
.cc-mission__label { margin: 0 0 4px; font: 600 12px/1.3 "Be Vietnam Pro", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.cc-mission__text { margin: 0; font: 600 26px/1.08 "Barlow Condensed", sans-serif; letter-spacing: -0.01em; }
.cc-q { padding: 20px 20px 22px; border-bottom: 1px solid var(--cc-line); }
.cc-q.is-shake { animation: cc-shake 380ms var(--cc-ease); }
@keyframes cc-shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.cc-q__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cc-q__num { font: 600 13px/1 "Be Vietnam Pro", sans-serif; }
.cc-q__state { color: var(--cc-muted); font-size: 12.5px; }
.cc-q.is-solved .cc-q__state { color: var(--cc-right); font-weight: 600; }
.cc-q__title { margin: 0 0 8px; font: 600 27px/1.08 "Barlow Condensed", sans-serif; letter-spacing: -0.015em; text-wrap: balance; }
.cc-q__prompt { margin: 0; font-size: 15px; line-height: 1.55; }
.cc-q.is-locked .cc-q__title,
.cc-q.is-locked .cc-q__prompt { color: #8a8f86; }
.cc-q__lock { margin: 14px 0 0; padding: 12px 14px; background: var(--cc-field); color: var(--cc-muted); font-size: 13.5px; }
.cc-q__help { margin: 10px 0 0; color: var(--cc-muted); font-size: 12.5px; line-height: 1.55; }
.cc-inline-pin {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  background: var(--cc-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3-1-6zM12 13v7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3-1-6zM12 13v7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cc-slots { display: grid; gap: 8px; margin-top: 16px; padding: 4px; outline: 2px dashed transparent; transition: outline-color 150ms; }
.cc-slots.is-drop-hot { outline-color: var(--cc-red); }
.cc-slot-row { display: flex; gap: 4px; }
.cc-slot {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px 10px 10px;
  border: 1.5px dashed rgba(25, 28, 25, 0.35);
  background: transparent;
  text-align: left;
  transition: background-color 150ms, border-color 150ms;
}
.cc-slot:hover:not(:disabled) { border-color: var(--cc-ink); }
.cc-slot.is-drop-hot { border-color: var(--cc-red); background: rgba(196, 38, 46, 0.08); }
.cc-slot.is-filled { border: 1.5px solid var(--cc-ink); background: var(--cc-accent); }
.cc-slot:disabled { cursor: default; }
.cc-q.is-solved .cc-slot.is-filled { border-color: var(--cc-right); background: var(--cc-right-soft); color: var(--cc-right); }
.cc-slot__letter {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--cc-ink);
  color: var(--cc-accent);
  font: 700 16px/1 "Barlow Condensed", sans-serif;
}
.cc-q.is-solved .cc-slot__letter { background: var(--cc-right); color: #fff; }
.cc-slot__name { min-width: 0; font-size: 14.5px; line-height: 1.35; }
.cc-slot:not(.is-filled) .cc-slot__name { color: var(--cc-muted); }
.cc-slot__clear { display: grid; flex: none; place-items: center; width: 44px; border: 1.5px solid var(--cc-ink); background: transparent; }
.cc-slot__clear:hover { background: var(--cc-field); }
.cc-menu { display: grid; margin: 0 0 4px; padding: 4px; background: var(--cc-dark); }
.cc-menu button { padding: 11px 12px; border: 0; background: transparent; color: var(--cc-ground); text-align: left; font-size: 14px; }
.cc-menu button:hover,
.cc-menu button:focus-visible { background: rgba(242, 233, 212, 0.12); outline-offset: -3px; }
.cc-menu button.is-chosen::after { content: "  · đã ghim"; color: var(--cc-accent); font-size: 12.5px; }

.cc-pick { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; margin-top: 16px; }
.cc-pick__out { grid-row: span 2; display: grid; place-items: center; width: 92px; height: 92px; margin: 0; background: var(--cc-field); }
.cc-pick__out span { align-self: end; color: var(--cc-muted); font-size: 12px; }
.cc-pick__out b { align-self: start; font: 700 38px/1 "Roboto Slab", Georgia, serif; letter-spacing: -0.02em; }
.cc-q.is-solved .cc-pick__out { background: var(--cc-right-soft); color: var(--cc-right); }
.cc-pick__input { display: grid; gap: 4px; color: var(--cc-muted); font-size: 12.5px; }
.cc-pick__input input {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 0 12px;
  border: 1.5px solid rgba(25, 28, 25, 0.35);
  border-radius: 0;
  background: #fff;
  color: var(--cc-ink);
  font: 600 17px/1 "Roboto Slab", Georgia, serif;
  letter-spacing: 0.08em;
}

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  transition: transform 140ms ease-out, background-color 140ms;
}
.cc-btn:active { transform: translateY(1px); }
.cc-btn--primary { background: var(--cc-accent); color: var(--cc-ink); }
.cc-btn--primary:hover { background: #ffe36b; }
.cc-btn--dark { background: var(--cc-ink); color: var(--cc-ground); }
.cc-btn--dark:hover { background: #2c312c; }
.cc-btn--ghost { padding-inline: 6px; background: transparent; color: var(--cc-ink); text-decoration: underline; text-underline-offset: 4px; }
.cc-btn:disabled { cursor: default; opacity: 0.45; }
.cc-q__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.cc-q__actions .cc-btn--primary { flex: 1 1 160px; }
.cc-q__feedback:empty { display: none; }
.cc-q__feedback { margin-top: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.cc-q__feedback.is-wrong { background: #f7e4e2; color: var(--cc-wrong); }
.cc-q__feedback.is-near { background: var(--cc-near-soft); color: var(--cc-near); }
.cc-q__feedback.is-incomplete { background: var(--cc-field); color: var(--cc-ink); }
.cc-hints { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.cc-hints:empty { display: none; }
.cc-hints li { padding: 12px 14px; border-left: 3px solid var(--cc-accent); background: var(--cc-field); font-size: 14px; line-height: 1.55; }
.cc-hints li span { display: block; margin-bottom: 2px; color: var(--cc-muted); font-size: 12px; font-weight: 600; }
.cc-q__solved { margin-top: 16px; padding: 14px 16px; background: var(--cc-right-soft); color: var(--cc-right); font-size: 14.5px; line-height: 1.55; font-weight: 500; }
.cc-final { padding: 22px 20px 26px; background: var(--cc-dark); color: var(--cc-ground); }
.cc-final p { margin: 0 0 16px; line-height: 1.55; }
.cc-final .cc-btn { width: 100%; }
.cc-final__stamp {
  display: inline-block;
  padding: 6px 12px 5px;
  border: 3px solid var(--cc-accent);
  color: var(--cc-accent);
  font: 700 22px/1 "Barlow Condensed", sans-serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

/* ───────── multiple choice and explanations ───────── */
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-choice { display: grid; gap: 6px; min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.cc-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 14px 8px 8px;
  border: 1.5px solid rgba(25, 28, 25, 0.22);
  background: #fff;
  cursor: pointer;
  transition: border-color 140ms, background-color 140ms;
}
.cc-opt:hover { border-color: var(--cc-ink); }
.cc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-opt__key {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--cc-ink);
  font: 700 16px/1 "Barlow Condensed", sans-serif;
}
.cc-opt input[type="radio"] + .cc-opt__key { border-radius: 50%; }
.cc-opt__label { font-size: 15px; line-height: 1.35; }
.cc-opt input:checked + .cc-opt__key { background: var(--cc-ink); color: var(--cc-accent); }
.cc-opt:has(input:checked) { border-color: var(--cc-ink); background: var(--cc-accent); }
.cc-opt:has(input:focus-visible) { outline: 3px solid var(--cc-ink); outline-offset: 2px; }
.cc-opt:has(input:disabled) { cursor: default; }
.cc-q.is-solved .cc-opt { border-color: var(--cc-line); background: transparent; color: var(--cc-muted); }
.cc-q.is-solved .cc-opt.is-correct { border-color: var(--cc-right); background: var(--cc-right-soft); color: var(--cc-right); font-weight: 600; }
.cc-q.is-solved .cc-opt.is-correct .cc-opt__key { border-color: var(--cc-right); background: var(--cc-right); color: #fff; }
.cc-q__solved p { margin: 0; }
.cc-q__goto { width: 100%; min-height: 42px; margin-top: 12px; }
.cc-q__explain:empty { display: none; }
.cc-q__explain { display: grid; gap: 8px; margin-top: 10px; }
.cc-explain { border: 1px solid var(--cc-line); background: #fff; }
.cc-explain summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.cc-explain summary::-webkit-details-marker { display: none; }
.cc-explain summary::after { content: "+"; flex: none; font: 600 22px/1 "Barlow Condensed", sans-serif; }
.cc-explain[open] summary::after { content: "−"; }
.cc-explain__body { padding: 0 14px 14px; font-size: 14.5px; line-height: 1.6; }
.cc-explain__body > :first-child { margin-top: 0; }
.cc-explain__body > :last-child { margin-bottom: 0; }
.cc-explain__body p,
.cc-explain__body ul { margin: 0 0 10px; }
.cc-explain__body ul { padding-left: 20px; }
.cc-explain__body h4 { margin: 16px 0 6px; font: 600 19px/1.15 "Barlow Condensed", sans-serif; }
.cc-explain__body h5 { margin: 12px 0 4px; font-size: 14.5px; }

/* ───────── paid stages ───────── */
.cc-q--paywall .cc-q__state { color: var(--cc-near); font-weight: 600; }
.cc-paywall { margin-top: 12px; }
.cc-paywall__list { display: grid; gap: 6px; margin: 14px 0 16px; padding: 0; list-style: none; }
.cc-paywall__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.45; }
.cc-paywall__list li::before {
  content: "";
  position: absolute;
  top: 0.38em;
  left: 2px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--cc-right);
  border-left: 2px solid var(--cc-right);
  transform: rotate(-45deg);
}
.cc-paywall__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 14px; }
.cc-paywall__price strong { font: 700 36px/1 "Barlow Condensed", sans-serif; letter-spacing: -0.01em; }
.cc-paywall__price span { color: var(--cc-muted); font-size: 13px; }
.cc-paywall .cc-q__feedback { margin: 0 0 12px; }
.cc-paywall__cta { width: 100%; }
.cc-paywall__note { margin: 10px 0 0; color: var(--cc-muted); font-size: 12.5px; line-height: 1.5; }
.cc-q__feedback.is-info { background: var(--cc-field); color: var(--cc-ink); }
.cc-redeem { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cc-line); }
.cc-redeem__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.cc-redeem__row { display: flex; gap: 6px; }
.cc-redeem__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid rgba(25, 28, 25, 0.35);
  border-radius: 0;
  background: #fff;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cc-redeem__input::placeholder { color: rgba(25, 28, 25, 0.4); }
.cc-code-note { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--cc-line); background: var(--cc-right-soft); font-size: 13.5px; line-height: 1.55; }
.cc-code-note strong { letter-spacing: 0.06em; user-select: all; }

/* ───────── stages on the desk ───────── */
.cc-zone {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: rgba(242, 233, 212, 0.5);
  font: 600 76px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.cc-zone b { color: var(--cc-accent); font-weight: 700; }
.cc-seal { position: absolute; top: 0; left: 0; width: 760px; }
.cc-seal__folder {
  position: relative;
  margin-top: 46px;
  padding: 58px 60px 56px;
  background: #c8a466;
  color: #2a2213;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.38);
}
.cc-seal__folder::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 280px;
  height: 46px;
  background: inherit;
  clip-path: polygon(0 100%, 7% 0, 93% 0, 100% 100%);
}
.cc-seal__stamp {
  position: absolute;
  top: 44px;
  right: 46px;
  margin: 0;
  padding: 10px 18px 8px;
  border: 5px solid var(--cc-red);
  color: var(--cc-red);
  font: 700 34px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
  transform: rotate(8deg);
}
.cc-seal.is-paid .cc-seal__stamp { border-color: var(--cc-ink); color: var(--cc-ink); }
.cc-seal__title { margin: 0 0 6px; font: 700 76px/0.95 "Barlow Condensed", sans-serif; letter-spacing: -0.01em; }
.cc-seal__count { margin: 0 0 22px; font: 600 30px/1.1 "Barlow Condensed", sans-serif; }
.cc-seal__text { max-width: 22ch; margin: 0; font-size: 30px; line-height: 1.3; }
.cc-seal .cc-btn { min-height: 76px; margin-top: 28px; padding: 0 34px; font-size: 26px; }

.cc-index__group { padding: 2px 0 8px; }
.cc-index__group + .cc-index__group { border-top: 1px solid var(--cc-line); }
.cc-index__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 12px 16px 4px 18px;
  font: 600 16px/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cc-index__meta { color: var(--cc-muted); font: 500 12px/1 "Be Vietnam Pro", sans-serif; letter-spacing: 0; text-transform: none; }
.cc-index__sub { margin: 0; padding: 0; list-style: none; }
.cc-index__group.is-locked .cc-index__head { color: var(--cc-muted); }
.cc-index__lock { margin: 0; padding: 2px 16px 6px 18px; color: var(--cc-muted); font-size: 13px; line-height: 1.45; }
.cc-lock { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: -2px; }

/* Papers that just opened drop onto the desk. `translate` composes with the inline transform. */
.cc-doc.is-arriving { animation: cc-arrive 700ms var(--cc-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cc-arrive { from { opacity: 0; translate: 0 -70px; } }

/* Highlighter marks drawn over a paper. */
.cc-mark {
  position: absolute;
  z-index: 4;
  display: block;
  background: rgba(255, 214, 10, 0.45);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cc-shell[data-tool="hl"] .cc-mark,
.cc-shell[data-tool="string"] .cc-mark { pointer-events: auto; cursor: pointer; }
.cc-shell[data-tool="hl"] .cc-mark:hover { box-shadow: inset 0 0 0 2px rgba(196, 38, 46, 0.55); }
.cc-mark.is-draft { background: rgba(255, 214, 10, 0.32); outline: 1.5px dashed rgba(122, 82, 0, 0.6); pointer-events: none !important; }

/* ───────── toolbar ───────── */
.cc-toolwrap {
  position: absolute;
  z-index: 25;
  right: calc(var(--cc-panel-w) + var(--cc-gap) * 2);
  bottom: var(--cc-gap);
  left: calc(var(--cc-index-w) + var(--cc-gap) * 2);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cc-shell.hide-index .cc-toolwrap { left: var(--cc-gap); }
.cc-shell.hide-panel .cc-toolwrap { right: var(--cc-gap); }
.cc-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 5px;
  background: var(--cc-dark);
  color: var(--cc-ground);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.cc-toolbar__sep { flex: none; width: 1px; height: 26px; margin: 0 5px; background: rgba(242, 233, 212, 0.18); }
.cc-tb {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--cc-ground);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.cc-tb:hover { background: rgba(242, 233, 212, 0.12); }
.cc-tb[aria-pressed="true"] { background: var(--cc-accent); color: var(--cc-ink); }
.cc-tb svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-tb__zoom { min-width: 58px; font-variant-numeric: tabular-nums; }
.cc-tb--label span { display: inline; }
.cc-board-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  display: grid;
  min-width: 220px;
  padding: 4px;
  background: var(--cc-dark);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.cc-board-menu button,
.cc-board-menu a { padding: 11px 14px; border: 0; background: transparent; color: var(--cc-ground); text-align: left; font-size: 14px; text-decoration: none; }
.cc-board-menu button:hover,
.cc-board-menu a:hover { background: rgba(242, 233, 212, 0.12); }
.cc-board-menu a { border-top: 1px solid rgba(242, 233, 212, 0.14); color: var(--cc-accent); }

.cc-toast {
  position: absolute;
  z-index: 35;
  bottom: 84px;
  left: 50%;
  max-width: min(520px, calc(100% - 32px));
  padding: 11px 16px;
  background: var(--cc-ground);
  color: var(--cc-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms, transform 180ms var(--cc-ease);
}
.cc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ───────── dialogs ───────── */
.cc-dialog {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: var(--cc-paper);
  color: var(--cc-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overscroll-behavior: contain;
}
.cc-dialog::backdrop { background: rgba(6, 8, 6, 0.72); }
.cc-dialog[open] { animation: cc-rise 320ms var(--cc-ease); }
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } }
.cc-dialog__inner { padding: 30px 32px 30px; }
.cc-dialog__eyebrow { margin: 0 0 6px; color: var(--cc-muted); font-size: 13px; font-weight: 600; }
.cc-dialog__title { margin: 0 0 12px; font: 600 40px/1.02 "Barlow Condensed", sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.cc-dialog__lead { margin: 0 0 22px; max-width: 58ch; font-size: 16px; line-height: 1.6; }
.cc-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cc-dialog__actions .cc-btn { flex: 1 1 200px; }

/* Extras of a paid case (easter eggs, story recap, aftermath), filled into [data-cc-extras]. */
.cc-extra { border-top: 1px solid var(--cc-line); }
.cc-extra:last-child { border-bottom: 1px solid var(--cc-line); }
.cc-extra summary { display: flex; align-items: center; gap: 14px; padding: 14px 4px; list-style: none; cursor: pointer; }
.cc-extra summary::-webkit-details-marker { display: none; }
.cc-extra summary::after { content: "+"; margin-left: auto; font: 600 26px/1 "Barlow Condensed", sans-serif; }
.cc-extra[open] summary::after { content: "−"; }
.cc-extra__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--cc-ink);
  color: var(--cc-accent);
  font: 700 20px/1 "Barlow Condensed", sans-serif;
}
.cc-extra__titles { display: grid; gap: 2px; }
.cc-extra__titles strong { font: 600 22px/1.1 "Barlow Condensed", sans-serif; }
.cc-extra__titles small { color: var(--cc-muted); font-size: 13px; }
.cc-extra__body { max-width: 68ch; padding: 0 4px 20px 58px; font-size: 15px; line-height: 1.65; }
.cc-extra__body h4 { margin: 20px 0 6px; font: 600 22px/1.15 "Barlow Condensed", sans-serif; }
.cc-extra__body h4:first-child { margin-top: 0; }
.cc-extra__body h5 { margin: 14px 0 4px; font-size: 15px; }
.cc-extra__body p,
.cc-extra__body ul { margin: 0 0 10px; }
.cc-extra__body ul { padding-left: 20px; }

@media (prefers-reduced-motion: reduce) {
  .cc-shell *,
  .cc-dialog { animation: none !important; transition: none !important; }
}

/* ───────── phones and small tablets: panels become sheets ───────── */
@media (max-width: 899px) {
  .cc-shell { --cc-top-h: 54px; }
  .cc-top { gap: 12px; }
  .cc-top__brand img { width: 84px; height: 36px; }
  .cc-top__title { font-size: 21px; }
  .cc-top__help { display: none; }
  .cc-index,
  .cc-panel {
    z-index: 32;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: min(78%, 640px);
    visibility: hidden;
    transform: translateY(104%);
    transition: transform 280ms var(--cc-ease), visibility 0s linear 280ms;
  }
  .cc-panel { max-height: 86%; }
  .cc-shell.show-index .cc-index,
  .cc-shell.show-panel .cc-panel {
    visibility: visible;
    transform: none;
    transition: transform 280ms var(--cc-ease), visibility 0s;
  }
  .cc-toolwrap { right: 8px; bottom: 8px; left: 8px; }
  .cc-toolbar { overflow-x: auto; scrollbar-width: none; }
  .cc-toolbar::-webkit-scrollbar { display: none; }
  .cc-tb { min-width: 44px; height: 44px; padding: 0 9px; }
  .cc-tb--label span,
  .cc-tb__zoom,
  .cc-toolbar [data-cc-zoom] { display: none; }
  .cc-tb--label.cc-tb--keep span { display: inline; }
  .cc-toast { bottom: 76px; }
  .cc-dialog__inner { padding: 24px 20px; }
  .cc-dialog__title { font-size: 33px; }
  .cc-extra__body { padding-left: 4px; }
}
@media (max-width: 520px) {
  /* Narrow phones: the toolbar must fit without scrolling, so "Kết luận" lives on the progress pill. */
  .cc-shell:has(button.cc-top__progress) .cc-toolbar .cc-tb--keep { display: none; }
  .cc-toolbar__sep { margin: 0 2px; }
  .cc-tb { min-width: 42px; padding: 0 8px; }
  button.cc-top__progress b::after { content: " ›"; }
}
@media (min-width: 900px) {
  .cc-sheet__close--mobile { display: none; }
  .cc-shell.hide-index .cc-index,
  .cc-shell.hide-panel .cc-panel { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cc-shell { --cc-panel-w: 352px; }
  .cc-shell:not(.show-index) { --cc-index-w: 0px; }
  .cc-shell:not(.show-index) .cc-index { display: none; }
}