/* Public pages Bot Telegram (.bot-*), Tải app (.bap-*), Tin tức (.news-*) and Kết quả xổ số công khai (.xs-*):
   tinhtienso's layouts (research/ui/guide/bot-telegram-*, tai-app-*, tin-tuc-*, kqxs-*; tts-guide-pages.json, measured
   at 1347px = 1366 with a scrollbar). Loaded after css/public.css; everything under .tts-public. Pages:
   js/view-bot-telegram.js, js/view-tai-app.js, js/view-tin-tuc.js, js/view-kqxs.js. */

.tts-public {
  --pub-blue: #146db1;
  --pub-navy: #22356b;
  --pub-tg: #229ed9;
  --pub-code-bg: #f4f6fa;
  --pub-phone: #1f2733;
}

/* ================================================================== Bot Telegram */
.bot-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bot-head-main { flex: 1; min-width: 0; max-width: 973px; }
.tts-public .bot-handle { height: 36px; gap: 8px; padding: 0 12px 0 11px; color: var(--pub-ink); font-weight: 600; }
.bot-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pub-tg); color: #fff; font-size: 10px; }
.bot-handle .public-soon { margin-left: 0; }
.bot-head-actions { flex: none; display: flex; gap: 8px; }
.tts-public .bot-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border: 1px solid var(--pub-blue); border-radius: 8px; background: var(--pub-blue); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.bot-button .ic { font-size: 13px; }
.tts-public .bot-button.is-outline { background: #fff; color: var(--pub-blue); }
.tts-public .bot-button.is-disabled { cursor: not-allowed; opacity: .6; }

.bot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tts-public .bot-chips a {
  display: inline-flex; align-items: center; height: 31px; padding: 0 11px; border: 1px solid var(--pub-line); border-radius: 999px;
  background: #fff; color: var(--pub-ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.tts-public .bot-chips a:hover { border-color: #cfd8e5; text-decoration: none; }

.bot-intro { display: grid; grid-template-columns: minmax(0, 749fr) minmax(0, 517fr); gap: 14px; margin-top: 13px; scroll-margin-top: 16px; }
.bot-video {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 421px; overflow: hidden;
  border-radius: 10px; background: #0f1623; color: #c9d3e1; font-size: 13px;
}
.bot-video-body { display: flex; flex-direction: column; align-items: center; padding: 24px 48px 70px; text-align: center; }
.bot-video-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; }
.bot-video-play .ic { margin-left: 4px; }
.bot-video-body strong { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; color: #fff; font-size: 16px; font-weight: 700; }
.bot-video-body strong .public-soon { margin-left: 0; }
.bot-video-body p { max-width: 440px; margin: 8px 0 0; color: #9aa8bd; line-height: 21px; }
.tts-public .bot-video-body a { color: #fff; text-decoration: underline; }
.bot-video-controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 22px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .45)); color: #e5e7eb; font-size: 14px;
}
.bot-video-controls .ic { font-size: 13px; }
.bot-video-track { position: absolute; left: 16px; right: 16px; bottom: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.bot-video-controls span { margin-right: auto; }
.bot-video-dot { width: 14px; height: 14px; border: 2px solid #9aa3b2; border-radius: 3px; }
.bot-video-dot.is-v { width: 4px; border-width: 0; background: radial-gradient(circle, #cfd5de 1.5px, transparent 2px) 0 0 / 4px 5px; }

.bot-card {
  padding: 17px 19px 19px; border: 1px solid var(--pub-line); border-radius: 10px; background: #fff; color: var(--pub-ink);
  font-size: 13px; line-height: 20px; scroll-margin-top: 16px;
}
.bot-card h2 { margin: 0; color: var(--pub-navy); font-size: 15px; font-weight: 700; line-height: 21px; }
.bot-card + .bot-card, .bot-intro + .bot-card { margin-top: 14px; }
.bot-card-lead { margin: 6px 0 12px; color: var(--pub-muted); }
.bot-code {
  display: inline-block; padding: 0 6px; border-radius: 5px; background: var(--pub-code-bg); color: var(--pub-navy);
  font: 400 12px/18px var(--mono); white-space: nowrap;
}

/* Kết nối trong 3 bước */
.bot-timeline { margin: 12px 0 0; padding: 0; list-style: none; }
.bot-timeline li { position: relative; padding-left: 36px; }
.bot-timeline li + li { margin-top: 13px; }
.bot-timeline li:not(:last-child)::before { content: ""; position: absolute; top: 28px; bottom: -11px; left: 11.5px; width: 1px; background: var(--pub-line); }
.bot-step-num {
  position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pub-navy); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.bot-timeline h3 { margin: 0; color: var(--pub-ink); font-size: 13px; font-weight: 700; line-height: 24px; }
.bot-timeline p { margin: 3px 0 0; color: var(--pub-muted); }
.bot-timeline p strong { color: var(--pub-ink); font-weight: 600; }
.tts-public .bot-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--pub-blue); font-size: 12px; font-weight: 600; text-decoration: none; }
.bot-link .ic { font-size: 10px; }
.bot-link.is-disabled { color: #7d93ab; cursor: not-allowed; }
.bot-link .public-soon { margin-left: 2px; }
.bot-sample {
  display: inline-flex; align-items: center; height: 30px; margin-top: 5px; padding: 0 10px; border-radius: 5px;
  background: var(--pub-code-bg); color: var(--pub-navy); font: 400 13px/1 var(--mono);
}
.bot-done {
  display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 17px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #edf4f0; color: var(--pub-muted); font-weight: 600;
}
.bot-done .ic { flex: none; color: #8a9aae; font-size: 13px; }
.bot-done q { margin: 0 4px; }

/* Gửi và huỷ tin */
.bot-messaging-grid { display: grid; grid-template-columns: 568px minmax(0, 1fr); gap: 20px; margin-top: 12px; }
.bot-chat { margin: 0; }
.bot-chat ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 12px 15px; list-style: none; border-radius: 10px; background: #dfe8ef; }
.bot-bubble {
  display: flex; flex-direction: column; max-width: 72%; padding: 6px 10px 7px; border-radius: 12px 12px 12px 4px; background: #fff;
  box-shadow: 0 1px 1px rgba(17, 27, 33, .13);
}
.bot-bubble.is-player { align-self: flex-end; border-radius: 12px 12px 4px; background: #e3f7d0; }
.bot-bubble.is-bot { align-self: flex-start; }
.bot-bubble-sender { color: #1a7fb0; font-size: 11px; font-weight: 600; line-height: 18px; }
.is-player .bot-bubble-sender { color: #3d8a2e; }
.bot-bubble-text { color: #111b21; font-size: 13px; line-height: 20px; }
.bot-bubble-text u { text-decoration-color: #e3000f; text-decoration-thickness: 2px; }
.bot-chat figcaption { margin-top: 5px; color: var(--pub-muted); font-size: 11px; line-height: 17px; }
.bot-rule-list { padding-left: 12px; border-left: 2px solid var(--pub-line); }
.bot-rule + .bot-rule { margin-top: 12px; }
.bot-rule h3 { margin: 0; color: var(--pub-ink); font-size: 13px; font-weight: 700; line-height: 16px; }
.bot-rule p { margin: 1px 0 0; color: var(--pub-muted); }
.bot-rule .bot-code { margin-top: 4px; padding: 2px 7px; }
.bot-rules > .bot-link { margin-top: 12px; }

/* Lệnh của bot / Bot báo lỗi */
.bot-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bot-table thead th {
  padding: 4px 16px 8px 0; border-bottom: 1px solid var(--pub-line); color: var(--pub-muted); font-size: 11px; font-weight: 600;
  letter-spacing: .03em; line-height: 15px; text-align: left; text-transform: uppercase;
}
.bot-table tbody th, .bot-table tbody td { padding: 10px 16px 9px 0; border-bottom: 1px solid var(--pub-line-2); text-align: left; vertical-align: top; }
.bot-table tbody tr:last-child th, .bot-table tbody tr:last-child td { border-bottom: 0; }
.bot-table tbody th { color: var(--pub-ink); font-weight: 600; }
.bot-table .bot-code { padding: 0 7px; font-weight: 600; }
.bot-table small { display: block; margin-top: 1px; color: var(--pub-blue); font-size: 11px; font-weight: 600; line-height: 17px; }
.bot-options { display: flex; flex-wrap: wrap; gap: 4px; }
.bot-options span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid #8dc7e6; border-radius: 999px; color: #1a7fb0; font-size: 12px; }
.bot-muted { color: var(--pub-muted); }
.is-commands th:nth-child(1) { width: 120px; }
.is-commands th:nth-child(2) { width: 54.4%; }
.is-errors th:nth-child(1) { width: 36%; }
.is-errors th:nth-child(2) { width: 37.9%; }
.bot-table q { quotes: "\201C" "\201D"; }
.bot-table td.is-cause { color: var(--pub-muted); }

/* ================================================================== Tải app */
.bap-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 232px 272px; min-height: 438px; margin-top: 38px; overflow: hidden;
  border: 1px solid var(--pub-line); border-radius: 16px; background: #fff; color: var(--pub-ink); font-size: 13px;
}
.bap-hero-main { padding: 30px 32px 24px; min-width: 0; }
.bap-app { display: flex; align-items: center; gap: 12px; }
.bap-icon, .bap-app img { flex: none; width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 4px 10px rgba(185, 30, 35, .22); }
.bap-app-text { display: flex; flex-direction: column; }
.bap-eyebrow { color: var(--pub-muted); font-size: 10px; font-weight: 600; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.bap-app-name { color: var(--pub-navy); font-size: 18px; font-weight: 700; line-height: 29px; }
.bap-hero h1 { margin: 20px 0 0; color: var(--pub-navy); font-size: 30px; font-weight: 750; line-height: 36px; letter-spacing: -.01em; }
.bap-hero-lead { max-width: 460px; margin: 12px 0 0; color: var(--pub-muted); font-size: 14px; line-height: 22.5px; }
.bap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tts-public .bap-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid var(--pub-blue);
  border-radius: 8px; background: var(--pub-blue); color: #fff; font: 600 13px/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.bap-button .ic { font-size: 12px; }
.tts-public .bap-button:hover { background: #105c96; text-decoration: none; }
.tts-public .bap-button.is-outline { border-color: var(--pub-line); background: #fff; color: var(--pub-ink); font-weight: 400; }
.tts-public .bap-button.is-outline:hover { border-color: #cfd8e5; }
.tts-public .bap-button.is-disabled { cursor: not-allowed; opacity: .6; }
.tts-public .bap-button.is-disabled:hover { background: var(--pub-blue); }
.bap-button .public-soon { margin-left: 0; }
.tts-public .bap-address { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--pub-blue); font-size: 12px; font-weight: 600; line-height: 19px; text-decoration: none; word-break: break-all; }
.bap-address .ic { font-size: 11px; }
.bap-copy-status { margin: 4px 0 0; color: var(--pub-muted); font-size: 11px; line-height: 19px; }
/* the planned address (brand.js DOMAIN): said as the future, the address above stays the one to use */
.bap-future {
  display: flex; align-items: flex-start; gap: 7px; max-width: 470px; margin: 10px 0 0; padding: 8px 11px;
  border: 1px dashed #e6c7c9; border-radius: 8px; background: #fff7f7; color: var(--pub-muted); font-size: 12px; line-height: 18px;
}
.bap-future .ic { flex: none; margin-top: 3px; color: var(--pub-red); font-size: 12px; }
.bap-future strong { color: var(--pub-ink); font-weight: 700; }
.bap-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 19px 0 0; list-style: none; border-top: 1px solid var(--pub-line); }
.bap-hero-facts li { display: flex; align-items: flex-start; gap: 10px; }
.bap-note-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--pub-line); border-radius: 8px; background: #fff; color: var(--pub-blue); font-size: 13px; }
.bap-hero-facts strong { display: block; color: var(--pub-ink); font-size: 12px; font-weight: 600; line-height: 17px; }
.bap-hero-facts p { margin: 2px 0 0; color: var(--pub-muted); font-size: 11px; line-height: 16.5px; }

/* the phone showing the app (desktop only) */
.bap-phone {
  position: relative; align-self: end; justify-self: center; width: 200px; height: 408px; overflow: hidden;
  border: 7px solid var(--pub-phone); border-bottom: 0; border-radius: 30px 30px 0 0; background: #f5f5f5;
  box-shadow: 0 18px 40px rgba(35, 51, 78, .16); color: #262626; font-size: 8px;
}
.bap-phone-notch { position: absolute; z-index: 2; top: 6px; left: 50%; width: 58px; height: 11px; margin-left: -29px; border-radius: 999px; background: var(--pub-phone); }
/* the app's Kết quả xổ số page on a phone (styles.css < 992px, css/results.css), about half size */
.bap-phone-app { display: flex; flex-direction: column; gap: 5px; padding: 0 0 46px; background: #f8f9fc; }
.bap-phone-bar {
  display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 14px 7px 0; border-bottom: 1.5px solid #f8d114;
  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%);
}
.bap-phone-logo { display: block; width: 62px; height: auto; }
.bap-phone-icons { display: flex; align-items: center; gap: 4px; }
.bap-phone-help { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 9px; }
.bap-phone-avatar { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #f8d114; border-radius: 50%; background: #fff8db; color: #952029; font-size: 8px; font-weight: 700; }
.bap-phone-crumbs { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: -5px; padding: 5px 8px; background: #fff; box-shadow: 0 1px 0 #e9ebef; color: #7b8698; font-size: 5.5px; white-space: nowrap; }
.bap-phone-crumbs b { color: #23334e; font-weight: 600; }
.bap-phone-expiry { padding: 1px 4px; border: 1px solid #e8edf4; border-radius: 3px; background: #f8fafc; color: #5d6b7e; font-size: 5px; }
.bap-phone-card { display: flex; flex-direction: column; gap: 4px; margin: 0 7px; padding: 5px; border: 1px solid #e4e9f0; border-radius: 6px; background: #fff; }
.bap-phone-date { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; border: 1px solid #e3e6f0; border-radius: 4px; color: #6b778a; font-size: 6px; }
.bap-phone-date > span { flex: 1; color: #23334e; font-size: 7px; }
.bap-phone-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bap-phone-quick span { display: grid; place-items: center; height: 14px; border: 1px solid #e3e6f0; border-radius: 4px; background: #fff; color: #526078; font-size: 6px; font-weight: 600; }
.bap-phone-quick .is-selected { border-color: #d5e5f1; background: #eff5fa; color: #146db1; }
.bap-phone-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 4px; background: #f4f6fa; }
.bap-phone-pills span { display: grid; place-items: center; height: 13px; border-radius: 3px; color: #526078; font-size: 5.2px; font-weight: 600; white-space: nowrap; }
.bap-phone-pills .is-selected { background: #22356b; color: #fff; }
.bap-phone-lookup { gap: 3px; }
.bap-phone-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 4px; color: #64748b; font-size: 5.5px; }
.bap-phone-row b { color: #146db1; font-weight: 600; }
.bap-phone-row i { height: 12px; padding: 0 4px; overflow: hidden; border: 1px solid #e3e6f0; border-radius: 3px; color: #64748b; font-style: normal; line-height: 11px; white-space: nowrap; }
.bap-phone-submit { display: grid; place-items: center; height: 13px; border-radius: 3px; background: #146db1; color: #fff; font-size: 5.5px; font-weight: 600; }
.bap-phone-day { display: flex; justify-content: space-between; margin: 0 8px; color: #64748b; font-size: 5.5px; }
.bap-phone-region { display: grid; gap: 4px; margin: 0 7px; padding: 5px 6px 7px; border: 1px solid #e4e9f0; border-radius: 6px; background: #fff; }
.bap-phone-region-head { display: flex; align-items: center; gap: 4px; }
.bap-phone-badge { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; background: #eef2f8; color: #22356b; font-size: 4.5px; font-weight: 700; }
.bap-phone-region strong { color: var(--pub-navy); font-size: 7.5px; font-weight: 700; }
.bap-phone-region small { margin-left: auto; color: #146db1; font-size: 4.8px; white-space: nowrap; }
.bap-phone-region i { height: 5px; border-radius: 3px; background: #e2e5ea; }
.bap-phone-region i.is-short { width: 58%; }
.bap-phone-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; height: 38px; padding: 0 2px;
  border-top: 1px solid #e5e5e5; background: #fff; color: #8a8a8a;
}
.bap-phone-tabs > span { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; }
.bap-phone-tabs b { font-size: 5.6px; font-weight: 400; white-space: nowrap; }
.bap-phone-tabs .is-active { color: #b91e23; }
.bap-phone-tabs .is-active b { font-weight: 600; }
.bap-phone-tabs > .bap-phone-chip { flex: none; display: block; width: 22px; height: 22px; margin: 0 2px; border-radius: 50%; }

/* Quét để mở app */
.bap-scan {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 24px; border-left: 1px solid var(--pub-line);
  background: linear-gradient(180deg, #fbfcfe, #f6f9fd); text-align: center;
}
.bap-scan-label { display: inline-flex; align-items: center; gap: 6px; color: var(--pub-blue); font-size: 11px; font-weight: 600; line-height: 18px; }
.bap-qr { flex: none; width: 164px; height: 164px; margin-top: 10px; padding: 10px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; }
.bap-qr svg { display: block; width: 100%; height: 100%; }
.bap-scan h2 { margin: 13px 0 0; color: var(--pub-navy); font-size: 14px; font-weight: 700; line-height: 17px; }
.bap-scan p { max-width: 223px; margin: 10px auto 0; color: var(--pub-muted); font-size: 12px; line-height: 19px; }
.bap-scan p strong { color: var(--pub-ink); font-weight: 700; }
.bap-scan .bap-scan-addr { margin-top: 6px; font-size: 11px; line-height: 17px; }
.bap-scan-addr strong { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.bap-scan .bap-local-note {
  display: flex; align-items: flex-start; gap: 6px; max-width: 236px; padding: 7px 9px; border-radius: 8px; background: #fff6dc;
  color: #7a5200; font-size: 11px; line-height: 16px; text-align: left;
}
.bap-local-note .ic { flex: none; margin-top: 2px; color: #c79a00; }
.bap-scan .bap-local-note strong { color: #5b3d00; font-weight: 600; }

/* Thêm vào màn hình chính */
.bap-section-head { display: flex; align-items: center; gap: 12px; margin-top: 25px; }
.bap-section-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--pub-line); border-radius: 10px; background: #fff; color: var(--pub-blue); font-size: 14px; }
.bap-section-head h2 { margin: 0; color: var(--pub-navy); font-size: 18px; font-weight: 700; line-height: 25px; }
.bap-section-head p { margin: 3px 0 0; color: var(--pub-muted); font-size: 13px; line-height: 21px; }
.bap-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bap-platform { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 20px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; color: var(--pub-ink); font-size: 13px; }
.bap-platform-head { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--pub-line); }
.bap-platform-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--pub-code-bg); color: var(--pub-ink); font-size: 20px; }
.bap-platform-icon.is-android { background: #edf8f1; color: #287a4b; }
.bap-platform-head h3 { margin: 0; color: var(--pub-ink); font-size: 15px; font-weight: 700; line-height: 21px; }
.bap-platform-head p { margin: 0; color: var(--pub-muted); font-size: 11px; line-height: 18px; }
.bap-browser { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-left: auto; padding: 0 8px; border: 1px solid var(--pub-line); border-radius: 6px; color: var(--pub-muted); font-size: 11px; }
.bap-browser .ic { font-size: 10px; }
.bap-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.is-android .bap-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.bap-step { position: relative; min-width: 0; }
.bap-step > p { margin: 9px 0 0; color: var(--pub-muted); font-size: 12px; line-height: 18px; }
.bap-step > p strong { color: var(--pub-ink); font-weight: 600; word-break: break-word; }
.bap-inline-ic { color: var(--pub-blue); font-size: 13px; vertical-align: -2px; }
.bap-step-num {
  position: absolute; z-index: 2; top: -8px; left: -6px; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid #fff;
  border-radius: 50%; background: var(--pub-navy); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}

/* the phone screens of the steps */
.bap-screen {
  position: relative; height: 183px; overflow: hidden; border: 5px solid var(--pub-phone); border-radius: 16px; background: #f7f9fc;
  color: #4b5563; font-size: 9px; line-height: 1.2;
}
.bap-screen.is-small { height: 142px; }
.bap-screen.is-dim { background: #9aa4b1; }
.bap-screen-notch { position: absolute; z-index: 2; top: 3px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 999px; background: var(--pub-phone); }
.bap-screen.is-small .bap-screen-notch { width: 29px; margin-left: -14.5px; }
.bap-screen-lines { position: absolute; top: 18px; left: 9px; right: 9px; display: grid; gap: 5px; }
.bap-screen-address + .bap-screen-lines, .bap-screen-topbar + .bap-screen-lines { top: auto; bottom: 18px; }
.bap-screen-lines i { height: 6px; border-radius: 3px; background: #dfe5ec; }
.bap-screen-lines i.is-short { width: 60%; }
.bap-screen-address {
  position: absolute; left: 7px; right: 7px; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; overflow: hidden;
  border-radius: 9px; background: #e7ebf0; color: #374151; font-weight: 600; white-space: nowrap;
}
.bap-screen-address > span { overflow: hidden; text-overflow: ellipsis; }
.bap-screen-address .ic { flex: none; font-size: 7px; }
.bap-screen-address.is-bottom { bottom: 9px; }
.bap-screen-address.is-top { top: 14px; }
.bap-screen-address.is-target, .bap-screen-row.is-target, .bap-screen-link.is-target, .bap-screen-button.is-target { color: var(--pub-red); }
.bap-screen-toolbar {
  position: absolute; left: 7px; right: 7px; bottom: 8px; display: flex; align-items: center; justify-content: space-around; height: 29px;
  border-top: 1px solid #e5e7eb; color: #3478f6; font-size: 10px;
}
.bap-screen-button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font-size: 10px; }
.bap-screen-topbar { position: absolute; top: 14px; left: 7px; right: 7px; display: flex; align-items: center; gap: 4px; }
.bap-screen-topbar .bap-screen-address { position: static; flex: 1; min-width: 0; }
.bap-screen-sheet {
  position: absolute; left: 7px; right: 7px; bottom: 9px; display: grid; gap: 1px; overflow: visible; border-radius: 9px; background: #e5e7eb;
}
/* a label too long for the small phone wraps onto a second line (never cut off) */
.bap-screen-row { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 7px; background: #fff; color: #1f2937; line-height: 1.2; }
.bap-screen-row > span { min-width: 0; overflow-wrap: break-word; }
.bap-screen-row .ic { flex: none; font-size: 8px; }
.bap-screen-row:first-child { border-radius: 9px 9px 0 0; }
.bap-screen-row:last-child { border-radius: 0 0 9px 9px; }
.bap-screen-row.is-target { position: relative; z-index: 1; border-radius: 6px; font-weight: 700; }
.bap-screen-sheet.is-menu { top: 14px; bottom: auto; left: auto; width: 76%; box-shadow: 0 6px 14px rgba(15, 23, 42, .18); }
.bap-screen-sheet.is-choice { left: 7px; right: 7px; bottom: 9px; gap: 0; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -4px 14px rgba(15, 23, 42, .12); }
.bap-screen-sheet-title { padding: 7px 7px 5px; color: var(--pub-ink); font-size: 8px; font-weight: 600; line-height: 1.3; }
.bap-screen-head { position: absolute; top: 14px; left: 9px; right: 9px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; }
.bap-screen-cancel { color: #3478f6; }
.bap-screen-link { display: inline-grid; place-items: center; min-width: 36px; height: 16px; padding: 0 5px; border-radius: 6px; font-weight: 700; }
.bap-screen-app { position: absolute; top: 50%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -14px; color: #1f2937; font-weight: 600; }
.bap-screen-app img { width: 26px; height: 26px; border-radius: 6px; }
.bap-screen-dialog { position: absolute; top: 37px; left: 7px; right: 7px; display: grid; gap: 7px; padding: 9px 8px 6px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .25); }
.bap-screen-app.is-inline { position: static; flex-direction: row; justify-content: center; gap: 6px; margin: 0; }
.bap-screen-app.is-inline img { width: 20px; height: 20px; }
.bap-screen-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-weight: 600; }
.bap-screen-dialog-actions .bap-screen-cancel { color: #1a73e8; }
.bap-done {
  display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding: 10px 12px; border-radius: 10px; background: #edf8f1;
  color: #1d6b3d; font-size: 12px; line-height: 19px;
}
.bap-steps + .bap-done { margin-top: 16px; }
.bap-done img { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.bap-done strong { font-weight: 600; }
.bap-install-tip { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; color: var(--pub-muted); font-size: 12px; line-height: 19px; }
.bap-install-tip .ic { flex: none; margin-top: 3px; color: #2d9fd9; }

/* FAQ + Cần hỗ trợ? */
.bap-bottom { display: grid; grid-template-columns: minmax(0, 843fr) minmax(0, 421fr); gap: 15px; align-items: start; margin-top: 24px; }
.bap-faq { padding: 9px 21px 10px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; }
.bap-faq h2 { margin: 0; color: var(--pub-navy); font-size: 16px; font-weight: 700; line-height: 35px; }
.bap-faq .guide-faq { border: 0; border-radius: 0; font-size: 13px; }
.bap-faq .guide-faq details { border-top: 1px solid var(--pub-line); }
.bap-faq .guide-faq summary { min-height: 45px; padding: 0; font-weight: 600; }
.bap-faq .guide-faq p { padding: 0 0 14px; font-size: 13px; line-height: 21px; }
.bap-faq .guide-faq p strong { color: var(--pub-ink); font-weight: 600; }
.bap-support { padding: 20px 20px 19px; border: 1px solid var(--pub-line); border-radius: 12px; background: linear-gradient(135deg, #fff 35%, #eef4fc); }
.bap-support h2 { margin: 8px 0 0; color: var(--pub-navy); font-size: 16px; font-weight: 700; line-height: 19px; }
.bap-support p { margin: 8px 0 12px; color: var(--pub-muted); font-size: 13px; line-height: 21px; }

/* ================================================================== Tin tức */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.news-head-text { min-width: 0; }
.news-head .public-page-description, .public-kqxs .public-page-description { margin-top: 12px; }
.news-search {
  flex: none; display: flex; align-items: center; width: 355px; height: 48px; padding: 0 5px 0 16px; border: 1px solid #d8dfe9;
  border-radius: 9px; background: #fff;
}
.news-search:focus-within { border-color: #b8c4d6; box-shadow: 0 0 0 3px rgba(54, 95, 140, .12); }
.news-search-ic { flex: none; color: #7b8798; font-size: 15px; }
.news-search input { flex: 1; min-width: 0; height: 32px; padding: 0 9px; border: 0; outline: 0; background: transparent; color: var(--pub-ink); font: 14px var(--font-sans); }
.news-search input::placeholder { color: #8a96a8; }
.news-search button {
  flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--pub-red); color: #fff;
  font: 600 14px var(--font-sans); cursor: pointer;
}
.news-search button:hover { background: #a3181d; }
.news-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--pub-line); }
.news-categories button {
  height: 40px; padding: 0 17px; border: 1px solid transparent; border-radius: 22px; background: transparent; color: #586981;
  font: 500 14px var(--font-sans); cursor: pointer;
}
.news-categories button:hover { background: #eef1f6; }
.news-categories button.is-selected { border-color: var(--pub-ink); background: var(--pub-ink); color: #fff; font-weight: 650; }
.news-layout { display: grid; grid-template-columns: minmax(0, 986fr) minmax(0, 264fr); gap: 30px; align-items: start; margin-top: 28px; }
.news-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.news-list-head h2 { margin: 0; color: var(--pub-ink); font-size: 17px; font-weight: 700; line-height: 25px; }
.news-count { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 14px; background: #eaf0f5; color: #6c7d93; font-size: 11px; white-space: nowrap; }

.news-article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--pub-line); border-radius: 14px; background: #fff; }
.news-article-image { display: block; height: 176px; background: #edf1f7; }
.news-article-image img, .news-article-image svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-image-ph { display: grid; place-items: center; height: 100%; color: #b7c2d2; font-size: 36px; }
.news-article-body { display: flex; flex: 1; flex-direction: column; padding: 21px 21px 22px; }
.news-article-meta { display: flex; align-items: center; gap: 8px; }
.news-category-label { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border-radius: 5px; background: var(--pub-red-soft); color: var(--pub-red); font-size: 11px; font-weight: 650; }
.news-article-meta time { color: #7b8798; font-size: 11px; }
.news-featured-label { margin-left: auto; color: #62716b; font-size: 10px; }
.news-article h2 { margin: 13px 0 0; font-size: 20px; font-weight: 700; line-height: 29px; }
.tts-public .news-article h2 a { color: var(--pub-ink); text-decoration: none; }
.news-article p {
  display: -webkit-box; margin: 12px 0 0; overflow: hidden; color: #68788d; font-size: 14px; line-height: 24.6px;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.tts-public .news-read-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--pub-red); font-size: 12px; font-weight: 650; text-decoration: none; }
.news-read-link .ic { font-size: 10px; }
.news-featured { display: grid; grid-template-columns: 443px minmax(0, 1fr); min-height: 245px; }
.news-featured .news-article-image { height: auto; }
.news-featured .news-article-body { padding: 30px 30px 28px; }
.news-featured h2 { font-size: 27px; line-height: 38px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; margin-top: 24px; }

.news-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 245px; padding: 34px 28px;
  border: 1px solid var(--pub-line); border-radius: 14px; background: #fff; color: var(--pub-ink); text-align: center;
}
.news-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #e7ebf2; border-radius: 50%; background: #f7f9fc; color: #9ba7b8; font-size: 22px; }
.news-empty strong { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 26px; }
.news-empty p { max-width: 540px; margin: 8px 0 0; color: var(--pub-muted); font-size: 14px; line-height: 23px; }
.news-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.tts-public .news-empty-links a {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--pub-line); border-radius: 999px;
  background: var(--pub-bg); color: var(--pub-ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.news-empty-links .ic { color: var(--pub-red); font-size: 13px; }
.tts-public .news-empty-links a:hover { border-color: #cfd8e5; }
.tts-public .news-empty-reset { margin-top: 12px; color: var(--pub-link); font-size: 13px; font-weight: 600; }

.news-aside { display: grid; gap: 20px; margin-top: 45px; }
.tts-public .news-syntax-link {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 290px; padding: 24px; border: 1px solid #efd8d9; border-radius: 14px;
  background: #fff4f2; color: var(--pub-ink); text-decoration: none;
}
.tts-public .news-syntax-link:hover { border-color: #e6c3c5; text-decoration: none; }
.news-eyebrow { color: var(--pub-red); font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; }
.news-syntax-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 14px; border: 1px solid #f1dadd; border-radius: 10px; background: #fff; color: var(--pub-red); font-size: 20px; }
.news-syntax-link strong { margin-top: 14px; font-size: 21px; font-weight: 700; line-height: 29.5px; }
.news-syntax-text { margin-top: 14px; color: #856064; font-size: 13px; line-height: 22px; }
.news-syntax-link b { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--pub-red); font-size: 12px; font-weight: 700; }
.news-syntax-link b .ic { font-size: 10px; }
.tts-public .news-results-link {
  display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 0 22px 0 17px; border: 1px solid var(--pub-line); border-radius: 12px;
  background: #fff; color: #233e67; text-decoration: none;
}
.tts-public .news-results-link:hover { border-color: #cfd8e5; text-decoration: none; }
.news-results-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--pub-link); color: #fff; font-size: 15px; }
.news-results-text { display: flex; flex: 1; flex-direction: column; color: #5d7595; font-size: 13px; line-height: 22px; }
.news-results-text strong { color: #27496f; font-size: 14px; font-weight: 650; }
.news-results-arrow { color: #27496f; font-size: 11px; }
.news-guides { padding: 22px 21px 21px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; scroll-margin-top: 16px; }
.news-guides h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--pub-ink); font-size: 16px; font-weight: 700; line-height: 19px; }
.news-guides h2 .ic { color: var(--pub-red); font-size: 15px; }
.tts-public .news-all-guides { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--pub-link); font-size: 13px; font-weight: 600; text-decoration: none; }
.news-all-guides .ic { font-size: 10px; }

/* guide section 07: mock of the "Mua tài khoản" dialog (view-huong-dan.js buyDialogMock; no payment details) */
.gm-bill-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-bill-pill { padding: 5px 9px; border: 1px solid #dfe5ee; border-radius: 6px; background: #fff; color: #56657b; font-size: 11px; font-weight: 600; }
.gm-bill-pill.is-on { border-color: #f39c12; background: #f39c12; color: #fff; }
.gm-bill-lead { display: block; margin-top: 12px; color: var(--pub-ink); font-size: 12px; }
.gm-bill-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gm-bill-way { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid #dfe5ee; border-radius: 8px; font-size: 11px; }
.gm-bill-way.is-on { border-color: #f39c12; box-shadow: 0 0 0 2px rgba(243, 156, 18, .2); }
.gm-bill-way b { color: var(--pub-ink); font-size: 12px; }
.guide-plan-note { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #fff3d6; color: #9a5b00; font-size: 11px; font-weight: 600; }

/* article page (#/tin-tuc/<slug>, view-tin-tuc.js articlePageHtml) */
.news-post-page { padding-top: 34px; padding-bottom: 48px; }
.news-post-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #7b8798; font-size: 12px; }
.tts-public .news-post-crumbs a { display: inline-flex; align-items: center; gap: 7px; color: #5d6b80; text-decoration: none; }
.tts-public .news-post-crumbs a:hover { color: var(--pub-red); }
.news-post-crumbs .ic { font-size: 10px; }
.news-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 266px; gap: 32px; align-items: start; margin-top: 22px; }
.news-post { min-width: 0; padding: 38px 40px 34px; border: 1px solid var(--pub-line); border-radius: 16px; background: #fff; }
.news-post h1 { margin: 16px 0 0; color: var(--pub-ink); font-size: 34px; font-weight: 750; line-height: 46px; letter-spacing: -.01em; }
.news-post-summary { margin: 16px 0 0; color: #5d6b80; font-size: 17px; line-height: 28px; }
.news-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; color: #7b8798; font-size: 12px; }
.news-post-author { display: inline-flex; align-items: center; gap: 9px; color: var(--pub-ink); font-weight: 650; }
.news-post-author b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pub-red-soft); color: var(--pub-red); font-size: 12px; }
.news-post-read { display: inline-flex; align-items: center; gap: 6px; }
.news-post-cover { margin: 26px 0 0; overflow: hidden; border-radius: 12px; aspect-ratio: 312 / 140; background: #edf1f7; }
.news-post-cover svg { display: block; width: 100%; height: 100%; }
.news-post-body { margin-top: 26px; color: #34435a; font-size: 16px; line-height: 28px; }
.news-post-body h2 { margin: 32px 0 0; color: var(--pub-ink); font-size: 23px; font-weight: 700; line-height: 32px; scroll-margin-top: 20px; }
.news-post-body p, .news-post-body ul, .news-post-body ol { margin: 12px 0 0; }
.news-post-body ul, .news-post-body ol { padding-left: 22px; }
.news-post-body li + li { margin-top: 6px; }
.news-post-intro { font-size: 16.5px; }
.news-post-body .news-msg, .news-post-body .news-code {
  padding: 2px 6px; border-radius: 5px; background: #f1f4f8; color: var(--pub-ink); font: 600 14px/1.5 var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  word-break: break-word;
}
.news-post-body .news-msg { background: #23334e; color: #fff; }
.news-post-table { margin-top: 16px; overflow-x: auto; border: 1px solid var(--pub-line); border-radius: 10px; }
.news-post-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.news-post-table th, .news-post-table td { padding: 10px 14px; border-top: 1px solid #e8ecf2; text-align: left; vertical-align: top; }
.news-post-table thead th { border-top: 0; background: #f7f9fc; color: #56657b; font-size: 12px; font-weight: 700; }
.news-post-table tbody th { color: var(--pub-ink); font-weight: 700; white-space: nowrap; }
.news-post-note { padding: 12px 14px; border-left: 3px solid var(--pub-red); border-radius: 0 8px 8px 0; background: #fbf5f5; color: #6b4b4e; font-size: 14px; font-style: italic; line-height: 23px; }
.tts-public .news-post-links a { color: var(--pub-link); font-weight: 600; }
.news-post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--pub-line); }
.tts-public .news-post-back { display: inline-flex; align-items: center; gap: 8px; color: var(--pub-link); font-size: 13px; font-weight: 650; text-decoration: none; }
.news-post-back .ic { font-size: 10px; }
.tts-public .news-post-copy {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--pub-line); border-radius: 9px;
  background: #fff; color: var(--pub-ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.tts-public .news-post-copy:hover { border-color: #e2b3b6; color: var(--pub-red); }
.news-post-aside { position: sticky; top: 16px; display: grid; gap: 20px; }
.news-post-toc, .news-post-related { padding: 22px 22px 18px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; }
.news-post-toc { display: flex; flex-direction: column; }
.news-post-toc-label { margin-bottom: 10px; color: #6c7d93; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tts-public .news-post-toc a { padding: 8px 0; color: #56657b; font-size: 13px; line-height: 20px; text-decoration: none; }
.tts-public .news-post-toc a:hover, .tts-public .news-post-toc a.is-active { color: var(--pub-red); }
.news-post-related h2 { margin: 0 0 6px; color: var(--pub-ink); font-size: 16px; font-weight: 700; }
.tts-public .news-post-related-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1f5; color: var(--pub-ink); text-decoration: none; }
.news-post-related-item:first-of-type { border-top: 0; }
.news-post-related-cover { flex: none; width: 64px; height: 52px; overflow: hidden; border-radius: 8px; background: #edf1f7; }
.news-post-related-cover svg { display: block; width: 100%; height: 100%; }
.news-post-related-item strong { display: block; font-size: 13px; font-weight: 650; line-height: 19px; }
.tts-public .news-post-related-item:hover strong { color: var(--pub-red); }
.news-post-related-item time { display: block; margin-top: 4px; color: #7b8798; font-size: 11px; }
.tts-public .news-post-syntax {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid #f1dadd; border-radius: 12px;
  background: linear-gradient(160deg, #fff 0%, #fdf1f2 100%); color: var(--pub-ink); text-decoration: none;
}
.news-post-syntax > .ic { color: var(--pub-red); font-size: 18px; }
.news-post-syntax strong { font-size: 15px; font-weight: 700; }
.news-post-syntax span { color: #856064; font-size: 13px; line-height: 20px; }
.news-post-syntax b { display: inline-flex; align-items: center; gap: 8px; color: var(--pub-red); font-size: 12px; }
.news-post-syntax b .ic { font-size: 10px; }
@media (max-width: 991.98px) {
  .news-post-layout { grid-template-columns: minmax(0, 1fr); }
  .news-post-aside { position: static; }
}
@media (max-width: 767.98px) {
  .news-post-page { padding-top: 20px; }
  .news-post { padding: 24px 18px 22px; border-radius: 12px; }
  .news-post h1 { font-size: 26px; line-height: 35px; }
  .news-post-summary { font-size: 15.5px; line-height: 25px; }
  .news-post-body { font-size: 15px; line-height: 26px; }
  .news-post-body h2 { font-size: 20px; line-height: 28px; }
  .news-post-table th, .news-post-table td { padding: 9px 10px; }
  .news-post-table tbody th { white-space: normal; }
}
@media print {
  .news-post-aside, .news-post-actions { display: none !important; }
}

/* ================================================================== Kết quả xổ số công khai */
.xs-control-panel {
  display: grid; grid-template-columns: 312px minmax(0, 1fr); margin-top: 28px; border: 1px solid var(--pub-line); border-radius: 14px;
  background: #fff; color: var(--pub-ink);
}
.xs-date-col { display: flex; flex-direction: column; padding: 22px 23px 23px; border-right: 1px solid var(--pub-line); }
.xs-label { display: flex; align-items: center; gap: 6px; color: #56657b; font-size: 13px; font-weight: 600; line-height: 21px; }
.xs-label.is-icon { color: var(--pub-ink); }
.xs-label.is-icon .ic { color: var(--pub-blue); font-size: 12px; }
.xs-date-trigger {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; margin-top: 6px; padding: 0 14px;
  border: 1px solid #cfd7e3; border-radius: 8px; background: #fff; color: var(--pub-ink); font: 15px var(--font-sans); text-align: left; cursor: pointer;
}
.xs-date-trigger > * { pointer-events: none; }
.xs-date-trigger:hover { border-color: #b8c4d6; }
.xs-date-trigger:focus-visible { outline: 0; border-color: #b8c4d6; box-shadow: 0 0 0 3px rgba(185, 30, 35, .12); }
.xs-date-ic { color: var(--pub-red); font-size: 15px; }
.xs-date-value { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.xs-date-value strong { font-size: 15px; font-weight: 650; }
.xs-weekday { color: var(--pub-muted); font-size: 13px; font-weight: 500; }
.xs-date-chevron { color: #4b5a70; font-size: 11px; }
.xs-date-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 40px; margin-top: 12px; padding: 3px; border-radius: 9px; background: #f7f9fc; }
.xs-date-shortcuts button {
  border: 0; border-radius: 6px; background: transparent; color: #5c6d84; font: 600 12px var(--font-sans); cursor: pointer;
}
.xs-date-shortcuts button.is-selected { background: #fff; color: var(--pub-red); box-shadow: 0 1px 3px rgba(35, 51, 78, .12); }
.xs-lookup-toggle { display: none; }
.xs-lookup { min-width: 0; margin: 0; padding: 22px 22px 23px; }
.xs-lookup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 12px; align-items: end; }
.xs-input {
  width: 100%; height: 44px; padding: 0 13px; border: 1px solid #cfd7e3; border-radius: 8px; background: #fff; color: var(--pub-ink);
  font: 14px var(--font-sans);
}
.xs-input::placeholder { color: #5f6b7d; }
.xs-input:focus { outline: 0; border-color: #b8c4d6; box-shadow: 0 0 0 3px rgba(54, 95, 140, .12); }
.xs-select { padding-right: 34px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234b5a70' stroke-width='1.8' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center / 11px 8px; color: #5f6b7d; }
.xs-select:disabled { background-color: #fff; opacity: 1; }
.xs-submit {
  height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--pub-red); color: #fff; font: 600 14px var(--font-sans);
  white-space: nowrap; cursor: pointer;
}
.xs-submit:hover { background: #a3181d; }
.xs-submit:disabled { cursor: default; opacity: .55; }
.xs-submit:disabled:hover { background: var(--pub-red); }
.xs-help { margin: 13px 0 0; color: var(--pub-muted); font-size: 12px; line-height: 19px; }
.xs-lookup-result:empty { display: none; }
.xs-lookup-result {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: #f1f7fc; color: #34506e; font-size: 13px; line-height: 21px;
}
.xs-lookup-result.is-miss { background: #fff6dc; color: #7a5200; }
.xs-lookup-title { flex: 1 1 100%; }
.xs-lookup-result ul { flex: 1; margin: 0; padding-left: 18px; }
.xs-hit { font-family: var(--mono); font-weight: 700; }
.xs-hit mark, .xs-num mark { padding: 0 1px; border-radius: 3px; background: #ffe38a; color: inherit; }
.xs-clear { align-self: center; padding: 0; border: 0; background: none; color: var(--pub-red); font: 600 12px var(--font-sans); cursor: pointer; }

.xs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 27px; }
.xs-region-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #eaeef3; }
.tts-public .xs-region-tabs a {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 19px; border-radius: 7px; color: #5d6b82;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.tts-public .xs-region-tabs a:hover { color: var(--pub-ink); text-decoration: none; }
.tts-public .xs-region-tabs a.is-selected { background: #fff; color: var(--pub-red); box-shadow: 0 1px 3px rgba(35, 51, 78, .12); }
.xs-load-status { color: #616d80; font-size: 12px; line-height: 19px; white-space: nowrap; }
.xs-day-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.tts-public .xs-day-link {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 8px; color: #5d6b82;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.tts-public .xs-day-link:hover { background: #eef1f6; color: var(--pub-ink); text-decoration: none; }
.xs-day-link .ic { font-size: 10px; }
.xs-day-link.is-next { margin-left: auto; }

.xs-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 18px; }
.xs-regions.is-single { grid-template-columns: minmax(0, 1fr); }
.xs-region { overflow: hidden; border: 1px solid var(--pub-line); border-radius: 14px; background: #fff; color: var(--pub-ink); }
.xs-region-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 61px; padding: 0 16px; border-bottom: 1px solid var(--pub-line-2); background: #fff; }
.xs-region h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--pub-ink); font-size: 17px; font-weight: 700; line-height: 24px; }
.xs-region-mark { flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--pub-red); }
.xs-south .xs-region-mark { background: #e4b900; }
.xs-middle .xs-region-mark { background: var(--pub-link); }
.xs-region-heading time { color: #718097; font-size: 12px; line-height: 19px; }
.xs-empty { display: flex; flex-direction: column; align-items: center; min-height: 287px; padding: 78px 16px 40px; text-align: center; }
.xs-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #e7ebf2; border-radius: 50%; background: #f7f9fc; color: #9ba7b8; font-size: 22px; }
.xs-empty .spinner { width: 20px; height: 20px; }
.xs-empty strong { margin-top: 16px; color: #4a5c77; font-size: 16px; font-weight: 600; line-height: 26px; }
.xs-empty p { margin: 12px 0 0; color: #748298; font-size: 14px; line-height: 22px; }
.xs-empty.is-error .xs-empty-icon { color: #d9534f; }
.xs-retry {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 12px; padding: 0 14px; border: 1px solid var(--pub-line);
  border-radius: 8px; background: #fff; color: var(--pub-ink); font: 600 13px var(--font-sans); cursor: pointer;
}

/* result tables */
.xs-table-wrap { overflow-x: auto; }
.xs-table { width: 100%; border-collapse: collapse; color: var(--pub-ink); font-size: 15px; }
.xs-table thead th {
  height: 38px; padding: 0 6px; border-bottom: 1px solid var(--pub-line); background: #fbfcfe; color: var(--pub-ink); font-size: 13px;
  font-weight: 700; text-align: center; white-space: nowrap;
}
.xs-table thead th:first-child { width: 48px; }
.xs-table tbody th {
  width: 48px; padding: 0 6px; border-right: 1px solid var(--pub-line-2); background: #f9fafc; color: #5d6b82; font-size: 12px;
  font-weight: 700; text-align: center;
}
.xs-table abbr { text-decoration: none; }
.xs-table tbody td { padding: 6px 6px; text-align: center; vertical-align: middle; }
.xs-table tbody tr + tr th, .xs-table tbody tr + tr td { border-top: 1px solid var(--pub-line-2); }
.xs-table.is-south tbody td + td { border-left: 1px solid var(--pub-line-2); }
.xs-num { display: block; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 22px; white-space: nowrap; }
.xs-num.is-pending { color: #b0b9c6; font-weight: 400; }
.xs-row-db .xs-num { color: var(--pub-red); font-size: 18px; font-weight: 800; line-height: 26px; }
.xs-row-g8 .xs-num { color: var(--pub-red); }
.xs-stack { display: flex; flex-direction: column; align-items: center; }
.xs-nums { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 0 8px; }

/* the calendar popup (js/datepicker.js) on the public pages */
body.is-public .ui-datepicker { width: 266px; padding: 8px; border: 1px solid var(--pub-line, #e4e9f0); border-radius: 12px; box-shadow: 0 12px 28px rgba(35, 51, 78, .16); font-family: inherit; font-size: 13px; }
body.is-public .ui-datepicker .ui-datepicker-header { border: 0; border-radius: 8px; background: #f7f9fc; color: #23334e; }
body.is-public .ui-datepicker td a.ui-state-default { border: 0; border-radius: 6px; background: transparent; color: #23334e; text-align: center; }
body.is-public .ui-datepicker td a.ui-state-default:hover { background: #eef1f6; }
body.is-public .ui-datepicker td a.ui-state-highlight { background: #fff0f0; color: #b91e23; font-weight: 700; }
body.is-public .ui-datepicker td a.ui-state-active { background: #b91e23; color: #fff; }

/* ================================================================== responsive */
@media (max-width: 1199.98px) {
  .bot-messaging-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bap-hero { grid-template-columns: minmax(0, 1fr) 272px; }
  .bap-phone { display: none; }
  .is-android .bap-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .xs-regions { grid-template-columns: minmax(0, 1fr); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .bot-intro { grid-template-columns: minmax(0, 1fr); }
  .bot-video { min-height: 320px; }
  .bap-hero { grid-template-columns: minmax(0, 1fr); }
  .bap-scan { display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 16px; align-items: start; padding: 20px; border-top: 1px solid var(--pub-line); border-left: 0; text-align: left; }
  .bap-scan .bap-qr { grid-column: 1; grid-row: 1 / span 2; width: 108px; height: 108px; margin: 0; padding: 6px; }
  .bap-scan-label { grid-column: 2; grid-row: 1; }
  .bap-scan-text { grid-column: 2; grid-row: 2; }
  .bap-scan h2 { margin-top: 8px; }
  .bap-scan p { max-width: none; margin: 8px 0 0; }
  .bap-scan .bap-local-note { max-width: none; }
  .bap-platforms { grid-template-columns: minmax(0, 1fr); }
  .bap-bottom { grid-template-columns: minmax(0, 1fr); }
  .news-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .news-search { width: 100%; }
  .news-layout { grid-template-columns: minmax(0, 1fr); }
  .news-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: 0; }
  .news-syntax-link { grid-row: span 2; }
  .xs-control-panel { grid-template-columns: minmax(0, 1fr); }
  .xs-date-col { border-right: 0; }
  .xs-lookup-toggle {
    display: flex; align-items: center; gap: 10px; height: 44px; margin-top: 16px; padding: 0 14px; border: 1px solid var(--pub-line);
    border-radius: 10px; background: #f7f9fc; color: var(--pub-ink); font: 600 14px var(--font-sans); text-align: left; cursor: pointer;
  }
  .xs-lookup-toggle .ic { color: var(--pub-blue); font-size: 14px; }
  .xs-lookup-toggle span { flex: 1; }
  .xs-lookup-toggle .xs-lookup-chevron { color: #6b778a; font-size: 11px; transition: transform .2s; }
  .xs-control-panel.is-lookup-open .xs-lookup-chevron { transform: rotate(180deg); }
  .xs-lookup { display: none; padding-top: 0; }
  .xs-control-panel.is-lookup-open .xs-lookup { display: block; }
  .xs-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .xs-region-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tts-public .xs-region-tabs a { padding: 0 6px; }
}

@media (max-width: 767.98px) {
  .bot-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .bot-head .public-heading-row { flex-wrap: nowrap; }
  .tts-public .bot-handle { height: 32px; padding: 0 10px 0 8px; font-size: 11px; }
  .bot-head-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tts-public .bot-button { height: 40px; padding: 0 10px; }
  .bot-chips { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
  .bot-chips::-webkit-scrollbar { display: none; }
  .bot-video { min-height: 0; }
  .bot-video-body { padding: 30px 20px 72px; }
  .bot-video-play { width: 56px; height: 56px; font-size: 21px; }
  .bot-video-body p { font-size: 12px; line-height: 19px; }
  .bot-card { padding: 16px 14px 16px; }
  .bot-messaging-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bot-chat ul { padding: 12px 10px; }
  .bot-bubble { max-width: 82%; }
  .bot-table, .bot-table tbody, .bot-table tr, .bot-table th, .bot-table td { display: block; width: auto !important; }
  .bot-table thead { display: none; }
  .bot-table tbody tr { padding: 12px 0; border-bottom: 1px solid var(--pub-line-2); }
  .bot-table tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .bot-table tbody th, .bot-table tbody td { padding: 0; border: 0; }
  .bot-table tbody td::before {
    content: attr(data-label); display: block; margin-top: 6px; color: var(--pub-muted); font-size: 11px; font-weight: 600;
    letter-spacing: .03em; line-height: 17px; text-transform: uppercase;
  }
  .is-commands td.is-empty { display: none; }
  .is-errors tbody th q { display: block; }

  .bap-hero { margin-top: 24px; border-radius: 14px; }
  .bap-hero-main { padding: 22px 20px 20px; }
  .bap-hero h1 { margin-top: 18px; font-size: 26px; line-height: 32px; }
  /* the site's two buttons share one row; "Cài lên máy" (only when the browser offers it) joins the same row */
  .bap-actions { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .tts-public .bap-button { padding: 0 10px; }
  .bap-hero-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; }
  .bap-scan { grid-template-columns: 96px minmax(0, 1fr); padding: 16px 20px 20px; }
  .bap-scan .bap-qr { width: 96px; height: 96px; }
  .bap-platform { padding: 18px 16px 16px; }
  .bap-steps, .is-android .bap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .bap-screen, .bap-screen.is-small { height: auto; aspect-ratio: 2 / 3; border-width: 5px; font-size: 10.5px; }
  .bap-screen-row { min-height: 27px; }
  .bap-screen-address { height: 25px; }
  .bap-screen-link { height: 20px; }
  .bap-screen-app img { width: 32px; height: 32px; }
  .bap-screen-notch, .bap-screen.is-small .bap-screen-notch { width: 46px; margin-left: -23px; }
  .bap-done { align-items: flex-start; }

  .news-categories { flex-wrap: nowrap; overflow-x: auto; margin-top: 22px; scrollbar-width: none; }
  .news-categories::-webkit-scrollbar { display: none; }
  .news-categories button { flex: none; }
  .news-layout { margin-top: 24px; }
  .news-aside { grid-template-columns: minmax(0, 1fr); }
  .news-syntax-link { grid-row: auto; min-height: 0; }
  .news-featured { grid-template-columns: minmax(0, 1fr); }
  .news-article-image, .news-featured .news-article-image { height: auto; aspect-ratio: 312 / 176; }
  .news-featured .news-article-body { padding: 22px 20px; }
  .news-featured h2 { font-size: 22px; line-height: 31px; }
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
  .news-empty { padding: 28px 18px; }
  .news-empty strong { font-size: 17px; }
  .news-empty p { font-size: 13.5px; }

  .public-kqxs .public-page-description { display: none; }
  .xs-control-panel { margin-top: 20px; }
  .xs-date-col { padding: 18px 16px 16px; }
  .xs-lookup { padding: 0 16px 16px; }
  .xs-lookup-grid { grid-template-columns: minmax(0, 1fr); }
  .xs-lookup-grid > :nth-child(3) { display: none; }
  .xs-lookup-grid > :nth-child(1) { order: 1; }
  .xs-lookup-grid > :nth-child(4) { order: 2; }
  .xs-lookup-grid > :nth-child(2) { order: 3; margin-top: 6px; }
  .xs-lookup-grid > :nth-child(5) { order: 4; }
  .xs-lookup-grid > :nth-child(6) { order: 5; margin-top: 6px; }
  .xs-toolbar { margin-top: 20px; }
  .xs-load-status { padding-left: 2px; }
  .xs-day-nav { margin-top: 6px; }
  .tts-public .xs-day-link { padding: 0 8px; }
  .xs-regions { gap: 20px; }
  .xs-region-heading { padding: 0 14px; }
  .xs-empty { min-height: 0; padding: 46px 16px 48px; }
  .xs-table { font-size: 14px; }
  .xs-table thead th { padding: 0 3px; font-size: 12px; }
  .xs-table tbody th, .xs-table thead th:first-child { width: 38px; }
  .xs-table tbody td { padding: 5px 3px; }
  .xs-row-db .xs-num { font-size: 16px; }
}

@media (max-width: 420px) {
  .bap-scan { grid-template-columns: minmax(0, 1fr); }
  .bap-scan .bap-qr { grid-row: auto; justify-self: center; width: 150px; height: 150px; margin-bottom: 12px; }
  .bap-scan-label, .bap-scan-text { grid-column: 1; grid-row: auto; }
  .bap-scan { text-align: center; }
  .bap-scan-label { justify-self: center; }
  .bot-head .public-heading-row { flex-wrap: wrap; }
  .tts-public .bot-button { gap: 6px; padding: 0 6px; font-size: 12.5px; }
  .bap-actions { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bap-actions [data-act="install"] { grid-column: 1 / -1; }
}

@media print {
  .bot-video, .bap-phone, .news-search, .xs-lookup-toggle { display: none !important; }
}