/* Public pages (#/kqxs, #/huong-dan, #/cu-phap, #/bot-telegram, #/tai-app, #/tin-tuc): tinhtienso's public site
   layout (research/ui/guide/*, tts-guide-pages.json; measured at 1347px = 1366 with a scrollbar). Builders:
   js/public-layout.js. Everything is scoped under .tts-public (the app shell is not mounted on these pages). */

body.is-public { background: #f7f8fa; }

.tts-public {
  --pub-red: #b91e23;
  --pub-red-soft: #fff0f0;
  --pub-red-tint: #fbe5e6;
  --pub-ink: #23334e;
  --pub-ink-2: #3f4e64;
  --pub-text: #4a5a70;
  --pub-muted: #64748b;
  --pub-nav: #526079;
  --pub-line: #e4e9f0;
  --pub-line-2: #edf0f5;
  --pub-bg: #f7f8fa;
  --pub-link: #365f8c;
  --pub-th: #f2f5fa;
  --pub-th-ink: #365174;
  --pub-chip-line: #dfe5ee;
  --pub-code: #eef2f8;
  --pub-tip: #fff8d6;
  --pub-tip-ink: #6b5300;
  --pub-step: #23334e;
  position: relative;
  min-height: 100vh;
  background: var(--pub-bg);
  color: var(--pub-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}
.tts-public a { color: var(--pub-link); }
.tts-public a:hover { text-decoration: underline; }
.tts-public .ic { flex: none; }
/* 32px gutters as the site's public pages at ~1265px (audit D12); 1280px of content at most; phone 16px */
.public-container { width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 32px; }
.public-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.public-skip-link {
  position: absolute; z-index: 50; top: -80px; left: 16px; padding: 11px 16px; border-radius: 6px;
  background: #fff; color: var(--pub-red) !important; box-shadow: 0 4px 14px rgba(35, 51, 78, .2);
}
.public-skip-link:focus { top: 12px; }
.public-main { display: block; padding-bottom: 72px; outline: 0; }
.public-soon {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff4d1; color: #8a5a00;
  font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: 1px; white-space: nowrap; text-transform: none; letter-spacing: 0;
}

/* ------------------------------------------------------------------ top bar */
.public-header { position: relative; z-index: 10; background: #fff; border-bottom: 1px solid #e9edf2; box-shadow: 0 1px 2px rgba(35, 51, 78, .03); }
.public-header-inner { display: flex; align-items: center; height: 80px; }
.public-brand {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 179px; height: 63px;
  border-radius: 10px; background: var(--pub-red);
}
.public-brand img { display: block; width: 155px; height: 47px; }
.public-nav { display: flex; align-items: center; gap: 4px; margin-left: 48px; min-width: 0; }
.tts-public .public-nav-link {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 8px;
  color: var(--pub-nav); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.public-nav-link .ic { font-size: 15px; }
/* the site's icon font gives each glyph its own width (book-open 17px, paper-plane 13px, mobile-alt 9px…): keep the
   15px svg and set the room it takes, so every link has the site's width */
.public-nav-link[data-pub="huong-dan"] .ic, .public-nav-link[data-pub="cu-phap"] .ic, .public-nav-link[data-pub="tin-tuc"] .ic { margin: 0 1px; }
.public-nav-link[data-pub="bot-telegram"] .ic { margin: 0 -1px; }
.public-nav-link[data-pub="tai-app"] .ic { margin: 0 -3px; }
.tts-public .public-nav-link:hover { background: var(--pub-bg); color: var(--pub-ink); text-decoration: none; }
.tts-public .public-nav-link.is-active { background: var(--pub-red-soft); color: var(--pub-red); }
.tts-public .public-login {
  flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; margin-left: auto; padding: 0 19px 0 18px;
  border: 1px solid var(--pub-red); border-radius: 8px; background: var(--pub-red); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: 0 4px 12px rgba(185, 30, 35, .18);
}
.public-login .ic { font-size: 15px; }
.tts-public .public-login:hover { background: #a3181d; text-decoration: none; }

/* red button (CTA in the page, footer) */
.tts-public .public-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 19px;
  border: 1px solid var(--pub-red); border-radius: 8px; background: var(--pub-red); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.tts-public .public-button:hover { background: #a3181d; text-decoration: none; }
.tts-public .public-button.is-disabled { cursor: default; opacity: .62; }
.tts-public .public-button.is-disabled:hover { background: var(--pub-red); }
.public-button .public-soon { margin-left: 0; }

/* ------------------------------------------------------------------ page header */
.public-page-head { position: relative; padding-top: 38px; }
.public-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--pub-red); font-size: 12px; font-weight: 700; line-height: 19px; }
.public-eyebrow .ic { font-size: 13px; }
.public-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.public-heading-row h1 { margin: 0; color: var(--pub-ink); font-size: 36px; font-weight: 750; line-height: 45px; letter-spacing: -.027em; }
.tts-public .public-heading-meta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 35px; padding: 0 12px;
  border: 1px solid var(--pub-line); border-radius: 20px; background: #fff; color: #65748a; font-size: 12px; text-decoration: none;
}
a.public-heading-meta { color: var(--pub-ink) !important; font-weight: 600; }
.public-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pub-red); }
.public-page-description { max-width: 505px; margin: 16px 0 0; color: var(--pub-muted); font-size: 15px; line-height: 25.5px; }
/* hero "Vào ứng dụng" (public-layout.js appEntryButtonHtml): to app.tinhsonhanh.com/login on the site */
.tts-public .public-app-entry { margin-top: 18px; }
/* brand line on top of a page description: bolt · Tính Số Nhanh | tagline (brand.js, sentence case) */
.public-hero-tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; margin-bottom: 6px; color: var(--pub-ink); line-height: 22px; }
.public-hero-tagline .ic { color: var(--pub-red); font-size: 14px; }
.public-hero-tagline strong { font-weight: 750; }
.public-hero-tagline strong + span { padding-left: 9px; border-left: 1px solid #d9dfe8; color: var(--pub-red); font-weight: 650; }

/* the 4 numbered step cards */
.guide-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.tts-public .guide-quick-card {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 18px;
  border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; color: var(--pub-ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.tts-public .guide-quick-card:hover { border-color: #e6c7c9; box-shadow: 0 6px 16px rgba(35, 51, 78, .06); text-decoration: none; }
.guide-quick-number {
  position: absolute; top: -8px; left: 15px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; background: var(--pub-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.guide-quick-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--pub-red-tint); color: var(--pub-red); font-size: 16px; }
.guide-quick-text { display: flex; flex-direction: column; min-width: 0; }
.guide-quick-text strong { color: var(--pub-ink); font-size: 14px; font-weight: 700; line-height: 19px; }
.guide-quick-text span { color: var(--pub-muted); font-size: 12px; line-height: 17px; }

/* ------------------------------------------------------------------ TOC + sections */
.guide-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 30px; }
.guide-toc { position: sticky; top: 16px; }
.guide-toc-label {
  display: block; padding: 0 12px 13px; margin-bottom: 3px; color: #657186; font-size: 10px; font-weight: 750;
  line-height: 17px; letter-spacing: .14em; text-transform: uppercase;
}
.guide-toc-list { display: grid; gap: 3px; }
.tts-public .guide-toc-link {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 8px; color: #56647a;
  font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: none;
}
.tts-public .guide-toc-link:hover { background: #eef1f6; color: var(--pub-ink); text-decoration: none; }
.guide-toc-num { flex: none; min-width: 12px; color: #616d80; font: 500 11px/18px var(--mono); }
.tts-public .guide-toc-link.is-active { background: #fbecee; color: var(--pub-red); font-weight: 650; }
.guide-toc-link.is-active .guide-toc-num { color: var(--pub-red); }

.guide-main { min-width: 0; }
.guide-step {
  padding: 28px 28px 28px; border: 1px solid var(--pub-line); border-radius: 14px; background: #fff;
  color: var(--pub-ink); scroll-margin-top: 16px;
}
.guide-step a:not([class]), .guide-tip a:not([class]), .public-card a:not([class]) { color: var(--pub-link); text-decoration: underline; text-underline-offset: 2px; }
.guide-step + .guide-step { margin-top: 22px; }
.guide-step-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--pub-line-2); }
.guide-step-index {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--pub-red-tint); color: var(--pub-red); font: 700 13px/1 var(--mono);
}
.guide-step-heading { min-width: 0; }
.guide-step-label {
  display: flex; align-items: center; gap: 6px; color: var(--pub-red); font-size: 11px; font-weight: 700; line-height: 18px;
  letter-spacing: .06em; text-transform: uppercase;
}
.guide-step-label .ic { font-size: 11px; }
.guide-step-heading h2 { margin: 2px 0 0; color: var(--pub-ink); font-size: 21px; font-weight: 700; line-height: 28px; }
.guide-step > :last-child { margin-bottom: 0; }

.guide-lead { max-width: 590px; margin: 0 0 16px; color: var(--pub-ink-2); font-size: 15px; line-height: 27px; }
.guide-lead strong { color: var(--pub-ink); font-weight: 650; }
.guide-h3 { margin: 30px 0 14px; color: var(--pub-ink); font-size: 17px; font-weight: 700; line-height: 25px; }
.guide-p { margin: 0 0 16px; color: var(--pub-text); font-size: 15px; line-height: 27px; }
.guide-note-inline { margin: 8px 0 0; color: var(--pub-muted); font-size: 13px; line-height: 23px; }
.guide-bullets { margin: 0 0 16px; padding-left: 20px; color: var(--pub-text); font-size: 15px; line-height: 27px; }
.guide-bullets li + li { margin-top: 8px; }
.guide-bullets li::marker { color: var(--pub-ink); }

/* numbered steps */
.guide-steps { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.guide-steps > li { display: flex; align-items: flex-start; gap: 12px; color: var(--pub-text); font-size: 15px; line-height: 27px; }
.guide-steps-num {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%;
  background: var(--pub-step); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.guide-steps-text { min-width: 0; }
.guide-steps.is-small { gap: 12px; margin: 0; }
.guide-steps.is-small > li { font-size: 14px; line-height: 24px; }
.guide-steps.is-small .guide-steps-num { width: 22px; height: 22px; margin-top: 1px; font-size: 11px; }

/* key chips: names of buttons / fields as the app shows them; code chips: what the user types */
.guide-ui {
  display: inline-flex; align-items: center; height: 24px; margin: 0 1px; padding: 0 7px; border: 1px solid var(--pub-chip-line);
  border-radius: 6px; background: var(--pub-bg); color: var(--pub-ink); font-size: .92em; font-weight: 650; line-height: 1;
  white-space: nowrap; vertical-align: 1px;
}
.guide-ui + .guide-ui { margin-left: 4px; }
.guide-code {
  padding: 1px 5px; border-radius: 5px; background: var(--pub-code); color: var(--pub-ink);
  font: 600 13px/1.3 var(--mono); word-break: break-word;
}
.guide-inline-ic { color: var(--pub-ink); font-size: 14px; vertical-align: -2px; }
.guide-ic-label { display: inline-flex; align-items: center; gap: 4px; }
.guide-ic-label .ic { font-size: 13px; }

/* tables */
.guide-table { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--pub-line); border-radius: 12px; color: var(--pub-text); font-size: 15px; }
.guide-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.guide-table thead th {
  height: 42px; padding: 0 16px; background: var(--pub-th); color: var(--pub-th-ink); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.guide-table tbody th, .guide-table tbody td { padding: 12px 16px; border-top: 1px solid var(--pub-line); text-align: left; vertical-align: top; line-height: 24px; }
.guide-table tbody th { width: 34%; color: var(--pub-ink); font-weight: 650; }
.guide-table tbody td { color: var(--pub-text); }
.guide-table .guide-ui { height: 23px; }
.guide-table tbody th .guide-ui { margin: 0 4px 0 0; }
.guide-table tbody th .guide-ui + .guide-ui { margin-left: 0; }
.guide-plans tbody th, .guide-plans tbody td { padding-top: 10px; padding-bottom: 10px; }
.guide-plans tbody th { width: 28%; }
.guide-plans tbody td:nth-child(2) { width: 18%; color: var(--pub-ink); font-weight: 650; white-space: nowrap; }

/* VÍ DỤ / CÁCH TÍNH */
.guide-example { margin: 0 0 16px; padding: 14px 18px 12px; border-left: 3px solid var(--pub-red); border-radius: 0 10px 10px 0; background: #fbfcfd; color: var(--pub-text); }
.guide-example strong { display: block; color: var(--pub-red); font-size: 12px; font-weight: 650; line-height: 20px; letter-spacing: .04em; text-transform: uppercase; }
.guide-example p { margin: 3px 0 0; font-size: 14px; line-height: 24px; }

/* Lưu ý */
.guide-tip { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--pub-tip); color: var(--pub-tip-ink); font-size: 14px; line-height: 24px; }
.guide-tip-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 650; }
.guide-tip-title .ic { color: #c79a00; font-size: 15px; }
.guide-tip-body ul { margin: 0; padding-left: 20px; }
.guide-tip-body li + li { margin-top: 6px; }
.guide-tip .guide-ui { height: 23px; border-color: #eedc8a; background: #fffbe6; color: #5b4a06; }
.guide-tip a { color: var(--pub-link); }
.guide-tip-title .public-soon { border: 1px solid #eedc8a; background: #fff; }

/* two cards side by side (section 07) */
.guide-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin: 0 0 20px; }
.guide-payment-flow { padding: 19px 20px 20px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fbfcfd; color: var(--pub-text); }
.guide-payment-flow h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--pub-ink); font-size: 16px; font-weight: 700; line-height: 30px; }
.guide-flow-icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--pub-red-tint); color: var(--pub-red); }
.guide-payment-flow strong { color: var(--pub-ink); font-weight: 650; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.tts-public .guide-action-link { display: inline-flex; align-items: center; gap: 8px; color: var(--pub-link); font-size: 14px; font-weight: 600; }
.tts-public button.guide-action-link { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.tts-public button.public-button { font-family: inherit; cursor: pointer; }
.guide-action-link .ic { color: #2d9fd9; }

/* FAQ */
.guide-faq { border: 1px solid var(--pub-line); border-radius: 12px; color: var(--pub-text); font-size: 15px; }
.guide-faq details + details { border-top: 1px solid var(--pub-line); }
.guide-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; padding: 0 16px;
  color: var(--pub-ink); font-weight: 650; cursor: pointer; list-style: none;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq-chevron { color: #8a96a8; font-size: 12px; transition: transform .2s; }
.guide-faq details[open] .guide-faq-chevron { transform: rotate(180deg); }
.guide-faq p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 24px; }

/* support box + link cards */
.guide-more { display: grid; grid-template-columns: minmax(0, 447fr) minmax(0, 559fr); gap: 16px; margin-top: 30px; }
.guide-support { padding: 24px 24px 25px; border: 1px solid #efd8d9; border-radius: 14px; background: #fff4f2; }
.guide-support-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #f1dadd; border-radius: 10px;
  background: #fff; color: var(--pub-red); font-size: 19px;
}
.guide-support h2 { margin: 12px 0 6px; color: var(--pub-ink); font-size: 19px; font-weight: 700; line-height: 27px; }
.guide-support p { margin: 0 0 14px; color: #856064; font-size: 13px; line-height: 22px; }
.guide-links { display: grid; gap: 9px; align-content: start; }
.tts-public .guide-link {
  display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 0 20px 0 17px; border: 1px solid var(--pub-line);
  border-radius: 12px; background: #fff; color: var(--pub-ink); text-decoration: none;
}
.tts-public .guide-link:hover { border-color: #cfd8e5; text-decoration: none; }
.guide-link-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--pub-code); color: var(--pub-link); font-size: 15px; }
.guide-link-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.guide-link-text strong { color: var(--pub-ink); font-size: 14px; font-weight: 650; line-height: 20px; }
.guide-link-text span { color: var(--pub-muted); font-size: 12px; line-height: 18px; }
.guide-link-arrow { color: #7d8aa0; font-size: 12px; }

/* simple white card (placeholder pages, small pages) */
.public-card { margin-top: 30px; padding: 28px; border: 1px solid var(--pub-line); border-radius: 14px; background: #fff; color: var(--pub-text); font-size: 15px; line-height: 27px; }
.public-card + .public-card { margin-top: 22px; }
.public-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--pub-ink); font-size: 21px; font-weight: 700; line-height: 28px; }
.public-card h2 .ic { color: var(--pub-red); font-size: 18px; }
.public-card p { margin: 0 0 14px; }
.public-card > :last-child { margin-bottom: 0; }


/* ------------------------------------------------------------------ mock-ups (gm-*): the app inside a browser window */
/* Small copies of the app's own screens (js/public-layout.js mock*, js/view-huong-dan.js): the app's colours
   (styles.css: primary #4e73df, secondary #3f4254, info #36b9cc, success #259dba, warning #f6c23e, danger #e74a3b,
   red table heads #b8030a, header gradient + 3px yellow line), its labels and their order. */
.gm-figure { margin: 0 0 30px; }
.gm-window {
  overflow: hidden; border: 1px solid #d9dfe8; border-radius: 12px; background: #f8f9fc; color: #3f4254;
  font-size: 10.5px; line-height: 1.35; box-shadow: 0 10px 24px rgba(35, 51, 78, .09);
}
.gm-bar { display: flex; align-items: center; gap: 12px; height: 35px; padding: 0 10px; background: #e9edf2; }
.gm-dots { display: flex; gap: 5px; }
.gm-dots i { width: 8px; height: 8px; border-radius: 50%; background: #cdd4de; }
.gm-address {
  display: flex; align-items: center; gap: 5px; width: 280px; max-width: calc(100% - 50px); height: 20px; padding: 0 9px;
  overflow: hidden; border-radius: 6px; background: #fff; color: #6b778a; font-size: 11px; white-space: nowrap;
}
.gm-address .ic { font-size: 9px; }
.gm-screen { position: relative; overflow-x: auto; }
.gm-figure figcaption { margin-top: 8px; color: var(--pub-muted); font-size: 12px; line-height: 18px; text-align: center; }
.gm-window img { display: block; }

.gm-pin {
  display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; margin-left: 5px; border-radius: 50%;
  background: var(--pub-red); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(35, 51, 78, .25); vertical-align: middle; text-transform: none; letter-spacing: 0;
}
.tts-public .is-target { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c0262c; }

/* buttons */
.gm-btn {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: 4px; color: #fff; font-size: 10px; font-weight: 400; line-height: 1; white-space: nowrap;
}
.gm-btn .ic { font-size: 9px; }
.gm-btn.is-primary { background: #4e73df; }
.gm-btn.is-secondary { background: #3f4254; }
.gm-btn.is-info { background: #36b9cc; }
.gm-btn.is-success { background: #259dba; }
.gm-btn.is-warning { background: #f6c23e; }
.gm-btn.is-danger { background: #e74a3b; }
.gm-btn.is-red { gap: 5px; height: 26px; padding: 0 11px; border-radius: 7px; background: #b91e23; font-weight: 650; box-shadow: 0 4px 10px rgba(185, 30, 35, .22); }
.gm-btn.is-sm { height: 18px; padding: 0 6px; border-radius: 3px; font-size: 9px; }
.gm-btn.is-block { flex: 1; height: 26px; border-radius: 5px; box-shadow: none; font-size: 10.5px; font-weight: 700; }
.gm-btn.is-icon { width: 22px; padding: 0; }
.gm-btn + .gm-btn, .gm-pin + .gm-btn { margin-left: 5px; }
.gm-split { align-items: stretch; padding: 0; overflow: hidden; }
.gm-split-ic { display: inline-flex; align-items: center; padding: 0 7px; background: rgba(0, 0, 0, .15); color: rgba(255, 255, 255, .5); }
.gm-split-text { display: inline-flex; align-items: center; padding: 0 9px; }
.gm-btn-group { display: inline-flex; flex: none; }
.gm-btn-group .gm-btn { margin: 0; border-radius: 0; border-right: 1px solid #fff; }
.gm-btn-group .gm-btn:last-child { border-right: 0; }

/* fields */
.gm-input {
  display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border: 1px solid #d1d3e2; border-radius: 4px;
  background: #fff; color: #3f4254; font-size: 10px; white-space: nowrap; overflow: hidden;
}
.gm-input-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-input .ic { color: #8792a5; font-size: 10px; }
.gm-input.is-light { color: #a3adbb; }
.gm-input.is-grow { flex: 1; min-width: 0; }
.gm-label { display: flex; align-items: center; margin: 8px 0 4px; color: #3f4254; font-size: 10px; font-weight: 500; }
.gm-label:first-child { margin-top: 0; }
.gm-label .gm-pin { margin-left: 6px; }
.gm-req { margin-left: 3px; color: #e74a3b; }
.gm-row { display: flex; align-items: center; gap: 6px; }
.gm-input-group { display: flex; flex: 1; min-width: 0; }
.gm-input-group .gm-input { flex: 1; min-width: 0; border-radius: 0 4px 4px 0; }
.gm-prefix { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 4px 0 0 4px; background: #4e73df; color: #fff; font-size: 10px; }
.gm-copy { flex: none; display: grid; place-items: center; width: 24px; height: 22px; border-radius: 4px; background: #3f4254; color: #fff; font-size: 9px; }
.gm-textarea {
  display: flex; flex-direction: column; gap: 1px; min-height: 52px; padding: 6px 8px; border: 1px solid #d1d3e2; border-radius: 4px;
  background: #fff; font: 10px/1.4 var(--mono);
}
.gm-check { display: inline-flex; align-items: center; gap: 5px; color: #3f4254; font-size: 10px; white-space: nowrap; }
.gm-box { flex: none; display: inline-block; width: 11px; height: 11px; border: 1px solid #b7b9cc; border-radius: 3px; background: #fff; }
.gm-box.is-native { border-color: #767676; border-radius: 2px; }
.gm-box.is-on {
  border-color: #4e73df; background: #4e73df url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") 50% / 7px no-repeat;
}
.gm-form-check { display: flex; margin: 8px 0 2px; }
.gm-radios { display: flex; flex-direction: column; margin-top: 6px; }
.gm-radios .gm-label { margin: 4px 0 3px; }
.gm-radio-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gm-radio { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.gm-radio i { flex: none; width: 11px; height: 11px; border: 1px solid #767676; border-radius: 50%; background: #fff; }
.gm-radio i.is-on { border-color: #4e73df; background: #4e73df; box-shadow: inset 0 0 0 2px #fff; }
.gm-select2 {
  display: flex; align-items: center; height: 22px; overflow: hidden; border: 1px solid #aaa; border-radius: 4px;
  background: linear-gradient(to bottom, #fff 50%, #eee 100%); color: #444; font-size: 10px;
}
.gm-select2 > span:first-child { flex: 1; min-width: 0; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-select2-arrow {
  flex: none; display: grid; place-items: center; width: 16px; height: 100%; border-left: 1px solid #aaa;
  background: linear-gradient(to bottom, #eee 50%, #ccc 100%);
}
.gm-select2-arrow b { width: 0; height: 0; border: 4px solid transparent; border-top-color: #888; border-bottom: 0; }
.gm-switch { position: relative; flex: none; display: inline-block; width: 22px; height: 12px; border: 1px solid #b7b9cc; border-radius: 7px; background: #fff; }
.gm-switch::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: #b7b9cc; }
.gm-switch.is-on { border-color: #4e73df; background: #4e73df; }
.gm-switch.is-on::after { left: 11px; background: #fff; }
/* the green switch of Cấu hình kiểu đánh */
.gm-switch.is-green { width: 26px; height: 15px; border: 0; background: #cbd2dc; }
.gm-switch.is-green::after { top: 2px; left: 2px; width: 11px; height: 11px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.gm-switch.is-green.is-on { background: #1f9d55; }
.gm-switch.is-green.is-on::after { left: 13px; }

/* login / first-run screen (styles.css .auth-*) */
.gm-auth {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px 16px;
  background: radial-gradient(circle at 80% -10%, rgba(248, 209, 20, .18), rgba(0, 0, 0, 0) 45%), linear-gradient(150deg, #c92329 0%, #b91e23 45%, #8c1218 100%);
}
.gm-auth-card { width: 270px; max-width: 100%; overflow: hidden; border-radius: 12px; background: #fff; color: #23334e; box-shadow: 0 14px 30px rgba(60, 0, 0, .35); }
.gm-auth-top {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 10px 10px;
  background: radial-gradient(at 68% -140%, rgba(248, 209, 20, .15), rgba(0, 0, 0, 0) 70%), linear-gradient(110deg, #c92329 0%, #bd2027 38%, #a51a21 72%, #921419 100%);
  border-bottom: 2px solid #f8d114;
}
.gm-auth-top img { width: 136px; height: auto; }
.gm-auth-tagline {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 9px; border: .6px solid rgba(248, 209, 20, .45);
  border-radius: 999px; background: rgba(97, 10, 19, .28); color: #fff; font-size: 8.5px; font-weight: 600; line-height: 12px; white-space: nowrap;
}
.gm-auth-tagline .ic { color: #f8d114; font-size: 8px; }
.gm-auth-form { display: flex; flex-direction: column; padding: 12px 14px 13px; }
.gm-auth-form .gm-label { margin: 7px 0 3px; color: #4b5a72; font-size: 8.5px; font-weight: 600; }
.gm-auth-form .gm-label:first-child { margin-top: 0; }
.gm-auth-form .gm-input { height: 24px; border-color: #e4e9f0; border-radius: 5px; font-size: 9.5px; }
.gm-auth-form .gm-input .ic { font-size: 9px; }
.gm-input-end { margin-left: auto; }
.gm-auth-row { display: flex; align-items: center; margin-top: 12px; }
.gm-auth-or { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; color: #8792a5; font-size: 8px; }
.gm-auth-or::before, .gm-auth-or::after { content: ""; flex: 1; border-top: 1px solid #e4e9f0; }
.gm-auth-row.is-alt { margin-top: 7px; }
.gm-auth-alt { display: grid; flex: 1; gap: 4px; }
.gm-auth-alt .gm-btn + .gm-btn { margin-left: 0; }
.gm-btn.is-auth-alt { height: 20px; border: 1px solid #f0c8ca; border-radius: 5px; background: #fff7f7; color: #b91e23; font-size: 7.5px; font-weight: 800; letter-spacing: .02em; opacity: .55; }
.gm-auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 13px; color: #fff; font-size: 9px; opacity: .92; }
.gm-auth-links span { display: inline-flex; align-items: center; gap: 4px; }
.gm-auth-title { color: #23334e; font-size: 12px; font-weight: 750; line-height: 16px; }
.gm-auth-note { margin: 2px 0 4px; color: #64748b; font-size: 8.5px; }
.gm-auth-form .gm-auth-note + .gm-label { margin-top: 4px; }
.gm-auth-switch { margin-top: 9px; color: #146db1; font-size: 8.5px; text-align: center; }

/* the app after login (app.js shell): header, sidebar, breadcrumb */
.gm-app { position: relative; background: #f8f9fc; }
.gm-top {
  display: flex; align-items: center; height: 40px; padding-right: 12px; border-bottom: 2px solid #f8d114; color: #fff;
  background: radial-gradient(at 68% -140%, rgba(248, 209, 20, .15), rgba(0, 0, 0, 0) 70%), linear-gradient(110deg, #c92329 0%, #bd2027 38%, #a51a21 72%, #921419 100%);
}
.gm-brand { flex: none; display: flex; align-items: center; justify-content: center; width: 168px; }
.gm-brand img { width: 96px; height: auto; }
.gm-burger {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 6px; background: rgba(255, 255, 255, .08); font-size: 9px;
}
.gm-top-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.gm-help { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; }
.gm-help .ic { font-size: 11px; }
.gm-account {
  display: flex; align-items: center; height: 28px; padding: 3px 7px 3px 3px; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px; background: rgba(97, 10, 19, .2);
}
.tts-public .gm-account.is-target { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(255, 255, 255, .45); }
.gm-avatar {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #f8d114; border-radius: 50%;
  background: #fff8db; color: #952029; font-size: 10px; font-weight: 700;
}
.gm-account-text { display: flex; flex-direction: column; margin-left: 6px; line-height: 1.2; }
.gm-account-text small { color: #f8d7d8; font-size: 6.5px; }
.gm-account-text strong { font-size: 8px; font-weight: 700; text-transform: uppercase; }
.gm-account-chevron { margin-left: 12px; color: #f8d7d8; font-size: 7px; }
.gm-app-body { display: flex; min-height: 330px; }
.gm-app.is-full-menu .gm-app-body { min-height: 452px; }
.gm-menu { flex: none; display: flex; flex-direction: column; width: 168px; background: #fff; box-shadow: 1px 0 0 #edf0f4; }
.gm-nav { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 10px 10px 2px 8px; }
.gm-nav-title {
  display: block; margin: 0 0 4px; padding: 0 8px; color: #64748b; font-size: 7.5px; font-weight: 700; line-height: 11px;
  letter-spacing: .06em; text-transform: uppercase;
}
.gm-menu-item + .gm-nav-title { margin-top: 10px; }
.gm-menu-item {
  position: relative; display: flex; align-items: center; height: 23px; margin-bottom: 2px; padding: 0 7px; border-radius: 6px;
  color: #526078; font-size: 10px; font-weight: 500; white-space: nowrap;
}
.gm-menu-ic { flex: none; display: inline-flex; justify-content: center; width: 13px; margin-right: 6px; color: #8792a5; font-size: 10px; }
.gm-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-menu-item.is-active { background: #fff0f0; color: #b01f28; font-weight: 650; }
.gm-menu-item.is-active .gm-menu-ic { color: #b91e23; }
.gm-menu-item.is-active::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: -6px; width: 2px; border-radius: 0 2px 2px 0; background: #b91e23; }
.gm-menu-item .gm-pin { margin-left: 4px; }
.gm-dot { flex: none; width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: #b91e23; }
.gm-support {
  flex: none; display: flex; align-items: center; gap: 6px; margin: 6px 10px 0; padding: 6px;
  border: 1px solid #deebf9; border-radius: 8px; background: linear-gradient(115deg, #f2f8fe, #f9fbfe);
}
.gm-support-ic { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #146db1; color: #fff; font-size: 10px; }
.gm-support-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm-support-text b { color: #243d63; font-size: 8px; font-weight: 600; }
.gm-support-text small { display: inline-flex; align-items: center; gap: 3px; color: #216da8; font-size: 6.5px; white-space: nowrap; }
.gm-support-text small .ic { font-size: 6px; }
.gm-chip-row { position: relative; flex: none; height: 46px; }
.gm-chip { position: absolute; left: 12px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 1px 4px rgba(110, 10, 16, .28); }
.gm-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.gm-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; min-height: 30px; margin-bottom: 10px; padding: 5px 12px;
  background: #fff; box-shadow: 0 1px 0 #e9ebef; color: #7b8698; font-size: 9px; white-space: nowrap;
}
.gm-crumb-path { display: flex; align-items: center; }
.gm-crumb + .gm-crumb::before { content: "›"; padding: 0 5px; color: #9aa4b4; font-weight: 400; }
.gm-crumb.is-home { display: inline-flex; align-items: center; gap: 3px; color: #65748c; }
.gm-crumb.is-home .ic { font-size: 8.5px; }
b.gm-crumb { color: #23334e; font-weight: 600; }
.gm-expiry-wrap { display: flex; align-items: center; margin-left: auto; }
.gm-expiry {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid #e8edf4; border-radius: 4px;
  background: #f8fafc; color: #5d6b7e; font-size: 8px; font-weight: 400;
}
.gm-expiry .ic { color: #8491a6; font-size: 8px; }
.gm-content { position: relative; flex: 1; min-width: 0; padding: 0 12px 12px; }
/* phone bottom bar (round logo, 4 tabs, Menu): shown by the phone rules below (<768px, or .gm-app.is-phone) */
.gm-bottombar { position: relative; display: none; align-items: stretch; height: 38px; padding-left: 44px; border-top: 1px solid #e4e9f0; background: #fff; }
.gm-bottombar .gm-chip { top: -4px; bottom: auto; left: 8px; }
.gm-tab { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #6b778a; font-size: 6.5px; }
.gm-tab b { font-weight: 600; }
.gm-tab .ic { font-size: 11px; }
.gm-tab.is-active { color: #b91e23; }
.gm-tab.is-active::before { content: ""; position: absolute; top: -1px; left: 50%; width: 26px; height: 2px; margin-left: -13px; background: #b91e23; }
.gm-skeleton { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: #fff; }
.gm-skeleton i { height: 8px; border-radius: 4px; background: #e6eaf0; }
.gm-skeleton i.is-short { width: 60%; }
.gm-dropdown {
  position: absolute; z-index: 2; top: 46px; right: 10px; width: 164px; padding: 5px; border: 1px solid #e8eaf0;
  border-radius: 9px; background: #fff; color: #23334e; box-shadow: 0 14px 34px rgba(21, 33, 55, .16);
}
.gm-dropdown-head { display: flex; flex-direction: column; padding: 6px 8px 2px; }
.gm-dropdown-head small { color: #6a7587; font-size: 7.5px; }
.gm-dropdown-head strong { font-size: 9px; font-weight: 700; }
.gm-dropdown-switch { display: flex; align-items: center; gap: 7px; margin: 12px 8px 10px; font-size: 9px; }
.gm-divider { display: block; margin: 2px 6px; border-top: 1px solid #edf0f4; }
.gm-dropdown-item { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; color: #3b485e; font-size: 9px; }
.gm-dropdown-item .ic { color: #8490a3; font-size: 8.5px; }
.gm-dropdown-item.is-danger, .gm-dropdown-item.is-danger .ic { color: #b91e23; }

/* an open dialog: as in the app it covers the whole page (header included) with the 50% black backdrop and sits
   centred near the top, 700px of a 1366px screen ('lg': 900px) */
.gm-app.has-modal { min-height: 380px; }
.gm-app.has-modal > .gm-top { position: absolute; top: 0; left: 0; right: 0; }
.gm-app.has-modal > .gm-app-body { position: absolute; top: 40px; bottom: 0; left: 0; right: 0; min-height: 0; }
.gm-backdrop { position: absolute; z-index: 1; inset: 0; background: rgba(0, 0, 0, .5); }
.gm-modal-layer { position: relative; z-index: 2; padding: 16px 0 22px; }
.gm-modal-layer > .gm-modal { width: 52%; min-width: 330px; margin: 0 auto; }
.gm-modal-layer.is-lg > .gm-modal { width: 66%; }
.gm-app.has-modal .gm-pin { position: relative; z-index: 3; }

/* dialog (Bootstrap modal of the app) */
.gm-modal { overflow: hidden; border: 1px solid rgba(0, 0, 0, .2); border-radius: 5px; background: #fff; box-shadow: 0 12px 28px rgba(35, 51, 78, .16); }
.gm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #e3e6f0; box-shadow: 0 2px 4px rgba(0, 0, 0, .04); }
.gm-modal-head strong { color: #3f4254; font-size: 13px; font-weight: 400; }
.gm-modal-x { color: #3f4254; font-size: 15px; font-weight: 700; line-height: 1; opacity: .6; }
.gm-modal-body { position: relative; padding: 12px 14px; }
.gm-modal-foot { display: flex; align-items: center; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid #e3e6f0; }
.gm-modal-foot .gm-pin { margin-right: 0; }
/* a dialog whose body scrolls (Thêm mới danh bạ): scroll thumb on the right, the next block cut at the bottom */
.gm-modal.is-scroll .gm-modal-body { padding-right: 18px; }
.gm-modal.is-scroll .gm-modal-body::after { content: ""; position: absolute; top: 8px; right: 4px; width: 4px; height: 42%; border-radius: 2px; background: #c1c1c1; }
.gm-section-title { display: flex; align-items: center; margin: 14px 0 6px; color: #3f4254; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.gm-section-title.is-next { margin-bottom: -6px; padding-bottom: 6px; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.gm-target-box { padding: 2px; border-radius: 6px; box-shadow: 0 0 0 2px #c0262c; }

/* tables (the app's red header) */
.gm-scroll { overflow-x: auto; }
.gm-table { width: 100%; border-collapse: collapse; background: #fff; color: #3f4254; font-size: 9.5px; }
.gm-table th {
  padding: 6px; border: 1px solid #b8030a; background: #b8030a; color: #fff; font-size: 8.5px; font-weight: 700;
  text-align: left; text-transform: uppercase; vertical-align: bottom; white-space: nowrap;
}
.gm-table td { padding: 6px; border: 1px solid #e3e6f0; vertical-align: top; white-space: nowrap; }
.gm-table th.is-gap, .gm-table td.is-gap { padding: 0 4px; border-color: #fff; background: #fff; }
.gm-modal .gm-table th { white-space: normal; }
.gm-table.is-price { font-size: 10px; }
.gm-table.is-price th { padding: 4px 6px 7px; border: 0; background: none; color: #3f4254; font-size: 9.5px; font-weight: 500; text-align: center; text-transform: none; }
.gm-table.is-price td { padding: 4px 8px; border: 0; border-top: 1px solid #e3e6f0; text-align: center; vertical-align: middle; }
.gm-table.is-price td:first-child { width: 22%; font-weight: 600; }
.gm-table.is-price .gm-input { height: 20px; border-color: #c4c4c4; text-align: left; }
/* THAO TÁC (last column) = the app's .col-actions: sticky on the right with a shadow, so it stays in view while a
   narrow table scrolls (phones), grey cells, the head may wrap ("THAO / TÁC") */
.gm-table.has-actions th:last-child, .gm-table.has-actions td:last-child { position: sticky; z-index: 1; right: 0; box-shadow: -4px 0 6px -2px rgba(58, 59, 69, .15); }
.gm-table.has-actions th:last-child { white-space: normal; }
.gm-table.has-actions td:last-child { background: #f8f9fc; }
.gm-link { color: #259dba; }
.gm-pill { display: inline-block; padding: 2px 6px; border-radius: 8px; color: #fff; font-size: 8px; line-height: 1; }
.gm-pill.is-bts-1 { background: #d9534f; }
.gm-actions { display: inline-flex; align-items: center; gap: 5px; }
.gm-ic { display: inline-grid; place-items: center; color: #3f4254; font-size: 9.5px; }
.gm-ic.is-target { border-radius: 3px; }
.gm-money { white-space: pre; }
.gm-money .nw { white-space: nowrap; }
.gm-num { display: inline-block; border-radius: 3px; }
.gm-teal { color: #259dba; }
.gm-red { color: #f00; }
.gm-blue { color: #00f; }

/* Tin nhắn page (view-messages.js) and its Thêm Mới dialog (msg-modals.js) */
.gm-toolbar { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.gm-toolbar .gm-btn + .gm-btn { margin-left: 0; }
.gm-grow { flex: 1; }
.gm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.gm-filter > .gm-input { width: 96px; }
.gm-tabs { display: flex; background: #eaecf0; }
.gm-tabs > span {
  position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 20px;
  color: #505b72; font-size: 9.5px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
}
.gm-tabs > span.is-active { background: linear-gradient(90deg, #259dba 0, #2574ab); color: #fff; }
.gm-count {
  position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: #f00; color: #fff; font-size: 8.5px; font-weight: 700;
}
.gm-tab-body { padding-bottom: 6px; border-bottom: 3px solid #dddfeb; background: #fdfdfd; }
.gm-tab-short, .gm-phone-only, .gm-mlabel { display: none; }
.gm-mbtns { margin-bottom: 8px; }
.gm-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 4px; }
.gm-flags { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.gm-flag-list { display: flex; flex-direction: column; gap: 7px; }
.gm-flag-list .gm-check { gap: 6px; font-weight: 500; }
.gm-flag-list .gm-req { margin-left: 0; }
.gm-hint { display: block; margin: 4px 0 10px; color: #3f4254; font-size: 9.5px; }
.gm-hint u { margin-left: 4px; color: #4e73df; }
.gm-hint .gm-req { margin: 0; }
.gm-check-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 10px; font-weight: 700; }
.gm-sum { display: grid; grid-template-columns: 1fr auto auto; gap: 34px; padding: 2px 12px 6px; font-size: 9.5px; }
.gm-sum > span:first-child { display: flex; gap: 10px; }

/* Doanh thu page (view-revenue.js, revenue-ui.js) */
.gm-rev-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.gm-rev-filter .gm-filter { margin: 0; }
.gm-rev-filter .gm-filter > .gm-input { width: 110px; }
.gm-checks-col { display: flex; flex-direction: column; gap: 4px; }
.gm-table.is-revenue { font-size: 8.5px; }
.gm-table.is-revenue th { padding: 4px 3px; font-size: 7.5px; line-height: 1.25; white-space: normal; }
.gm-table.is-revenue td { padding: 4px 3px; }
.gm-table.is-revenue td.is-gap, .gm-table.is-revenue th.is-gap { padding: 0 2px; }
.gm-table.is-revenue .gm-pin { width: 15px; height: 15px; margin-left: 3px; font-size: 8.5px; }
.gm-table.is-revenue .gm-btn.is-icon { width: 18px; height: 18px; }
.gm-xt { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.gm-xt > :first-child { display: inline-flex; align-items: center; }
.gm-row-btns { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gm-row-btns .gm-btn + .gm-btn { margin-left: 0; }
.gm-rev-lines { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 10px; padding: 0 4px; font-size: 9.5px; }

/* Cấu hình kiểu đánh page (view-settings.js) */
.gm-set-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.gm-set-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-set-title strong { color: #22356b; font-size: 15px; font-weight: 750; line-height: 20px; }
.gm-set-title > span { color: #64748b; font-size: 9.5px; }
.gm-set-count { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #edf4fa; color: #22356b; font-weight: 600; white-space: nowrap; }
.gm-note { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid #d9e6f2; border-radius: 8px; background: #f1f7fc; color: #34506e; font-size: 9.5px; line-height: 1.55; }
.gm-note > .ic { margin-top: 2px; color: #146db1; font-size: 11px; }
.gm-note-title { display: block; color: #22356b; font-weight: 700; }
.gm-note-line { display: block; }
.gm-note code { padding: 0 4px; border-radius: 3px; background: #fff; color: #22356b; font: 9px/1.3 var(--mono); }
.gm-set-list { overflow: hidden; border: 1px solid #e4e9f0; border-radius: 8px 8px 0 0; border-bottom: 0; background: #fff; color: #23334e; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.gm-set-cols, .gm-set-row { display: grid; grid-template-columns: 1.1fr 1.6fr .9fr; gap: 10px; align-items: center; padding: 0 12px; }
.gm-set-cols { height: 28px; background: #f6f8fb; color: #64748b; font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
.gm-set-cols > span { display: flex; align-items: center; }
.gm-set-row { min-height: 38px; border-top: 1px solid #edf0f4; }
.gm-set-kind { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gm-set-kind b { display: block; font-size: 10px; font-weight: 650; }
.gm-set-kind small { display: block; color: #1f9d55; font-size: 8.5px; font-weight: 500; }
.gm-set-row.is-off .gm-set-kind small { color: #8a94a6; }
.gm-set-row .gm-input { height: 24px; border-color: #e4e9f0; border-radius: 5px; }

/* two small windows side by side (section 07); the app in a half window is drawn as on a phone (.is-phone below) */
.guide-flows .gm-figure { margin: 0; }
.gm-figure.is-half .gm-auth { min-height: 330px; justify-content: center; }

/* the app as a phone shows it (styles.css < 992px / 768px), at any width of the picture: the same rules as the
   phone block of the responsive part below — small header with the round ? and the avatar, no sidebar, Hạn sử dụng
   on its own line under the breadcrumb, the bottom bar */
.gm-app.is-phone .gm-brand { width: auto; padding-left: 8px; }
.gm-app.is-phone .gm-brand img { width: 76px; }
.gm-app.is-phone .gm-burger, .gm-app.is-phone .gm-help span, .gm-app.is-phone .gm-account-text, .gm-app.is-phone .gm-account-chevron { display: none; }
.gm-app.is-phone .gm-top-right { gap: 6px; }
.gm-app.is-phone .gm-help { justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(255, 255, 255, .1); }
.gm-app.is-phone .gm-account { height: auto; padding: 0; border: 0; background: none; }
.gm-app.is-phone .gm-menu { display: none; }
.gm-app.is-phone .gm-app-body { min-height: 0; }
.gm-app.is-phone .gm-crumbs { padding: 6px 10px; }
.gm-app.is-phone .gm-expiry-wrap { flex: 0 0 100%; margin-left: 0; }
.gm-app.is-phone .gm-content { padding: 0 10px 10px; }
.gm-app.is-phone .gm-bottombar { display: flex; }
/* side by side with the first-run screen: about as tall as it */
.gm-figure.is-half .gm-app.is-phone .gm-app-body { min-height: 320px; }

/* figure captions that differ between the computer picture and the phone picture (< 768px) */
.guide-only-phone { display: none; }

/* ------------------------------------------------------------------ footer */
.public-footer { padding-top: 48px; border-top: 1px solid var(--pub-line); background: #fff; color: #5d6b80; font-size: 14px; }
.public-footer-grid { display: grid; grid-template-columns: minmax(0, 386fr) repeat(3, minmax(0, 258fr)); gap: 40px; padding-bottom: 37px; }
.public-footer-logo { display: inline-flex; align-items: center; justify-content: center; width: 164px; height: 58px; border-radius: 10px; background: var(--pub-red); }
.public-footer-logo img { display: block; width: 140px; height: 42px; }
.public-footer-about p { max-width: 317px; margin: 15px 0 12px; line-height: 24.6px; }
/* tagline under the footer logo (brand.js TAGLINE, sentence case) */
.public-footer-about .public-footer-tagline { margin: 14px 0 0; color: var(--pub-red); font-size: 15px; font-weight: 700; line-height: 22px; }
.public-footer-about .public-footer-tagline + p { margin-top: 6px; }
.public-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 17px; }
.tts-public .public-footer-actions .public-button { height: 42px; padding: 0 19px; }
.public-footer-support { display: inline-flex; align-items: center; gap: 8px; color: var(--pub-ink); font-size: 14px; font-weight: 600; }
.public-footer-support .ic { color: #2d9fd9; font-size: 16px; }
.public-footer-support .public-soon { margin-left: 0; }
.public-footer-title { display: block; color: var(--pub-ink); font-size: 13px; font-weight: 700; line-height: 21px; letter-spacing: .03em; text-transform: uppercase; }
.public-footer-col ul { margin: 16px 0 0; padding: 0; list-style: none; }
.public-footer-col li { line-height: 19.4px; }
.public-footer-col li + li { margin-top: 13px; }
.tts-public .public-footer-col a { color: var(--pub-nav); line-height: 19px; }
.public-footer-keywords { max-width: 1342px; margin: 0 auto; border-top: 1px solid var(--pub-line-2); }
.public-footer-keywords nav { display: flex; align-items: flex-start; gap: 15px; padding-top: 22px; padding-bottom: 22px; }
.public-footer-keywords .public-footer-title { flex: none; font-size: 12px; line-height: 30px; }
.public-footer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tts-public .public-footer-chips a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--pub-line); border-radius: 999px;
  background: var(--pub-bg); color: #5d6b80; font-size: 12px; text-decoration: none; white-space: nowrap;
}
.tts-public .public-footer-chips a:hover { border-color: #cfd8e5; color: var(--pub-ink); }
.public-footer-bottom { border-top: 1px solid var(--pub-line-2); color: #7a879a; font-size: 13px; }
.public-footer-bottom .public-container { display: flex; align-items: center; min-height: 57px; }
@media (min-width: 992px) { .public-footer-bottom .public-container { max-width: none; padding: 0 92px; } }

/* phone tab bar (hidden on desktop) */
.public-tabbar { display: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1199.98px) {
  .public-nav { gap: 0; margin-left: 18px; }
  .tts-public .public-nav-link { gap: 7px; padding: 0 10px; }
  .guide-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 991.98px) {
  .public-nav { display: none; }
  .public-header-inner { height: 64px; }
  .public-brand { width: 136px; height: 48px; border-radius: 9px; }
  .public-brand img { width: 118px; height: 36px; }
  .tts-public .public-login { height: 42px; padding: 0 16px; }
  .public-main { padding-bottom: 48px; }
  .tts-public { padding-bottom: calc(64px + var(--safe-bottom, 0px)); }

  .guide-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 22px; }
  .guide-layout { display: block; margin-top: 24px; }
  .guide-toc { position: static; margin-bottom: 24px; }
  .guide-toc-label { display: none; }
  .guide-toc-list { display: flex; gap: 8px; overflow-x: auto; margin: 0 -32px; padding: 2px 32px 4px; scrollbar-width: none; }
  .guide-toc-list::-webkit-scrollbar { display: none; }
  .tts-public .guide-toc-link { flex: none; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--pub-line); border-radius: 10px; background: #fff; white-space: nowrap; }
  .tts-public .guide-toc-link.is-active { border-color: #f1c9cc; }
  .guide-more { grid-template-columns: minmax(0, 1fr); }
  .public-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .public-footer-about { grid-column: 1 / -1; }

  .public-tabbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; height: calc(64px + var(--safe-bottom, 0px));
    padding-bottom: var(--safe-bottom, 0px); border-top: 1px solid var(--pub-line); background: #fff; box-shadow: 0 -4px 14px rgba(35, 51, 78, .05);
  }
  .tts-public .public-tab {
    position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    color: #6b778a; font-size: 12px; font-weight: 600; text-decoration: none;
  }
  .public-tab .ic { font-size: 19px; }
  .tts-public .public-tab.is-active { color: var(--pub-red); }
  .public-tab.is-active::before { content: ""; position: absolute; top: -1px; left: 50%; width: 60px; height: 3px; margin-left: -30px; border-radius: 0 0 3px 3px; background: var(--pub-red); }
}

@media (max-width: 767.98px) {
  .public-container { padding: 0 16px; }
  .guide-toc-list { margin: 0 -16px; padding: 2px 16px 4px; }
  .public-page-head { padding-top: 24px; }
  .public-heading-row { margin-top: 8px; }
  .public-heading-row h1 { font-size: 28px; line-height: 35px; }
  .tts-public .public-heading-meta { height: 31px; padding: 0 10px; }
  .public-page-description { margin-top: 12px; font-size: 13.5px; line-height: 23px; }
  .tts-public .guide-quick-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 14px 14px; }
  .guide-quick-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
  .guide-quick-number { left: 14px; }
  .guide-quick-text strong { font-size: 13px; }

  .guide-step { padding: 22px 16px 20px; border-radius: 12px; }
  .guide-step + .guide-step { margin-top: 16px; }
  .guide-step-head { gap: 12px; padding-bottom: 14px; margin-bottom: 16px; }
  .guide-step-index { width: 36px; height: 36px; border-radius: 9px; font-size: 12px; }
  .guide-step-heading h2 { font-size: 18px; line-height: 25px; }
  .guide-lead, .guide-p, .guide-bullets, .guide-steps > li { font-size: 14px; line-height: 25px; }
  .guide-steps-num { width: 22px; height: 22px; font-size: 11px; }
  .guide-h3 { margin-top: 24px; font-size: 16px; }
  .guide-table { font-size: 14px; }
  .guide-table table { font-size: 13px; }
  .guide-table thead th, .guide-table tbody th, .guide-table tbody td { padding-left: 12px; padding-right: 12px; }
  .guide-table tbody th { width: 40%; }
  .guide-plans table { min-width: 560px; }
  .guide-flows { grid-template-columns: minmax(0, 1fr); }
  .gm-window { border-radius: 10px; }
  .gm-address { width: auto; flex: 1; }
  /* the app on a phone (styles.css < 992px): small header with the round ? and the avatar, no sidebar, the
     breadcrumb on two lines, the bottom bar (round logo, 4 tabs, Menu) */
  .gm-brand { width: auto; padding-left: 8px; }
  .gm-brand img { width: 76px; }
  .gm-burger, .gm-help span, .gm-account-text, .gm-account-chevron { display: none; }
  .gm-top-right { gap: 6px; }
  .gm-help { justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(255, 255, 255, .1); }
  .gm-account { height: auto; padding: 0; border: 0; background: none; }
  .gm-menu { display: none; }
  .gm-app-body, .gm-app.is-full-menu .gm-app-body, .gm-figure.is-half .gm-app.is-phone .gm-app-body { min-height: 0; }
  .gm-crumbs { padding: 6px 10px; }
  .gm-expiry-wrap { flex: 0 0 100%; margin-left: 0; }
  .gm-content { padding: 0 10px 10px; }
  .gm-bottombar { display: flex; }
  /* the account menu on a phone (styles.css .tts-account-menu): the same 242px panel under the avatar, top right,
     over the breadcrumb and the page */
  .gm-dropdown { top: 39px; right: 12px; }
  .gm-app.has-modal > .gm-app-body { bottom: 38px; }
  .gm-app.has-modal > .gm-bottombar { position: absolute; left: 0; right: 0; bottom: 0; }
  .gm-modal-layer { padding: 12px 0 50px; }
  .gm-modal-layer > .gm-modal, .gm-modal-layer.is-lg > .gm-modal { width: auto; min-width: 0; margin: 0 8px; }
  .guide-only-desk { display: none; }
  .guide-only-phone { display: inline; }
  .gm-sum { grid-template-columns: 1fr; gap: 3px; }
  /* phone layouts of the pages (as the app's page CSS below 768px) */
  .gm-desk-only, .gm-tab-long { display: none; }
  .gm-phone-only, .gm-tab-short { display: inline-flex; }
  .gm-filter > .gm-input, .gm-rev-filter .gm-filter > .gm-input { width: 100%; }
  .gm-tabs > span { padding: 0 18px 0 6px; }
  .gm-rev-filter .gm-filter { width: 100%; }
  .gm-rev-lines { flex-direction: column; gap: 2px; }
  .gm-set-head { flex-direction: column; align-items: stretch; }
  .gm-set-head .gm-row { align-self: flex-start; }
  .gm-set-cols { display: none; }
  .gm-set-row { grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 10px; }
  .gm-set-kind { grid-column: 1 / -1; }
  .gm-set-cell { display: block; min-width: 0; }
  .gm-mlabel { display: block; margin-bottom: 3px; color: #64748b; font-size: 7.5px; font-weight: 700; text-transform: uppercase; }
  .guide-support { padding: 20px; }
  .public-footer { padding-top: 32px; }
  .public-footer-grid { gap: 24px 16px; padding-bottom: 30px; }
  .public-footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
  .public-footer-col:last-child li + li { margin-top: 0; }
  .public-footer-col:last-child { grid-column: 1 / -1; }
  .public-footer-keywords nav { flex-direction: column; gap: 8px; }
}

@media (max-width: 420px) {
  .tts-public .public-login { gap: 7px; padding: 0 12px; font-size: 13px; }
  .public-brand { width: 120px; height: 44px; }
  .public-brand img { width: 104px; height: 32px; }
  .public-heading-row { flex-wrap: wrap; gap: 10px; }
  .gm-auth-card { width: 100%; }
  /* long button texts ("Mua hoặc gia hạn ở màn đăng nhập") wrap instead of pushing the page wider at 320px */
  .guide-ui { white-space: normal; }
  .guide-payment-flow, .guide-steps, .guide-steps-text { min-width: 0; overflow-wrap: anywhere; }
  .tts-public .public-button { max-width: 100%; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; }
}

@media print {
  .public-header, .public-tabbar, .guide-toc, .public-footer { display: none !important; }
  .guide-layout { display: block; }
  .guide-step { break-inside: avoid; }
}