/* Cú pháp tin nhắn (#/cu-phap) — tinhtienso's syntax page (research/ui/guide/cu-phap-desktop-NN.png, -mobile-NN.png,
   tts-guide-pages.json "cu-phap-…", measured at 1347px). Markup: js/view-cu-phap.js (everything under .syntax-page).
   Frame (top bar, footer, phone tab bar), page header and the "TRONG TRANG NÀY" column: css/public.css. */

.syntax-page .public-page-description { max-width: 700px; }

/* "Tra cứu dễ hơn" under the TOC */
.syntax-sidebar-note { margin-top: 18px; padding: 24px 14px 0; border-top: 1px solid var(--pub-line); }
.syntax-sidebar-note strong { display: flex; align-items: center; gap: 6px; color: var(--pub-ink); font-size: 13px; font-weight: 650; line-height: 17px; }
.syntax-ic-bulb { color: #c7880f; font-size: 15px; }
.syntax-sidebar-note p { margin: 11px 0 0; color: var(--pub-muted); font-size: 12px; line-height: 21.6px; }

/* ------------------------------------------------------------------ section cards */
.syntax-section {
  padding: 28px; border: 1px solid var(--pub-line); border-radius: 14px; background: #fff; color: var(--pub-ink);
  scroll-margin-top: 16px;
}
.syntax-section + .syntax-section { margin-top: 22px; }
.syntax-section.is-lookup { border-color: #eddcdd; background: linear-gradient(100deg, #fff 38%, #fff6f4 100%); }
.syntax-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.syntax-section-index {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: #f2f4f8; color: #636f84; font: 600 11px/1 var(--mono);
}
.is-lookup .syntax-section-index { background: var(--pub-red-tint); color: var(--pub-red); }
.syntax-section-head h2 { margin: 0; color: var(--pub-ink); font-size: 21px; font-weight: 700; line-height: 29px; }
.syntax-section > :last-child { margin-bottom: 0; }

.syntax-p { max-width: 566px; margin: 0 0 18px; color: var(--pub-text); font-size: 14px; line-height: 26px; }
.syntax-lead { margin-bottom: 17px; }
.syntax-list { margin: 0 0 18px; padding-left: 20px; color: var(--pub-text); font-size: 14px; line-height: 26px; }
.syntax-list li + li { margin-top: 8px; }
.syntax-list li::marker { color: #6b778a; }
.syntax-h3 { margin: 0; color: var(--pub-ink); font-size: 16px; font-weight: 700; line-height: 23px; }
.syntax-group-note { max-width: 526px; margin: 10px 0 0; color: #56657b; font-size: 13px; line-height: 24px; }
.syntax-group-note + .syntax-group-note { margin-top: 2px; }

/* chips: alias (what to type), inline code, dark example message, white check-box name in notes */
.syntax-page .syntax-alias, .syntax-page .syntax-code, .syntax-page .syntax-message { word-break: normal; }
.syntax-alias {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: var(--pub-code);
  color: var(--pub-ink); font: 600 13px/20px var(--mono); white-space: pre; vertical-align: 1px;
}
.syntax-units .syntax-alias { margin: 0 3px; }
.syntax-aliases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.syntax-code {
  padding: 0 6px; border-radius: 5px; background: var(--pub-code); color: var(--pub-ink); font: 600 13px/17px var(--mono);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.syntax-message {
  display: inline-block; max-width: 100%; padding: 0 9px; border-radius: 5px; background: var(--pub-ink); color: #fff;
  font: 600 13px/26px var(--mono); white-space: normal; overflow-wrap: anywhere;
}
.syntax-ui { display: inline-flex; align-items: center; height: 21px; margin: 0 2px; padding: 0 8px; border-radius: 5px; background: #fff; color: var(--pub-text); font-weight: 700; line-height: 1; }

/* the token diagram (tên đài · số đánh … · kiểu đánh · số tiền · đơn vị) */
.syntax-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 16px; border-radius: 10px; background: #f6f8fb; }
.syntax-token {
  display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid #cfd7e3; border-radius: 7px;
  background: #fff; color: var(--pub-ink); font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap;
}
.syntax-token.is-station { border-color: #f3d2d4; background: #fff0f1; color: #a11b24; }
.syntax-token.is-type { border-color: #c6dcef; background: #eaf3fb; color: #0f5a93; }
.syntax-token.is-money, .syntax-token.is-unit { border-color: #eedc8a; background: #fff8d6; color: #6b5300; }
.syntax-token.is-more { padding: 0 2px; border-color: transparent; background: none; color: #7a889c; }
.syntax-token.is-x { border-color: transparent; background: var(--pub-ink); color: #fff; }
.syntax-units { margin-bottom: 18px; }

/* pink note: which box of the Thêm Mới dialog a region needs */
.syntax-region-note {
  display: flex; align-items: flex-start; gap: 8px; max-width: 566px; margin: 0 0 32px; padding: 12px 16px 12px 15px;
  border: 1px solid #f1c9c4; border-left: 3px solid var(--pub-red); border-radius: 10px; background: #fff4f2;
  color: var(--pub-text); font-size: 14px; line-height: 26px;
}
/* the check box of the Thêm Mới dialog as it is for that region: ticked (the app's blue, accent-color #4e73df) or empty */
.syntax-check {
  flex: none; display: grid; place-items: center; width: 14px; height: 14px; margin-top: 6px; border: 1px solid #4e73df; border-radius: 3px;
  background: #4e73df; color: #fff; font-size: 10px;
}
.syntax-check.is-empty { border-color: #767676; background: #fff; }
.syntax-region-note + .syntax-region-note { margin-top: 0; }

/* ------------------------------------------------------------------ tables */
.syntax-table-wrap { margin: 0 0 18px; overflow: hidden; border: 1px solid var(--pub-line); border-radius: 10px; }
.syntax-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--pub-ink); font-size: 13px; }
.syntax-table col.is-name { width: 156px; }
.syntax-table-groups col.is-mid { width: 46%; }
.syntax-table-types col.is-mid { width: 39.8%; }
.syntax-table thead th { height: 47px; padding: 0 16px; background: var(--pub-th); color: var(--pub-th-ink); font-weight: 650; text-align: left; }
.syntax-table tbody th, .syntax-table tbody td {
  padding: 13px 16px 13.5px; border-top: 1px solid #e8ecf2; text-align: left; vertical-align: top; line-height: 22px; overflow-wrap: anywhere;
}
.syntax-table thead + tbody tr:first-child > * { border-top: 0; }
.syntax-table tbody th { font-weight: 650; }
.syntax-table tbody tr:nth-child(even) { background: #fafbfd; }
.syntax-table tbody tr { scroll-margin-top: 24px; }
.syntax-example + .syntax-example { margin-top: 10px; }
.syntax-example-note { display: block; margin-top: 4px; color: #56657b; font-size: 13px; line-height: 20px; }

/* ------------------------------------------------------------------ bộ số cards */
.syntax-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.syntax-p + .syntax-sets, .syntax-group-note + .syntax-sets { margin-top: 10px; }
.syntax-section > .syntax-p + .syntax-sets { margin-top: 0; }
.syntax-h3 + .syntax-sets { margin-top: 12px; }
.syntax-set {
  min-width: 0; padding: 16px; border: 1px solid var(--pub-line); border-radius: 10px; background: #fbfcfd;
  scroll-margin-top: 24px;
}
.syntax-set-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.syntax-set-head strong { color: var(--pub-ink); font-size: 15px; font-weight: 700; line-height: 24px; }
.syntax-set-note { margin: 8px 0 0; color: #56657b; font-size: 13px; line-height: 24px; }
.syntax-set details { margin-top: 8px; }
.syntax-set summary {
  display: inline-flex; align-items: center; height: 32px; color: var(--pub-link); font-size: 13px; font-weight: 650;
  cursor: pointer; list-style: none;
}
.syntax-set summary::-webkit-details-marker { display: none; }
.syntax-set summary:hover { text-decoration: underline; }
.syntax-set summary:focus-visible { outline: 2px solid #8db8e6; outline-offset: 2px; border-radius: 4px; }
.syntax-set-numbers { margin: 6px 0 0; color: var(--pub-ink); font-size: 14px; font-weight: 600; line-height: 25px; word-spacing: .35em; font-variant-numeric: tabular-nums; }
.syntax-set-group { margin-top: 28px; padding-top: 19px; border-top: 1px solid var(--pub-line-2); }

/* section 07 */
.syntax-combo { padding: 14px 16px; border: 1px solid var(--pub-line); border-radius: 10px; }
.syntax-combo + .syntax-combo { margin-top: 16px; }
.syntax-combo .syntax-message { line-height: 30px; }
.syntax-combo .syntax-list { margin: 10px 0 0; }

/* ------------------------------------------------------------------ Tra cứu nhanh */
.syntax-search { position: relative; }
.syntax-search > .ic { position: absolute; top: 50%; left: 16px; margin-top: -8px; color: #3f4e64; font-size: 16px; pointer-events: none; }
.syntax-search-input {
  display: block; width: 100%; height: 54px; padding: 0 16px 0 42px; border: 1px solid #d2d9e4; border-radius: 10px;
  background: #fff; color: var(--pub-ink); font: inherit; font-size: 16px; outline: 0;
  box-shadow: 0 1px 2px rgba(35, 51, 78, .05); -webkit-appearance: none; appearance: none;
}
.syntax-search-input::placeholder { color: #6b778a; opacity: 1; }
.syntax-search-input:focus { border-color: #e2b3b6; box-shadow: 0 0 0 3px rgba(185, 30, 35, .1); }
.syntax-lookup-status { margin: 18px 0 0; color: #56657b; font-size: 13px; line-height: 23px; }
.syntax-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 19px; }
.syntax-try-label { margin-right: 3px; color: var(--pub-muted); font-size: 12px; }
.tts-public .syntax-try-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px; border: 1px solid #e8dee0; border-radius: 7px;
  background: #fff; color: #536078; font: inherit; font-size: 12px; cursor: pointer;
}
.tts-public .syntax-try-btn:hover { border-color: #e2b3b6; color: var(--pub-red); }
.syntax-ic-arrow { color: #8a96a8; font-size: 10px; }
.syntax-try-btn:hover .syntax-ic-arrow { color: inherit; }

.syntax-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.syntax-search-input { padding-right: 48px; }
.tts-public .syntax-search-clear {
  position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  margin-top: -16px; padding: 0; border: 0; border-radius: 7px; background: none; color: #3f4e64; font-size: 14px; cursor: pointer;
}
.tts-public .syntax-search-clear:hover { background: #f3f5f8; color: var(--pub-red); }
.syntax-search-clear[hidden], .syntax-try[hidden] { display: none; }
.syntax-results { margin-top: 14px; }
.syntax-hits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tts-public .syntax-hit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 14px 16px 16px;
  border: 1px solid var(--pub-line); border-radius: 10px; background: #fff; color: var(--pub-ink);
}
.syntax-hit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; align-self: stretch; }
.syntax-hit-title { min-width: 0; font-size: 15px; font-weight: 700; line-height: 21px; }
.tts-public .syntax-hit-go { flex: none; color: var(--pub-link); font-size: 12px; font-weight: 650; text-decoration: none; }
.tts-public .syntax-hit-go:hover { color: var(--pub-red); text-decoration: underline; }
.syntax-hit-tag { margin-top: -4px; color: #56657b; font-size: 12px; font-weight: 600; line-height: 17px; }
.syntax-hit .syntax-aliases { margin-top: 0; }
.syntax-alias.is-match { background: #fde2e4; color: var(--pub-red); }
.syntax-hit-example { align-self: stretch; }
.syntax-hit-sub { color: #56657b; font-size: 13px; line-height: 20px; }
.syntax-hit-numbers { margin: 0; color: var(--pub-ink); font-size: 13px; font-weight: 600; line-height: 22px; word-spacing: .3em; font-variant-numeric: tabular-nums; }
.syntax-hit-numbers mark { padding: 1px 3px; border-radius: 4px; background: #fde2e4; color: var(--pub-red); }
.syntax-hit-numbers-box summary { color: var(--pub-link); font-size: 12px; font-weight: 650; cursor: pointer; list-style: none; }
.syntax-hit-numbers-box summary::-webkit-details-marker { display: none; }
.syntax-hit-numbers-box .syntax-hit-numbers { margin-top: 6px; }
.tts-public .syntax-more {
  display: block; width: 100%; height: 42px; margin-top: 12px; border: 1px solid var(--pub-line); border-radius: 9px;
  background: #fff; color: var(--pub-link); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.tts-public .syntax-more:hover { border-color: #e2b3b6; color: var(--pub-red); }

/* a search result / ?muc= target lights up for a moment */
@keyframes syntax-flash { 0%, 35% { background-color: #fff3c4; } 100% { background-color: transparent; } }
.syntax-page .is-flash { animation: syntax-flash 2.2s ease-out; }
.syntax-set.is-flash { box-shadow: 0 0 0 2px #f2cf5b; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 991.98px) {
  .syntax-sidebar-note { display: none; }
}

@media (max-width: 767.98px) {
  .syntax-section { padding: 20px 16px; border-radius: 12px; }
  .syntax-section + .syntax-section { margin-top: 16px; }
  .syntax-section-head { gap: 10px; margin-bottom: 16px; }
  .syntax-section-index { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }
  .syntax-section-head h2 { font-size: 19px; line-height: 26px; }
  .syntax-region-note { margin-bottom: 24px; }
  .syntax-formula { gap: 6px; padding: 12px; }
  .syntax-token { height: 30px; padding: 0 8px; }
  /* "Thử tra cứu" on its own line above the chips, as on the site's phone page */
  .syntax-try { margin-top: 16px; }
  .syntax-try-label { flex-basis: 100%; margin: 0 0 -2px; }
  .syntax-hits { grid-template-columns: minmax(0, 1fr); }
  .syntax-sets { grid-template-columns: minmax(0, 1fr); }
  .syntax-set-head { flex-wrap: nowrap; }
  .syntax-set-head strong { min-width: 0; }
  .syntax-set-head .syntax-alias { flex: none; }

  /* tables fit the phone (the site's scroll sideways): name column + the rest; a third column goes under the second */
  .syntax-table, .syntax-table thead, .syntax-table tbody { display: block; }
  .syntax-table colgroup { display: none; }
  .syntax-table tr { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .syntax-table thead th { display: flex; align-items: center; padding: 0 12px; }
  .syntax-table thead th:nth-child(3) { display: none; }
  .syntax-table tbody tr { border-top: 1px solid #e8ecf2; }
  .syntax-table tbody tr:first-child { border-top: 0; }
  .syntax-table tbody th, .syntax-table tbody td { padding: 11px 12px; border-top: 0; }
  .syntax-table tbody td:nth-child(3) { grid-column: 2; padding-top: 0; }
  .syntax-table-groups tbody td:nth-child(3) { color: #56657b; }
}

@media print {
  .syntax-search, .syntax-try, .syntax-results, .syntax-lookup-status { display: none !important; }
  .syntax-section { break-inside: avoid; }
}