/* =========================================================
   leducnam.com — stylesheet
   Tông: navy / xám + nhấn AI-blue
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-900:#07132a;
  --navy-800:#0b1b33;
  --navy-700:#12294a;

  --ink:#0f1c33;
  --ink-2:#405270;
  --ink-3:#6b7c96;

  --line:#e2e8f2;
  --bg:#ffffff;
  --bg-alt:#f5f8fc;
  --card:#ffffff;

  --ai:#2f6bff;
  --ai-2:#4e8cff;
  --ai-soft:#eaf1ff;
  --ai-ring:rgba(47,107,255,.28);

  --wrap:1160px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;

  --shadow-sm:0 1px 2px rgba(15,28,51,.05), 0 4px 14px rgba(15,28,51,.05);
  --shadow-md:0 10px 34px rgba(15,28,51,.09);
  --shadow-ai:0 14px 40px rgba(47,107,255,.20);

  --ease:cubic-bezier(.22,.72,.28,1);
}

html[data-theme="dark"]{
  --ink:#e8eefb;
  --ink-2:#a8b7d0;
  --ink-3:#7f8ea8;

  --line:#1e2c46;
  --bg:#0a1424;
  --bg-alt:#0d1a2e;
  --card:#101d33;

  --ai:#5b93ff;
  --ai-2:#7fadff;
  --ai-soft:#152a4d;
  --ai-ring:rgba(91,147,255,.32);

  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --shadow-md:0 10px 34px rgba(0,0,0,.42);
  --shadow-ai:0 14px 40px rgba(47,107,255,.28);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,
              "Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",
              Arial,sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s var(--ease), color .3s var(--ease);
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

::selection{background:var(--ai);color:#fff}

:focus-visible{outline:2.5px solid var(--ai);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2.6rem, var(--wrap));margin-inline:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ai);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

/* ---------- 3. Typography helpers ---------- */
h1,h2,h3{line-height:1.18;letter-spacing:-.022em;font-weight:800}

.section{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}
.section--alt{background:var(--bg-alt)}

.section__head{max-width:44rem;margin-bottom:clamp(2.4rem,4.5vw,3.4rem)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}

.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.775rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ai);margin-bottom:.85rem;
}
.kicker::before{content:"";width:24px;height:2px;background:var(--ai);border-radius:2px}
.kicker--on-dark{color:var(--ai-2)}
.kicker--on-dark::before{background:var(--ai-2)}

.section__head--center .kicker{justify-content:center}

.lead{font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--ink-2);margin-top:1.1rem;max-width:44rem}
.lead strong{color:var(--ink);font-weight:700}

.hl{
  color:var(--ai);
  background:linear-gradient(transparent 62%, var(--ai-ring) 62%);
  padding:0 .12em;
  font-weight:700;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

.tag-ai{
  display:inline-block;vertical-align:middle;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ai);background:var(--ai-soft);
  border:1px solid var(--ai-ring);
  padding:.16rem .48rem;border-radius:999px;margin-left:.45rem;
}

/* ---------- 4. Progress bar ---------- */
.progress{
  position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--ai),var(--ai-2));
  transition:width .08s linear;
}

/* ---------- 5. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg); /* fallback cho trình duyệt chưa hỗ trợ color-mix */
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 22px rgba(15,28,51,.06)}

.header__inner{display:flex;align-items:center;gap:1rem;min-height:72px}

.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;letter-spacing:-.02em;margin-right:auto}
.brand__mark{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy-800),var(--ai));
  color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.02em;
  box-shadow:var(--shadow-ai);
}
.brand__text{font-size:1rem}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  padding:.5rem .78rem;border-radius:9px;
  font-size:.905rem;font-weight:500;color:var(--ink-2);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover{color:var(--ink);background:var(--bg-alt)}
.nav a.is-active{color:var(--ai);background:var(--ai-soft);font-weight:600}

