/* ============================================================
   Yolius — core.css  (shared brand design tokens + base + Bootstrap overrides)
   Brand LOCKED 2026-06-11. Used by landing + presentation.
   Design language: flat · bold · sharp · high-contrast · true-black · no-gradient · no-yellow.
   Fonts: Be Vietnam Pro (display — VN-first) / Inter (body).
   ============================================================ */

:root {
  /* —— Brand palette (the only palette) —— */
  --y-blue:        #1577C0;  /* primary / interactive (bright, vivid) */
  --y-blue-deep:   #0D5286;  /* deep brand blue (logo light-bg, headers, deep surfaces) */
  --y-blue-bright: #1777C1;  /* dark-bg logo / highlights on dark */
  --y-orange:      #F4A261;  /* accent — soft, used VERY sparingly */
  --y-ink:         #0A0A0A;  /* true black (text on light) */
  --y-paper:       #FFFFFF;
  --y-paper-2:     #F2F2F2;  /* off-white surface */

  /* —— Neutrals (minimal) —— */
  --y-n-900: #0A0A0A;
  --y-n-800: #1A1A1A;
  --y-n-700: #2A2A2A;
  --y-n-500: #64748B;
  --y-n-400: #94A3B8;
  --y-n-300: #CBD5E1;
  --y-n-200: #E5E7EB;
  --y-n-100: #F1F5F9;

  /* —— Semantic (light theme default) —— */
  --bg:        var(--y-paper);
  --bg-2:      var(--y-paper-2);
  --surface:   #FFFFFF;
  --fg:        var(--y-ink);
  --fg-muted:  #2E3440;   /* crisp dark — không mờ xám */
  --fg-subtle: #4B5563;
  --border:    var(--y-n-200);
  --primary:   var(--y-blue);
  --primary-strong: var(--y-blue-deep);
  --accent:    var(--y-orange);
  --logo-fill: var(--y-ink);          /* wordmark color in this theme */

  /* —— Type —— */
  /* VN-native single family: Be Vietnam Pro draws Vietnamese tone-stacks (ế ộ ữ) properly — display + body. */
  --font-display: 'Be Vietnam Pro', 'Plus Jakarta Sans', 'Inter', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Be Vietnam Pro', 'Plus Jakarta Sans', 'Inter', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  /* fluid type scale */
  --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.0625rem; --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --t-3xl: clamp(2.6rem, 1.6rem + 4vw, 4.5rem);
  --t-hero: clamp(3rem, 1.6rem + 6vw, 6rem);
  --leading-tight: 1.2; --leading: 1.6; /* 1.2 để dấu tiếng Việt thoáng */

  /* —— Space / radius / shadow (sharp, flat) —— */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem; --sp-32:8rem;
  --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --radius-btn: var(--radius-pill); /* button standard: pill (đổi 1 chỗ — toàn site đổi theo) */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06);
  --shadow:    0 6px 24px rgba(10,10,10,.08);
  --shadow-lg: 0 18px 50px rgba(10,10,10,.12);
  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* —— Dark theme —— */
[data-theme="dark"] {
  --bg:        #000000;        /* true black */
  --bg-2:      #0A0A0A;
  --surface:   #0F0F10;
  --fg:        #FFFFFF;
  --fg-muted:  #DDE2E9;   /* crisp light — không mờ */
  --fg-subtle: #9AA6B5;
  --border:    #1F2226;
  --primary:   var(--y-blue-bright);
  --primary-strong: var(--y-blue);
  --logo-fill: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 8px 30px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#000; --bg-2:#0A0A0A; --surface:#0F0F10; --fg:#FFF; --fg-muted:#DDE2E9;
    --fg-subtle:#9AA6B5; --border:#1F2226; --primary:var(--y-blue-bright);
    --primary-strong:var(--y-blue); --logo-fill:#FFF;
  }
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-base);
  line-height: var(--leading); font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .25s var(--ease), color .25s var(--ease);
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: var(--fw-black);
  line-height: var(--leading-tight); letter-spacing: -.012em; color: var(--fg); margin: 0 0 var(--sp-4); }
