:root {
  color-scheme: light;
  --bg: #f8f2e9;
  --card: #fffefa;
  --text: #171411;
  --muted: #645d54;
  --soft: #8a8175;
  --line: #ded6ca;
  --accent: #9f3232;
  --accent-hover: #882a2a;
  --accent-soft: #fff4f2;
  --shadow: rgba(52, 38, 24, 0.055);
}

* {
  box-sizing: border-box;
}


body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.95), transparent 28%),
    linear-gradient(135deg, #fbf5ec 0%, #f5ece0 100%);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body.modalOpen {
  overflow: hidden;
}

.page {
  width: min(1350px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 50px 0 64px;
}

.hero {
  margin-bottom: 30px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.hero p,
.notice,
.meta,
.source {
  color: var(--muted);
  font-weight: 400;
}

.searchBox,
.result {
  background: rgba(255, 254, 250, 0.82);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 16px 45px var(--shadow);
  backdrop-filter: blur(10px);
}

.fieldLabel {
  display: inline-block;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.queryInput {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid #d7cfc4;
  border-radius: 12px;
  padding: 18px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  background: white;
  color: var(--text);
  outline: none;
}

.queryInput:focus {
  border-color: rgba(159, 50, 50, 0.55);
  box-shadow: 0 0 0 3px rgba(159, 50, 50, 0.08);
}

.stepBlock {
  margin-top: 22px;
}

.questionText {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.choiceGrid {
  /* auto-fit vi so o tuy chon thay doi theo ngon ngu va co them muc "tat ca" */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.choiceGrid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choiceButton {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.choiceButton:hover {
  border-color: #cfc3b4;
  transform: translateY(-1px);
}

.choiceButton:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(159, 50, 50, 0.65);
  background: var(--accent-soft);
}

.choiceButton input {
  display: none;
}

.choiceButton span {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.choiceButton small {
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.35;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.button {
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition:
    background 0.16s ease,
    transform 0.16s ease,
    opacity 0.16s ease;
}

.button:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.button.secondary {
  background: #fbf6ee;
  border: 1px solid var(--line);
  color: var(--text);
}

.button.secondary:hover:not(:disabled) {
  background: #f5ede3;
}

/* Nút "Chuyển đổi câu hỏi thành từ khoá Pāḷi" đứng cạnh nút Tìm kiếm chính, nhưng dùng
   `.button.secondary` (nền kem nhạt, viền 1px) thì nhìn phẳng như một ô văn bản chứ
   không giống một nút bấm - khách phản ánh đúng chỗ này. Không đổi hẳn sang `.button`
   (nền đỏ đặc) vì nó vẫn là lối tìm PHỤ, không được lấn vai trò của nút Tìm kiếm chính.
   Viền dày hơn và tô màu accent thay vì màu viền trung tính `--line` là đủ để mắt nhận
   ra đây là một nút bấm thật, không cần đổi tới nền đặc. */
#paliKeywordBtn {
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

#paliKeywordBtn:hover:not(:disabled) {
  background: #ffe9e5;
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.button.compact {
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.results {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.resultTitle {
  font-weight: 660;
  font-size: 18px;
  margin: 14px 0 8px;
  letter-spacing: -0.018em;
}

.source {
  font-size: 16px;
  line-height: 1.45;
}

.meta {
  font-size: 14px;
  margin-top: 5px;
  color: var(--soft);
}

.pali {
  white-space: pre-wrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18.5px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  color: #211b15;
}

/* Trang đọc in mỗi khối thành một <p> riêng để neo được nút nhảy. Có reset `* {margin:0}`
   nên phải tự bù khoảng cách - trước đây cả bài là MỘT <p> và `pre-wrap` lo việc này. */
.pali + .pali {
  margin-top: 1.05em;
}

/* Tô sáng tạm thời khi vừa nhảy tới, để mắt bắt được chỗ vừa nhảy. Dùng nền chứ không
   dùng outline: outline nhảy layout trên khối nhiều dòng. */
.pali.passageHighlight {
  background: #fff2c8;
  box-shadow: 0 0 0 6px #fff2c8;
  border-radius: 3px;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.readerOutline {
  margin: 10px 0 14px;
  border: 1px solid var(--line, #e6dcc8);
  border-radius: 8px;
  background: #fffdf7;
}

.readerOutlineToggle {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--soft, #6b6152);
  text-align: left;
  cursor: pointer;
}

.readerOutlineList {
  margin: 0;
  padding: 0 12px 10px 12px;
  max-height: 42vh;
  overflow-y: auto;
  list-style: none;
}

.readerOutlineList li + li {
  border-top: 1px solid #f0e8d6;
}

.readerOutlineList a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 2px;
  color: inherit;
  text-decoration: none;
}

.readerOutlineList a:hover .readerOutlineLabel {
  text-decoration: underline;
}

.readerOutlineLabel {
  font-size: 15px;
}

.readerOutlineCount {
  flex: none;
  font-size: 12.5px;
  color: var(--soft, #6b6152);
}

.translation {
  white-space: pre-wrap;
  background: #fff8ed;
  border-left: 3px solid #d9a245;
  border-radius: 10px;
  padding: 14px 16px;
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
}

.translationMount {
  min-height: 54px;
}

.translationLoading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff8ed;
  border-left: 3px solid #d9a245;
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 16px;
  animation: softPulse 1.6s ease-in-out infinite;
}

.miniSpinner {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 3px solid #eadfce;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.translationDone {
  border-left-color: #4a8f4a;
  background: #f1faef;
  color: #286028;
  animation: none;
}

.translationLoading:has([data-translate-next-section]) {
  animation: none;
}

.sectionActions {
  margin: 16px 0 10px;
}

.sectionMount {
  margin-top: 14px;
}

.sectionViewer {
  border: 1px solid #ead9bc;
  border-radius: 14px;
  background: #fffaf1;
  padding: 18px;
}

.sectionViewerModal {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.sectionHeader h2 {
  margin: 4px 0 8px;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.sectionPassage {
  border-top: 1px solid #eadfce;
  margin-top: 18px;
  padding-top: 18px;
}

.sectionColumns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.sectionColumns .sectionPassage {
  min-width: 0;
  border: 1px solid #eadfce;
  border-radius: 14px;
  margin-top: 12px;
  padding: 16px;
  background: rgba(255, 254, 250, 0.82);
}

.readerBlock {
  position: relative;
}

.readerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.readerHeader .resultTitle,
.readerHeader .meta {
  margin-top: 0;
}

.readerBody {
  position: relative;
  max-height: none;
  overflow: visible;
  transition: max-height 0.2s ease;
}

.readerBody.collapsed {
  max-height: 62vh;
  overflow: hidden;
}

.readerBody.collapsed::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 95px;
  background: linear-gradient(to bottom, rgba(255, 250, 241, 0), #fffaf1 82%);
  pointer-events: none;
}

.sectionViewer .pali,
.sectionViewer .translation {
  margin-bottom: 0;
}

.translationNote {
  margin: 10px 0 0;
  font-style: italic;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(25, 19, 14, 0.56);
  backdrop-filter: blur(8px);
}

.modalOverlay.hidden {
  display: none;
}

.modalPanel {
  display: flex;
  flex-direction: column;
  width: min(1540px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  overflow: hidden;
  border: 1px solid rgba(222, 214, 202, 0.92);
  border-radius: 22px;
  background: #fffaf1;
  box-shadow: 0 30px 90px rgba(35, 24, 13, 0.32);
}

.modalTopbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #eadfce;
  background: rgba(255, 254, 250, 0.92);
}

.modalTopbar h2 {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.modalEyebrow {
  margin-bottom: 4px;
}

.modalTopbarActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.modalClose {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fffaf1;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.modalClose:hover {
  background: #f5ede3;
}

.modalBody {
  overflow: auto;
  padding: 20px 22px 24px;
}

.loadMoreForm {
  margin: 18px 0 0;
}

.error {
  margin-top: 14px;
  border: 1px solid #e3a5a5;
  background: #fff0f0;
  color: #8a1f1f;
  padding: 12px;
  border-radius: 8px;
  font-weight: 400;
}

.loading {
  margin-top: 22px;
  padding: 18px;
  color: var(--muted);
}

.searchLoading {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: rgba(255, 254, 250, 0.9);
  box-shadow: 0 16px 45px var(--shadow);
}

.spinner {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 3px solid #eadfce;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loadingTitle {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.loadingText {
  margin-top: 3px;
  color: var(--muted);
  font-size: 15px;
}

.aiWarning {
  display: inline-block;
  margin-top: 16px;
  border: 1px solid #d9a245;
  border-radius: 10px;
  background: #fff2d4;
  color: #6e3d00;
  padding: 10px 12px;
  font-weight: 750;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes softPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(217, 162, 69, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(217, 162, 69, 0.12);
  }
}

@media (max-width: 900px) {
  .choiceGrid,
  .choiceGrid.three {
    grid-template-columns: 1fr;
  }

  .controls {
    align-items: stretch;
    flex-direction: column;
  }

  .sectionColumns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .page {
    width: min(100% - 28px, 1350px);
    padding-top: 28px;
  }

  .searchBox,
  .result {
    padding: 18px;
  }

  .readerHeader {
    flex-direction: column;
  }

  .button.compact {
    width: 100%;
  }

  .readerBody.collapsed {
    max-height: 430px;
  }

  .modalOverlay {
    padding: 10px;
  }

  .modalPanel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }

  .modalTopbar {
    padding: 14px 16px;
  }

  .modalBody {
    padding: 14px 16px 18px;
  }
}

/* ---- Bổ sung: chuyển ngôn ngữ, chọn nguồn bản dịch, bảng thông báo, banner fallback ---- */

.heroTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.heroTopRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Nút ba gạch + lớp phủ của Navigation Drawer chỉ dùng trên mobile - ẩn hẳn ở desktop,
   không đổi bố cục hiện có. */
.heroMenuToggle,
.heroDrawerBackdrop {
  display: none;
}

.languageSwitch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.languageSwitchLabel {
  font-size: 0.85rem;
  color: #6b7280;
}

.languageSwitch select,
.sourceSelect {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d9cfc2;
  border-radius: 8px;
  background: #fffdf9;
  font-family: inherit;
  font-size: 0.95rem;
  color: inherit;
  cursor: pointer;
}

.helpLinks,
.authLinks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0;
}

.authLinks {
  margin-top: 0.3rem;
}

.helpLinkDivider {
  color: #d1d5db;
  font-size: 0.85rem;
  margin: 0 0.15rem;
}

.helpLink {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
}

.helpLink:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

.authGreeting {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.libraryActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 700px) {
  .libraryActions {
    flex-direction: column;
  }
}

.libraryEntryRow {
  display: flex;
  justify-content: flex-end;
}

.libraryEntryLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  max-width: 260px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.libraryEntryLink:hover {
  background: #ffedd5;
  border-color: #fb923c;
}

/* Mục "Tra cứu từ điển Pāḷi" nổi bật hơn vì là chức năng lớn riêng biệt. */
.libraryEntryLink--dictionary {
  background: linear-gradient(135deg, #fff1f0 0%, #ffe4e1 100%);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  white-space: pre-line;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(159, 50, 50, 0.15);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.libraryEntryLink--dictionary:hover {
  background: linear-gradient(135deg, #ffe4e1 0%, #ffd4cf 100%);
  border-color: var(--accent-hover);
  box-shadow: 0 4px 14px rgba(159, 50, 50, 0.25);
  transform: translateY(-1px);
}

.officialTranslation {
  border-left: 3px solid #b45309;
  padding-left: 0.9rem;
  margin: 0.35rem 0 0.9rem;
}

.officialLabel {
  font-size: 0.85rem;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 0.3rem;
}

.officialMissing {
  font-style: italic;
  color: #8a8073;
}

/* Ban dich cap bai kinh chi in doan dau; hai dong duoi la chu thich cho viec do. */
.officialHint {
  font-size: 0.8rem;
  font-weight: 400;
  font-style: italic;
  color: #8a8073;
  margin-left: 0.4rem;
}

.officialMore {
  margin: 0.35rem 0 0;
  margin-left: 0;
}

/* Nguon chua co ban dich: van hien ten cho biet la co ton tai, nhung bam khong duoc. */
.button.secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.noticeOverlay .modalPanel {
  max-width: 640px;
}

.noticePanel .modalTopbar h2 {
  margin: 0;
}

.noticeBody {
  white-space: pre-wrap;
  line-height: 1.7;
}

.noticeActions {
  display: flex;
  justify-content: flex-end;
  padding: 0 1.5rem 1.5rem;
}

.fallbackBanner {
  border-left: 4px solid #b45309;
  background: #fffbeb;
}

.fallbackSteps {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

/* ---- Tab chọn dịch giả trong popup toàn bộ bài kinh ---- */

.sourceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 0;
}

.sourceTab {
  border: 1px solid #d9cfc2;
  background: #fffdf9;
  color: #6b6154;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  line-height: 1.3;
}

/* Tab cua nguon chua co ban dich cho muc nay: van bam duoc de nguoi doc thay loi bao,
   nhung lam mo de phan biet voi nguon co du lieu. */
.sourceTab.unavailable {
  opacity: 0.6;
  border-style: dashed;
}

.sourceTab:hover {
  border-color: #b45309;
}

.sourceTab.active {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
  font-weight: 600;
}

/* Mỗi dịch giả một nút riêng nên hàng nút phải xuống dòng được */
.sectionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.officialTranslationMissing {
  border-left-color: #c9c0b5;
}

/* ---- Mobile: chỉ thay đổi ở màn hình nhỏ, desktop giữ nguyên ---- */

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page {
    width: 100%;
    padding:
      max(22px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(42px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .hero {
    margin-bottom: 20px;
  }

  /* Header dạng thanh: ba gạch nằm song song với tiêu đề, giống app bar. Tagline phụ
     ("Tra cứu Pali bằng AI") ẩn trên mobile để đỡ chiếm chỗ. */
  .heroTop {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    position: relative;
  }

  .eyebrow {
    display: none;
  }

  .heroMenuToggle {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 254, 250, 0.9);
    cursor: pointer;
  }

  .heroMenuToggle span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .heroMenuToggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .heroMenuToggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .heroMenuToggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Navigation Drawer: xổ ngang từ trái, có lớp phủ (backdrop) đóng khi bấm ra ngoài -
     cùng kiểu với sidebar admin, chỉ đổi màu cho hợp giao diện trang chính. */
  .heroDrawerBackdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(23, 20, 17, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .heroDrawerBackdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .heroTopRight {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 950;
    width: min(82vw, 320px);
    height: 100dvh;
    margin: 0;
    padding:
      max(20px, env(safe-area-inset-top))
      18px
      max(20px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--card);
    box-shadow: 10px 0 30px rgba(23, 20, 17, 0.25);
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    align-items: stretch;
  }

  .heroTopRight.open {
    transform: translateX(0);
  }

  body.heroMenuOpen {
    overflow: hidden;
  }

  /* Item flex mặc định không co dưới độ rộng nội dung (min-width: auto), nên ellipsis ở
     dưới sẽ vô tác dụng nếu thiếu dòng này - khối tiêu đề sẽ đẩy tràn nút ba gạch ra ngoài
     thay vì tự cắt bớt chữ. */
  .heroTitleBlock {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    text-align: center;
    z-index: 10;
    pointer-events: none;
  }

  /* Nhỏ hơn hẳn bản trước - giờ tiêu đề đứng chung hàng với nút ba gạch (không còn tự
     chiếm cả hàng như khi chưa có drawer), phải đủ nhỏ để không xuống dòng. */
  .hero h1 {
    font-size: clamp(19px, 5.5vw, 24px);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero > p {
    margin-bottom: 0;
    line-height: 1.55;
  }

  .sourceSelect {
    min-height: 44px;
    max-width: 68%;
    font-size: 16px;
  }

  /* Nội dung Drawer dựng lại thành DANH SÁCH MỤC MENU chuẩn mobile (mỗi mục một hàng đầy
     đủ chiều rộng, có icon, viền phân cách) thay vì các liên kết chữ nhỏ nối "|" như bản
     desktop - bản đó bê nguyên sang mobile nhìn rối, chữ bé, khó bấm trúng. Mọi rule ở đây
     đều CHỈ áp trong `.heroTopRight` để không đụng `.helpLink` dùng lại ở `saved.html`
     (nút "← Tipiṭaka AI Search", không nằm trong drawer nào). */
  .heroTopRight {
    gap: 0;
  }

  .heroTopRight .authGreeting {
    display: block;
    padding: 2px 4px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
  }

  .heroTopRight .authLinks,
  .heroTopRight .helpLinks {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
  }

  .heroTopRight .helpLink {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
  }

  .heroTopRight .helpLink[data-nav-icon]::before {
    content: attr(data-nav-icon);
    margin-right: 10px;
    font-size: 1.05rem;
  }

  .heroTopRight .helpLinkDivider {
    display: none;
  }

  .heroTopRight .languageSwitch {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 4px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }

  .heroTopRight .languageSwitchLabel {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
  }

  .heroTopRight .languageSwitchLabel[data-nav-icon]::before {
    content: attr(data-nav-icon);
    margin-right: 10px;
    font-size: 1.05rem;
  }

  .heroTopRight .languageSwitch select {
    min-height: 44px;
    max-width: 68%;
    margin-left: auto;
    font-size: 16px;
  }

  .heroTopRight .libraryEntryRow {
    justify-content: center;
    width: 100%;
    margin-top: 18px;
  }

  .heroTopRight .libraryEntryLink {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    line-height: 1.35;
    padding: 12px;
    border-radius: 12px;
  }

  .searchBox,
  .result {
    padding: 16px;
    border-radius: 14px;
  }

  .queryInput {
    min-height: 120px;
    padding: 14px;
    font-size: 16px;
  }

  .stepBlock {
    margin-top: 18px;
  }

  .questionText {
    font-size: 18px;
    line-height: 1.35;
  }

  .choiceGrid,
  .choiceGrid.three {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .choiceButton {
    min-height: 0;
    gap: 5px;
    padding: 14px;
  }

  .choiceButton span {
    font-size: 18px;
  }

  .choiceButton small {
    font-size: 14px;
  }

  .controls {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .controls .button,
  .loadMoreForm .button,
  .noticeActions .button {
    width: 100%;
    min-height: 46px;
  }

  .resultTitle {
    font-size: 17px;
    line-height: 1.35;
  }

  .source,
  .notice,
  .meta,
  .officialLabel,
  .translation,
  .pali {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .source {
    font-size: 14px;
  }

  .pali {
    font-size: 17px;
    line-height: 1.62;
  }

  .translation,
  .translationLoading {
    padding: 12px 13px;
    font-size: 16px;
  }

  .officialTranslation {
    padding-left: 0.7rem;
  }

  .officialHint {
    display: block;
    margin: 4px 0 0;
  }

  .sectionActions {
    flex-direction: column;
    align-items: stretch;
  }

  .sectionActions .button {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    white-space: normal;
  }

  .modalOverlay {
    align-items: stretch;
    padding: 0;
  }

  .modalPanel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .modalTopbar {
    position: relative;
    flex: 0 0 auto;
    align-items: center;
    padding:
      max(12px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      12px
      max(14px, env(safe-area-inset-left));
  }

  .modalTopbar h2 {
    font-size: 20px;
  }

  .modalClose {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .modalBody {
    padding:
      14px
      max(14px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }

  .sectionHeader h2 {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

  .sectionColumns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sectionColumns .sectionPassage {
    padding: 13px;
    border-radius: 12px;
  }

  .readerHeader {
    flex-direction: column;
    gap: 10px;
  }

  .button.compact {
    width: 100%;
    min-height: 44px;
  }

  .readerBody.collapsed {
    max-height: 55dvh;
  }

  .sourceTabs {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 -13px 12px;
    padding: 4px 13px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .sourceTabs::-webkit-scrollbar {
    display: none;
  }

  .sourceTab {
    min-height: 42px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sourceTab .officialHint {
    display: inline;
    margin-left: 4px;
  }

  .noticeOverlay {
    align-items: center;
    padding: 12px;
  }

  .noticeOverlay .modalPanel {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 24px);
    border: 1px solid var(--line);
    border-radius: 16px;
  }

  .noticeActions {
    padding:
      0 14px max(14px, env(safe-area-inset-bottom));
    gap: 12px;
  }
}

.sourceAction {
  margin-top: 0.65rem;
}

.sourceAction .button {
  white-space: normal;
  text-align: left;
}

@media (max-width: 420px) {
  .page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .searchBox,
  .result {
    padding: 13px;
  }

  .sectionColumns .sectionPassage {
    padding: 11px;
  }
}



/* Tóm tắt AI cho trích đoạn ngắn ở thẻ kết quả - dùng lại đúng class .aiSummaryContainer
   của popup "Xem toàn bộ bài kinh" nhưng margin gọn hơn để vừa trong .result. */
.excerptSummary {
  margin: 14px 0 0;
  padding: 1rem 1.1rem;
}

.excerptSummary .aiSummaryHeader {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.resultSaveBar {
  margin-top: 10px;
  min-height: 1.2em;
}

.resultSaveStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #286028;
}

.resultSaveStatus:empty {
  display: none;
}

/* AI Summary Styles */
.aiSummaryContainer {
  background: #fdf8f6;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  margin: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.aiSummaryHeader {
  font-size: 1.15rem;
  font-weight: 700;
  color: #9a3412;
  margin-bottom: 1rem;
  border-bottom: 1px solid #fdba74;
  padding-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aiSummaryList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.aiSummaryList li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.5rem;
}
.aiSummaryList li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: -2px;
  color: #fb923c;
  font-size: 1.5rem;
  line-height: 1;
}
.summaryText {
  font-size: 1.05rem;
  color: #374151;
  line-height: 1.6;
  font-weight: 500;
}
.summaryJumpBtn {
  margin-left: 8px; vertical-align: middle;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.summaryJumpBtn::before {
  content: '→';
  font-size: 1.1em;
}
.summaryJumpBtn:hover {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fb923c;
  transform: translateX(2px);
}

/* Tooltip cho mobile menu */
.mobileMenuHint {
  display: none; /* mặc định ẩn trên desktop */
  position: absolute;
  top: 100%;
  left: 10px; top: calc(100% + 5px);
  background-color: var(--accent);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 10px;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: bounceHint 2s infinite;
}

.mobileMenuHint::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 16px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--accent) transparent;
}

.mobileMenuHint.show {
  display: flex;
}

#closeMobileMenuHint {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
}

#closeMobileMenuHint:hover {
  opacity: 1;
}

@keyframes bounceHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (min-width: 769px) {
  .mobileMenuHint {
    display: none !important;
  }
}

/* ===== Từ khoá Pāḷi cho câu hỏi khó (lối tìm thứ hai) ===== */

/* `.controls` giờ có hai nút thay vì một. Chỉ thêm `flex-wrap`, KHÔNG đổi `.controls`
   thành cột: có chỗ thì bố cục cũ giữ nguyên y như trước, chật quá thì cụm nút tự
   xuống dòng riêng thay vì bóp chữ dòng thông báo bên trái. */
.controls {
  flex-wrap: wrap;
}

.controlButtons {
  display: flex;
  flex-wrap: wrap;
  /* `stretch` chứ không phải `center`: `.button.secondary` có viền 1px còn `.button`
     thì không, nên để mặc định hai nút cạnh nhau lệch nhau đúng 2px. */
  align-items: stretch;
  gap: 10px;
}

.paliKeywords {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 254, 250, 0.92);
}

.paliKeywords.hidden {
  display: none;
}

.keywordHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.keywordHead strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.keywordClose {
  border: 0;
  background: transparent;
  color: var(--soft);
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}

.keywordClose:hover {
  background: #f5ede3;
  color: var(--text);
}

.keywordLabel {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

/* Nhiều cột khi màn hình đủ rộng: 12 thuật ngữ xếp một cột thì khối gợi ý cao gần trọn
   màn hình, đẩy hẳn ô tìm kiếm ra khỏi tầm nhìn. 420px là bề ngang tối thiểu để một
   thuật ngữ dài (`alagaddupamasutta`) và hai nút vẫn nằm gọn trên một dòng.
   `min(420px, 100%)` là BẮT BUỘC, không được viết trần `minmax(420px, 1fr)`: khi khối
   hẹp hơn 420px thì lưới vẫn giữ nguyên cột 420px và tràn ngang ra ngoài màn hình - đo
   thật trên khung 390px, nút "Tìm luôn" bị cắt mất quá nửa. */
.keywordList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 8px;
}

.keywordRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}

/* Cụm chính là thứ đáng dán vào ô tìm kiếm nhất nên phải nổi hẳn khỏi danh sách
   thuật ngữ rời bên dưới. */
.keywordRow.main {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Câu Pāḷi trọn vẹn: dài gấp nhiều lần một từ khoá, nên cho chữ chiếm trọn một dòng và
   đẩy hai nút xuống dưới, thay vì bóp chữ lại để nhường chỗ cho nút. */
.keywordRow.sentence {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.keywordRow.sentence .keywordText {
  font-size: 17px;
  line-height: 1.55;
}

.keywordRow.sentence .keywordActions {
  justify-content: flex-end;
}

/* Mục của bản mới: cụm Pāḷi thường dài cả câu và còn kèm một dòng nghĩa, nên cho chữ chiếm trọn
   bề ngang và đẩy hai nút xuống dưới - cùng cách xử lý với `.keywordRow.sentence`.

   `height: 100%` + `.keywordBody { flex: 1 }` là ĐỂ CHỐNG LỆCH, không phải để cho đẹp thêm:
   hai thẻ nằm cạnh nhau gần như không bao giờ cao bằng nhau (thẻ này cụm Pāḷi xuống 2 dòng,
   thẻ kia 1 dòng; dòng nghĩa cũng dài ngắn khác nhau). Lưới `.keywordList` vốn đã kéo hai thẻ
   cao bằng nhau, nhưng nếu bên trong thẻ chỉ xếp từ trên xuống thì hai cặp nút dừng ở hai độ
   cao khác nhau - đúng chỗ khách thấy lệch. Cho phần chữ nở ra chiếm hết chỗ thừa thì hai cặp
   nút bị đẩy xuống sát đáy thẻ, mà đáy hai thẻ thì lưới đã cho bằng nhau rồi.

   Cách này đúng cho CẢ hai khổ: ở điện thoại lưới chỉ còn một cột nên không có gì để so lệch,
   và luật vẫn vô hại. */
.keywordRow.withMeaning {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  height: 100%;
}

.keywordBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.keywordRow.withMeaning .keywordBody {
  flex: 1 1 auto;
}

/* Phần nghĩa chỉ để người đọc chọn đúng cụm, KHÔNG phải thứ đem đi tìm - nên nhạt hơn và
   nhỏ hơn hẳn chữ Pāḷi, đứng lùi xuống dưới như phần trong ngoặc đơn. */
.keywordMeaning {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
}

.keywordRow.withMeaning .keywordActions {
  justify-content: flex-end;
}

/* Từ khoá vừa bấm "Tìm ngay". Bảng giờ ở lại sau khi tìm để còn thử tiếp từ khoá khác,
   nên phải chỉ rõ kết quả bên dưới đang thuộc về dòng nào. Dùng viền trái đậm chứ không
   đổi nền, để dấu này không đè lên dấu riêng của `.keywordRow.main`. */
.keywordRow.active {
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  box-shadow: inset 0 0 0 1px rgba(159, 50, 50, 0.25);
}

.keywordUsageNote {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.keywordText {
  /* Cùng bộ chữ với `.pali`: dấu Pāḷi (ā ḷ ṃ ṭ) hiện rõ hơn hẳn so với font giao diện. */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.4;
  color: #211b15;
  overflow-wrap: anywhere;
  /* Bấm một cái là chọn trọn cụm - lối sao chép tay khi trình duyệt chặn clipboard. */
  user-select: all;
}

.keywordActions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.keywordEmpty {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.paliKeywords .loading {
  margin-top: 0;
  padding: 12px 14px;
}

/* Mốc 768px cho khớp với khối mobile sẵn có của trang: từ mốc đó trở xuống trang đã đặt
   `.button.compact { width: 100% }`, nên nếu để `.keywordRow` còn nằm ngang thì hai nút
   đòi trọn bề ngang và ép chữ từ khoá gần như biến mất. Trước đây tôi để 700px, và dải
   701-768px rơi đúng vào kẽ hở đó. */
@media (max-width: 768px) {
  /* KHÔNG đặt luật riêng cho hai nút trong `.controlButtons`: khối mobile sẵn có của
     trang đã quy định `.controls .button { width: 100%; min-height: 46px }` - nút mới cứ
     theo đúng nếp đó thì nó giống hệt mọi nút khác của trang trên điện thoại. Đè thêm
     luật của riêng mình chỉ tổ làm nút mới cao 44px lệch với 46px của nút Tìm kiếm. */
  .controlButtons {
    width: 100%;
  }

  .paliKeywords {
    padding: 14px;
  }

  /* Trung hoà `.button.compact { width: 100% }` của khối mobile sẵn có. Từ khoá là chữ
     ngắn nên ở khổ máy tính bảng hai nút vẫn thừa chỗ đứng cạnh nó trên cùng một dòng;
     để nguyên `width: 100%` thì mỗi nút chiếm trọn một dòng và khối gợi ý dài gấp ba. */
  .keywordActions .button {
    width: auto;
  }
}

/* Điện thoại: chữ từ khoá một dòng, hai nút một dòng bên dưới và chia đôi bề ngang, đủ
   rộng cho ngón tay. Mốc 560px chứ không phải 768px - đo thật ở 700-768px thì chữ và hai
   nút vẫn nằm gọn một dòng, xếp dọc ở đó chỉ làm khối cao lên vô ích. */
@media (max-width: 560px) {
  .keywordRow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .keywordActions .button {
    /* `flex-basis: 0` thắng `width` trên trục chính nên hai nút chia đôi dòng;
       `min-width: 0` cho phép chữ co lại thay vì đẩy nhau tràn ra ngoài. */
    flex: 1 1 0;
    min-width: 0;
  }
}