:root{
    --ink:#1c1917;
    --ink-2:#57534e;
    --ink-3:#a8a29e;
    --gold:#a07617;
    --gold-bright:#c9a24b;
    --gold-dark:#7c5c10;
    --gold-soft:#f6efdd;
    --bg:#faf9f7;
    --card:#ffffff;
    --line:#e7e5e4;
    --radius:14px;
    --navy:#0e1c30;
    --navy-2:#14263c;
    --navy-line:rgba(255,255,255,.09);
    --navy-text:#e8eef5;
    --navy-text-2:#a9bacf;
    --teal:#7fd4e0;
    --green:#7ee29a;
    --serif:Georgia,"Times New Roman","Nanum Myeongjo","Batang","Songti TC",serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);background:var(--bg);line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:var(--gold-dark);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  section{padding:72px 0}
  .eyebrow{
    display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);margin-bottom:14px;
  }
  h1{font-size:clamp(28px,4.6vw,42px);line-height:1.18;letter-spacing:-.02em;font-weight:800}
  h2{font-size:clamp(24px,3.6vw,34px);line-height:1.22;letter-spacing:-.015em;font-weight:800;margin-bottom:12px}
  h3{font-size:19px;font-weight:700;line-height:1.35}
  .lead{font-size:18px;color:var(--ink-2);max-width:720px}
  .muted{color:var(--ink-3);font-size:13.5px}

  /* reveal on scroll — mac dinh LUON HIEN; chi an khi JS bat animation */
  .rv{opacity:1;transform:none}
  body.js-anim .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
  body.js-anim .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){body.js-anim .rv{opacity:1;transform:none;transition:none}}

  /* NAV — navy */
  nav{
    position:sticky;top:0;z-index:50;background:rgba(14,28,48,.94);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--navy-line);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:60px;position:relative}
  .logo{font-weight:800;font-size:16.5px;letter-spacing:.01em;color:#fff;font-family:var(--serif);white-space:nowrap}
  .logo b{color:var(--gold-bright)}
  /* gap/size giam so voi ban goc (26px/14.5px) vi nav co them lang-toggle;
     white-space:nowrap de tung muc menu KHONG bao gio bi be thanh 2 dong */
  .nav-links{display:flex;align-items:center;gap:18px;font-size:13.5px;font-weight:600}
  .nav-links a{color:var(--navy-text-2);white-space:nowrap}
  .nav-links a:hover{color:var(--gold-bright);text-decoration:none}
  .nav-cta{
    background:var(--gold);color:#fff!important;padding:9px 18px;border-radius:9px;
    font-weight:700;font-size:14px;
  }
  .nav-cta:hover{background:var(--gold-dark);text-decoration:none}
  /* NAV MOBILE (21/09/2026, audit A05/QA Q12): duoi 1050px ban cu an het
     .nav-links a:not(.nav-cta) va duoi 900px an luon nav-cta — toan bo menu
     bien mat, khong co nut hamburger thay the. Sua: gom menu vao mot panel
     xo xuong, mo/dong bang nut hamburger, khong con truong hop menu bien mat
     hoan toan. */
  .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:22px;
    line-height:1;padding:6px 4px;cursor:pointer;flex-shrink:0}
  @media(max-width:1050px){
    .nav-toggle{display:block;order:3;margin-left:8px}
    .nav-links{
      display:flex;flex-direction:column;align-items:stretch;gap:0;
      position:fixed;top:60px;left:0;right:0;
      background:var(--navy);border-bottom:1px solid var(--navy-line);
      max-height:0;overflow:hidden;transition:max-height .28s ease;
      z-index:60;
    }
    .nav-in.is-open .nav-links{max-height:calc(100vh - 60px);overflow-y:auto}
    .nav-links a{width:100%;padding:15px 24px;border-top:1px solid var(--navy-line)}
    .nav-links a.nav-cta{display:block;margin:16px 24px;text-align:center;border-top:none}
    .lang-toggle{margin:16px 24px 4px;align-self:flex-start}
  }

  /* LANG TOGGLE — VI / EN / ZH, dung chung voi i18n.js */
  .lang-toggle{
    display:flex;border:1px solid var(--color-border);border-radius:20px;
    overflow:hidden;font-size:12px;font-weight:700;flex-shrink:0;
  }
  .lang-toggle button{padding:6px 11px;color:var(--navy-text-2);background:transparent}
  .lang-toggle button.is-active{background:var(--color-primary);color:#fff}

  /* HERO — navy, luoi mo, serif */
  .hero{
    padding:84px 0 72px;background:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 65%,#182f4a 100%);
    background-size:44px 44px,44px 44px,auto;
  }
  .hero .eyebrow{color:var(--teal)}
  .hero h1{color:#fff;font-family:var(--serif);font-weight:700;font-size:clamp(32px,4.8vw,50px)}
  .hero .lead{margin:22px 0 30px;color:var(--navy-text-2)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
  .btn{display:inline-block;padding:14px 26px;border-radius:11px;font-weight:700;font-size:15.5px}
  .btn-primary{background:var(--gold-bright);color:#11213a}
  .btn-primary:hover{background:#d9b25e;text-decoration:none}
  .btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:var(--card)}
  .btn-ghost:hover{border-color:var(--gold);text-decoration:none}
  .hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
  .hero .btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:640px}
  .stat{border-left:3px solid var(--gold-bright);padding-left:14px}
  .stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
  .stat span{font-size:12.5px;color:var(--navy-text-2);line-height:1.4;display:block}
  @media(max-width:640px){.stats{grid-template-columns:1fr;gap:14px}}

  /* LIVE CONSOLE — kieu tim-os boot */
  .console{
    background:#0b1526;border:1px solid rgba(127,212,224,.16);border-radius:16px;
    padding:22px 24px 20px;
    box-shadow:0 30px 70px -28px rgba(0,0,0,.65);
    font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;
    position:relative;overflow:hidden;
  }
  .console::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(120deg,transparent 60%,rgba(201,162,75,.05));
  }
  .console-head{display:flex;align-items:center;gap:8px;margin-bottom:18px}
  .tdot{width:11px;height:11px;border-radius:50%}
  .tdot.r{background:#f26d63}.tdot.y{background:#f5bd4f}.tdot.g{background:#58c470}
  .console-title{color:var(--navy-text-2);font-size:13px;letter-spacing:.08em;margin-left:8px}
  .console-body{display:flex;flex-direction:column;gap:10px;min-height:238px}
  .cline{
    display:flex;gap:12px;font-size:13.5px;color:var(--navy-text);
    opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .45s ease;
  }
  .cline.on{opacity:1;transform:none}
  .cline .st{flex-shrink:0;font-weight:700}
  .st.ok{color:var(--green)}
  .st.warn{color:var(--gold-bright)}
  .cline .lbl{color:var(--teal)}
  .cline .tm{color:var(--teal);flex-shrink:0}
  .cline.dim{color:#5c718c}
  .cline.sum{color:var(--gold-bright);font-weight:700;letter-spacing:.04em}
  .cursor{display:inline-block;width:9px;height:17px;background:var(--teal);vertical-align:middle;animation:blink 1.1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .console-note{margin-top:14px;font-size:11.5px;color:#5c718c;font-family:inherit}
  @media(prefers-reduced-motion:reduce){.cline{opacity:1;transform:none}.cursor{animation:none}}

  /* PROBLEM */
  .problem{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .problem-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  @media(max-width:820px){.problem-grid{grid-template-columns:1fr}}
  .bignum{font-size:34px;font-weight:800;color:var(--gold);letter-spacing:-.03em;line-height:1}
  .prob-facts{display:flex;flex-direction:column;gap:14px}
  .prob-fact{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;font-size:15px}
  .prob-fact b{color:var(--ink)}

  /* SYSTEMS */
  .sys-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:40px}
  @media(max-width:820px){.sys-grid{grid-template-columns:1fr}}
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;
    transition:box-shadow .3s ease,transform .3s ease;
  }
  .card:hover{box-shadow:0 18px 44px -20px rgba(28,25,23,.25);transform:translateY(-3px)}
  @media(prefers-reduced-motion:reduce){.card,.card:hover{transform:none;transition:none}}
  .card-top{padding:22px 24px 18px;display:flex;flex-direction:column;gap:9px}
  .tag{
    align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    background:var(--gold-soft);color:var(--gold-dark);padding:4px 10px;border-radius:6px;
  }
  .card-top p{font-size:14.5px;color:var(--ink-2)}
  .result{
    background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
    padding:9px 13px;font-size:13.5px;color:var(--ink-2);
  }
  .result b{color:var(--gold-dark)}
  .shot{
    position:relative;display:block;height:280px;overflow:hidden;background:#f5f4f2;
    border-top:1px solid var(--line);
  }
  .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
  .shot .zoom{
    position:absolute;right:12px;bottom:12px;background:rgba(28,25,23,.78);color:#fff;
    font-size:12px;font-weight:600;padding:5px 11px;border-radius:7px;
  }
  .sys-label{
    margin-top:auto;padding:12px 24px 16px;border-top:1px dashed var(--line);
    font-size:12.5px;color:var(--ink-3);
  }
  .sys-label b{color:var(--ink-2);font-weight:700}

  /* diagram card */
  .diagram{display:flex;flex-direction:column;align-items:stretch;padding:24px 22px;height:280px;justify-content:center;background:#fbf8f1;border-top:1px solid var(--line)}
  .d-box{
    background:#fff;border:1.5px solid var(--line);border-radius:10px;
    padding:9px 14px;font-size:13.5px;font-weight:600;text-align:center;
  }
  .d-box.gold{border-color:var(--gold);background:var(--gold-soft)}
  .d-arrow{text-align:center;color:var(--gold);font-size:15px;line-height:1.5;font-weight:700}

  /* diagnostic scorecard card */
  .diag-scorecard{display:flex;flex-direction:column;gap:9px;padding:20px 22px;height:280px;justify-content:center;background:#fbf8f1;border-top:1px solid var(--line)}
  .diag-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;
  }
  .diag-label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
  .diag-pill{
    flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
    padding:4px 10px;border-radius:999px;
  }
  .diag-pill.amber{background:#fbe8c8;color:#8a5a10}
  .diag-pill.red{background:#fadbd8;color:#a3382c}
  .diag-pill.green{background:#dcf1e3;color:#1f7a45}
  .diag-pill.grey{background:#e7e5e4;color:#57534e}
  .diag-note{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:2px}

  /* VALUE LEVELS */
  .levels{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .level-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;margin-top:40px;align-items:stretch}
  @media(max-width:820px){.level-flow{grid-template-columns:1fr;gap:10px}
    .flow-arrow{transform:rotate(90deg);margin:0 auto}}
  .flow-arrow{align-self:center;color:var(--gold);font-size:26px;font-weight:800}
  .level{
    border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--bg);
    transition:border-color .3s ease,box-shadow .3s ease;
  }
  .level:hover{border-color:var(--gold);box-shadow:0 14px 34px -18px rgba(160,118,23,.35)}
  .level .num{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;
    font-size:15px;font-weight:800;margin-bottom:12px;
  }
  .level .q{font-size:13px;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
  .level h3{margin-bottom:8px}
  .level p{font-size:14.5px;color:var(--ink-2)}
  .level .ref{margin-top:12px;font-size:13px}

  /* METHOD + ARCHITECTURE */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:36px 0 52px}
  @media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}
  .step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
  .step .n{font-size:12px;font-weight:800;color:var(--gold);margin-bottom:6px}
  .step b{display:block;font-size:15.5px;margin-bottom:5px}
  .step span{font-size:13.5px;color:var(--ink-2)}
  .arch{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
  .arch-caption{font-size:13.5px;color:var(--ink-2);margin-bottom:20px}
  .arch-row{display:flex;flex-wrap:wrap;gap:10px}
  .chip{
    font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;
    border:1px solid var(--line);background:#fff;color:var(--ink-2);
  }
  .chip.proof{border-color:var(--gold);color:var(--ink)}
  .chip.proof::before{content:"●";color:var(--gold);margin-right:6px;font-size:10px;vertical-align:1px}
  .chip.dev{border-style:dashed}
  .layer{
    display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
    border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:var(--bg);
  }
  @media(max-width:640px){.layer{grid-template-columns:1fr;gap:8px}}
  .layer.found{background:var(--gold-soft);border-color:var(--gold)}
  .layer-name{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding-top:6px}
  .layer-name small{display:block;font-weight:600;color:var(--ink-3);letter-spacing:.06em;margin-top:2px}
  .legend{font-size:12.5px;color:var(--ink-3);margin-top:14px}

  /* AI BAND — navy */
  .ai-band{
    background:
      linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),
      linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%);
    background-size:44px 44px,44px 44px,auto;color:var(--navy-text);
  }
  .ai-band .eyebrow{color:var(--teal)}
  .ai-band h2{color:#fff;font-family:var(--serif);font-weight:700}
  .ai-band .lead{color:var(--navy-text-2)}
  .ai-flow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:34px}
  .ai-step{
    background:rgba(255,255,255,.05);border:1px solid rgba(201,162,75,.4);color:var(--navy-text);
    padding:11px 18px;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:.04em;
    transition:background .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease;
  }
  .ai-step.active{
    background:rgba(201,162,75,.18);border-color:var(--gold-bright);color:#fff;
    box-shadow:0 0 22px rgba(201,162,75,.35);
  }
  .ai-arrow{color:rgba(201,162,75,.45);font-weight:800;font-size:16px;transition:color .4s ease}
  .ai-arrow.active{color:var(--gold-bright)}
  .ai-note{margin-top:26px;font-size:15px;color:var(--navy-text-2);max-width:640px}
  .ai-note b{color:var(--gold-bright)}
  /* Framework trong thuc te — AI Thao Viec (28/09/2026) */
  .ai-case{margin-top:44px;padding:28px 30px;max-width:860px;border:1px solid rgba(201,162,75,.38);border-radius:14px;background:rgba(255,255,255,.04)}
  .ai-case .eyebrow{margin-bottom:10px}
  .ai-case h3{color:#fff;font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.35;margin:0 0 14px}
  .ai-case p{color:var(--navy-text-2);font-size:15.5px;line-height:1.7;margin:0 0 12px}
  .ai-case p a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
  .ai-case p a:hover{color:#fff}
  .ai-case .btn{margin-top:10px}
  @media(max-width:640px){.ai-case{padding:22px 20px}.ai-case h3{font-size:19px}.ai-case .btn{display:block;text-align:center}}

  /* PRODUCTS */
  .prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px}
  @media(max-width:820px){.prod-grid{grid-template-columns:1fr}}
  .prod{
    background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);
    border-radius:var(--radius);
    padding:26px;display:flex;flex-direction:column;gap:14px;
    box-shadow:0 10px 30px -18px rgba(28,25,23,.18);
    transition:box-shadow .3s ease,transform .3s ease;
  }
  .prod:hover{box-shadow:0 22px 52px -20px rgba(28,25,23,.3);transform:translateY(-4px)}
  @media(prefers-reduced-motion:reduce){.prod:hover{transform:none}}
  .prod .status{
    align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold-dark);background:var(--gold-soft);padding:4px 11px;border-radius:6px;
  }
  .prod h3{font-size:21px}
  .prod dl{display:flex;flex-direction:column;gap:10px}
  .prod dt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .prod dd{font-size:14.5px;color:var(--ink-2);margin:2px 0 0}
  .prod .btn{margin-top:auto;text-align:center;font-size:14.5px;padding:12px 18px}

  .pipeline-strip{
    margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 32px;
    padding:18px 24px;background:var(--gold-soft);border:1px solid var(--line);
    border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  }
  .pipeline-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:1 1 260px}
  .pipeline-tag{
    flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:#fff;background:var(--gold);padding:4px 10px;border-radius:5px;white-space:nowrap;
  }
  .pipeline-text{font-size:13.5px;color:var(--ink-2);line-height:1.55}

  /* SHOWCASE CARDS — AI Sales Website implementations (dung chung homepage + /ai-sales-website.html) */
  .showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:22px}
  @media(max-width:640px){.showcase-grid{grid-template-columns:1fr}}
  .showcase-card{
    background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
    transition:box-shadow .3s ease,transform .3s ease;
  }
  .showcase-card:hover{box-shadow:0 16px 36px -20px rgba(28,25,23,.25);transform:translateY(-2px)}
  @media(prefers-reduced-motion:reduce){.showcase-card:hover{transform:none}}
  .sc-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f2efe9;border-bottom:1px solid var(--line)}
  .sc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .sc-body{padding:16px}
  .sc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .sc-head h4{font-size:15.5px;font-weight:700;color:var(--ink)}
  .sc-badge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;flex-shrink:0}
  .sc-badge--demo{background:#fdecc8;color:#8a5a00}
  .sc-badge--building{background:#eee;color:var(--ink-3);border:1px dashed var(--ink-3)}
  .sc-vertical{font-size:12.5px;color:var(--gold-dark);font-weight:700;margin-bottom:3px}
  .sc-role{font-size:13px;color:var(--ink-2);margin-bottom:12px;min-height:36px}
  .sc-link{font-size:13px;font-weight:700}
  .sc-link--disabled{color:var(--ink-3);font-weight:600;cursor:default}
  .sc-link--disabled:hover{text-decoration:none}

  /* FOUNDER */
  .founder{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .founder-in{max-width:820px}
  .founder-in p{margin-bottom:14px;color:var(--ink-2);font-size:16px}
  .founder-in p b{color:var(--ink)}
  .founder-role{font-size:14.5px;color:var(--gold-dark);font-weight:700;margin:2px 0 22px;letter-spacing:.01em}
  .founder-photo-wide{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0e1c30}
  .founder-photo-wide img{width:100%;display:block;aspect-ratio:1.35/1;object-fit:cover;object-position:center 22%}
  .founder-photo-wide .ph-caption{padding:9px 14px;font-size:12px;color:var(--ink-3);background:var(--card);border-top:1px solid var(--line)}
  .cred-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
  .cred-item{border-left:3px solid var(--gold-bright);padding-left:14px}
  .cred-item b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px;font-family:var(--serif)}
  .cred-item span{font-size:12px;color:var(--ink-2);line-height:1.5;display:block}
  @media(max-width:760px){
    .cred-strip{grid-template-columns:repeat(2,1fr)}
    .founder-photo-wide img{aspect-ratio:1.05/1;object-position:100% 0%}
  }
  @media(max-width:480px){.cred-strip{grid-template-columns:1fr}}

  /* CONTACT */
  .contact-box{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  }
  @media(max-width:820px){.contact-box{grid-template-columns:1fr;padding:28px}}
  .contact-alt{font-size:14px;color:var(--ink-2)}
  footer{padding:34px 0 44px;border-top:1px solid var(--line)}
  .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}

  /* ===== CHAT WIDGET (framework V2, map sang palette V3) ===== */
  :root{
    --color-primary:#a07617;
    --color-ocean:#7c5c10;
    --color-secondary:#1c1917;
    --color-border:#e7e5e4;
    --color-surface:#ffffff;
    --color-bg:#faf9f7;
    --color-text-muted:#a8a29e;
    --shadow-strong:0 24px 60px -20px rgba(28,25,23,.35);
    --radius-md:12px;
    --transition:all .25s ease;
  }
/* ============================================================
   CHAT WIDGET — style lõi framework (mau tu dong theo brand)
   ============================================================ */
.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--color-primary), var(--color-ocean));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-strong);
  z-index: 200;
  font-size: 24px;
  transition: transform var(--transition);
  border: 1px solid rgba(72, 197, 211, 0.35);
}
.chat-launcher:hover { transform: scale(1.06); }