h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); }
p { margin: 0 0 var(--sp-4); color: var(--fg-muted); max-width: 68ch; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; display: block; }
strong { font-weight: var(--fw-bold); color: var(--fg); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* —— Brand bits —— */
.eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--sp-3); }
.text-accent { color: var(--accent); }
.lead { font-size: var(--t-lg); color: var(--fg-muted); }

/* —— Buttons (flat, sharp, high-contrast) —— */
.btn-y, .btn-y-ghost {
  --_pad-y: .85rem; --_pad-x: 1.75rem;
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-base);
  line-height: 1; padding: var(--_pad-y) var(--_pad-x); border-radius: var(--radius-btn);
  border: 2px solid transparent; transition: transform .12s var(--ease), background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.btn-y { background: var(--btn-bg, var(--y-blue-deep)); color: #fff; }
.btn-y:hover { background: var(--btn-bg-hover, #0A3F66); color: #fff; text-decoration: none; transform: translateY(-1px); }
[data-theme="dark"] .btn-y { --btn-bg: var(--y-blue); --btn-bg-hover: var(--y-blue-deep); }
.btn-y-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-y-ghost:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); text-decoration: none; }
.btn-y-lg { --_pad-y: 1.05rem; --_pad-x: 2.4rem; font-size: var(--t-lg); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: var(--radius-xs); }

/* —— Pills / chips —— */
.pill { display:inline-flex; align-items:center; gap:.4rem; font-size: var(--t-sm); font-weight: var(--fw-semibold);
  padding:.35rem .75rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-strong); }
[data-theme="dark"] .pill { color: var(--primary); }
.dot-accent { width:.5rem; height:.5rem; border-radius:50%; background: var(--accent); display:inline-block; }

/* —— Sections —— */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.divider { height:1px; background: var(--border); border:0; margin: 0; }

/* —— Bootstrap 5 variable overrides (when Bootstrap is present) —— */
:root {
  --bs-primary: var(--y-blue);
  --bs-primary-rgb: 21,119,192;
  --bs-body-color: var(--fg);
  --bs-body-bg: var(--bg);
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: var(--radius-sm);
  --bs-border-color: var(--border);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-strong);
}
.btn { --bs-btn-border-radius: var(--radius-btn); }
.btn-primary { --bs-btn-bg: var(--y-blue); --bs-btn-border-color: var(--y-blue);
  --bs-btn-hover-bg: var(--y-blue-deep); --bs-btn-hover-border-color: var(--y-blue-deep);
  --bs-btn-active-bg: var(--y-blue-deep); --bs-btn-font-family: var(--font-display); --bs-btn-font-weight: 700; }
.btn-outline-primary { --bs-btn-color: var(--y-blue); --bs-btn-border-color: var(--y-blue);
  --bs-btn-hover-bg: var(--y-blue); --bs-btn-hover-border-color: var(--y-blue); --bs-btn-font-weight: 700; }
.text-primary { color: var(--primary) !important; }
.bg-ink { background: var(--y-ink); color:#fff; }

/* ============================================================ BASE COMPONENTS
   Reusable across landing + presentation. Page-specific goes in landing.css / presentation.css. */

/* —— Top nav —— */
.nav-y { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); }
.nav-y__inner { display:flex; align-items:center; justify-content:space-between; height: 68px; position:relative; gap: var(--sp-5); }
.nav-y__brand { display:flex; align-items:center; gap:.5rem; flex:none; }
.nav-y__brand img { height: 33px; width:auto; }
/* Links centered in the middle column (flex:1) — NOT absolute-centered, which
   collided with the right-aligned actions ("Liên hệ"+"Đăng nhập" merged). */
