/* ===== reset.css ===== */
/* Reset tối giản thay cho Tailwind Preflight (bản gốc chạy kèm @import "tailwindcss"). */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}
body {
  line-height: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none !important;
}


/* ===== compat-marquee.css ===== */
/* Trang chủ - dải logo công cụ tương thích chạy marquee. Tách khỏi enhancements.css
   (2026-09-14, quy tắc lập trình mục 2). */
.compatibility,
.tour-section,
.screen-rail,
.beta-feedback,
.plan-compare,
.pricing-faq {
  max-width: 1150px;
  margin: auto;
  padding: 120px 24px;
}
.compatibility {
  padding-top: 64px;
  padding-bottom: 64px;
  text-align: center;
  border-bottom: 1px solid var(--color-whiteout);
}
.compatibility > p,
.tour-section header p,
.screen-rail header p,
.beta-feedback header > p,
.plan-compare header p,
.pricing-faq header p {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-twilight-blue);
}
.compatibility > small {
  display: block;
  margin-top: 16px;
  opacity: 0.68;
}
.marquee {
  overflow: hidden;
  margin-top: 32px;
  border-top: 1px solid var(--color-whiteout);
  border-bottom: 1px solid var(--color-whiteout);
}
.marquee > div {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee span {
  min-width: 200px;
  padding: 20px 32px;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.marquee:hover > div {
  animation-play-state: paused;
}


/* ===== section-header-pattern.css ===== */
/* Mẫu tiêu đề dùng chung cho 5 section (tour/screen-rail/beta-feedback/plan-compare/
   pricing-faq). Tách khỏi enhancements.css (2026-09-14, mục 2). */
.tour-section > header,
.screen-rail > header,
.beta-feedback > header,
.plan-compare > header,
.pricing-faq > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.tour-section h2,
.screen-rail h2,
.beta-feedback h2,
.plan-compare h2,
.pricing-faq h2 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
}


/* ===== product-tour.css ===== */
/* Trang chủ - khối "Khám phá sản phẩm" (tour-section: nav 3 bước + màn hình demo xoay vòng).
   Tách khỏi enhancements.css (2026-09-14, mục 2). */
.tour-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-whiteout);
  border: 1px solid var(--color-whiteout);
  border-radius: 8px;
  padding: 10px 16px;
}
.tour-control svg {
  width: 16px;
}
.tour-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}
.tour-layout nav {
  display: grid;
}
.tour-layout nav button {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  text-align: left;
  background: transparent;
  color: var(--color-whiteout);
  border: 0;
  border-top: 1px solid var(--color-whiteout);
  padding: 20px 0;
  opacity: 0.56;
}
.tour-layout nav button.active {
  opacity: 1;
}
.tour-layout nav b,
.tour-layout nav small {
  display: block;
}
.tour-layout nav small {
  font-size: 13px;
  margin-top: 4px;
}
.tour-screen {
  position: relative;
  min-height: 480px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.proposal-gif {
  overflow: hidden;
}
.tour-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Có gif thật rồi thì ẩn hết lớp chữ mockup (tiêu đề khung, icon/heading/đoạn văn xoay vòng,
   ghi chú vị trí asset) — chỉ giữ trong DOM để JS không lỗi, không hiển thị đè lên gif nữa. */
.proposal-gif .tour-top,
.proposal-gif .tour-content,
.proposal-gif .media-note {
  display: none;
}
.media-note {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 3px;
  max-width: 330px;
  padding: 12px 14px;
  border: 1px solid rgba(220, 185, 71, 0.6);
  background: rgba(10, 13, 20, 0.82);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.03em;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.media-note--hero {
  bottom: 28px;
}
.asset-caption {
  display: block;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid rgba(21, 26, 39, 0.13);
  font-size: 10px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em;
  color: #8b7228 !important;
}
.tour-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 20px;
  font-size: 13px;
}
.tour-top i {
  font-style: normal;
  color: var(--color-signal-blue);
}
.tour-content {
  padding: 64px 32px;
}
.tour-content > svg {
  width: 48px;
  height: 48px;
}
.tour-content > span {
  display: block;
  margin-top: 48px;
  font-size: 13px;
}
.tour-content h3 {
  font-size: 32px;
  line-height: 1.1;
  max-width: 640px;
  margin: 12px 0;
}
.tour-bars,
.mini-ui {
  display: grid;
  gap: 8px;
  margin-top: 48px;
}
.tour-bars i,
.mini-ui i {
  display: block;
  height: 4px;
  background: var(--color-ink);
}
.tour-bars i:nth-child(1) {
  width: 80%;
}
.tour-bars i:nth-child(2),
.mini-ui i:nth-child(2) {
  width: 56%;
}
.tour-bars i:nth-child(3),
.mini-ui i:nth-child(3) {
  width: 68%;
}


/* ===== screen-rail.css ===== */
/* Trang chủ - dải cuộn ngang "Các giao diện sản phẩm". Tách khỏi enhancements.css
   (2026-09-14, mục 2). */
.screen-rail {
  max-width: none;
  padding-left: max(24px, calc((100vw - 1150px) / 2));
  padding-right: 0;
  overflow: hidden;
}
.screen-rail > header {
  max-width: 1150px;
  padding-right: 24px;
}
.screen-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 24px 24px 0;
}
.screen-track article {
  position: relative;
  flex: 0 0 min(520px, 80vw);
  min-height: 340px;
  scroll-snap-align: start;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.screen-track article > span {
  font-size: 13px;
}
.screen-track h3 {
  font-size: 32px;
  margin-top: 80px;
}
.mini-ui {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.screen-track article:hover .mini-ui {
  transform: translateY(-4px);
}
/* Test xem trước ảnh thật thay placeholder — tạm thời, xem xong bỏ hoặc chính thức hoá. */
.screen-track article.photo-only {
  padding: 0;
  overflow: hidden;
  min-height: 0;
  align-self: flex-start;
}
.screen-track article.photo-only img,
.screen-track article.photo-only video {
  display: block;
  width: 100%;
  height: auto;
}
/* Icon play nổi giữa khung video — báo cho khách lướt nhanh biết đây là video xem được,
   tự ẩn khi hover/focus (video đang chạy, xem 11-hover-play.js). */
.hover-play-wrap {
  position: relative;
}
.hover-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.hover-play-icon svg {
  width: 56px;
  height: 56px;
  padding: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  fill: #fff;
  backdrop-filter: blur(2px);
}
.hover-play-wrap:hover .hover-play-icon,
.hover-play-wrap:focus-within .hover-play-icon {
  opacity: 0;
}


/* ===== beta-feedback.css ===== */
/* Khối trích dẫn phản hồi khách hàng (beta-feedback). Tách khỏi enhancements.css
   (2026-09-14, mục 2). */
.beta-feedback > header > span {
  max-width: 360px;
  opacity: 0.68;
}
.beta-feedback > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.beta-feedback figure {
  margin: 0;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  justify-content: space-between;
}
.beta-feedback blockquote {
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}
.beta-feedback figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
}
.beta-feedback figcaption > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
}
.beta-feedback figcaption svg,
.compare-table svg {
  width: 16px;
}
.beta-feedback figcaption b,
.beta-feedback figcaption small {
  display: block;
}


/* ===== plan-compare-pricing-faq.css ===== */
/* Trang giá - bảng so sánh gói + FAQ giá. Tách khỏi enhancements.css (2026-09-14, mục 2). */
.plan-compare {
  padding-top: 48px;
}
.compare-table {
  border-top: 1px solid var(--color-whiteout);
}
.compare-table > div {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-whiteout);
}
.pricing-faq {
  padding-top: 48px;
}
.pricing-faq > div {
  border-top: 1px solid var(--color-whiteout);
}
.pricing-faq article {
  border-bottom: 1px solid var(--color-whiteout);
}
.pricing-faq button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  background: transparent;
  color: var(--color-whiteout);
  border: 0;
  text-align: left;
}
.pricing-faq button svg {
  width: 20px;
  transition: transform 200ms ease;
}
.pricing-faq article p {
  max-width: 720px;
  opacity: 0.68;
  padding-bottom: 20px;
}


/* ===== misc-widgets.css ===== */
/* Các widget nhỏ lẻ dùng ở vài nơi: lỗi form, dialog thiết bị lạ, nút in trang pháp lý,
   trang trạng thái thanh toán. Tách khỏi enhancements.css (2026-09-14, mục 2). */
.field-error {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-align: left;
}
.device-dialog {
  background: var(--color-haze) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-ink) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
.device-dialog button {
  border: 1px solid var(--color-ink) !important;
  background: transparent !important;
  color: var(--color-ink) !important;
  border-radius: 8px !important;
}
.legal-print {
  margin-left: auto;
}
.legal-print svg {
  width: 16px;
}
.payment-status-page {
  max-width: 720px;
  margin: auto;
  padding: 160px 24px;
  text-align: center;
}
.payment-status-page h1 {
  font-size: 56px;
  font-weight: 400;
}
.payment-status-page > p {
  opacity: 0.72;
}
.payment-timeline {
  margin: 48px auto;
  text-align: left;
}
.payment-timeline article {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-whiteout);
}
.payment-timeline svg {
  width: 20px;
}
.payment-timeline b,
.payment-timeline small {
  display: block;
}


/* ===== media-proposal.css ===== */
/* Trang đề xuất nội dung media (bảng thẻ media-card). Tách khỏi enhancements.css
   (2026-09-14, mục 2). */
.media-proposal {
  max-width: 1150px;
  margin: 0 auto;
  padding: 20px 24px 96px;
}
.media-proposal > header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.media-proposal .label {
  color: #dcb947;
}
.media-proposal h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  margin: 8px 0;
}
.media-proposal > header p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.65);
}
.media-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.media-card {
  position: relative;
  min-height: 280px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #232a39, #111621);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.media-card.wide {
  grid-column: 1 / -1;
  min-height: 390px;
}
.media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(220, 185, 71, 0.2), transparent 36%);
  pointer-events: none;
}
.media-card > * {
  position: relative;
}
.media-card .media-type {
  color: #dcb947;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.media-card h3 {
  font-size: clamp(23px, 3vw, 38px);
  line-height: 1.08;
  max-width: 720px;
  margin: 16px 0;
}
.media-card p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.68);
}
.media-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.media-spec span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10px;
}
.media-play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #dcb947;
  border-radius: 50%;
  color: #dcb947;
  font-size: 20px;
}
.media-warning {
  margin-top: 14px;
  font-size: 11px !important;
  color: #dcb947 !important;
}
@media (max-width: 760px) {
  .media-proposal > header {
    display: block;
  }
  .media-board {
    grid-template-columns: 1fr;
  }
  .media-card.wide {
    grid-column: auto;
  }
  .media-card {
    min-height: 240px;
  }
}