.chat-window {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 140px);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.chat-window.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.chat-header {
  background: linear-gradient(150deg, var(--color-primary), var(--color-ocean));
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-header-title { font-weight: 700; font-size: 14.5px; }
.chat-header-sub { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.chat-close {
  color: #fff; font-size: 22px; line-height: 1;
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
  opacity: .85; transition: opacity .2s ease;
  -webkit-appearance: none; appearance: none; font-family: inherit;
}
.chat-close:hover { opacity: 1; }
.chat-send { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; }
.chat-launcher { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg);
}
.chat-msg { max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.chat-msg--bot {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--gold-soft);
  color: #3d2f10;
  border: 1px solid rgba(160, 118, 23, .35);
  border-bottom-right-radius: 4px;
}
.chat-msg--typing { display: flex; gap: 4px; align-items: center; }
.chat-msg--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted);
  animation: chatTyping 1s infinite ease-in-out;
}
.chat-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTyping { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.chat-quick-replies button {
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 7px 12px;
  background: var(--color-surface);
  transition: border-color var(--transition), color var(--transition);
}
.chat-quick-replies button:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.chat-quick-replies button.chat-quick-reply--contact {
  border-color: rgba(178, 138, 62, 0.55);
  color: var(--color-secondary);
  background: rgba(178, 138, 62, 0.08);
  font-weight: 600;
}
.chat-quick-replies button.chat-quick-reply--contact:hover { border-color: var(--color-secondary); }

/* lien he nhanh ngay trong chat - form nho gon, khong bat khach roi
   sang section Lien he rieng. */
.chat-contact-card {
  align-self: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}
.chat-contact-card__title { font-weight: 700; color: var(--color-primary); font-size: 13.5px; line-height: 1.4; }
.chat-contact-card label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--color-text-muted); }
.chat-contact-card input,
.chat-contact-card textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--color-bg);
}
.chat-contact-card input:focus,
.chat-contact-card textarea:focus { outline: none; border-color: var(--color-secondary); }
.chat-contact-card textarea { resize: vertical; min-height: 44px; }
.chat-contact-card__actions { display: flex; gap: 8px; margin-top: 2px; }
.chat-contact-card__submit {
  flex: 1;
  background: var(--color-primary);
  color: #fff;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.chat-contact-card__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-contact-card__cancel {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.chat-contact-card__cancel:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.chat-contact-card__error { color: #b3261e; font-size: 12px; }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-family: inherit;
}
.chat-input-row input:focus { outline: none; border-color: var(--color-secondary); }
.chat-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* === FIX MOBILE (27/08/2026) ==================================================
   Trieu chung Tim bao: tren iPhone nut "Gui business cua ban" o nav bi cat mat,
   va khung chat mo ra bi tran khoi man hinh, khong thay nut gui.
   Do that o khung 390px: scrollWidth = 514px (tran ngang 124px).
     logo 24->186 | lang-toggle 186->314 (3 nut VI/EN/ZH) | nav-cta 332->514  <-- tran
   Nguyen nhan goc: @media(max-width:1050px) chi an .nav-links a:not(.nav-cta),
   nen lang-toggle 3 ngon ngu + nut CTA van nam lai tren mot hang khong wrap.
   Khung chat KHONG tu no qua rong (do duoc 358px, vua 390px). No bi lech vi
   TRANG dang cuon ngang duoc: tren iOS Safari, phan tu position:fixed bam theo
   layout viewport (514px) chu khong phai vung nhin thay, nen bi day sang phai.
   => Chan tran ngang la sua duoc ca hai loi.
   ============================================================================ */