.nav__cta,
.nav a.nav__cta{
  background:var(--ai);color:#fff;font-weight:600;margin-left:.4rem;
  box-shadow:var(--shadow-ai);
}
.nav a.nav__cta:hover{background:var(--ai-2);color:#fff}
.nav a.nav__cta.is-active{background:var(--ai);color:#fff}

.header__tools{display:flex;align-items:center;gap:.5rem}

.icon-btn{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);
  transition:.2s var(--ease);
}
.icon-btn:hover{color:var(--ai);border-color:var(--ai-ring);background:var(--ai-soft)}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:block}

.nav-toggle{display:none;width:40px;height:38px;border-radius:11px;border:1px solid var(--line);padding:0 9px}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;margin:4px 0;transition:.25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 5b. Bộ chọn ngôn ngữ ---------- */
.flag{
  display:inline-block;flex:0 0 auto;
  width:21px;height:14px;border-radius:3px;
  background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.flag--vi{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23DA251D'/><path d='M15.00,3.80L16.39,8.08L20.90,8.08L17.25,10.73L18.64,15.02L15.00,12.37L11.36,15.02L12.75,10.73L9.10,8.08L13.61,8.08Z' fill='%23FFFF00'/></svg>")}
.flag--en{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><rect width='60' height='30' fill='%23012169'/><clipPath id='c'><path d='M0,0 60,0 60,30 0,30Z'/></clipPath><g clip-path='url(%23c)'><path d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/><path d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='3'/><path d='M30,0 30,30M0,15 60,15' stroke='%23fff' stroke-width='10'/><path d='M30,0 30,30M0,15 60,15' stroke='%23C8102E' stroke-width='6'/></g></svg>")}
.flag--zh{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23DE2910'/><path d='M5.50,2.80L6.31,5.29L8.92,5.29L6.81,6.82L7.62,9.31L5.50,7.78L3.38,9.31L4.19,6.82L2.08,5.29L4.69,5.29Z' fill='%23FFDE00'/><path d=%22M10.39,1.32L10.36,2.15L11.15,2.44L10.35,2.67L10.32,3.51L9.85,2.81L9.05,3.04L9.56,2.38L9.09,1.69L9.88,1.98Z%22 fill=%22%23FFDE00%22/><path d=%22M12.40,3.67L12.52,4.49L13.34,4.64L12.59,5.01L12.70,5.83L12.12,5.23L11.37,5.60L11.76,4.86L11.18,4.26L12.01,4.41Z%22 fill=%22%23FFDE00%22/><path d=%22M12.00,6.87L12.39,7.61L13.22,7.46L12.64,8.06L13.03,8.80L12.28,8.43L11.70,9.03L11.81,8.21L11.06,7.84L11.88,7.69Z%22 fill=%22%23FFDE00%22/><path d=%22M9.61,9.32L10.12,9.98L10.91,9.69L10.44,10.38L10.95,11.04L10.15,10.81L9.68,11.51L9.65,10.67L8.85,10.44L9.64,10.15Z%22 fill=%22%23FFDE00%22/></svg>")}

.lang{position:relative}

.lang__btn{
  display:flex;align-items:center;gap:.45rem;
  height:38px;padding:0 .6rem 0 .55rem;border-radius:11px;
  border:1px solid var(--line);color:var(--ink-2);
  transition:.2s var(--ease);
}
.lang__btn:hover{color:var(--ai);border-color:var(--ai-ring);background:var(--ai-soft)}
.lang__code{font-size:.8rem;font-weight:700;letter-spacing:.04em}
.lang__caret{opacity:.6;transition:transform .25s var(--ease)}
.lang.is-open .lang__caret{transform:rotate(180deg)}

.lang__menu{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:110;
  min-width:11.5rem;padding:.35rem;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.22s var(--ease);
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:none}

.lang__menu button{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.55rem .65rem;border-radius:9px;
  font-size:.9rem;font-weight:500;color:var(--ink-2);text-align:left;
  transition:.18s var(--ease);
}
.lang__menu button:hover{background:var(--bg-alt);color:var(--ink)}
.lang__menu button[aria-selected="true"]{background:var(--ai-soft);color:var(--ai);font-weight:600}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.88rem 1.5rem;border-radius:12px;
  font-weight:600;font-size:.97rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn svg{transition:transform .25s var(--ease)}
.btn--primary{background:var(--ai);color:#fff;box-shadow:var(--shadow-ai)}
.btn--primary:hover{background:var(--ai-2);transform:translateY(-2px)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ai);color:var(--ai);transform:translateY(-2px)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,8vw,7rem);overflow:hidden}

.hero__glow{
  position:absolute;top:-28%;right:-12%;width:min(760px,86vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, var(--ai-ring), transparent 62%);
  filter:blur(28px);pointer-events:none;
}
.hero__mesh{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, #000, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, #000, transparent 72%);
}

.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.83rem;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line);background:var(--card);
  padding:.42rem .95rem;border-radius:999px;margin-bottom:1.5rem;
  box-shadow:var(--shadow-sm);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ai);box-shadow:0 0 0 4px var(--ai-ring);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--ai-ring)}50%{box-shadow:0 0 0 7px transparent}}