/* ===== enhancements-responsive.css ===== */
/* Keyframe marquee + các @media responsive/in-ấn cho những section ở nhóm enhancements-*.css
   phía trên. Tách khỏi enhancements.css (2026-09-14, mục 2). */
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 900px) {
  .tour-layout {
    grid-template-columns: 1fr;
  }
  .beta-feedback > div {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .compatibility,
  .tour-section,
  .beta-feedback,
  .plan-compare,
  .pricing-faq {
    padding: 80px 20px;
  }
  .tour-section > header,
  .screen-rail > header,
  .beta-feedback > header,
  .plan-compare > header,
  .pricing-faq > header {
    align-items: flex-start;
    flex-direction: column;
  }
  .tour-section h2,
  .screen-rail h2,
  .beta-feedback h2,
  .plan-compare h2,
  .pricing-faq h2,
  .payment-status-page h1 {
    font-size: 32px;
  }
  .tour-content {
    padding: 48px 0;
  }
  .tour-screen {
    min-height: 420px;
  }
  .screen-rail {
    padding-top: 80px;
    padding-left: 20px;
  }
  .compare-table > div {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 8px;
  }
  .legal-print {
    margin-left: 0;
  }
  .legal-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee > div {
    animation: none;
  }
}
@media print {
  .sub-header,
  .legal-page > aside,
  footer {
    display: none !important;
  }
  .legal-page {
    display: block;
    padding: 0;
    color: var(--color-ink);
    background: var(--color-whiteout);
  }
  .legal-note {
    border: 1px solid var(--color-ink);
  }
}
/* .legal-print (nút "Lưu / In") ẩn khi in: xem overrides-legal.css — phải đặt SAU
   buttons-links.css (2026-09-14: tách từ globals.css cũ) vì .ghost-button ở đó có
   display:inline-flex !important, cùng specificity + !important thì luật nạp SAU thắng, nên
   khai ở đây (trong nhóm enhancements-*.css, nạp TRƯỚC nhóm base-tokens.css...media-story.css
   trong CSS_ORDER) sẽ vô hiệu. */


/* ===== base-tokens.css ===== */
/* Token màu/spacing dùng chung toàn site + reset cơ bản (html/body/typography). Tách khỏi
   globals.css (2026-09-14, quy tắc lập trình mục 2: file <=250 dòng) - PHẢI nạp đầu tiên vì mọi
   file CSS khác đều dùng biến var(--...) khai báo ở đây. */
:root {
  --navy-50: #f4f5f7;
  --navy-100: #e5e8ee;
  --navy-200: #cdd3de;
  --navy-300: #aeb7c8;
  --navy-400: #9aa4b8;
  --navy-500: #707c94;
  --navy-600: #536078;
  --navy-700: #35415b;
  --navy-800: #1e2740;
  --navy-900: #151a27;
  --navy-950: #0e121b;
  --neutral-50: #ffffff;
  --neutral-100: #f4f5f7;
  --neutral-200: #e5e8ee;
  --neutral-300: #cdd3de;
  --neutral-400: #aeb7c8;
  --neutral-500: #9aa4b8;
  --neutral-600: #707c94;
  --neutral-700: #536078;
  --neutral-800: #35415b;
  --neutral-900: #151a27;
  --neutral-950: #0e121b;
  --haze-50: #ffffff;
  --haze-100: #f4f5f7;
  --haze-200: #e5e8ee;
  --haze-300: #cdd3de;
  --haze-400: #aeb7c8;
  --haze-500: #9aa4b8;
  --haze-600: #707c94;
  --haze-700: #536078;
  --haze-800: #35415b;
  --haze-900: #1e2740;
  --haze-950: #151a27;
  --gold-50: #fffdf2;
  --gold-100: #fff8d6;
  --gold-200: #f7edad;
  --gold-300: #f0e17d;
  --gold-400: #e7cd5f;
  --gold-500: #dcb947;
  --gold-600: #cb982f;
  --gold-700: #a87925;
  --gold-800: #805b23;
  --gold-900: #60451f;
  --gold-950: #392710;
  --color-black-void: var(--navy-900);
  --color-ink: var(--navy-900);
  --color-haze: var(--haze-100);
  --color-whiteout: var(--neutral-50);
  --color-twilight-blue: var(--gold-500);
  --color-signal-blue: var(--gold-500);
  --text-secondary: var(--navy-400);
  --gold-hover: var(--gold-600);
  --gold-highlight: var(--gold-300);
  --surface-overlay: color-mix(in srgb, var(--navy-950) 60%, transparent);
  --hairline-dark: color-mix(in srgb, var(--neutral-50) 12%, transparent);
  --hairline-light: color-mix(in srgb, var(--navy-900) 10%, transparent);
  --hover-ghost: color-mix(in srgb, var(--neutral-50) 8%, transparent);
  --toggle-surface: color-mix(in srgb, var(--navy-950) 10%, transparent);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;
  --section-gap: 48px;
  --content-max: 1150px;
  --radius-input: 4px;
  --radius-button: 8px;
  --radius-image: 14px;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --background: var(--navy-900);
  --foreground: var(--neutral-50);
  --card: var(--haze-100);
  --card-foreground: var(--navy-900);
  --popover: var(--haze-100);
  --popover-foreground: var(--navy-900);
  --primary: var(--neutral-50);
  --primary-foreground: var(--navy-900);
  --secondary: var(--haze-100);
  --secondary-foreground: var(--navy-900);
  --muted: var(--haze-100);
  --muted-foreground: var(--navy-600);
  --accent: var(--haze-100);
  --accent-foreground: var(--navy-900);
  --destructive: var(--navy-900);
  --border: var(--neutral-50);
  --input: var(--haze-100);
  --ring: var(--gold-500);
  --radius: var(--radius-button);
}
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --font-sans: "Be Vietnam Pro", Inter, system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--color-black-void);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-black-void);
  color: var(--color-whiteout);
  font:
    500 16px/1.5 "Be Vietnam Pro",
    Inter,
    system-ui,
    sans-serif;
}
button,
a,
input,
select,
textarea {
  font:
    500 14px/1.5 "Be Vietnam Pro",
    Inter,
    system-ui,
    sans-serif;
}
a {
  color: inherit;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
p {
  font-size: 16px;
}
em {
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-style: italic;
}
*:focus-visible {
  outline: 2px solid var(--color-signal-blue);
  outline-offset: 4px;
}


/* ===== header-nav.css ===== */
/* Khung trang + thanh điều hướng cố định trên cùng (logo, menu, nút mobile). Tách khỏi
   globals.css (2026-09-14, mục 2). */
.site-shell {
  min-height: 100vh;
  background: var(--color-black-void);
  overflow: hidden;
}
.ambient,
.support {
  display: none;
}
.sub-header {
  height: 72px;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 24px;
  background: transparent;
  border-bottom: 1px solid var(--hairline-dark);
  transition:
    background 200ms ease,
    backdrop-filter 200ms ease;
}
.sub-header.scrolled {
  background: var(--surface-overlay);
  backdrop-filter: blur(8px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  letter-spacing: 0.12em;
}
.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-whiteout);
  border-radius: 8px;
}
.brand b {
  color: var(--color-whiteout);
}
.sub-header > nav {
  display: flex;
  gap: 32px;
}
.sub-header > nav a,
.sub-actions > a {
  color: var(--color-whiteout);
  text-decoration: none;
  opacity: 0.72;
}
.sub-header > nav a:hover,
.sub-actions > a:hover {
  opacity: 1;
}
.sub-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.sub-actions .hamb {
  display: none;
}
.sub-mobile {
  display: none;
}


/* ===== buttons-links.css ===== */
/* Nút/link dùng chung nhiều trang (gold/ghost/outline/underline). Tách khỏi globals.css
   (2026-09-14, mục 2). */
.gold,
.ghost-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--color-whiteout) !important;
  background: transparent !important;
  border: 1px solid var(--color-whiteout) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  transition: background 160ms ease !important;
}
.gold:hover,
.ghost-button:hover {
  background: var(--hover-ghost) !important;
}
.gold svg,
.ghost-button svg {
  width: 16px;
}
.outline,
.haze-button {
  color: var(--color-ink) !important;
  background: var(--color-haze) !important;
  border: 1px solid var(--color-ink) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
}
.underline-link {
  position: relative;
  display: inline-block;
  color: var(--color-signal-blue);
  text-decoration: none;
  padding: 4px 8px;
}
.underline-link:after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.underline-link:hover:after {
  transform: scaleX(1);
}
.underline-link.light {
  color: var(--color-whiteout);
}
.underline-link.always-underline:after {
  transform: scaleX(1);
}


/* ===== home-hero-photo.css ===== */
/* Trang chủ - khối hero ảnh/video toàn màn hình + headline overlay + "statement". Tách khỏi
   globals.css (2026-09-14, mục 2). */
.photo-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
}
.photo-break {
  position: relative;
  height: auto;
  min-height: 640px;
  overflow: hidden;
}
.photo-hero > img {
  position: absolute;
  width: 100%;
  height: 106%;
  object-fit: cover;
  animation: kenburns 20s ease-in-out infinite alternate;
}
.photo-break > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-hero > video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-break > .photo-break-content {
  position: relative;
  z-index: 2;
}
.photo-break > .photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--navy-950) 28%, transparent) 0%,
    color-mix(in srgb, var(--navy-950) 42%, transparent) 45%,
    color-mix(in srgb, var(--navy-950) 28%, transparent) 100%
  );
  pointer-events: none;
}
/* Hero (video) chuyển tiếp mềm xuống section ngay dưới (nền phẳng --navy-900) thay vì cắt cứng
   thành 1 đường ngang rõ nét (user phản hồi 2026-09-14, xem ảnh chụp trang chủ). */