html, body { overflow-x: hidden; }
.nav-in { gap: 10px; min-width: 0; }
.logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-links { min-width: 0; }

@media (max-width: 900px) {
  /* SUA 21/09/2026: khong con an nav-cta — menu gio la panel xo doc, CTA
     hien binh thuong trong panel do (xem khoi "NAV MOBILE" o dau file). */
  .logo { font-size: 14.5px; }
  .lang-toggle { font-size: 11px; }
  .lang-toggle button { padding: 5px 9px; }
}

@media (max-width: 560px) {
  /* Bam hai mep thay vi width co dinh -> khong bao gio tran, nut gui luon trong man hinh */
  .chat-window {
    left: 12px; right: 12px; width: auto; max-width: none;
    top: 64px; height: auto; max-height: none;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .chat-launcher { right: 14px; bottom: 14px; width: 54px; height: 54px; font-size: 22px; }
}
@supports (height: 100dvh) {
  @media (max-width: 560px) {
    /* 100dvh co lai khi ban phim iOS bat len, 100vh thi khong -> dung dvh de
       hang nhap lieu khong bi day xuong duoi ban phim */
    .chat-window {
      top: auto; height: auto;
      max-height: calc(100dvh - 120px);
      bottom: calc(72px + env(safe-area-inset-bottom));
    }
  }
}

/* === FIX IOS AUTO-ZOOM (27/08/2026) ==========================================
   TRIEU CHUNG: tren iPhone, bam vao o nhap cua khung chat -> ca trang bi phong to,
   khung chat "tran" ra ngoai man hinh, khong thay nut gui. Tren Chrome desktop
   thu o 390px thi KHONG tai hien duoc -> de bi ket luan nham la loi cache.

   NGUYEN NHAN: Safari/Chrome tren iOS TU DONG PHONG TO trang khi focus vao mot
   o nhap co font-size NHO HON 16px. Cac o chat dang de 13px va 13.5px.
   Khi trang bi phong to, visual viewport co lai (vd 390 -> ~300px nhin thay)
   nhung phan tu position:fixed van bam theo layout viewport 390px, nen khung chat
   bi day sang phai va cat mat nut gui. Do do sua left/right/width deu KHONG an —
   phai chan viec phong to ngay tu dau.

   CACH SUA DUNG: dua MOI o nhap len >= 16px tren mobile. Day cung la cach cac
   site khong dinh loi nay van lam. KHONG dung maximum-scale=1 trong the viewport
   vi no chan luon ca thao tac phong to cua nguoi dung (hong accessibility).
   ============================================================================ */
@media (max-width: 900px) {
  input, textarea, select,
  .chat-input-row input,
  .chat-contact-card input,
  .chat-contact-card textarea {
    font-size: 16px !important;
  }
  .chat-input-row input { padding: 9px 15px; }
  .chat-contact-card input, .chat-contact-card textarea { padding: 9px 10px; }
}

/* === FIX HIEN THI TIENG TRUNG (14/09/2026, thay cho ban Han Quoc 27/08/2026) ===
   Nguyen nhan: font-stack goc (Georgia/Arial...) khong co bo chu Han,
   trinh duyet phai tu thay bang font he thong (PingFang SC / Microsoft
   YaHei...) co ty le em-box lon hon han, khien chu nhin "to" hon han so
   voi VI/EN cung font-size, dong thoi mac dinh trinh duyet cho phep ngat
   dong giua tu tieng Trung.
   Fix: chan ngat giua tu + giam nhe cac vung tieu de lon de can bang lai
   voi VI/EN. */
:lang(zh){word-break:keep-all;overflow-wrap:break-word}
:lang(zh) h1{font-size:clamp(24px,3.9vw,36px)}
:lang(zh) h2{font-size:clamp(20px,3.1vw,29px)}
:lang(zh) .hero h1{font-size:clamp(26px,4.1vw,42px)}
:lang(zh) .logo{font-size:15px}
:lang(zh) .nav-links{font-size:13px;gap:18px}

/* FAQ — accordion nhe, dung <details> co san cua trinh duyet, khong can JS */
.faq-list{max-width:820px;display:flex;flex-direction:column;gap:10px;margin-top:20px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:4px 20px}
.faq-item summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:15.5px;list-style:none;position:relative;padding-right:28px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:0;top:14px;font-size:20px;color:var(--gold-dark);font-weight:400}
.faq-item[open] summary::after{content:'–'}
.faq-item p{color:var(--ink-2);font-size:14.5px;padding-bottom:18px;max-width:720px}