.nav-y__links { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap: var(--sp-6); }
.nav-y__links a { color: var(--fg-muted); font-weight: var(--fw-semibold); font-size: var(--t-sm); white-space:nowrap; }
.nav-y__links a:hover, .nav-y__links a.active { color: var(--fg); text-decoration:none; }
.nav-y__actions { display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-y__login { color: var(--fg-muted); font-weight: var(--fw-semibold); font-size: var(--t-sm); white-space:nowrap; }
.nav-y__login:hover { color: var(--fg); text-decoration:none; }
.nav-y__burger { display:none; width:42px; height:42px; border:1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--fg); place-items:center; cursor:pointer; padding:0; }
.nav-y__mobile { display:none; }
.nav-y__backdrop { display:none; }
@media (max-width: 980px){
  .nav-y__links { display:none; }
  /* collapsed mobile bar = logo (left) + hamburger (right) ONLY — CTA/login/theme move into the drawer */
  .nav-y__login, .nav-y__actions .theme-toggle, .nav-y__cta { display:none; }
  .nav-y__inner { gap: var(--sp-4); }
  .nav-y__actions { gap:.4rem; }
  .nav-y__burger { display:grid; }

  /* Backdrop — only paints when the drawer is open; clicking it closes (data-nav-toggle) */
  .nav-y__backdrop { display:block; position:fixed; inset:0; z-index:48; background:rgba(8,12,20,.42);
    opacity:0; visibility:hidden; transition:opacity .22s var(--ease), visibility .22s var(--ease); }
  body.nav-open .nav-y__backdrop { opacity:1; visibility:visible; }

  /* Drawer — fixed FULL-HEIGHT opaque overlay below the 68px header. No document reflow. */
  .nav-y__mobile { display:flex; flex-direction:column; position:fixed; left:0; right:0; top:68px;
    height: calc(100vh - 68px); height: calc(100dvh - 68px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--bg); border-top:1px solid var(--border);
    padding: var(--sp-4) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s var(--ease), visibility .2s var(--ease); z-index:49;
    box-shadow:-18px 0 48px -20px rgba(8,12,20,.4); }
  .nav-y__mobile.open { opacity:1; visibility:visible; pointer-events:auto; }
  .nav-y__mobile a { display:block; padding:.9rem clamp(1.25rem,5vw,2rem); color:var(--fg); font-weight:var(--fw-semibold); font-size:var(--t-md); }
  .nav-y__mobile a.active { color:var(--primary); }
  .nav-y__mobile a:hover { background:var(--bg-2); text-decoration:none; }
  .nav-y__mobile .btn-y { display:flex; justify-content:center; margin: var(--sp-3) clamp(1.25rem,5vw,2rem) 0; }

  /* lock background scroll while the drawer is open */
  body.nav-open { overflow:hidden; }
}

/* —— Material Symbols (icons; replaces emoji) —— */
.material-symbols-rounded { font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; font-size:1.25em; line-height:1; vertical-align:-.18em; display:inline-block; }
.material-symbols-rounded.fill { font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.msr-accent { color: var(--accent); } .msr-primary { color: var(--primary); } .msr-success { color:#10b981; }

/* —— CTA centering util —— */
.cta-center { display:flex; flex-wrap:wrap; gap: var(--sp-4); justify-content:center; align-items:center; margin-top: var(--sp-8); }
.cta-row { display:flex; flex-wrap:wrap; gap: var(--sp-4); align-items:center; }
.btn-y, .btn-y-ghost { white-space:nowrap; }

/* —— Logo helper: swap light/dark wordmark by theme —— */
.logo-wordmark .for-light { display: inline; } .logo-wordmark .for-dark { display: none; }
[data-theme="dark"] .logo-wordmark .for-light { display: none; } [data-theme="dark"] .logo-wordmark .for-dark { display: inline; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-wordmark .for-light{display:none;} :root:not([data-theme="light"]) .logo-wordmark .for-dark{display:inline;} }

/* —— Theme toggle —— */
.theme-toggle { display:inline-grid; place-items:center; width:40px; height:40px; border-radius: 50%;
  border:1px solid var(--border); background: var(--surface); color: var(--fg); cursor:pointer; }
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* —— Cards —— */
.card-y { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6); transition: border-color .15s, transform .15s var(--ease); }
.card-y:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.card-y--feature { display:flex; flex-direction:column; gap: var(--sp-3); }
.card-y__icon { width:48px; height:48px; border-radius: var(--radius); display:grid; place-items:center;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.card-y h3 { font-size: var(--t-lg); margin-bottom: 0; }

/* —— Grid —— */
.grid { display:grid; gap: var(--sp-6); }
.cols-2 { grid-template-columns: repeat(2,1fr); } .cols-3 { grid-template-columns: repeat(3,1fr); } .cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 860px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

/* —— Stat —— */
.stat__num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-2xl); color: var(--fg); line-height:1; }
.stat__num .text-accent { color: var(--accent); }
.stat__label { color: var(--fg-subtle); font-size: var(--t-sm); margin-top: var(--sp-2); }