.photo-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: min(32vh, 280px);
  background: linear-gradient(to bottom, transparent, var(--navy-900));
  pointer-events: none;
  z-index: 1;
}
.photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 24px;
}
.photo-overlay > p,
.photo-break > div > p,
.island-copy > p,
.start-flow > div > p {
  font-size: 13px;
  letter-spacing: 0.14em;
}
.display-lines {
  position: absolute;
  inset: 120px 0 auto;
  pointer-events: none;
}
.display-lines span {
  display: block;
  overflow: hidden;
}
.display-lines b {
  display: block;
  font:
    800 clamp(64px, 12vw, 160px)/0.9 "Be Vietnam Pro",
    Inter,
    system-ui,
    sans-serif;
  letter-spacing: -0.05em;
  transform: translateY(100%);
  animation: clipin 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.display-lines span:nth-child(2) b {
  animation-delay: 100ms;
  color: var(--color-twilight-blue);
}
.photo-overlay h1 {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: 32px;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.photo-overlay h1 em,
.photo-break h2 em {
  font-size: 1.12em;
}
.photo-overlay .ghost-button {
  margin-bottom: 48px;
}
.statement {
  max-width: 1150px;
  margin: auto;
  padding: 120px 24px;
}
.statement > p {
  color: var(--color-twilight-blue);
}
.statement h2,
.island-copy h2,
.start-flow h2 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 12px 0 32px;
}


/* ===== home-product-island.css ===== */
/* Trang chủ - khối minh hoạ "app-chrome" (decision flow: dữ liệu → phát hiện → việc cần làm).
   Tách khỏi globals.css (2026-09-14, mục 2). */
.product-island {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 24px 120px;
}
.island-copy {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 48px;
}
.island-copy h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}
.island-copy > span {
  color: var(--color-whiteout);
  opacity: 0.68;
}
.hero-glass {
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
  transform-style: preserve-3d;
  transition: transform 160ms ease;
}
.app-chrome {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-ink);
  padding: 8px 0 20px;
}
.app-chrome i {
  font-style: normal;
}
.app-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding-top: 24px;
}
.app-grid article {
  border: 1px solid var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.app-grid p {
  font-size: 13px;
}
.app-grid strong {
  display: block;
  font-size: 56px;
  line-height: 1;
}
.app-grid > article > span {
  font-size: 14px;
}
.flat-meter {
  height: 4px;
  background: var(--color-whiteout);
  margin-top: 48px;
}
.flat-meter i {
  display: block;
  width: 78%;
  height: 100%;
  background: var(--color-ink);
}
.advisor-ui h3 {
  font-size: 32px;
  line-height: 1.1;
}
.advisor-ui > a {
  display: block;
  margin-top: 32px;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.app-grid.decision-flow {
  grid-template-columns: minmax(0, 0.82fr) 74px minmax(0, 1fr) 74px minmax(0, 1.18fr);
  gap: 0;
  align-items: stretch;
}
.decision-flow article {
  min-width: 0;
  transition:
    transform 0.25s,
    background 0.25s;
}
.decision-flow article:hover {
  transform: translateY(-4px);
  background: rgba(220, 185, 71, 0.25);
}
.decision-flow h3 {
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.12;
  margin: 18px 0 12px;
}
.context-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 24px;
}
.context-chips span {
  padding: 10px;
  border: 1px solid rgba(21, 26, 39, 0.2);
  background: rgba(255, 255, 255, 0.36);
  font-size: 11px;
}
.flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.flow-arrow span {
  font-size: 30px;
  color: #b08d25;
}
.flow-arrow small {
  max-width: 64px;
  text-align: center;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.08em;
}
.decision-insight {
  background: rgba(220, 185, 71, 0.09);
}
.decision-output {
  background: rgba(220, 185, 71, 0.2);
}
.decision-output > a {
  font-size: 12px;
}
.recommendation-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
  margin-top: 20px;
}
.recommendation-plan > div {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(21, 26, 39, 0.22);
  background: rgba(255, 255, 255, 0.38);
}
.recommendation-plan > div:last-child {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.recommendation-plan small {
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.62;
}
.recommendation-plan b {
  font-size: 12px;
  line-height: 1.45;
}


/* ===== home-feature-film.css ===== */
/* Trang chủ - 3 điểm nổi bật, khối "photo-break" (ảnh nền + CTA) và modal phim giới thiệu.
   Tách khỏi globals.css (2026-09-14, mục 2). */
.feature-strip {
  max-width: 1150px;
  margin: auto;
  padding: 0 24px 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-strip article {
  border-top: 1px solid var(--color-whiteout);
  padding-top: 20px;
}
.feature-strip > article > span {
  color: var(--color-twilight-blue);
}
.feature-strip h3 {
  font-size: 20px;
  line-height: 1.4;
  margin: 48px 0 16px;
}
.feature-strip p {
  opacity: 0.68;
}
.photo-break {
  height: 100vh;
}
.photo-break > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.photo-break h2 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  margin: 8px 0 32px;
}
.photo-break-copy {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}
.photo-break > div > div {
  display: flex;
  gap: 24px;
  align-items: center;
}
.film-trigger {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.play-ring {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  color: var(--gold-500);
  transition: 0.25s;
}
.film-trigger:hover .play-ring {
  background: var(--gold-500);
  color: var(--color-ink);
  transform: scale(1.08);
}
.film-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 7, 11, 0.93);
  padding: 5vw;
  display: grid;
  place-items: center;
}
.film-frame {
  position: relative;
  width: min(1120px, 94vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0f18;
  border: 1px solid rgba(220, 185, 71, 0.28);
}
.film-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-storyboard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 6vw, 80px);
  color: #fff;
  background: linear-gradient(transparent, rgba(7, 10, 17, 0.9));
}
.film-storyboard h2 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  margin: 8px 0 12px;
}
.film-storyboard button {
  justify-self: start;
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 18px;
  cursor: pointer;
  width: max-content;
}
.film-close {
  position: fixed;
  z-index: 2;
  right: 24px;
  top: 18px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 42px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .media-note {
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 9px 10px;
  }
  .media-note small {
    display: none;
  }
  .asset-caption {
    font-size: 9px !important;
  }
  .film-trigger small {
    display: none;
  }
  .film-modal {
    padding: 12px;
  }
  .film-storyboard p {
    font-size: 13px;
  }
  .film-storyboard h2 {
    font-size: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-hero > img,
  .proposal-gif .tour-bars i,
  .context-visual i,
  .agent-visual i,
  .film-frame > img {
    animation: none !important;
  }
}


/* ===== home-start-flow.css ===== */
/* Trang chủ - khối "bắt đầu 3 bước" cuối trang. Tách khỏi globals.css (2026-09-14, mục 2). */
.start-flow {
  max-width: 1150px;
  margin: auto;
  padding: 120px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.start-flow h2 {
  font-size: 56px;
}
.start-flow ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.start-flow li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--color-whiteout);
}
.start-flow li > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-whiteout);
  border-radius: 8px;
}
.start-flow li svg {
  width: 16px;
}
.start-flow li p {
  opacity: 0.68;
  margin: 4px 0;
}
.start-flow > .ghost-button {
  grid-column: 2;
  width: max-content;
}
.product-disclosure {
  grid-column: 2;
  max-width: 900px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.7;
}


/* ===== page-shared-hero.css ===== */
/* Hero dạng chữ dùng chung các trang KHÔNG phải trang chủ (sản phẩm, giá, pháp lý...). Tách
   khỏi globals.css (2026-09-14, mục 2). */