.hero__name{
  font-size:clamp(2.9rem,7vw,4.6rem);
  letter-spacing:-.035em;line-height:1.02;margin-bottom:.85rem;
}

.hero__role{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;color:var(--ink);line-height:1.42;max-width:22ch}

.hero__sub{margin-top:1.1rem;color:var(--ink-2);max-width:40ch;font-size:1.03rem}

.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}

.hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  margin-top:2.8rem;padding-top:1.9rem;border-top:1px solid var(--line);
}
.hero__stats li{display:flex;flex-direction:column;gap:.15rem}
.hero__stats strong{font-size:1.42rem;font-weight:800;color:var(--ai);letter-spacing:-.02em}
.hero__stats span{font-size:.83rem;color:var(--ink-3);line-height:1.45}

/* Portrait */
.hero__media{display:flex;justify-content:center}

.portrait{
  position:relative;width:min(100%,400px);aspect-ratio:4/5;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-alt);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(190deg, transparent 52%, rgba(11,27,51,.55));
  pointer-events:none;
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}

.portrait__placeholder{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  color:var(--ink-3);text-align:center;padding:1.5rem;font-size:.85rem;
}
.portrait__placeholder code{
  font-size:.78rem;background:var(--card);border:1px solid var(--line);
  padding:.15rem .45rem;border-radius:6px;color:var(--ai);
}
.portrait--empty{background:
  repeating-linear-gradient(45deg, var(--bg-alt) 0 12px, var(--bg) 12px 24px)}
.portrait--empty::after{display:none}
.portrait--empty .portrait__placeholder{display:flex}
.portrait--empty .portrait__badge{display:none}

.portrait__badge{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:.78rem;font-weight:600;
  padding:.42rem .8rem;border-radius:999px;
}