/* Vi tri "why-tbos" section: nen nhat de tach voi problem/systems xung quanh */
.why-tbos{background:var(--gold-soft)}
@media(max-width:820px){.why-points{grid-template-columns:1fr!important}}


.service-hero{padding:80px 0 64px;background:var(--navy);color:white}.service-hero .eyebrow{color:#e5c878}.service-hero h1{font-size:clamp(34px,4vw,54px);line-height:1.15;max-width:740px;color:white}.service-hero .lead{color:#d8dde7;max-width:670px}.service-hero .btn-primary{background:var(--gold);color:var(--navy)}.service-hero .status{color:#f2dea5;border:1px solid #7a6c4b;background:transparent;display:inline-block;margin-bottom:20px}.service-hero .muted{color:#ccd2df}.service-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}.flow-card{border:1px solid #526071;border-radius:18px;padding:26px;background:#ffffff08}.flow-card .eyebrow{font-size:11px;letter-spacing:1px}.flow-step{display:flex;gap:16px;align-items:center;background:#ffffff09;border:1px solid #526071;padding:15px 18px;border-radius:10px;margin-top:12px;line-height:1.45}.flow-step b{color:#e5c878;font-size:14px}.flow-step.approval{border-color:#c3a15a;background:#b08e3918}.flow-arrow{text-align:center;color:#b8c3d2;margin-top:10px;font-size:18px}.service-section{padding:56px 0}.service-section.alt{background:#f5f3ee}.service-section h2{margin-bottom:22px}.service-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.service-box{border:1px solid var(--line);border-radius:14px;padding:26px;background:white}.service-box h3{font-size:22px;margin-bottom:12px}.service-box p{color:var(--ink-2);line-height:1.7}.service-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 36px;list-style:none;padding:0;counter-reset:step}.service-list li{padding:20px 0;border-top:1px solid var(--line);line-height:1.7;counter-increment:step}.service-list li:before{content:counter(step,decimal-leading-zero);display:block;color:var(--gold-dark);font-weight:700;margin-bottom:7px}.service-note{padding:22px;border-left:3px solid var(--gold);background:#f5f3ee;line-height:1.8;margin-top:24px}.service-faq details{border-bottom:1px solid var(--line);padding:20px 0}.service-faq summary{cursor:pointer;font-weight:700;line-height:1.6}.service-faq details p{margin-top:12px;color:var(--ink-2);line-height:1.8}.service-cta{background:var(--navy);color:white;border-radius:18px;padding:40px}.service-cta h2{color:white}.service-cta p{color:#d8dde7;max-width:780px;line-height:1.8}.service-cta a:not(.btn){color:#e5c878}.catalogue-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.catalogue-card{border:1px solid var(--line);border-radius:16px;padding:28px;background:white;scroll-margin-top:100px}.catalogue-card h2{font-size:26px;margin:14px 0 22px}.catalogue-card dl{margin:0}.catalogue-card dt{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold-dark);margin-top:18px}.catalogue-card dd{margin:6px 0 0;line-height:1.75;color:var(--ink-2)}.catalogue-card .status{font-size:12px}.catalogue-card .btn{margin-top:22px}.catalogue-nav{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 0}.catalogue-nav a{border:1px solid var(--line);padding:9px 14px;border-radius:100px;font-size:13px}.service-breadcrumb{margin-bottom:26px;color:#d8dde7;font-size:13px}.service-breadcrumb a{color:#e5c878}.logo a{color:inherit;text-decoration:none}.service-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px}.new-service-cards{margin-top:28px}.new-service-cards .prod p{color:var(--ink-2);line-height:1.8;margin:14px 0 24px}.service-bridge{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;line-height:1.8}.service-bridge a{font-weight:700}.service-grid>*{min-width:0} :focus-visible{outline:3px solid #b08e39;outline-offset:4px}
@media(max-width:760px){.service-grid,.service-columns,.catalogue-grid,.service-list{grid-template-columns:1fr}.service-hero{padding:42px 0}.service-grid{gap:28px}.service-section{padding:38px 0}.service-box,.catalogue-card{padding:22px}.service-cta{padding:26px}.service-hero h1{font-size:36px}.flow-card{padding:20px}.service-breadcrumb{margin-bottom:20px}.service-links{gap:14px}.catalogue-nav a{padding:8px 12px}}

.service-hero .eyebrow{display:block;margin:0 0 18px}.service-hero .status{display:block;width:fit-content;padding:6px 11px;border-radius:6px;font-size:12px;margin-bottom:18px}.service-hero .lead{margin-top:22px;margin-bottom:24px}.service-hero .flow-card .eyebrow{margin-bottom:18px}.service-breadcrumb{margin-bottom:30px}.catalogue-card .status{background:#f5f3ee;color:var(--ink-2);border-radius:5px;padding:5px 9px}

.service-hero .flow-arrow{transform:none}