.sub-hero {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 64px;
}
.sub-hero.compact {
  min-height: 60vh;
}
.eyebrow,
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-whiteout);
  border-radius: 9999px;
  padding: 8px 12px;
  font-size: 13px;
}
.eyebrow svg {
  width: 16px;
}
.sub-hero h1 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  margin: 32px 0 20px;
}
.sub-hero h1 em {
  color: var(--color-twilight-blue);
}
.sub-hero > p {
  max-width: 720px;
  opacity: 0.7;
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.label {
  color: var(--color-twilight-blue);
  font-size: 13px;
  letter-spacing: 0.12em;
}


/* ===== layout-shared.css ===== */
/* Khung wrapper max-width dùng chung nhiều trang + các khối nội dung chi tiết sản phẩm/giá
   (detail-row, context-map, roadmap, cap-grid, cta-band, full-prices, team-quote...). Tách
   khỏi globals.css (2026-09-14, mục 2). */
.product-detail,
.full-prices,
.team-quote,
.checkout-page,
.flow-page,
.mcp-layout,
.support-grid,
.faq,
.legal-page {
  position: relative;
  max-width: 1150px;
  margin: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--color-whiteout);
}
.detail-row.reverse > div:first-child {
  order: 2;
}
.detail-row h2,
.cta-band h2 {
  font-size: 32px;
  line-height: 1.1;
  margin: 16px 0;
}
.detail-row p {
  opacity: 0.7;
}
.detail-row ul,
.full-prices ul {
  list-style: none;
  padding: 0;
  margin: 32px 0;
}
.detail-row li,
.full-prices li {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.detail-row li svg,
.full-prices li svg {
  width: 16px;
}
.visual-card {
  min-height: 360px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.context-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-content: center;
  text-align: center;
}
.context-map > svg {
  grid-column: span 2;
  width: 52px;
  height: 52px;
  margin: auto;
}
.context-map > span {
  grid-column: span 2;
}
.context-map i {
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  padding: 16px;
  font-style: normal;
}
.roadmap > svg {
  width: 48px;
  height: 48px;
}
.roadmap > div {
  margin: 48px 0;
}
.roadmap b,
.roadmap strong {
  display: block;
}
.roadmap strong {
  font-size: 32px;
}
.roadmap > span {
  display: block;
  margin: 20px 0;
}
.roadmap > span i {
  display: block;
  height: 4px;
  background: var(--color-ink);
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 120px;
}
.cap-grid article {
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.cap-grid svg {
  width: 24px;
}
.cap-grid h3 {
  font-size: 20px;
}
.cta-band {
  max-width: 1150px;
  margin: 0 auto 120px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
}
.cta-band > svg {
  width: 48px;
}
.cta-band p {
  margin: 0;
}
.cta-band .gold {
  margin-left: auto;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}


/* ===== layout-pricing.css ===== */
/* Khối bảng giá: toggle kỳ hạn, thẻ 3 tier, khối "Gói Team" + ghi chú bảo mật. Tách khỏi
   layout-shared.css (2026-09-14, mục 2, vượt 250 dòng). */
.term-toggle {
  display: flex;
  margin-top: 32px;
  background: var(--toggle-surface);
  border: 1px solid var(--color-whiteout);
  border-radius: 9999px;
  padding: 4px;
}
.term-toggle button {
  border: 0;
  background: transparent;
  color: var(--color-whiteout);
  border-radius: 9999px;
  padding: 8px 16px;
}
.term-toggle button.active {
  background: var(--color-haze);
  color: var(--color-ink);
}
.term-toggle b {
  color: var(--color-signal-blue);
  margin-left: 8px;
}
.full-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-bottom: 64px;
}
.full-prices article {
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.full-prices article > i {
  font-style: normal;
  color: var(--color-signal-blue);
}
.full-prices h2 {
  font-size: 32px;
}
.full-prices > article > strong {
  display: block;
  font-size: 32px;
  margin: 32px 0;
}
.full-prices button {
  width: 100%;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.team-quote {
  margin-bottom: 48px;
  padding: 20px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.team-quote h2 {
  font-size: 32px;
  margin: 8px 0;
}
.quantity {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quantity button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  background: transparent;
}
.team-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.team-copy-email {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  opacity: 0.7;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.team-copy-email:hover {
  opacity: 1;
  text-decoration: underline;
}
.team-quote .gold {
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.security-note {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-bottom: 120px;
}
.security-note svg {
  width: 20px;
}


/* ===== checkout.css ===== */
/* Trang thanh toán: form, phương thức thanh toán, tóm tắt đơn, voucher, hướng dẫn chuyển
   khoản, màn hình thành công. Tách khỏi globals.css (2026-09-14, mục 2). */
.checkout-page {
  padding-top: 120px;
  padding-bottom: 120px;
}
.back,
.terms a {
  color: var(--color-signal-blue);
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 24px;
  margin-top: 32px;
}
.checkout-grid > form,
.order-card,
.flow-card,
.ticket-form,
.docs-card {
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.checkout-grid h1 {
  font-size: 32px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .wide {
  grid-column: span 2;
}
.form-grid label,
.flow-card label {
  font-size: 13px;
}
.form-grid input,
.form-grid select,
.form-grid textarea,
.flow-card input,
.support-search input {
  display: block;
  width: 100%;
  background: var(--color-whiteout);
  color: var(--color-ink);
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
}
.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.payment-methods button {
  display: flex;
  gap: 8px;
  text-align: left;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  padding: 10px;
}
.payment-methods button.active {
  border-color: var(--color-signal-blue);
}
.payment-methods small {
  display: block;
}
.pay-button {
  width: 100%;
  margin-top: 20px;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.order-title,
.order-safe {
  display: flex;
  gap: 12px;
  align-items: center;
}
.order-card hr {
  border: 0;
  border-top: 1px solid var(--color-ink);
  margin: 20px 0;
}
.order-card > p {
  display: flex;
  justify-content: space-between;
}
.voucher-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.voucher-row input {
  flex: 1;
}
.voucher-msg {
  font-size: 13px;
  margin-top: 6px;
}
.voucher-msg.ok {
  color: var(--color-signal-blue);
}
.voucher-msg.bad,
.checkout-error {
  color: #c0392b;
  font-size: 13px;
}
.bank-instructions {
  max-width: 480px;
  margin: 24px auto 0;
  text-align: left;
  border: 1px solid var(--hairline-light, currentColor);
  border-radius: 12px;
  padding: 16px 20px;
}
.bank-instructions p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.success-state {
  max-width: 720px;
  margin: auto;
  padding: 160px 24px;
  text-align: center;
}
.success-state > span,
.flow-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid currentColor;
  border-radius: 12px;
}
.success-state h1 {
  font-size: 56px;
  font-weight: 400;
}
.success-state > div {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}


/* ===== flow-mcp-support.css ===== */
/* Trang luồng onboarding (dùng thử/dashboard), trang kết nối MCP, trang hỗ trợ. Tách khỏi
   globals.css (2026-09-14, mục 2). */
.flow-page {
  padding-top: 140px;
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.flow-intro h1 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
}
.flow-intro h1 em {
  color: var(--color-twilight-blue);
}
.flow-intro ol {
  list-style: none;
  padding: 0;
  margin: 32px 0;
}
.flow-intro li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  opacity: 0.5;
}
.flow-intro li.active {
  opacity: 1;
}
.flow-intro li span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-whiteout);
  border-radius: 8px;
}
.flow-card {
  text-align: center;
}
.flow-card h2 {
  font-size: 32px;
}
.flow-card > small {
  display: block;
  margin-top: 16px;
}
.order-tax-lines {
  margin-top: 20px;
  display: grid;
  gap: 4px;
}
.order-trial-note,
.order-pay-note {
  margin-top: 24px;
}
.flow-card .gold {
  margin-top: 24px;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.mcp-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding-bottom: 120px;
}
.mcp-layout > aside {
  border-top: 1px solid var(--color-whiteout);
  padding-top: 20px;
}
.docs-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 20px;
}
.docs-head h2 {
  font-size: 32px;
}
.doc-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-ink);
}
.doc-step > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
}
.support-search {
  display: flex;
  gap: 8px;
  width: min(100%, 620px);
  margin-top: 32px;
}
.support-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  padding-bottom: 80px;
}
.help-options {
  display: grid;
  gap: 8px;
}
.help-options article,
.hours {
  display: flex;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-whiteout);
  border-radius: 12px;
}
.help-options h3 {
  font-size: 20px;
}
.hours {
  margin-top: 16px;
}
.ticket-form h2 {
  font-size: 32px;
}
.ticket-form .gold {
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.ticket-success {
  text-align: center;
  padding: 48px 0;
}


/* ===== faq-legal-footer.css ===== */
/* Trang FAQ, trang pháp lý (điều khoản/chính sách), footer chung toàn site + tiện ích
   hiệu ứng "reveal khi cuộn". Tách khỏi globals.css (2026-09-14, mục 2). */
.faq {
  padding-bottom: 120px;
}
.faq > h2 {
  font-size: 32px;
}
.faq article {
  border-top: 1px solid var(--color-whiteout);
}
.faq article > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: transparent;
  color: var(--color-whiteout);
  border: 0;
  padding: 20px 0;
  text-align: left;
}
.faq article p {
  max-width: 720px;
  opacity: 0.7;
}
.faq-search-empty {
  margin: 16px 0 0;
  opacity: 0.7;
  font-size: 14px;
}
.faq-search-empty[hidden] {
  display: none;
}
.rotate {
  transform: rotate(180deg);
}
.legal-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding-top: 140px;
  padding-bottom: 120px;
}
.legal-page > aside {
  position: sticky;
  top: 96px;
  height: max-content;
}
.legal-page > aside button {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--color-whiteout);
  border: 0;
  border-bottom: 1px solid var(--color-whiteout);
  padding: 12px 0;
  text-align: left;
}
.legal-page > aside button.active {
  color: var(--color-signal-blue);
}
.legal-head {
  display: flex;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--color-whiteout);
  padding-bottom: 20px;
}
.legal-head h1 {
  font-size: 32px;
}
.legal-note {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
}
.legal-page article > section {
  padding: 20px 0;
}
.legal-page article > section h2 {
  font-size: 20px;
}
.legal-page article > section p {
  font-weight: 400;
}
.legal-company {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  border: 1px solid var(--color-whiteout) !important;
  padding: 20px !important;
  margin-top: 32px !important;
}
footer {
  max-width: 1150px;
  margin: auto;
  padding: 48px 24px 64px;
  border-top: 1px solid var(--color-whiteout);
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-black-void);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.foot-brand p {
  font-size: 13px;
  margin: 0;
}
.foot-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.foot-links a {
  color: var(--color-signal-blue);
  text-underline-offset: 6px;
}
footer > small {
  font-size: 12px;
}
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0ms);
}
.revealed {
  opacity: 1 !important;
  transform: none !important;
}


/* ===== keyframes.css ===== */
/* Keyframes dùng chung (chữ trượt vào + ảnh zoom nhẹ Ken Burns). Tách khỏi globals.css
   (2026-09-14, mục 2). */
@keyframes clipin {
  to {
    transform: none;
  }
}
@keyframes kenburns {
  to {
    transform: scale(1.06);
  }
}


/* ===== responsive-global.css ===== */
/* Override responsive cắt ngang nhiều trang/component cùng lúc (900px, 680px, giảm chuyển
   động) - CỐ Ý gộp 1 file thay vì tách theo component vì mỗi khối @media áp cho selector của
   NHIỀU file khác nhau. Tách khỏi globals.css (2026-09-14, mục 2). QUAN TRỌNG: file này phải
   nạp SAU tất cả các file component ở trên (base-tokens.css ... faq-legal-footer.css) trong
   build.ts để override đúng thứ tự cascade - đừng đổi vị trí trong mảng CSS_FILES. */
@media (max-width: 900px) {
  .sub-header > nav,
  .sub-actions > a,
  .sub-actions > .gold {
    display: none;
  }
  .sub-actions .hamb {
    display: grid;
    background: transparent;
    color: var(--color-whiteout);
    border: 0;
  }
  .sub-mobile {
    display: grid;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(8px);
    padding: 20px;
  }
  .sub-mobile a {
    padding: 12px 0;
    text-decoration: none;
  }
  .display-lines {
    top: 160px;
  }
  .island-copy {
    grid-template-columns: 1fr;
  }
  .feature-strip {
    grid-template-columns: 1fr;
  }
  .detail-row {
    gap: 24px;
  }
  .checkout-grid,
  .support-grid {
    grid-template-columns: 1fr;
  }
  .mcp-layout {
    grid-template-columns: 1fr;
  }
  .legal-page {
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 680px) {
  .photo-hero,
  .photo-break {
    min-height: 680px;
  }
  .display-lines {
    top: 160px;
  }
  .photo-overlay h1,
  .sub-hero h1,
  .statement h2,
  .photo-break h2,
  .start-flow h2,
  .flow-intro h1,
  .success-state h1 {
    font-size: 32px;
    line-height: 1.1;
  }
  .photo-overlay > p {
    margin-top: auto;
  }
  .photo-overlay .ghost-button {
    margin-bottom: 24px;
  }
  .statement {
    padding: 80px 20px;
  }
  .product-island {
    padding: 0 20px 80px;
  }
  .app-grid,
  .app-grid.decision-flow,
  .detail-row,
  .detail-row.reverse,
  .full-prices,
  .flow-page,
  .legal-page {
    grid-template-columns: 1fr;
  }
  .flow-arrow {
    min-height: 58px;
  }
  .flow-arrow span {
    transform: rotate(90deg);
  }
  .flow-arrow small {
    max-width: none;
  }
  .decision-output .recommendation-plan {
    grid-template-columns: 1fr 90px;
  }
  .detail-row.reverse > div:first-child {
    order: 0;
  }
  .feature-strip {
    padding: 0 20px 80px;
  }
  .photo-break > div > div,
  .hero-actions,
  .success-state > div {
    flex-direction: column;
  }
  .start-flow {
    grid-template-columns: 1fr;
    padding: 80px 20px;
  }
  .start-flow > .ghost-button {
    grid-column: 1;
  }
  .product-disclosure {
    grid-column: 1;
  }
  .cap-grid {
    grid-template-columns: 1fr;
  }
  .cta-band,
  .team-quote {
    margin-left: 20px;
    margin-right: 20px;
    display: grid;
  }
  .cta-band .gold,
  .team-quote .gold,
  .quantity {
    margin-left: 0;
  }
  .full-prices,
  .checkout-page,
  .flow-page,
  .mcp-layout,
  .support-grid,
  .faq,
  .legal-page {
    padding-left: 20px;
    padding-right: 20px;
  }
  .form-grid,
  .payment-methods {
    grid-template-columns: 1fr;
  }
  .form-grid .wide {
    grid-column: 1;
  }
  .legal-page > aside {
    position: static;
    display: flex;
    overflow: auto;
  }
  .legal-page > aside > .label {
    display: none;
  }
  .legal-page > aside button {
    min-width: 180px;
  }
  .foot-links {
    margin-left: 0;
    flex-wrap: wrap;
  }
  footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* ===== media-story.css ===== */
/* Thanh tiến trình cuộn trang + khối "media-story" (video 20s bối cảnh→kết nối) trên trang
   chủ. Tách khỏi globals.css (2026-09-14, mục 2). */
.scroll-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-whiteout);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.media-story {
  max-width: 1150px;
  margin: auto;
  padding: 0 24px 120px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: end;
}
.media-story > div > p {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-twilight-blue);
}
.media-story h2 {
  font-size: 32px;
  line-height: 1.1;
}
.media-story > div > span {
  display: block;
  opacity: 0.7;
}
.media-stage {
  position: relative;
  height: 520px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
.media-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-stage:focus-visible {
  outline-offset: 8px;
}
@media (max-width: 680px) {
  .media-story {
    grid-template-columns: 1fr;
    padding: 0 20px 80px;
  }
  .media-stage {
    height: 360px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}


/* ===== login-page.css ===== */
/* Trang đăng nhập/đăng ký (Google + email OTP). Tách khỏi dashboard.css (2026-09-14, mục 2). */
.login-page {
  max-width: 1150px;
  min-height: 100vh;
  margin: auto;
  padding: 140px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.login-page > div h1 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
}
.login-page > div h1 em {
  color: var(--color-twilight-blue);
}
.login-page > div > p {
  opacity: 0.7;
}
.login-page ul {
  list-style: none;
  padding: 0;
  margin-top: 32px;
}
.login-page li {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.login-page li svg {
  width: 16px;
}
.login-page form {
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.login-page form h2 {
  font-size: 32px;
}
.login-page form label {
  display: block;
  margin: 16px 0;
}
.login-page form input {
  width: 100%;
  background: var(--color-whiteout);
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
}
.password {
  position: relative;
}
.password button {
  position: absolute;
  right: 8px;
  top: 16px;
  background: transparent;
  border: 0;
}
.password svg {
  width: 16px;
}
.login-page form > .gold {
  width: 100%;
  margin-top: 20px;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.login-page form > p {
  font-size: 13px;
  text-align: center;
  margin-top: 16px;
}
.login-page form > p a {
  color: var(--color-signal-blue);
}


/* ===== dash-shell-nav.css ===== */
/* Khung dashboard khách hàng: sidebar điều hướng + tài khoản. Tách khỏi dashboard.css
   (2026-09-14, mục 2). */
.dash-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}
.dash-shell > aside {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px;
  border-right: 1px solid var(--color-whiteout);
  display: flex;
  flex-direction: column;
}
.dash-shell > aside .brand {
  margin-bottom: 48px;
}
.dash-shell > aside nav {
  display: grid;
}
.dash-shell > aside nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-whiteout);
  opacity: 0.6;
}
.dash-shell > aside nav a.active,
.dash-shell > aside nav a:hover {
  opacity: 1;
  color: var(--color-signal-blue);
}
.dash-shell > aside nav svg {
  width: 18px;
}
.dash-account {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-account > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-whiteout);
  border-radius: 8px;
}
.dash-account b,
.dash-account small {
  display: block;
  font-size: 12px;
}
.dash-account a {
  margin-left: auto;
}
.dash-account svg {
  width: 18px;
}
.dash-mobile-head {
  display: none;
}


/* ===== dash-overview.css ===== */
/* Dashboard - trang tổng quan: tiêu đề, số liệu, việc cần làm, banner. Tách khỏi
   dashboard.css (2026-09-14, mục 2). */
.dash-content {
  padding: 64px 48px;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
.dash-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}
.dash-title h1 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  margin: 12px 0;
}
.dash-title p {
  opacity: 0.68;
}
.dash-status {
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: 9999px;
  padding: 8px 12px;
  font-size: 13px;
}
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dash-metrics article,
.dash-grid > article,
.license-panel,
.device-list,
.order-list,
.invoice-list,
.dash-note {
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
  padding: 20px;
}
.dash-metrics article > span {
  font-size: 13px;
}
.dash-metrics strong {
  display: block;
  font-size: 56px;
  line-height: 1;
  margin: 32px 0 8px;
}
.dash-metrics p {
  margin: 0;
  font-size: 14px;
}
.dash-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.dash-grid h2 {
  font-size: 32px;
}
.dash-advisor > a,
.dash-task a {
  color: var(--color-signal-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.dash-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--color-ink);
}
.dash-task svg {
  width: 18px;
}
.dash-task a {
  margin-left: auto;
}
.dash-banner {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--color-whiteout);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
}
.dash-banner > svg:last-child {
  margin-left: auto;
}
.dash-banner b,
.dash-banner small {
  display: block;
}
.dash-banner small {
  font-size: 13px;
}