/* —— Badge / tag —— */
.badge-y { display:inline-flex; align-items:center; gap:.35rem; font-size: var(--t-xs); font-weight: var(--fw-bold);
  padding:.25rem .6rem; border-radius: var(--radius-xs); background: var(--bg-2); color: var(--fg-muted); border:1px solid var(--border); text-transform:uppercase; letter-spacing:.06em; }
.badge-y--soon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* shipped-feature badges — NOT the roadmap/accent color, so they don't read as "not ready yet" */
.badge-y--hot { color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 10%, var(--bg-2)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.badge-y--new { color: var(--msr-success, #1E7D45); background: color-mix(in srgb, #1E7D45 9%, var(--bg-2)); border-color: color-mix(in srgb, #1E7D45 38%, var(--border)); }
[data-theme="dark"] .badge-y--hot { color: var(--primary); }
[data-theme="dark"] .badge-y--new { color: #34D399; }

/* —— Logos / proof bar —— */
.proof-bar { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-8); opacity:.75; }
.proof-bar img { height: 28px; filter: saturate(0); }

/* —— Forms —— */
.field { display:flex; flex-direction:column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-weight: var(--fw-semibold); font-size: var(--t-sm); color: var(--fg); }
.input, .field input, .field textarea, .field select {
  width:100%; font: inherit; color: var(--fg); background: var(--surface); border:1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: .8rem 1rem; transition: border-color .15s; }
/* selects: kill native OS chrome (double-chevron, OS radius) so they match .input exactly,
   then paint one brand-neutral chevron. appearance:none is the whole fix. */
.field select, select.input {
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1rem center; background-size: 16px 16px; }
.field select::-ms-expand { display:none; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus, select.input:focus { border-color: var(--primary); outline:none; }

/* —— Section head helper —— */
.section-head { max-width: 56ch; margin-bottom: var(--sp-12); }
.section-head.center { margin-inline:auto; text-align:center; }

/* —— Footer —— */
.footer-y { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: var(--sp-16) var(--sp-8); }
.footer-y__cols { display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-8); }
@media (max-width:860px){ .footer-y__cols { grid-template-columns: 1fr 1fr; } }
.footer-y a { display:block; color: var(--fg-muted); font-size: var(--t-sm); padding:.25rem 0; }
.footer-y a:hover { color: var(--fg); text-decoration:none; }
.footer-y h4 { font-size: var(--t-sm); text-transform:uppercase; letter-spacing:.08em; color: var(--fg-subtle); }

/* —— Utilities —— */
.muted { color: var(--fg-subtle); } .center { text-align:center; }
/* Root fix: global `p{max-width:68ch}` caps paragraphs; centered <p> were left-shifted because
   the capped box had no horizontal auto-margin (only its text centered). Auto-center any paragraph
   in a centered context so the box itself centers in the container. */
p.center, .center > p, .proof-line, .trust-eyebrow { margin-inline: auto; }
.stack { display:flex; flex-direction:column; gap: var(--sp-4); }
.row-inline { display:flex; align-items:center; gap: var(--sp-4); flex-wrap:wrap; }
.max-prose { max-width: 62ch; } .mt-auto{ margin-top:auto; }

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *{ transition: none !important; animation: none !important; } }