/* ---------- 7b. Dải thương hiệu ---------- */
.brands{
  padding:2.4rem 0 2.6rem;
  background:var(--bg-alt);
  border-block:1px solid var(--line);
}
.brands__label{
  text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.5rem;
}
.brands__list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem clamp(1.4rem,4vw,3.4rem);
}
.brands__list li{
  display:flex;align-items:center;gap:.42rem;
  color:var(--ink-2);
  opacity:.72;
  transition:opacity .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.brands__list li:hover{opacity:1;color:var(--ai);transform:translateY(-2px)}

/* Logo thật, giữ màu thương hiệu. Không dùng mask tô một màu được vì ba logo
   là badge nền màu đặc — tô một màu sẽ biến chúng thành khối vuông đặc. */
.blogo{display:none;height:46px}
.brands__list li.has-logo{opacity:.92}
.brands__list li.has-logo:hover{opacity:1;transform:translateY(-2px)}
.brands__list li.has-logo .blogo{
  display:block;
  background:var(--logo) center/contain no-repeat;
}
/* Nền tối: logo chữ xanh đậm sẽ chìm, lót tấm trắng cho dễ đọc. */
html[data-theme="dark"] .brands__list li.has-logo{
  background:#fff;border-radius:10px;padding:7px 13px;
}
.brands__list li.has-logo .bword{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.bword{display:flex;align-items:baseline;gap:.42rem}
.brands__list span{
  font-size:clamp(1.05rem,2.2vw,1.34rem);font-weight:800;letter-spacing:-.02em;
}
.brands__list em{font-style:normal;font-size:.76rem;font-weight:600;color:var(--ink-3);letter-spacing:.01em}
.brands__list li:hover em{color:var(--ai)}

/* ---------- 8. Về tôi ---------- */
.about{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

.about__icon{
  color:var(--ink-2);
  background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.7rem;
  box-shadow:var(--shadow-sm);
}
.about__icon svg{width:100%;height:auto;display:block}
.about__icon .accent{color:var(--ai);stroke:var(--ai)}
.about__icon .accent[fill]{fill:var(--ai)}

.about__copy h2{font-size:clamp(1.7rem,3.3vw,2.45rem)}

.about__facts{margin-top:2rem;display:grid;gap:.7rem}
.about__facts li{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding:.75rem 0;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--ink-2);
}
.about__facts span{font-weight:700;color:var(--ink);font-size:.83rem;letter-spacing:.02em}

/* ---------- 9. Cách tôi làm việc ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;counter-reset:s}

.step{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:2rem 1.7rem 1.8rem;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--ai-ring)}

.step__num{
  position:absolute;top:1.2rem;right:1.4rem;
  font-size:2.4rem;font-weight:800;letter-spacing:-.04em;
  color:var(--line);line-height:1;
}
.step__icon{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--ai-soft);color:var(--ai);border:1px solid var(--ai-ring);
  margin-bottom:1.25rem;
}
.step__icon svg{width:24px;height:24px}
.step h3{font-size:1.22rem;margin-bottom:.45rem}
.step p{color:var(--ink-2);font-size:.95rem}

/* Đường nối giữa 3 bước (desktop) */
.step:not(:last-child)::after{
  content:"";position:absolute;top:2.6rem;right:-1.3rem;width:1.3rem;height:1px;
  background:linear-gradient(90deg,var(--ai-ring),transparent);
}

/* ---------- 10. AI trong vận hành (dark) ---------- */
.ai{
  background:linear-gradient(165deg,var(--navy-900),var(--navy-800) 55%,var(--navy-700));
  color:#e9f0ff;overflow:hidden;isolation:isolate;
}
.ai h2{color:#fff;font-size:clamp(2rem,4.2vw,3rem)}

.ai__grid{
  position:absolute;inset:0;z-index:-1;opacity:.32;
  background-image:
    linear-gradient(to right, rgba(120,160,255,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,160,255,.16) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
}
.ai__halo{
  position:absolute;z-index:-1;top:10%;left:50%;transform:translateX(-50%);
  width:min(900px,95vw);aspect-ratio:2/1;
  background:radial-gradient(ellipse at center, rgba(78,140,255,.30), transparent 66%);
  filter:blur(40px);
}

.ai__statement{
  margin-top:1.3rem;font-size:clamp(1.05rem,2.1vw,1.32rem);
  color:#c2d3f2;max-width:46rem;margin-inline:auto;line-height:1.6;
}
.ai .hl{color:#fff;background:linear-gradient(transparent 62%, rgba(78,140,255,.45) 62%)}

/* --- Sơ đồ luồng --- */
.flow{
  margin:clamp(2rem,4vw,3.2rem) auto clamp(2.4rem,4.5vw,3.6rem);
  max-width:960px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(140,180,255,.16);
  border-radius:var(--r-lg);
  padding:clamp(.8rem,2vw,1.6rem);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.flow__svg{width:100%;height:auto;display:block;overflow:visible}
.flow__svg--v{display:none}

.fnode rect{
  fill:rgba(255,255,255,.05);
  stroke:rgba(150,185,255,.34);stroke-width:1.4;
}
.fnode--ai rect{
  fill:rgba(47,107,255,.16);
  stroke:var(--ai-2);stroke-width:1.9;
}
.fico{fill:none;stroke:#a9c4f5;stroke-width:1.8;stroke-linecap:round}
.fnode--ai .fico{stroke:#ffffff}
.fico .filled{fill:#fff;stroke:none}

.flabel{
  fill:#fff;font-family:inherit;font-size:20px;font-weight:700;
  text-anchor:middle;
}
.fnode--ai .flabel{font-size:21px}
.fmeta{
  fill:#a9bcdd;font-family:inherit;font-size:14px;font-weight:400;
  text-anchor:middle;
}

/* bản dọc dùng cỡ chữ lớn hơn vì khung hẹp */
.flow__svg--v .flabel{font-size:27px}
.flow__svg--v .fnode--ai .flabel{font-size:28px}
.flow__svg--v .fmeta{font-size:19px}
.flow__svg--v .fico{stroke-width:1.3}
.farrow{stroke:var(--ai-2);stroke-width:2;fill:none;stroke-linecap:round}

/* animation khi diagram vào viewport */
.flow .fnode,.flow .farrow{opacity:0}
.flow.is-in .fnode{animation:popIn .62s var(--ease) forwards}
.flow.is-in .fnode[data-n="1"]{animation-delay:.05s}
.flow.is-in .fnode[data-n="2"]{animation-delay:.42s}
.flow.is-in .fnode[data-n="3"]{animation-delay:.80s}
.flow.is-in .farrow{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:drawLine .5s var(--ease) forwards;
}
.flow.is-in .farrow:nth-of-type(1){animation-delay:.30s}
.flow.is-in .farrow:nth-of-type(2){animation-delay:.68s}

.flow.is-in .fnode--ai rect{animation:aiGlow 3.2s var(--ease) 1.3s infinite}

@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drawLine{from{opacity:1;stroke-dashoffset:100}to{opacity:1;stroke-dashoffset:0}}
@keyframes aiGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(78,140,255,0))}50%{filter:drop-shadow(0 0 16px rgba(78,140,255,.55))}}

/* --- Card AI --- */
.ai__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.ai__cards--3{grid-template-columns:repeat(3,1fr)}

.ai-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(140,180,255,.2);
  border-radius:var(--r-md);
  padding:1.9rem 1.7rem;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ai-card:hover{transform:translateY(-5px);border-color:var(--ai-2);background:rgba(47,107,255,.12)}

.ai-card__tag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#9dc0ff;border:1px solid rgba(140,180,255,.34);
  padding:.22rem .6rem;border-radius:999px;margin-bottom:1rem;
}
.ai-card h3{color:#fff;font-size:1.3rem;margin-bottom:.6rem}
.ai-card p{color:#b7c8e6;font-size:.96rem}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.chips li{
  font-size:.79rem;font-weight:500;color:#cfdcf5;
  background:rgba(255,255,255,.07);border:1px solid rgba(140,180,255,.16);
  padding:.3rem .7rem;border-radius:999px;
}

/* ---------- 11. Dự án ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}

.project{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.7rem;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow:hidden;
}
.project::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ai),var(--ai-2));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.project:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--ai-ring)}
.project:hover::before{transform:scaleX(1)}
.project--ai{border-color:var(--ai-ring);background:linear-gradient(180deg,var(--ai-soft),var(--card) 46%)}
.project--ai::before{transform:scaleX(1)}

.project__thumb{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--bg-alt);border:1px solid var(--line);color:var(--ai);margin-bottom:1.2rem;
}
.project--ai .project__thumb{background:var(--card);border-color:var(--ai-ring)}
.project__thumb svg{width:25px;height:25px}

.project h3{font-size:1.14rem;margin-bottom:1rem;letter-spacing:-.015em}

.project__meta{display:grid;gap:.6rem}
.project__meta > div{display:grid;grid-template-columns:4.6rem 1fr;gap:.8rem;align-items:baseline}
.project__meta dt{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
}
.project__meta dd{font-size:.93rem;color:var(--ink-2);margin:0}

.project__org{
  display:flex;align-items:center;min-height:20px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ai);margin-bottom:.4rem;
}
/* Ô icon của thẻ dự án: có file logo thì logo MÀU THẬT thay icon, chưa có
   thì giữ icon line-art. Logo bỏ hẳn khung viền — khung lồng khung nhìn rối,
   và logo dạng badge vốn đã có nền màu riêng. */
.project__thumb .blogo{height:34px}
.project__thumb.has-logo{
  background:none;border:0;padding:0;
  width:auto;height:auto;min-height:36px;
  display:inline-flex;align-items:center;
  margin-bottom:1.1rem;
}
.project__thumb.has-logo .blogo{
  display:block;
  background:var(--logo) left center/contain no-repeat;
}
.project__thumb.has-logo > svg{display:none}

/* Nền tối: logo chữ xanh đậm (Gree, Samsung) sẽ chìm, nên lót một tấm trắng. */
html[data-theme="dark"] .project__thumb.has-logo{
  background:#fff;border-radius:10px;padding:5px 9px;
}
.project__meta dd strong{color:var(--ink);font-weight:800}

.projects__more{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-3);line-height:1.75;
}

/* ---------- 11b. Timeline kinh nghiệm ---------- */
.timeline{position:relative;padding-left:0}

.tl{
  position:relative;
  display:grid;grid-template-columns:11.5rem 1fr;gap:0 2.2rem;
  padding:0 0 2.4rem 0;
}
.tl:last-child{padding-bottom:.6rem}

/* đường dọc + chấm mốc */
.tl::before{
  content:"";position:absolute;left:calc(11.5rem + 1.1rem - 1px);top:.55rem;bottom:-.55rem;
  width:2px;background:linear-gradient(180deg,var(--ai-ring),var(--line));
}
.tl:last-child::before{display:none}
.tl::after{
  content:"";position:absolute;left:calc(11.5rem + 1.1rem - 6px);top:.45rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--bg-alt);border:3px solid var(--ai);
  box-shadow:0 0 0 4px var(--ai-soft);
}
.tl:first-child::after{
  background:var(--ai);
  animation:pulse 2.6s var(--ease) infinite;
}

.tl__time{
  grid-column:1;text-align:right;padding-top:.05rem;
  font-size:.85rem;font-weight:700;color:var(--ink-3);letter-spacing:.01em;
  white-space:nowrap;
}
.tl__body{grid-column:2;padding-left:1.1rem}

.tl__body h3{font-size:1.24rem;margin-bottom:.2rem}
.tl__org{font-size:.95rem;font-weight:600;color:var(--ai);margin-bottom:.9rem}

.tl__points{display:grid;gap:.42rem;margin-bottom:1rem}
.tl__points li{
  position:relative;padding-left:1.15rem;font-size:.94rem;color:var(--ink-2);line-height:1.62;
}
.tl__points li::before{
  content:"";position:absolute;left:0;top:.63em;
  width:5px;height:5px;border-radius:50%;background:var(--ai-ring);
}

.chips--light li{
  background:var(--bg);border-color:var(--line);color:var(--ink-3);
}

/* Học vấn & chứng chỉ */
.edu{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;
  margin-top:1.4rem;padding-top:2.2rem;border-top:1px solid var(--line);
}
.edu__item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);
}
.edu__item h4{
  margin:0 0 .5rem;font-size:.74rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ai);
}
.edu__item p{font-size:.94rem;color:var(--ink-2)}
.edu__item strong{color:var(--ink);font-weight:700}

/* ---------- 12. Kỹ năng ---------- */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.skills--4{grid-template-columns:repeat(4,1fr)}

.skill__ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--bg-alt);border:1px solid var(--line);color:var(--ai);
  margin-bottom:1.1rem;
}
.skill__ico svg{width:22px;height:22px}
.skill--ai .skill__ico{background:var(--ai-soft);border-color:var(--ai-ring)}