/* ===== license-panel.css ===== */
/* Dashboard - thẻ giấy phép (mã key, thông tin gói, hành động gia hạn/thu hồi). Tách khỏi
   dashboard.css (2026-09-14, mục 2). */
.license-panel {
  max-width: 860px;
}
.license-head,
.license-head > div,
.license-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.license-head > .dash-status {
  margin-left: auto;
}
.license-head b,
.license-head small {
  display: block;
}
.license-code {
  margin: 32px 0;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  padding: 16px;
}
.license-code button,
.invoice-list button,
.device-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-ink);
  border: 0;
}
.license-code svg,
.invoice-list button svg,
.device-list button svg {
  width: 16px;
}
.license-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.license-facts p span,
.license-facts p b {
  display: block;
  font-size: 13px;
}
.license-actions {
  justify-content: space-between;
  border-top: 1px solid var(--color-ink);
  padding-top: 20px;
}
.license-actions .gold {
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.license-actions .gold:hover {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent) !important;
}
.license-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  padding: 10px 16px;
  transition: background 160ms ease;
}
.license-actions button:hover {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
}
.dash-note {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  max-width: 860px;
}
.dash-note h2 {
  font-size: 20px;
}


/* ===== dash-lists.css ===== */
/* Dashboard - danh sách thiết bị/đơn hàng/hoá đơn. Tách khỏi dashboard.css (2026-09-14,
   mục 2). */
.device-list,
.order-list,
.invoice-list {
  padding: 0;
}
.device-list > header,
.device-list > article {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 40px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-ink);
}
.device-list .device-ip {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.device-list article > div,
.order-list article,
.invoice-list article {
  display: flex;
  align-items: center;
  gap: 12px;
}
.device-list b,
.device-list small,
.order-list b,
.order-list small,
.invoice-list b,
.invoice-list small {
  display: block;
}
.device-list small,
.order-list small,
.invoice-list small {
  font-size: 13px;
}
.order-list article,
.invoice-list article {
  padding: 20px;
  border-bottom: 1px solid var(--color-ink);
}
.order-list article > div,
.invoice-list article > div {
  flex: 1;
}
.order-list article > a {
  margin-left: 16px;
}
.invoice-list article button {
  margin-left: auto;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  padding: 8px 16px;
}


/* ===== status-pages.css ===== */
/* Trang trạng thái thanh toán, trang 404, kết quả tìm kiếm, danh sách hỗ trợ. Tách khỏi
   dashboard.css (2026-09-14, mục 2). */
.payment-status-page,
.not-found {
  max-width: 760px;
  min-height: 100vh;
  margin: auto;
  padding: 140px 24px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.payment-status-page h1,
.not-found h1 {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
}
.payment-status-page > p,
.not-found p {
  opacity: 0.7;
}
.payment-timeline {
  width: 100%;
  margin: 32px 0;
  text-align: left;
}
.payment-timeline article {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--color-whiteout);
}
.payment-timeline b,
.payment-timeline small {
  display: block;
}
.not-found > span {
  font:
    800 clamp(64px, 12vw, 160px)/0.9 "Be Vietnam Pro",
    Inter,
    system-ui,
    sans-serif;
  color: var(--color-twilight-blue);
}
.search-results {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 20px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: 12px;
}
.search-results article {
  border-top: 1px solid var(--color-ink);
  padding-top: 16px;
}
.search-results h2 {
  font-size: 20px;
}
.help-options > a {
  display: flex;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-whiteout);
  border-radius: 12px;
  text-decoration: none;
}
.help-options > a svg {
  width: 20px;
}


/* ===== dashboard-responsive.css ===== */
/* Override responsive cho các trang login/dashboard ở nhóm file phía trên. Tách khỏi
   dashboard.css (2026-09-14, mục 2) - phải nạp SAU các file đó. */
@media (max-width: 900px) {
  .login-page {
    gap: 32px;
  }
  .dash-shell {
    display: block;
  }
  .dash-mobile-head {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-whiteout);
  }
  .dash-mobile-head button {
    background: transparent;
    color: var(--color-whiteout);
    border: 0;
  }
  .dash-shell > aside {
    display: none;
    position: fixed;
    z-index: 40;
    inset: 72px 0 0;
    width: 100%;
    height: auto;
    background: var(--color-black-void);
  }
  .dash-shell > aside.open {
    display: flex;
  }
  .dash-shell > aside > .brand {
    display: none;
  }
  .dash-content {
    padding: 48px 24px;
  }
  .dash-title h1 {
    font-size: 32px;
  }
  .license-facts {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .login-page {
    grid-template-columns: 1fr;
    padding: 120px 20px 80px;
  }
  .login-page > div h1 {
    font-size: 32px;
  }
  .dash-content {
    padding: 32px 20px;
  }
  .dash-title {
    display: block;
  }
  .dash-title > .dash-status,
  .dash-title > .gold {
    margin-top: 16px;
  }
  .dash-metrics,
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .dash-metrics strong {
    font-size: 32px;
  }
  .device-list > header {
    display: none;
  }
  .device-list > article {
    grid-template-columns: 1fr auto;
  }
  .device-list > article > p {
    display: none;
  }
  .device-list > article > .dash-status {
    grid-column: 1;
  }
  .license-facts {
    grid-template-columns: 1fr;
  }
  .license-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .order-list article,
  .invoice-list article {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .order-list article strong,
  .invoice-list article strong {
    width: 100%;
  }
  .payment-status-page h1,
  .not-found h1 {
    font-size: 32px;
  }
}


/* ===== brand.css ===== */
html,
body,
.site-shell,
.dash-shell {
  background: var(--navy-900);
  color: var(--neutral-50);
}
body,
button,
a,
input,
select,
textarea {
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
}
body {
  font-weight: 500;
}
em {
  font-family: inherit;
  font-style: italic;
  font-weight: 600;
  color: var(--gold-500);
}
.display-lines b,
.not-found > span {
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.display-lines b {
  font-size: clamp(64px, 12vw, 160px);
}
.brand {
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* 2026-09-09: da co asset logo that (03_NHAN_DIEN_THUONG_HIEU) - mo lai o day (truoc bi an
   display:none vi chua co gi de hien thi), bo vien o (globals.css) vi bieu tuong da co net rieng. */
.brand-mark {
  display: grid;
  place-items: center;
  border: none;
}
.brand-logo-slot {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.sub-header {
  border-color: var(--hairline-dark);
}
.sub-header.scrolled,
.sub-mobile {
  background: var(--surface-overlay);
}
.gold,
.ghost-button {
  border-color: var(--gold-500) !important;
}
.gold:hover,
.ghost-button:hover {
  background: var(--hover-ghost) !important;
  border-color: var(--gold-hover) !important;
  color: var(--gold-highlight) !important;
}
.underline-link,
.label,
.statement > p,
.feature-strip > article > span,
.media-story > div > p,
.term-toggle b,
.full-prices article > i,
.legal-page > aside button.active,
.dash-shell > aside nav a.active,
.dash-shell > aside nav a:hover,
.dash-advisor > a,
.dash-task a,
.login-page form > p a {
  color: var(--gold-500);
}
.scroll-progress {
  background: var(--gold-500);
}
.term-toggle {
  background: var(--toggle-surface);
}
.form-grid input,
.form-grid select,
.form-grid textarea,
.flow-card input,
.support-search input,
.login-page form input {
  border-color: var(--hairline-light);
}
.payment-methods button.active {
  border-color: var(--gold-500);
}
.photo-hero,
.media-stage {
  background: var(--navy-800);
}
.photo-hero > img,
.photo-hero > video,
.media-stage video {
  background: var(--navy-800);
}
.photo-break,
.photo-break > img {
  /* Ảnh lori-codex-editor-chat.png có màu viền gần đen-navy đậm (~#08111b trái,
     ~#0c0e11 phải). object-fit: contain để trống viền NGAY TRONG khung <img>, và chính
     background của <img> (không phải của section .photo-break) lấp khoảng trống đó —
     navy-800 (#1e2740) sáng/xanh hơn nhiều nên viền bị lộ rõ (user phản hồi 2026-09-21).
     navy-950 khớp tông ảnh hơn. */
  background: var(--navy-950);
}
.photo-break {
  height: auto;
  min-height: 640px;
}
.photo-break > div {
  position: relative;
  min-height: 640px;
}
.photo-break > img {
  inset: 0;
}
.photo-overlay h1 {
  max-width: 900px;
}
.photo-overlay h1 em {
  font-size: inherit;
}
.sub-hero h1,
.statement h2,
.photo-break h2,
.start-flow h2,
.tour-section h2,
.screen-rail h2,
.beta-feedback h2,
.plan-compare h2,
.pricing-faq h2,
.dash-title h1 {
  font-weight: 600;
}
.site-shell p,
.dash-shell p {
  color: inherit;
}
.site-shell p:not(.field-error),
.dash-title p {
  --secondary-copy: var(--text-secondary);
}
.legal-company {
  background: var(--navy-900) !important;
}
.dashboard-state {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px;
}
.dashboard-state > div {
  max-width: 560px;
}
.dashboard-state svg {
  width: 48px;
  height: 48px;
  color: var(--gold-500);
}
.dashboard-state h1 {
  font-size: 32px;
}
.empty-state {
  padding: 64px 20px;
  text-align: center;
}
.empty-state svg {
  width: 32px;
  color: var(--gold-500);
}
.error-copy {
  color: var(--navy-900);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.product-tour-usecases {
  max-width: var(--content-max);
  margin: auto;
  padding: 0 24px 120px;
}
.usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.usecase-grid article {
  background: var(--haze-100);
  color: var(--navy-900);
  border-radius: var(--radius-card);
  padding: 20px;
}
.usecase-grid h3 {
  font-size: 20px;
}
.legal-contact {
  display: grid;
  gap: 8px;
}
.disabled-method {
  opacity: 0.52;
}
.disabled-method button {
  cursor: not-allowed;
}
.tax-note {
  padding: 16px;
  border: 1px solid var(--navy-900);
  border-radius: var(--radius-button);
}
@media (max-width: 680px) {
  .display-lines b {
    font-size: clamp(52px, 18vw, 96px);
  }
  .photo-break,
  .photo-break > div {
    min-height: 520px;
  }
  /* Ảnh photo-break dùng object-fit:contain trên desktop để không crop, nhưng ảnh
     ngang (rộng hơn cao nhiều) đặt trong khung cao 520px trên man hinh hep se bi thu
     nho thanh 1 dai mong o giua, phan lon la khoang trong (khong thay gi). Tren mobile
     chuyen sang cover de anh lap day khung, chap nhan crop nhe hai canh. */
  .photo-break > img {
    height: 106%;
    object-fit: cover;
  }
  .usecase-grid {
    grid-template-columns: 1fr;
  }
  .product-tour-usecases {
    padding: 0 20px 80px;
  }
}


/* ===== overrides-a11y-search.css ===== */
/* Điều chỉnh nhỏ cho bản tĩnh (thay cho state React của bản gốc) — phần lõi: skip-link,
   banner cookie, tìm kiếm toàn site. Phần lõi còn lại (menu mobile, panel/accordion, nút
   outline, dialog thiết bị, gạch chân link) ở overrides-misc.css (2026-09-14, tách khỏi
   overrides.css cũ - mục 2). Các nhóm khác tách file riêng: overrides-legal / overrides-pricing /
   overrides-content / overrides-footer (nạp theo CSS_ORDER trong build.ts). */

/* Skip-to-content — ẩn ngoài màn hình mặc định, chỉ hiện khi focus bằng bàn phím (Tab đầu tiên).
   Đích đến #main-content nằm trong chrome.ts pageShell(), ngay sau header/search, trước nội dung
   trang — nhảy qua toàn bộ nav lặp lại ở mọi trang. Xem stt48 Canvas #20 (Sàn Tiếp cận). */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy-900);
  color: var(--gold-500);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-card, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Banner xin phép cookie (GA4) — xem chrome.ts cookieBanner() + client/ui/07-cookie-consent.js. */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 130;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--navy-900);
  border: 1px solid var(--color-whiteout);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.cookie-banner[hidden] {
  display: none;
}
/* Đóng tạm khi khách còn phân vân — không tính là đồng ý/từ chối, xem 07-cookie-consent.js.
   Đặt nổi ở góc thẻ (badge tròn) để tách hẳn khỏi cụm nút Từ chối/Đồng ý, tránh rối mắt. */
.cookie-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-900);
  border: 1px solid var(--color-whiteout);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--neutral-50);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.cookie-close:hover,
.cookie-close:focus-visible {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  outline: none;
}
.cookie-banner p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
  color: var(--neutral-50);
  opacity: 0.8;
}
.cookie-banner p a {
  color: var(--color-signal-blue);
  opacity: 1;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
/* Nút "Tuỳ chọn cookie" ở chân trang: nhìn như chữ thường, khớp các link cạnh nó (không có class riêng). */
.cookie-reopen {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Tìm kiếm toàn site: nút kính lúp trong header (.sub-actions) + overlay bật/tắt bằng
   [data-site-search-toggle] (xem chrome.ts siteSearchPanel() + client/ui/06-site-search.js). */
.site-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 4px;
}
.site-search-btn svg {
  width: 20px;
}
.site-search-panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 96px 20px 40px;
  background: rgba(10, 12, 20, 0.72);
}
.site-search-panel[hidden] {
  display: none;
}
.site-search-box {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy-900);
  border: 1px solid var(--color-whiteout);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  flex: none;
}
.site-search-box svg {
  width: 20px;
  flex: none;
  opacity: 0.6;
}
.site-search-box input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--neutral-50);
  font-size: 16px;
}
.site-search-close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
}
.site-search-close:hover {
  opacity: 1;
}
.site-search-results {
  width: 100%;
  max-width: 640px;
  overflow-y: auto;
  max-height: 60vh;
}
.site-search-results:empty {
  display: none;
}
.site-search-results article {
  background: var(--navy-900);
  border: 1px solid var(--color-whiteout);
  border-radius: var(--radius-card);
  margin-bottom: 8px;
}
.site-search-results a {
  display: block;
  padding: 14px 20px;
}
.site-search-results h3 {
  font-size: 15px;
  margin: 0 0 4px;
}
.site-search-results p {
  font-size: 13px;
  opacity: 0.68;
  margin: 0;
}
.site-search-empty {
  color: var(--neutral-50);
  opacity: 0.72;
  font-size: 14px;
  text-align: center;
}
@media (max-width: 640px) {
  .site-search-panel {
    padding: 72px 12px 24px;
  }
}


/* ===== overrides-misc.css ===== */
/* Điều chỉnh nhỏ cho bản tĩnh - phần còn lại sau overrides-a11y-search.css (2026-09-14, tách
   khỏi overrides.css cũ - mục 2): menu mobile, panel/accordion/wizard, dialog thiết bị, gạch
   chân link mặc định. */

/* Menu mobile luôn có trong DOM, ẩn cho tới khi bấm hamburger. */
.sub-mobile[hidden] {
  display: none !important;
}
@media (max-width: 900px) {
  .sub-mobile:not([hidden]) {
    display: grid;
  }
}

/* Panel dạng tab / accordion / bước wizard: ẩn khi không active. */
[data-panel][hidden],
[data-accordion-body][hidden],
[data-step][hidden],
[data-state-view][hidden] {
  display: none !important;
}

/* Aside dashboard trên mobile mở bằng class .open (khớp bản gốc). */
@media (max-width: 900px) {
  .dash-shell > aside[data-dash-aside].open {
    display: flex;
  }
}

/* Bản gốc dùng shadcn <Button variant="outline"> (inline-flex). Ở bản tĩnh
   .outline là <a>/<button> thường nên cần bù lại layout nút. */
a.outline,
button.outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

/* Hộp thoại thu hồi thiết bị (bản gốc dùng shadcn AlertDialog). */
.device-dialog {
  padding: 20px;
  max-width: 420px;
  width: calc(100% - 40px);
  margin: auto;
}
.device-dialog h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.device-dialog p {
  opacity: 0.72;
}
.device-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}
.device-dialog-actions button {
  padding: 8px 16px;
}
.device-dialog::backdrop {
  background: color-mix(in srgb, var(--navy-950) 62%, transparent);
}

/* Chỉ báo JS tắt: vẫn hiện đủ nội dung tương tác. */
.no-js [data-panel][hidden],
.no-js [data-accordion-body][hidden] {
  display: block !important;
}

/* Gạch chân khi hover cho MỌI link dạng chữ thuần (menu, chân trang, link
   trong văn bản, mailto/tel...). Các nút CTA (.gold/.ghost-button/.outline/...)
   và .underline-link đã có hiệu ứng hover riêng nên không bị ảnh hưởng vì
   chúng luôn có class. */
a:not([class]):hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Ngoại lệ: thẻ kết quả tìm kiếm là cả một khối (tiêu đề + mô tả), không phải
   link dạng chữ — giữ nguyên không gạch chân khi hover. */
.site-search-results a:hover {
  text-decoration: none;
}


/* ===== overrides-legal.css ===== */
/* --- 4 trang pháp lý (aside dùng <a> thay <button>) --- */
.legal-page > aside .legal-nav-link {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--color-whiteout);
  border: 0;
  border-bottom: 1px solid var(--color-whiteout);
  padding: 12px 0;
  text-align: left;
  text-decoration: none;
  opacity: 0.72;
}
.legal-page > aside .legal-nav-link:hover {
  opacity: 1;
}
.legal-page > aside .legal-nav-link.active {
  color: var(--color-signal-blue);
  opacity: 1;
}
@media (max-width: 680px) {
  .legal-page > aside .legal-nav-link {
    min-width: 200px;
  }
}
.legal-page article ol,
.legal-page article ul {
  margin: 12px 0 12px 20px;
  padding: 0;
}
.legal-page article li {
  margin: 6px 0;
  font-weight: 400;
}
.legal-page article section > p + p {
  margin-top: 12px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-weight: 400;
  overflow-x: auto;
  display: block;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--hairline-dark);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.legal-table th {
  background: var(--surface-overlay);
  font-weight: 600;
}
.legal-lede {
  font-weight: 400;
  opacity: 0.85;
  margin-bottom: 8px;
}
/* Nút "Lưu / In" ẩn khi in — đặt ở ĐÂY (nạp sau buttons-links.css) để thắng .ghost-button
   {display:inline-flex !important} của buttons-links.css (2026-09-14: tách từ globals.css cũ -
   cùng specificity 1 class + !important, luật nạp sau thắng). Đặt trong nhóm enhancements-*.css
   (nạp trước buttons-links.css) sẽ bị đè mất, khiến nút vẫn hiện trong bản in dù đã
   display:none — phát hiện 11/09/2026 qua báo cáo user. */