.skill{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.8rem 1.7rem;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.skill:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.skill h3{font-size:1.14rem;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}

.skill--ai{border-color:var(--ai-ring);box-shadow:var(--shadow-ai)}
.skill--ai h3{color:var(--ai)}

.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills li{
  font-size:.86rem;font-weight:500;color:var(--ink-2);
  background:var(--bg-alt);border:1px solid var(--line);
  padding:.42rem .85rem;border-radius:999px;
  transition:.2s var(--ease);
}
.pills li:hover{color:var(--ai);border-color:var(--ai-ring);background:var(--ai-soft)}
.skill--ai .pills li{background:var(--ai-soft);border-color:var(--ai-ring);color:var(--ai)}

/* ---------- 13. Liên hệ ---------- */
.contact{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  color:#e9f0ff;text-align:center;overflow:hidden;isolation:isolate;
}
.contact h2{color:#fff;font-size:clamp(2rem,4.2vw,2.9rem)}
.contact .kicker{justify-content:center}
.contact__lead{color:#b7c8e6;margin-top:1rem;font-size:1.06rem}

.contact__links{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:2.8rem;text-align:left;
}
.clink{
  display:flex;align-items:center;gap:.9rem;
  background:rgba(255,255,255,.055);border:1px solid rgba(140,180,255,.2);
  border-radius:var(--r-md);padding:1.15rem 1.2rem;
  transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.clink:hover{transform:translateY(-4px);border-color:var(--ai-2);background:rgba(47,107,255,.14)}
.clink__ico{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(78,140,255,.18);border:1px solid rgba(140,180,255,.26);color:#bcd4ff;
}
.clink__ico svg{width:21px;height:21px}
.clink__txt{display:flex;flex-direction:column;min-width:0}
.clink__txt strong{color:#fff;font-size:.98rem;font-weight:700}
.clink__txt em{
  font-style:normal;color:#a9bcdd;font-size:.82rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 14. Footer ---------- */
.site-footer{background:var(--navy-900);color:#8fa3c4;padding:2rem 0;font-size:.88rem}
.footer__inner{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center}
.footer__note{color:#6d82a6}

/* ---------- 15. To top ---------- */
.to-top{
  position:fixed;right:1.3rem;bottom:1.3rem;z-index:90;
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--ai);color:#fff;box-shadow:var(--shadow-ai);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.3s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--ai-2);transform:translateY(-3px)}

/* ---------- 16. Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.11s}
.reveal[data-delay="2"]{transition-delay:.22s}
.reveal[data-delay="3"]{transition-delay:.33s}

/* ---------- 17. Responsive ---------- */
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr;gap:2.8rem}
  .hero__media{order:-1;justify-content:flex-start}
  .portrait{width:min(100%,320px);aspect-ratio:1/1}
  .hero__role,.hero__sub{max-width:none}

  .about{grid-template-columns:1fr;gap:2rem}
  .about__icon{width:170px}

  .steps,.projects,.skills,.skills--4,.ai__cards--3{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .contact__links{grid-template-columns:repeat(2,1fr)}
  .edu{grid-template-columns:1fr}

  .tl{grid-template-columns:1fr;gap:0}
  .tl__time{grid-column:1;text-align:left;margin-bottom:.45rem;padding-left:1.7rem}
  .tl__body{grid-column:1;padding-left:1.7rem}
  .tl::before{left:5px;top:1.5rem;bottom:-.55rem}
  .tl::after{left:0;top:.35rem}
}

@media (max-width:820px){
  .nav{
    position:fixed;inset:72px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:1rem 1.3rem 1.5rem;
    box-shadow:0 20px 40px rgba(15,28,51,.12);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:.28s var(--ease);
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav a{padding:.8rem .9rem;font-size:1rem}
  .nav a.nav__cta{margin:.4rem 0 0;text-align:center;justify-content:center}
  .nav-toggle{display:block}
  .lang__code{display:none}
  .lang__btn{padding:0 .5rem}
}

@media (max-width:660px){
  body{font-size:16px}
  .steps,.projects,.skills,.skills--4,.ai__cards,.ai__cards--3,.contact__links{grid-template-columns:1fr}
  .brands__list{gap:.6rem 1.4rem}
  .hero__stats{grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
  .about__facts li{grid-template-columns:1fr;gap:.15rem}
  .flow{padding:.7rem}
  .flow__svg--h{display:none}
  .flow__svg--v{display:block}
  .to-top{right:.9rem;bottom:.9rem}
}

/* ---------- 18. Reduced motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .flow .fnode,.flow .farrow{opacity:1}
}

@media print{
  .site-header,.to-top,.progress,.hero__glow,.hero__mesh,.ai__grid,.ai__halo{display:none !important}
  body{background:#fff;color:#000}
  .ai,.contact{background:#fff !important;color:#000 !important}
  .ai h2,.contact h2,.ai-card h3,.clink__txt strong{color:#000 !important}
  .section{padding:1.6rem 0;break-inside:avoid}
  .reveal{opacity:1 !important;transform:none !important}
}