@media print {
  .legal-print {
    display: none !important;
  }
  /* Sidebar điều hướng dùng màu sáng (--color-whiteout) cho nền tối — in trên giấy trắng
     thì chữ vô hình nhưng cột 240px vẫn chiếm chỗ, đẩy nội dung dồn hẹp lại dù chọn khổ ngang.
     Ẩn hẳn sidebar khi in và cho nội dung chiếm full chiều rộng trang giấy. */
  .legal-page {
    display: block !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .legal-page > aside {
    display: none !important;
  }
}


/* ===== overrides-pricing.css ===== */
/* Khối "Thời hạn nào phù hợp?" (thay FAQ accordion cũ, tránh trùng nội dung với FAQ/hỗ trợ). */
.pricing-faq h3 {
  padding-top: 20px;
  font-size: 20px;
}

/* --- Bảng giá: 3 tier theo thời hạn + checkout --- */
.full-prices.tri {
  grid-template-columns: repeat(3, 1fr);
}
/* Khối "Gói Team": bộ đếm không cho giảm dưới mức tối thiểu (5 người). */
.team-quote .quantity button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.team-quote svg {
  width: 16px;
}
/* Đoạn mô tả bên trái co giãn/xuống dòng bình thường; bộ đếm + nút CTA giữ nguyên kích
   thước, không bao giờ co lại hay xuống dòng (tránh vỡ chữ khi mô tả dài). */
.team-quote > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}
.team-quote .quantity {
  flex: none;
  white-space: nowrap;
}
.team-quote > .team-cta {
  flex: none;
}
.team-cta > a.gold {
  white-space: nowrap;
}
/* Ô nhập số người thay cho chữ tĩnh: có viền như nút -/+ để khách nhận ra là ô gõ được,
   căn giữa, bỏ mũi tên spinner mặc định của trình duyệt. */
.team-quote .quantity input {
  width: 48px;
  height: 36px;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.team-quote .quantity input::-webkit-outer-spin-button,
.team-quote .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.team-quote .quantity input:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Giá + chú thích: chú thích xuống dòng, mờ, nhỏ. */
.full-prices article > strong {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.full-prices article > strong small {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.6;
  color: inherit;
}
.full-prices article ul {
  min-height: 0;
}
/* Nút trong thẻ giá (nền sáng): luôn đọc được, chiếm hết chiều ngang. */
.full-prices article a.gold,
.full-prices article a.outline {
  width: 100%;
  margin-top: auto;
}
.full-prices article a.gold {
  background: var(--navy-900) !important;
  color: var(--neutral-50) !important;
  border-color: var(--navy-900) !important;
}
.full-prices article a.gold:hover {
  background: var(--navy-800) !important;
  color: var(--gold-300) !important;
}
.full-prices article {
  display: flex;
  flex-direction: column;
}
.trial-band {
  max-width: var(--content-max);
  margin: 0 auto 24px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-card);
}
.trial-band svg {
  width: 28px;
  color: var(--gold-500);
  flex: none;
}
.trial-band .gold {
  margin-left: auto;
  flex: none;
}
@media (max-width: 900px) {
  .full-prices.tri {
    grid-template-columns: 1fr;
  }
  .trial-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .trial-band .gold {
    margin-left: 0;
  }
}

/* Thẻ tóm tắt đơn hàng: tên gói và mô tả xuống dòng. */
.order-title > span > b,
.order-title > span > small {
  display: block;
}
.order-title > span > small {
  opacity: 0.68;
}

/* Ô đồng ý điều khoản ở trang thanh toán. */
.consent-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  margin: 16px 0;
}
.consent-line input {
  margin-top: 2px;
  flex: none;
}
.consent-line a {
  color: var(--color-signal-blue);
}


/* ===== overrides-content.css ===== */
/* --- Bổ trợ nhỏ cho các trang nội dung (dựng chủ yếu từ component có sẵn:
      .sub-hero / .detail-row / .feature-strip / .statement / .cap-grid / .start-flow / .cta-band) ---
   Phần Liên hệ/company-card đã tách sang overrides-contact.css để mỗi file <= 250 dòng
   (quy tắc lập trình bắt buộc, mục 2). */

/* Trang Sản phẩm: bỏ Product Tour trùng với trang chủ, giữ nhịp chuyển tiếp Lori One. */
.product-usecases-only {
  padding-top: 88px;
  border-top: 1px solid rgba(242, 243, 247, 0.18);
}
@media (max-width: 680px) {
  .product-usecases-only {
    padding-top: 64px;
  }
}

/* Panel minh hoạ bên phải .detail-row của trang Tính năng. */
.visual-card.pillar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.visual-card.pillar > svg {
  width: 40px;
  height: 40px;
}
.visual-card.pillar > span {
  font-size: 13px;
  letter-spacing: 0.12em;
}
.visual-card.pillar .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.visual-card.pillar .chips i {
  font-style: normal;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
}
.visual-card.pillar .bars {
  display: grid;
  gap: 10px;
}
.visual-card.pillar .bars i {
  display: block;
  height: 4px;
  background: var(--color-ink);
}

/* "Điểm khác biệt" — callout gạch vàng, nằm trong cột trái .detail-row. */
.pillar-diff {
  margin-top: 20px;
  padding: 14px 18px;
  border-left: 2px solid var(--gold-500);
  background: var(--hover-ghost);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 14px;
}

/* Dải bước "Hiểu → Phân tích → … → Thực thi" ở trang Cách hoạt động. */
.flow-rail {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.flow-rail span {
  border: 1px solid var(--color-whiteout);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 14px;
}
.flow-rail span:last-child {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
}
.flow-rail i {
  opacity: 0.4;
  font-style: normal;
}

/* Băng tuyên bố miễn trừ (bản chất sản phẩm) — nổi bật, chất pháp lý. */
.disclaimer-band {
  max-width: var(--content-max);
  margin: 0 auto 96px;
  padding: 28px;
  background: var(--color-haze);
  color: var(--color-ink);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--gold-600);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.disclaimer-band p {
  margin: 0;
  font-size: 15px;
}
.disclaimer-item span {
  display: block;
  font-size: 13px;
  color: var(--gold-600);
  margin-bottom: 8px;
}
.disclaimer-item h3 {
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 8px;
}
.disclaimer-item p {
  opacity: 0.75;
}

@media (max-width: 680px) {
  .flow-rail,
  .disclaimer-band {
    margin-left: 20px;
    margin-right: 20px;
  }
  .flow-rail {
    padding: 0 0 72px;
  }
  .disclaimer-band {
    grid-template-columns: 1fr;
  }
}

/* Ghi chú cuối trang Kết nối MCP (.docs-card > .download-note). */
.download-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--color-signal-blue);
  background: color-mix(in srgb, var(--color-signal-blue) 8%, transparent);
  font-size: 14px;
  line-height: 1.6;
}
.download-note svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-signal-blue);
}


/* ===== overrides-contact.css ===== */
/* --- Trang Liên hệ / Về Lori One: các bước xử lý khiếu nại, thẻ hỗ trợ, giờ hỗ trợ,
      khối thông tin doanh nghiệp (+ biến thể có bản đồ trụ sở). Tách khỏi overrides-content.css
      để mỗi file <= 250 dòng (quy tắc lập trình bắt buộc, mục 2). --- */

/* Danh sách bước xử lý khiếu nại trong thẻ .ticket-form của trang Liên hệ. */
.lh-steps {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.lh-steps li {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}
.lh-steps li svg {
  width: 16px;
  flex: none;
  color: var(--gold-600);
  margin-top: 3px;
}
.lh-steps li a {
  color: var(--gold-700);
  white-space: nowrap;
}
/* Trang Liên hệ: thẻ hỗ trợ + giờ hỗ trợ xuống dòng gọn. */
.help-options > a > div h3 {
  margin: 0;
}
.help-options > a > div p {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.7;
}
.hours > span > b,
.hours > span > small {
  display: block;
}
.hours > span > small {
  opacity: 0.7;
  margin-top: 2px;
}

/* Khối thông tin doanh nghiệp. */
.company-card {
  max-width: var(--content-max);
  margin: 0 auto 96px;
  padding: 28px;
  border: 1px solid var(--color-whiteout);
  border-radius: var(--radius-card);
}
.company-card b {
  display: block;
  margin-bottom: 12px;
}
.company-card p {
  margin: 6px 0;
  opacity: 0.78;
  font-size: 14px;
}

/* Biến thể có bản đồ trụ sở nhúng cạnh khối thông tin doanh nghiệp. */
.company-card.map-enabled {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: 28px;
  padding: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--neutral-50) 2.5%, transparent);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.company-card.map-enabled:hover {
  border-color: color-mix(in srgb, var(--gold-500) 70%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}
.company-details {
  align-self: center;
  padding: 24px 16px 24px 20px;
}
.company-details .map-eyebrow {
  margin: 0 0 12px;
  color: var(--gold-500);
  opacity: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.company-details > b {
  font-size: clamp(20px, 2.1vw, 29px);
  line-height: 1.25;
}
.company-details address {
  margin: 14px 0 0;
  font-style: normal;
}
.company-details a {
  color: inherit;
}
.map-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 66%, transparent);
  border-radius: var(--radius-button);
  color: var(--color-whiteout) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
}
.map-button:hover {
  background: var(--gold-500);
  color: var(--navy-900) !important;
}
.company-map {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 5px);
  background: var(--navy-950);
}
.company-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  border: 0;
  filter: grayscale(1) saturate(0.25) contrast(1.08) brightness(0.72);
  transition: filter 0.45s ease, transform 0.6s ease;
}
.company-map:hover iframe,
.company-map:focus-within iframe {
  filter: grayscale(0.15) saturate(0.75) contrast(1.02) brightness(0.92);
  transform: scale(1.01);
}
.company-map-label {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 60%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--navy-950) 82%, transparent);
  color: var(--color-whiteout);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
@media (max-width: 860px) {
  .company-card.map-enabled {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .company-map,
  .company-map iframe {
    min-height: 330px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .company-card.map-enabled,
  .company-map iframe {
    transition: none;
  }
}

@media (max-width: 680px) {
  .company-card {
    margin-left: 20px;
    margin-right: 20px;
  }
  .company-card.map-enabled {
    padding: 8px;
  }
  .company-details {
    padding: 22px 14px 26px;
  }
  .company-map,
  .company-map iframe {
    min-height: 300px;
  }
}


/* ===== overrides-product-media.css ===== */
/* Đề xuất media (ảnh/video demo) — trang Sản phẩm, ngay dưới .sub-hero.
   Tách riêng khỏi overrides-content.css để mỗi file <= 250 dòng (quy tắc lập trình bắt buộc, mục 2). */
.media-proposal {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 24px 96px;
}
.media-proposal > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}
.media-proposal .label {
  color: var(--gold-500);
}
.media-proposal h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  margin: 8px 0;
}
.media-proposal > header p {
  max-width: 520px;
  color: color-mix(in srgb, var(--color-whiteout) 65%, transparent);
}
.media-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.media-card {
  position: relative;
  min-height: 280px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--color-whiteout) 20%, transparent);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(145deg, #232a39, #111621);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--gold-500) 20%, transparent), transparent 36%);
  pointer-events: none;
}
.media-card > * {
  position: relative;
}
.media-card .media-type {
  color: var(--gold-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.media-card h3 {
  font-size: clamp(23px, 3vw, 38px);
  line-height: 1.08;
  max-width: 720px;
  margin: 16px 0;
}
.media-card p {
  max-width: 720px;
  color: color-mix(in srgb, var(--color-whiteout) 68%, transparent);
}
.media-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.media-spec span {
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--color-whiteout) 16%, transparent);
  font-size: 10px;
}
.media-play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  color: var(--gold-500);
  font-size: 20px;
}
@media (max-width: 760px) {
  .media-proposal > header {
    display: block;
  }
  .media-board {
    grid-template-columns: 1fr;
  }
  .media-card {
    min-height: 240px;
  }
}


/* ===== overrides-footer.css ===== */
/* --- Footer nhiều cột (thay footer 1 hàng của bản ChatGPT) --- */
footer#resources {
  display: block;
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.foot-brand {
  display: block;
}
.foot-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-brand-lockup .brand-mark {
  width: 22px;
  height: 22px;
}
.foot-brand b {
  letter-spacing: 0.04em;
}
.foot-brand p {
  font-size: 13px;
  opacity: 0.6;
  margin: 8px 0 0;
  max-width: 240px;
}
.foot-badge {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 6px;
  line-height: 0;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.foot-badge:hover {
  opacity: 1;
}
.foot-badge img {
  display: block;
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foot-col > b {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 4px;
}
.foot-col a {
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  font-size: 14px;
}
.foot-col a:hover {
  opacity: 1;
  color: var(--gold-500);
}
footer#resources > small {
  display: block;
  opacity: 0.5;
}
@media (max-width: 680px) {
  .foot-top {
    flex-direction: column;
    gap: 32px;
  }
  .foot-nav {
    gap: 28px;
  }
}


/* ===== overrides-contact-dock.css ===== */
/* --- Widget liên hệ nhanh: dock nổi góc dưới-phải + nút back-to-top + tooltip gợi ý chat.
      Nguồn: mẫu ChatGPT trong _MOI_CHUA_PHAN_LOAI/chat-gpt-plugin (2026-09-12), nút back-to-top/
      tooltip thêm 2026-09-15 (mẫu demo_chat_minimal_luxury_v2.html). Markup: contactDock() trong
      lib/chrome.ts. Tương tác: client/ui/09-contact-dock.js. Icon mạng xã hội footer + CTA "Tư vấn
      gói" + dòng hỗ trợ đăng nhập tách sang overrides-contact-extras.css; bong bóng tooltip/note
      tách sang overrides-contact-feedback.css (giữ mỗi file <= 250 dòng, quy tắc mục 2). --- */

.vn-contact-dock {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  /* Danh sách kênh liên hệ khi đóng vẫn chiếm chỗ trong layout (visibility:hidden, không phải
     display:none) nên vùng box của .vn-contact-dock trải dài lên trên, đè và chặn click của
     nút back-to-top nằm bên dưới nó theo z-index. Tắt pointer-events ở khối cha, chỉ bật lại
     cho từng nút thật (toggle + item) để click luôn xuyên qua phần rỗng. */
  pointer-events: none;
}
.vn-contact-list {
  display: flex;
  flex-direction: column-reverse;
  gap: 9px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: 0.28s ease;
  pointer-events: auto;
}
.vn-contact-dock.is-open .vn-contact-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.vn-contact-item,
.vn-contact-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--gold-500) 48%, transparent);
  border-radius: 50%;
  background: rgba(12, 16, 25, 0.92);
  color: #fff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: 0.25s ease;
  pointer-events: auto;
}
.vn-contact-toggle {
  width: 58px;
  height: 58px;
  color: var(--navy-900);
  background: var(--gold-500);
  border-color: var(--gold-500);
  animation: vn-pulse 2.6s ease-in-out infinite;
}
.vn-contact-toggle svg {
  transition: 0.3s ease;
}
.vn-contact-dock.is-open .vn-contact-toggle svg {
  transform: rotate(45deg);
}
.vn-contact-item:hover,
.vn-contact-toggle:hover {
  transform: translateY(-3px);
  border-color: var(--gold-500);
}
.vn-contact-item svg,
.vn-contact-toggle svg,
.vn-footer-social svg {
  width: 21px;
  height: 21px;
}
.vn-contact-item--zalo {
  background: #0068ff;
}
.vn-contact-label {
  position: absolute;
  right: 61px;
  top: 50%;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 36%, transparent);
  background: rgba(12, 16, 25, 0.97);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  transition: 0.22s ease;
}
.vn-contact-item:hover .vn-contact-label {
  opacity: 1;
  transform: translate(0, -50%);
}
@keyframes vn-pulse {
  0%,
  60%,
  100% {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.36);
  }
  80% {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--gold-500) 26%, transparent),
      0 12px 36px rgba(0, 0, 0, 0.36);
  }
}

/* Nút "trở lại đầu trang", nổi ngay trên dock liên hệ. Phong cách lấy từ mẫu
   _MOI_CHUA_PHAN_LOAI/demo_chat_minimal_luxury_v2.html (top-fab), đổi sang token màu site. */
.vn-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 89;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  background: rgba(12, 16, 25, 0.86);
  color: var(--gold-500);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s, background 0.2s ease;
}
.vn-back-to-top svg {
  width: 20px;
  height: 20px;
}
.vn-back-to-top:hover {
  background: color-mix(in srgb, var(--gold-500) 14%, rgba(12, 16, 25, 0.86));
}
.vn-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s, background 0.2s ease;
}

@media (max-width: 760px) {
  .vn-contact-dock {
    right: 14px;
    bottom: 82px;
  }
  .vn-contact-toggle {
    width: 52px;
    height: 52px;
  }
  .vn-contact-item {
    width: 45px;
    height: 45px;
  }
  .vn-contact-label {
    display: none;
  }
  .vn-back-to-top {
    right: 14px;
    bottom: 144px;
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vn-contact-toggle {
    animation: none;
  }
  .vn-back-to-top {
    transition: opacity 0.22s ease, visibility 0s linear;
    transform: none !important;
  }
}


/* ===== overrides-contact-feedback.css ===== */
/* --- Tách từ overrides-contact-dock.css (2026-09-15) để giữ mỗi file <= 250 dòng (quy tắc mục 2):
      2 bong bóng phản hồi cạnh dock liên hệ — .vn-contact-tip (gợi ý chat, tự hiện 1 lần mỗi
      phiên, client/ui/09-contact-dock.js) và .vn-contact-note (chỉ hiện khi bấm kênh chưa có URL).
      Markup: contactDock() trong lib/chrome.ts. --- */

/* Phong cách kính mờ (glass) lấy từ mẫu _MOI_CHUA_PHAN_LOAI/demo_chat_minimal_luxury_v2.html
   (.glass-tip). */
.vn-contact-tip {
  position: fixed;
  right: 92px;
  bottom: 26px;
  z-index: 91;
  width: 270px;
  max-width: calc(100vw - 110px);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(20, 25, 37, 0.78);
  color: #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px) translateY(4px) scale(0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36), 0 0 0 1px color-mix(in srgb, var(--gold-500) 4%, transparent) inset;
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
}
.vn-contact-tip strong {
  display: block;
  margin-bottom: 2px;
  color: #fff8db;
  font-size: 14px;
}
.vn-contact-tip span {
  display: block;
  color: #afb8c8;
  font-size: 13px;
  line-height: 1.45;
}
.vn-contact-tip::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 22px;
  width: 11px;
  height: 11px;
  background: rgba(20, 25, 37, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
}
.vn-contact-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0) scale(1);
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0s;
}
.vn-contact-note {
  position: fixed;
  right: 94px;
  bottom: 32px;
  z-index: 91;
  max-width: 270px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent);
  background: var(--navy-950);
  color: #fff;
  font: 500 12px/1.5 "Be Vietnam Pro", sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: 0.25s;
}
.vn-contact-note.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .vn-contact-tip {
    right: 66px;
    bottom: 80px;
    width: 220px;
    max-width: calc(100vw - 92px);
  }
}


/* ===== overrides-contact-extras.css ===== */
/* --- Tách từ overrides-contact-dock.css (2026-09-15) để giữ mỗi file <= 250 dòng (quy tắc mục 2):
      hàng icon mạng xã hội trong footer, CTA "Tư vấn gói" và dòng hỗ trợ đăng nhập. Không liên quan
      dock nổi/back-to-top/tooltip (xem overrides-contact-dock.css). --- */

/* Hàng icon mạng xã hội trong footer (.foot-brand), dùng chung SVG với dock. */
.vn-footer-social {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}
.vn-footer-social a,
.vn-footer-social button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

/* CTA "Tư vấn gói" (trang /bang-gia, cuối trang trước footer) — chrome.ts: contactCtaSection(). */
.vn-contact-cta {
  margin: 72px auto;
  max-width: 1120px;
  padding: 38px 42px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 34%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--gold-500) 9%, transparent),
    color-mix(in srgb, var(--navy-900) 50%, transparent)
  );
  color: #fff;
}
.vn-contact-cta small {
  color: var(--gold-500);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.vn-contact-cta h2 {
  margin: 12px 0 10px;
  font-size: clamp(25px, 3vw, 42px);
}
.vn-contact-cta p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.7);
}
.vn-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.vn-contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border: 1px solid var(--gold-500);
  color: #fff;
  text-decoration: none;
}
.vn-contact-actions a:first-child {
  background: var(--gold-500);
  color: var(--navy-900);
}
.vn-contact-actions svg {
  width: 18px;
  height: 18px;
}

/* Dòng hỗ trợ đăng nhập (trang /dang-nhap, render động trong mcp-server/src/transport/website.ts —
   trang đó cũng nạp /site.css nên dùng chung được class này). */
.vn-login-help {
  margin: 22px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
}
.vn-login-help a {
  color: var(--gold-500);
}

@media (max-width: 760px) {
  .vn-contact-cta {
    margin: 48px 18px;
    padding: 28px 22px;
  }
}