/* =========================================================
   Affiliate Global — giao diện
   Màu sắc giữ nguyên bản gốc. Bố cục: phương án A (đã duyệt qua wireframe).
   ========================================================= */
/* ---------- FONT Be Vietnam Pro tự lưu trên web (public/fonts) — không gọi Google Fonts ----------
   Chỉ 2 bộ chữ: latin + vietnamese (bộ vietnamese đã có ă đ ơ ư; bỏ latin-ext để không tải thừa) */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/be-vietnam-pro-900-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/be-vietnam-pro-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Font tạm lúc chờ tải: Arial (Windows/Mac/iPhone) và Roboto (Android) chỉnh cỡ theo từng độ đậm
   cho khớp Be Vietnam Pro → chữ không nhảy chỗ khi font thật về */
@font-face{font-family:'BVP Fallback A';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:109.51%;ascent-override:91.32%;descent-override:24.2%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback R';src:local('Roboto'),local('Roboto-Regular');font-weight:100 549;size-adjust:110.27%;ascent-override:90.68%;descent-override:24.03%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback A';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:103.86%;ascent-override:96.28%;descent-override:25.51%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback R';src:local('Roboto Bold'),local('Roboto-Bold');font-weight:550 649;size-adjust:112.58%;ascent-override:88.83%;descent-override:23.54%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback A';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 749;size-adjust:104.99%;ascent-override:95.25%;descent-override:25.24%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback R';src:local('Roboto Bold'),local('Roboto-Bold');font-weight:650 749;size-adjust:113.8%;ascent-override:87.88%;descent-override:23.29%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback A';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:750 849;size-adjust:106.06%;ascent-override:94.28%;descent-override:24.99%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback R';src:local('Roboto Bold'),local('Roboto-Bold');font-weight:750 849;size-adjust:114.96%;ascent-override:86.99%;descent-override:23.05%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback A';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:850 1000;size-adjust:107.11%;ascent-override:93.36%;descent-override:24.74%;line-gap-override:0%;}
@font-face{font-family:'BVP Fallback R';src:local('Roboto Bold'),local('Roboto-Bold');font-weight:850 1000;size-adjust:116.1%;ascent-override:86.13%;descent-override:22.83%;line-gap-override:0%;}

:root{
  --cream:#FBF4E8;
  --cream-2:#FEFAF3;
  --pink:#F7CBE0;
  --pink-soft:#FBE2EE;
  --pink-deep:#E8557A;
  --blue:#2F8DE0;
  --blue-2:#8FCBEE;
  --blue-ink:#165C9C;            /* chữ xanh trên nền sáng — đủ tương phản 4.5:1 */
  --lime:#C7E24E;
  --ink:#12130F;
  --muted:#5B5A54;
  --line:rgba(18,19,15,0.10);
  --card:#FFFFFF;
  --radius:16px;
  --header-h:76px;
  --grad:linear-gradient(90deg, var(--pink-deep), var(--blue));
  --grad-text:linear-gradient(90deg, #C43C87, #1C6FB8);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px);}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Be Vietnam Pro', 'BVP Fallback A', 'BVP Fallback R', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
h1, h2{ text-wrap:balance; }
/* text-wrap:pretty tốn công dàn chữ → chỉ dùng cho vài đoạn dẫn quan trọng, không cho mọi p/li */
.hero-lead, .section-head p, .page-hero p{ text-wrap:pretty; }
.icon{width:1em; height:1em; flex-shrink:0;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[hidden]{ display:none !important; }
/* không vẽ vòng focus ở nút, link (luật khoá 16 của plugin UI/UX); ô nhập vẫn có viền + ring */
a:focus-visible, button:focus-visible{ outline:none; }

/* ---------- THANH CUỘN: 4px, ẩn tới khi rê hay cuộn ---------- */
* { --scrollbar-thumb: transparent; }
*:hover { --scrollbar-thumb: color-mix(in srgb, var(--ink) 16%, transparent); }
.is-scrolling { --scrollbar-thumb: color-mix(in srgb, var(--ink) 28%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 40%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
  .is-scrolling { scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  background:var(--ink); color:#FFF;
  font-weight:600; font-size:14px;
  border-radius:999px;
  border:1.5px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(18,19,15,0.5); }
.btn:active{ transform:translateY(0) scale(0.97); }
.btn-outline{ background:#fff; color:var(--ink); }
.btn-outline:hover{ background:#F3EEE4; }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn-block{ width:100%; }
.btn .icon{ font-size:16px; }
.btn .arrow{ transition:transform .15s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- TAGS ---------- */
.tag{
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:0.03em;
  padding:5px 12px; border-radius:999px;
  white-space:nowrap;
}
.tag-pro{ background:#FDE7F0; color:#A52F70; }
.tag-free{ background:#E4F3FB; color:var(--blue-ink); }
.tag-new{ background:#FCEBE0; color:#A64A1C; }
.tag-hot{ background:#F3F6D6; color:#56620F; }
.tag-yt{ background:#FDE3E3; color:#B71C1C; }
.tag-blog{ background:#E4F3FB; color:var(--blue-ink); }
.tag-soon{ background:#EFEBE3; color:var(--muted); }

/* ---------- CARD VIỀN GRADIENT KHI RÊ ---------- */
.g-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:box-shadow .2s ease;
}
.g-card::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit; padding:2px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.g-card:hover{ box-shadow:0 24px 50px -26px rgba(18,19,15,0.3); }
.g-card:hover::before{ opacity:1; }

/* ---------- HEADER ---------- */
.site-header{
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
  transition:box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled{
  background:rgba(254,250,243,0.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -16px rgba(18,19,15,0.25);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header-h); }
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ width:40px; height:40px; border-radius:50%; }
.logo-text{ font-weight:800; font-size:18px; line-height:1.1; }
.logo-text .sub{ display:block; font-size:12px; font-weight:600; letter-spacing:0.02em; color:var(--muted); }
.navlinks{ position:relative; display:flex; align-items:center; gap:30px; }
.navlink{ position:relative; display:inline-flex; align-items:center; height:40px; font-size:14px; font-weight:500; opacity:0.75; transition:opacity .15s; }
.navlink:hover{ opacity:1; }
.navlink.is-active{ opacity:1; font-weight:700; }
.navlink.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:3px; border-radius:2px;
  background:var(--lime);
}
/* gạch chân trượt theo mục đang chọn (main.js tạo); không có JS thì dùng ::after ở trên */
.nav-indicator{
  position:absolute; left:0; bottom:4px; height:3px; width:0; border-radius:2px;
  background:var(--lime); opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.navlinks.has-indicator .navlink.is-active::after{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-actions .btn{ height:40px; padding:0 20px; font-size:14px; }
.menu-toggle{
  display:none; width:40px; height:40px; border-radius:50%;
  align-items:center; justify-content:center; font-size:22px;
  border:1px solid var(--line); background:#fff;
}
.mobile-menu{ border-top:1px solid var(--line); background:var(--cream-2); }
.mobile-menu .wrap{ display:flex; flex-direction:column; padding-top:12px; padding-bottom:18px; }
.mobile-menu a:not(.btn){ padding:12px 0; font-weight:600; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:16px; }

/* ---------- HERO: chia đôi (chữ trái, quỹ đạo phải) ---------- */
.hero{
  position:relative;
  padding:56px 0 64px;
  overflow:hidden;
  background:var(--cream-2);
}
.hero .wrap{ position:relative; z-index:1; }
/* đốm nền chỉ dịch nhẹ tại chỗ (hồng trái, xanh phải), không trôi ngang qua chữ */
.hero::before, .hero::after{
  content:""; position:absolute; left:50%;
  width:88vw; height:88vw;
  max-width:1150px; max-height:1150px;
  min-width:700px; min-height:700px;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none; z-index:0;
  will-change:transform;
}
.hero::before{
  background:radial-gradient(circle, var(--pink) 0%, var(--pink) 45%, rgba(247,203,224,0.25) 68%, rgba(247,203,224,0) 85%);
  opacity:0.9; top:20%;
  transform:translate(-50%,-50%) translateX(-36vw);
  animation:driftL 12s ease-in-out infinite alternate;
}
.hero::after{
  background:radial-gradient(circle, var(--blue) 0%, var(--blue) 40%, var(--blue-2) 60%, rgba(143,203,238,0) 85%);
  opacity:0.75; top:55%;
  transform:translate(-50%,-50%) translateX(28vw);
  animation:driftR 12s ease-in-out infinite alternate;
}
@keyframes driftL{ from{ transform:translate(-50%,-50%) translateX(-36vw); } to{ transform:translate(-50%,-50%) translateX(-30vw); } }
@keyframes driftR{ from{ transform:translate(-50%,-50%) translateX(28vw); } to{ transform:translate(-50%,-50%) translateX(34vw); } }

.hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); align-items:center; gap:40px; }
.pill{
  display:inline-block; font-size:13px; font-weight:600;
  padding:6px 16px; border-radius:999px;
  background:rgba(255,255,255,0.75); border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.hero-title{
  font-size:clamp(34px, 4.4vw, 56px); font-weight:800; line-height:1.12; letter-spacing:-0.02em;
  margin:16px 0 20px;
}
.hero-title .accent{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:#A52F70; -webkit-text-fill-color:transparent;
}
.hero-lead{ font-size:17px; color:var(--muted); max-width:520px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.proof-row{ list-style:none; display:flex; flex-wrap:wrap; gap:12px 24px; font-size:14px; color:var(--muted); }
.proof-row li{ display:flex; align-items:baseline; gap:6px; }
.proof-row li + li{ padding-left:24px; border-left:1px solid var(--line); }
.proof-row b{ font-size:22px; font-weight:800; color:var(--ink); }

/* Quỹ đạo: logo ở giữa, các chặng quay quanh liên tục */
.orbit-mini{ position:relative; width:460px; height:460px; margin:0 auto; }
.orbit-mini .orbit, .orbit-mini .planet{ position:absolute; inset:0; margin:auto; border-radius:50%; }
.orbit-mini .orbit{ border:1.5px dashed rgba(18,19,15,0.16); animation:spin 160s linear infinite; }
.orbit-mini .o1{ width:230px; height:230px; }
.orbit-mini .o2{ width:340px; height:340px; }
.orbit-mini .o3{ width:450px; height:450px; }
.orbit-center{ position:absolute; inset:0; margin:auto; width:112px; height:112px; z-index:2; }
.logo-ring{
  display:block; width:112px; height:112px; padding:4px; border-radius:50%;
  background:var(--grad);
  animation:pulseGlow 3.2s ease-in-out infinite;
}
.logo-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--ink); }
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 22px rgba(232,85,122,0.30), 0 0 34px rgba(47,141,224,0.22); }
  50%    { box-shadow:0 0 38px rgba(232,85,122,0.50), 0 0 52px rgba(47,141,224,0.40); }
}
.orbit-mini .planet{ z-index:3; pointer-events:none; animation:spin var(--dur) linear infinite; animation-delay:var(--delay); }
.planet-pos{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); }
.orbit-chip{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 6px;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:13px; font-weight:700; white-space:nowrap; pointer-events:auto;
  box-shadow:0 12px 26px -16px rgba(18,19,15,0.4);
  animation:unspin var(--dur) linear infinite; animation-delay:var(--delay);
}
.chip-ic{ display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; font-size:15px; background:#EAF4FD; color:var(--blue); }
.orbit-chips-mobile{ display:none; }
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes unspin{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

/* ---------- SECTIONS ---------- */
.section{ padding:100px 0; }
.section-soft{
  background:
    radial-gradient(700px 420px at 92% 20%, rgba(143,203,238,0.55) 0%, rgba(143,203,238,0) 65%),
    radial-gradient(600px 400px at 4% 85%, var(--pink-soft) 0%, rgba(251,226,238,0) 65%),
    var(--cream-2);
}
.section-head{ max-width:700px; margin:0 auto 56px; text-align:center; }
.section-eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:0.04em;
  color:var(--blue-ink); margin-bottom:14px; text-transform:uppercase;
}
.section-head h2{
  font-size:clamp(26px, 3.2vw, 38px); font-weight:800; letter-spacing:-0.01em;
  margin-bottom:16px; line-height:1.2;
}
.section-head p{ color:var(--muted); font-size:16px; }
.center-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:44px; }
.meta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.read-more{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink); }
.read-more .arrow{ transition:transform .15s; }
.g-card:hover .read-more{ color:var(--blue-ink); }
.g-card:hover .read-more .arrow{ transform:translateX(3px); }

/* ---------- CÔNG CỤ THEO 3 CHẶNG ---------- */
.stages{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.stage{ display:flex; flex-direction:column; gap:16px; }
.stage-head{ display:flex; align-items:center; gap:12px; padding:0 4px; }
.stage-num{
  display:inline-flex; width:36px; height:36px; border-radius:50%; flex-shrink:0;
  align-items:center; justify-content:center; font-size:15px; font-weight:800;
  background:var(--ink); color:var(--lime);
}
.stage-head h3{ font-size:17px; font-weight:800; line-height:1.3; }
.stage-head p{ font-size:13px; color:var(--muted); }
.tool-mini{ display:flex; flex-direction:column; gap:12px; padding:20px; flex:1; cursor:pointer; }
.tool-mini:target{ animation:targetFlash 1.8s ease; }
@keyframes targetFlash{
  0%,40%{ box-shadow:0 0 0 4px var(--lime), 0 24px 50px -26px rgba(18,19,15,0.3); }
  100%  { box-shadow:0 0 0 0 rgba(199,226,78,0); }
}
.tool-mini-top{ display:flex; align-items:center; gap:12px; }
.tool-icon{
  display:inline-flex; width:44px; height:44px; border-radius:12px; flex-shrink:0;
  align-items:center; justify-content:center; font-size:22px;
  background:#EAF4FD; color:var(--blue);
}
.tool-mini-top h4{ font-size:16px; font-weight:700; line-height:1.3; }
.tool-mini-top .tag{ margin-left:auto; }
.tool-mini .desc{ font-size:14px; color:var(--muted); }
.checklist{ list-style:none; }
.checklist li{ font-size:13px; color:var(--muted); margin-bottom:7px; padding-left:20px; position:relative; }
.checklist li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; font-size:12px; }
.tool-mini .btn{ margin-top:auto; }
.quick-links-wrap{ margin-top:40px; text-align:center; }
.quick-links-title{ font-size:14px; font-weight:600; color:var(--muted); margin-bottom:12px; }
.quick-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.quick-links .btn{ font-weight:700; }

/* ---------- VIDEO MỚI (dòng thời gian — bố cục gốc) ---------- */
.timeline{ position:relative; max-width:900px; margin:0 auto; padding-left:36px; }
.timeline::before{
  content:""; position:absolute; left:8px; top:20px; bottom:20px; width:2px;
  background:linear-gradient(180deg, var(--blue), var(--pink-deep)); opacity:.5;
}
.timeline-item{ position:relative; }
.timeline-item + .timeline-item{ margin-top:28px; }
.timeline-item::before{
  content:""; position:absolute; left:-36px; top:26px;
  width:18px; height:18px; border-radius:50%;
  background:var(--cream); border:3px solid var(--blue);
}
.video-row{ display:grid; grid-template-columns:300px 1fr; gap:24px; padding:18px; align-items:center; }
.video-thumb{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:12px; background:var(--ink);
}
.video-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.g-card:hover .video-thumb img{ transform:scale(1.05); }
.video-thumb .play{
  position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:rgba(255,255,255,0.92); color:#C62828;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.45);
}
.video-thumb .tag{ position:absolute; top:10px; left:10px; }
.video-body h3{ font-size:17px; font-weight:700; line-height:1.4; margin-bottom:6px; }
.video-body h3 a:hover{ color:var(--blue-ink); }
.video-body .meta{ margin-bottom:8px; }
.video-body .excerpt{ font-size:14px; color:var(--muted); margin-bottom:14px; }

/* ---------- VÌ SAO CHỌN (bố cục gốc) ---------- */
.qualify-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:960px; margin:0 auto; }
.qualify-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 32px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.qualify-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -22px rgba(18,19,15,0.25); }
.qualify-card.yes{ background:var(--ink); border-color:var(--ink); }
.qualify-card h4{ font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:16px; color:var(--muted); }
.qualify-card.yes h4{ color:var(--lime); }
.qualify-card p{ font-size:16px; font-weight:500; line-height:1.65; }
.qualify-card.yes p{ color:#fff; }

/* ---------- CTA CUỐI TRANG CHỦ (bố cục gốc) ---------- */
.cta-final{
  text-align:center;
  background:
    radial-gradient(900px 600px at 15% 30%, var(--pink) 0%, rgba(247,203,224,0) 60%),
    radial-gradient(1000px 700px at 85% 70%, var(--blue) 0%, var(--blue-2) 45%, rgba(143,203,238,0) 72%),
    var(--cream-2);
  padding:110px 0;
}
.cta-final blockquote{
  font-size:clamp(19px, 2.4vw, 26px); font-weight:600; line-height:1.5; letter-spacing:-0.01em;
  max-width:820px; margin:0 auto 48px;
}
.hl{ background:linear-gradient(180deg, transparent 60%, var(--lime) 60%); }
.cta-final h2{ font-size:clamp(30px, 4.2vw, 48px); font-weight:800; letter-spacing:-0.01em; margin-bottom:14px; }
.cta-final p{ font-size:16px; }
.cta-final .center-actions{ margin-top:30px; }

/* ---------- ĐẦU TRANG CON ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:80px 0 64px; text-align:center;
  background:
    radial-gradient(700px 380px at 12% 10%, rgba(247,203,224,0.55) 0%, rgba(247,203,224,0) 70%),
    radial-gradient(760px 420px at 90% 100%, rgba(143,203,238,0.45) 0%, rgba(143,203,238,0) 70%),
    var(--cream-2);
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-size:clamp(30px, 4.6vw, 52px); font-weight:900; letter-spacing:-0.02em; line-height:1.15;
  max-width:900px; margin:0 auto 16px;
}
.page-hero p{ color:var(--muted); font-size:17px; max-width:640px; margin:0 auto; }

/* ---------- TRANG KIẾN THỨC ---------- */
.kb-search{
  display:flex; align-items:center; gap:10px;
  max-width:560px; margin:30px auto 0; padding:0 20px;
  background:#fff; border:1.5px solid var(--ink); border-radius:999px;
  font-size:20px; color:var(--muted);
  box-shadow:0 14px 30px -18px rgba(18,19,15,0.35);
}
.kb-search input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font:inherit; font-size:15px; color:var(--ink); padding:15px 0;
}
.kb-search:focus-within{ box-shadow:0 0 0 4px rgba(47,141,224,0.2), 0 14px 30px -18px rgba(18,19,15,0.35); }
.kb-toolbar{
  position:sticky; top:var(--header-h); z-index:20;
  background:rgba(251,244,232,0.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.kb-toolbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; }
.kb-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  padding:9px 18px; border-radius:999px;
  font-size:13px; font-weight:600;
  background:#fff; border:1.5px solid var(--line);
  transition:border-color .15s, background-color .15s, color .15s;
}
.chip span{ font-size:12px; padding:1px 8px; border-radius:999px; background:var(--cream); color:var(--muted); }
.chip:hover{ background:#F3EEE4; }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip.is-active span{ background:var(--lime); color:var(--ink); }
.kb-count{ font-size:13px; color:var(--muted); white-space:nowrap; }
.kb-body{ padding:32px 0 100px; }

.mod-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 20px; padding-top:16px; }
.mod-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:32px 20px 20px; margin-top:12px;
}
.mod-card > .tag{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 4px var(--cream); }
.mod-info{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; font-size:18px; color:var(--muted);
}
.mod-info:hover, .mod-info[aria-expanded="true"]{ background:var(--cream); color:var(--ink); }
.mod-tip{
  position:absolute; top:46px; right:10px; left:10px; z-index:5;
  padding:10px 12px; border-radius:12px; background:var(--ink); color:#fff;
  font-size:13px; text-align:left; box-shadow:0 16px 32px -12px rgba(18,19,15,.5);
}
.mod-icon{
  display:inline-flex; width:52px; height:52px; border-radius:14px; align-items:center; justify-content:center;
  font-size:26px; background:#EAF4FD; color:var(--blue); margin-bottom:4px;
}
.mod-icon.t-prompt, .mod-icon.t-skill{ background:#FDE7F0; color:#C43C87; }
.mod-icon.t-file, .mod-icon.t-template{ background:#F3F6D6; color:#6B7A12; }
.mod-icon.t-video{ background:#FDE3E3; color:#C62828; }
.mod-card h3, .mod-card p{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.mod-card h3{ font-size:16px; font-weight:700; line-height:1.35; -webkit-line-clamp:3; }
.mod-card p{ font-size:13.5px; color:var(--muted); -webkit-line-clamp:3; margin-bottom:8px; }
.mod-card .btn{ margin-top:auto; }

.mod-card.is-copied .btn{ background:var(--ink); color:#fff; }
/* thẻ module (kiểu mẫu tham khảo, nền sáng): nền trắng chung, nhãn đặc trên đỉnh, icon trơn theo tông, nút viền */
.mod-card{ --tone:#1C6FB8; }
.mod-card[data-tone="pro"]{ --tone:#C43C87; }
.mod-card[data-tone="hot"]{ --tone:#2E7D32; }
.mod-card[data-tone="new"]{ --tone:#B4521F; }
.mod-card[data-tone="yt"]{ --tone:#C62828; }
.mod-card[data-tone="ink"]{ --tone:#12130F; }
.mod-card.g-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 30px -24px rgba(18,19,15,0.25);
}
.mod-card.g-card::before{ background:var(--tone); }
.mod-card.g-card:hover{ box-shadow:0 24px 46px -24px rgba(18,19,15,0.32); }
.mod-card.g-card > .tag{ background:var(--tone); color:#fff; box-shadow:0 0 0 4px var(--cream), 0 6px 14px -8px var(--tone); }
.mod-card[data-tone="ink"].g-card > .tag{ background:var(--lime); color:var(--ink); }
.mod-card.g-card .mod-icon{
  width:auto; height:auto; margin:6px 0 2px; border-radius:0;
  background:none; box-shadow:none;
  font-size:36px; color:var(--tone);
}
.mod-card.g-card h3{ color:var(--ink); }
.mod-num{
  position:absolute; top:12px; left:16px;
  font-size:30px; font-weight:900; line-height:1; letter-spacing:-0.03em;
  color:color-mix(in srgb, var(--tone) 20%, transparent);
  pointer-events:none;
}
.mod-card.g-card .mod-info{
  top:12px; right:12px; width:26px; height:26px; border-radius:50%;
  background:#A5A399; color:#fff; font-size:16px;
}
.mod-card.g-card .mod-info:hover, .mod-card.g-card .mod-info[aria-expanded="true"]{ background:var(--ink); color:#fff; }
.mod-card.g-card .mod-info .icon{ stroke-width:3; }
.mod-card.g-card .btn{
  width:auto; min-width:180px; padding:10px 22px; border-radius:10px;
  background:transparent; color:var(--ink); border:1.5px solid var(--ink);
}
.mod-card.g-card .btn:hover{ background:var(--lime); color:var(--ink); border-color:var(--ink); box-shadow:none; }
.mod-card.g-card.is-copied .btn{ background:var(--lime); color:var(--ink); }
/* nút đang tải file: vòng xoay thế chỗ icon */
.btn-spinner{ width:16px; height:16px; flex-shrink:0; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }
.mod-card.g-card .btn.is-loading{ cursor:progress; background:var(--lime); }
@media (prefers-reduced-motion: reduce){ .btn-spinner{ animation-duration:1.6s; } }

/* ô "Đang update" */
.mod-card.is-soon{ position:relative; background:rgba(255,255,255,0.55); border:1.5px dashed rgba(18,19,15,0.16); border-radius:var(--radius); }
.mod-card.is-soon > .tag{ box-shadow:0 0 0 4px var(--cream); }
.mod-icon.t-soon{ width:auto; height:auto; margin:6px 0 2px; background:none; font-size:36px; color:#B5B2A8; }
.mod-card.is-soon .btn{ width:auto; min-width:180px; padding:10px 22px; border-radius:10px; }
.mod-card.is-soon h3{ color:var(--muted); }
.mod-card.is-soon .btn:disabled{ background:transparent; color:var(--muted); border-color:rgba(18,19,15,0.16); cursor:default; transform:none; box-shadow:none; }
.state-line{ padding:24px 0; text-align:center; font-size:14px; color:var(--muted); grid-column:1 / -1; }
.state-line q{ color:var(--ink); }
.link-clear{ font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }

/* khối mời cộng đồng cuối trang kiến thức */
.community{ padding:72px 0 96px; }
.community-inner{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); align-items:center; gap:40px;
  padding:48px; border-radius:24px; background:var(--ink); color:#fff;
  position:relative; overflow:hidden;
}
.community-inner::before{
  content:""; position:absolute; right:-120px; top:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,141,224,0.55) 0%, rgba(47,141,224,0) 70%); pointer-events:none;
}
.community-inner > *{ position:relative; }
.community h2{ font-size:clamp(28px, 3.4vw, 40px); font-weight:800; letter-spacing:-0.01em; margin-bottom:12px; }
.community p{ color:rgba(255,255,255,0.72); font-size:16px; max-width:480px; }
.join-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; width:100%; text-align:left;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  transition:background-color .15s ease, border-color .15s ease;
}
.join-card:hover{ background:rgba(255,255,255,0.12); }
.join-card strong{ display:block; font-size:15px; }
.join-card small{ font-size:13px; color:rgba(255,255,255,0.6); }
.join-card .arrow{ margin-left:auto; font-size:18px; color:var(--lime); }
.join-ic{ display:inline-flex; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; background:var(--blue); color:#fff; }

/* ---------- TRANG GIỚI THIỆU + HỎI ĐÁP ---------- */
.page-hero .about-lead{ max-width:780px; }
.about-body{ padding:56px 0 0; }
.about-facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; max-width:960px; margin:0 auto 72px; }
.about-facts > div{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.about-facts dt{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-ink); margin-bottom:6px; }
.about-facts dd{ font-size:15px; font-weight:600; line-height:1.45; }
.faq-head{ text-align:center; margin-bottom:28px; }
.faq-head .section-eyebrow{ margin-bottom:10px; }
.faq-head h2{ font-size:clamp(24px, 2.8vw, 34px); font-weight:800; letter-spacing:-0.01em; line-height:1.2; }
.faq-list{ max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.faq-item + .faq-item{ border-top:1px solid var(--line); }
.faq-q{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; text-align:left; font-size:16px; font-weight:700; line-height:1.4; color:var(--ink);
}
.faq-q .icon{ font-size:20px; color:var(--muted); flex-shrink:0; transition:rotate .2s ease, color .2s ease; }
.faq-q:hover .icon{ color:var(--ink); }
.faq-q[aria-expanded="true"] .icon{ rotate:180deg; }
.faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease-out; }
.faq-panel.is-open{ grid-template-rows:1fr; }
.faq-panel-inner{ min-height:0; overflow:hidden; }
.faq-a{ padding:0 24px 22px; font-size:15px; line-height:1.7; color:var(--muted); }
.faq-a p + p{ margin-top:10px; }
.faq-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media (max-width:960px){
  .about-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .about-body{ padding-top:36px; }
  .about-facts{ gap:12px; margin-bottom:48px; }
  .about-facts > div{ padding:14px 16px; }
  .faq-q{ padding:18px; font-size:15px; }
  .faq-a{ padding:0 18px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .faq-panel, .faq-q .icon{ transition:none; }
}

/* ---------- TRANG MÁY TÍNH MAX CPC & EPC (/max-cpc) ---------- */
.calc{ padding:48px 0 96px; }
.calc-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px; align-items:start; }
.calc-form{
  position:sticky; top:calc(var(--header-h) + 24px);
  display:flex; flex-direction:column; gap:24px;
  padding:28px; background:#fff; border:1px solid var(--line); border-radius:20px;
}
.calc-group{ display:flex; flex-direction:column; gap:16px; }
.calc-group + .calc-group{ padding-top:24px; border-top:1px solid var(--line); }
.calc-group h2{ font-size:17px; font-weight:800; }
.calc-field{ display:flex; flex-direction:column; gap:8px; }
.calc-field > span:first-child{ font-size:14px; font-weight:600; color:var(--ink); }
.calc-field input, .calc-input{
  height:48px; width:100%; border-radius:12px; background:#fff;
  border:1.5px solid rgba(18,19,15,0.18); font:inherit; font-size:16px; font-weight:600; color:var(--ink);
}
.calc-field input{ padding:0 14px; outline:none; }
.calc-input{ display:flex; align-items:center; gap:8px; padding:0 14px; }
.calc-input input{ height:auto; border:none; padding:0; min-width:0; flex:1; border-radius:0; }
.calc-input i{ font-style:normal; font-weight:700; color:var(--muted); flex-shrink:0; }
.calc-field > input:focus, .calc-input:focus-within{ border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,141,224,0.16); }
.calc-form input::-webkit-outer-spin-button, .calc-form input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc-form input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

.calc-results{ display:flex; flex-direction:column; gap:16px; }
.calc-error{ padding:16px 20px; border-radius:16px; background:#fff; border:1px dashed rgba(18,19,15,0.2); font-size:14px; color:var(--muted); }
.calc-results .is-empty{ display:none; }
.calc-main{
  position:relative; overflow:hidden; text-align:center;
  padding:36px 28px; border-radius:20px; background:var(--ink); color:#fff;
}
.calc-main::before{
  content:""; position:absolute; right:-120px; top:-160px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,141,224,0.5) 0%, rgba(47,141,224,0) 70%); pointer-events:none;
}
.calc-main > *{ position:relative; }
.calc-main p{ font-size:15px; font-weight:600; color:rgba(255,255,255,0.75); }
.calc-main strong{ display:block; margin:10px 0 4px; font-size:clamp(40px, 5.4vw, 60px); font-weight:900; line-height:1.05; letter-spacing:-0.02em; color:var(--lime); }
.calc-sub{ display:block; font-size:16px; font-weight:600; }
.calc-main small{ display:block; margin-top:14px; font-size:13px; color:rgba(255,255,255,0.6); }
.calc-epc{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; border-radius:20px; background:#fff; border:1px solid var(--line);
}
.calc-epc h2{ font-size:16px; font-weight:800; }
.calc-epc p{ font-size:14px; color:var(--muted); }
.calc-epc-val{ text-align:right; flex-shrink:0; }
.calc-epc-val strong{ display:block; font-size:28px; font-weight:900; color:var(--blue-ink); line-height:1.1; }
.calc-epc-val > span{ font-size:14px; font-weight:600; color:var(--muted); }
.calc-explain{ padding:24px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.calc-explain > h2{ font-size:17px; font-weight:800; margin-bottom:14px; }
.calc-explain dl{ display:flex; flex-direction:column; }
.calc-explain dl > div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.calc-explain dt{ font-size:14px; color:var(--muted); }
.calc-explain dd{ font-size:15px; font-weight:700; text-align:right; }
.calc-explain dd small{ font-weight:600; color:var(--muted); }
.calc-story{ margin-top:18px; padding:18px 20px; border-radius:14px; background:var(--cream); }
.calc-story h3{ font-size:15px; font-weight:800; margin-bottom:8px; }
.calc-story p{ font-size:14.5px; line-height:1.7; color:#3d3c37; }
.calc-story p + p{ margin-top:8px; }
.calc-story b{ color:var(--ink); }
.calc-tip{ margin-top:14px; font-size:14px; color:var(--muted); }
.calc-tip b{ color:var(--ink); }
@media (max-width:960px){
  .calc-grid{ grid-template-columns:1fr; }
  .calc-form{ position:static; }
}
@media (max-width:600px){
  .calc{ padding:32px 0 64px; }
  .calc-form{ padding:20px; }
  .calc-main{ padding:28px 18px; }
  .calc-epc{ flex-direction:column; align-items:flex-start; padding:18px; }
  .calc-epc-val{ text-align:left; }
  .calc-explain{ padding:18px; }
  .calc-explain dl > div{ flex-direction:column; gap:4px; }
  .calc-explain dd{ text-align:left; }
}

/* ---------- TRANG BÀI VIẾT ---------- */
.article-hero{ text-align:left; padding:56px 0 48px; }
.article-hero h1{ margin:0 0 18px; max-width:860px; }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--blue-ink); }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:14px; color:var(--muted); margin:0 !important; }
.article-meta span{ display:inline-flex; align-items:center; gap:6px; }
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; padding-top:56px; padding-bottom:90px; }
.prose{ font-size:17px; line-height:1.75; max-width:720px; }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ font-size:26px; font-weight:800; line-height:1.3; letter-spacing:-0.01em; margin-top:1.8em; }
.prose h3{ font-size:20px; font-weight:700; margin-top:1.5em; }
.prose ul, .prose ol{ padding-left:1.4em; }
.prose li + li{ margin-top:.4em; }
.prose strong{ font-weight:700; }
.prose a{ color:var(--blue-ink); text-decoration:underline; text-underline-offset:3px; }
.prose code{ font-size:.9em; background:var(--cream); padding:2px 6px; border-radius:6px; }
.prose blockquote{ border-left:4px solid var(--lime); padding:4px 0 4px 18px; color:var(--muted); }
.prose table{ width:100%; border-collapse:collapse; font-size:15px; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.prose th, .prose td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.prose th{ background:var(--ink); color:#fff; font-weight:600; }
.prose tr:last-child td{ border-bottom:none; }
.article-aside{ display:flex; flex-direction:column; gap:20px; align-self:start; position:sticky; top:calc(var(--header-h) + 24px); }
.aside-card{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:26px; }
.aside-card h3{ font-size:18px; font-weight:700; }
.aside-card p{ font-size:14px; color:var(--muted); }
.kb-block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:8px; }
.kb-block-head h2{ font-size:26px; font-weight:800; letter-spacing:-0.01em; }
.kb-block-head a{ font-size:14px; font-weight:700; color:var(--blue-ink); white-space:nowrap; }
.related .mod-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.not-found{ padding:120px 0; }
.not-found .center-actions{ margin-top:30px; }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.75); padding:64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 0.8fr 1.1fr; gap:48px; }
.footer-col h3{ color:#fff; font-size:16px; font-weight:700; margin-bottom:18px; line-height:1.4; }
.logo-light .logo-text{ color:#fff; }
.logo-light .logo-text .sub{ color:rgba(255,255,255,0.55); }
.logo-light img{ box-shadow:0 0 0 2px rgba(255,255,255,0.2); }
.footer-slogan{ margin:16px 0 18px; font-size:14px; font-weight:600; color:var(--lime); text-transform:uppercase; letter-spacing:.03em; }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.contact-list li{ display:flex; align-items:center; gap:10px; }
.contact-list .icon{ font-size:18px; color:var(--lime); }
.contact-list strong{ color:#fff; font-weight:600; }
.contact-list a:hover, .footer-links a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-links{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-follow{ display:flex; flex-direction:column; gap:12px; }
.follow-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:14px; border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  transition:background-color .15s, border-color .15s, transform .15s;
}
.follow-card:hover{ background:rgba(255,255,255,0.09); }
.follow-card strong{ display:block; color:#fff; font-size:14px; }
.follow-card small{ font-size:12px; color:rgba(255,255,255,0.55); }
.follow-ic{ display:inline-flex; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.follow-ic.yt{ background:#FF0033; color:#fff; }
.follow-ic.zl{ background:var(--blue); color:#fff; }
.follow-ic.tg{ background:#229ED9; color:#fff; }
.footer-note{ margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); font-size:12px; color:rgba(255,255,255,0.45); }

/* ---------- NÚT CHAT NỔI + POPUP LIÊN HỆ ---------- */
.zalo-fab{
  position:fixed; right:20px; bottom:20px; z-index:200;
  display:flex; align-items:center; gap:12px;
  padding:7px 22px 7px 7px; border-radius:999px;
  background:var(--ink); color:#fff; text-align:left;
  box-shadow:0 16px 36px -12px rgba(18,19,15,0.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.zalo-fab:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -14px rgba(18,19,15,0.65); }
.zalo-fab-ic{
  position:relative; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:var(--blue); color:#fff;
}
.zalo-fab-ic::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--blue);
  animation:fabRing 2.4s ease-out infinite;
}
@keyframes fabRing{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(1.6); opacity:0; } }
.zalo-fab-text strong{ display:block; font-size:14px; font-weight:700; line-height:1.25; }
.zalo-fab-text small{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,0.65); }
.zalo-fab .dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(199,226,78,0.25); }
.zalo-modal{
  margin:auto; width:min(420px, calc(100% - 32px));
  padding:36px 30px 30px; text-align:center;
  border:none; border-radius:20px;
  background:var(--cream-2); color:var(--ink);
  box-shadow:0 30px 80px -20px rgba(18,19,15,0.5);
}
.zalo-modal[open]{ animation:popIn .3s cubic-bezier(.175,.885,.32,1.275); }
.zalo-modal::backdrop{ background:rgba(18,19,15,0.55); backdrop-filter:blur(6px); }
@keyframes popIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
.modal-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:#fff; border:1px solid var(--line);
}
.modal-ic{
  display:inline-flex; width:60px; height:60px; border-radius:50%;
  align-items:center; justify-content:center; font-size:28px;
  background:var(--grad); color:#fff; margin-bottom:16px;
}
/* popup video hướng dẫn: dialog không padding để bấm vùng nền mờ là đóng */
.video-modal{
  margin:auto; width:min(640px, calc(100% - 32px)); max-width:none; max-height:none;
  padding:0; border:none; background:transparent; overflow:visible;
}
.video-modal[open]{ animation:popIn .3s cubic-bezier(.175,.885,.32,1.275); }
.video-modal::backdrop{ background:rgba(18,19,15,0.6); backdrop-filter:blur(6px); }
.video-modal-box{
  position:relative; border-radius:20px; background:var(--cream-2); color:var(--ink);
  box-shadow:0 30px 80px -20px rgba(18,19,15,0.55);
}
.video-thumb-link{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:20px 20px 0 0; background:var(--ink);
}
.video-thumb-link img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.video-thumb-link:hover img{ transform:scale(1.03); }
.video-play{
  position:absolute; inset:0; margin:auto; width:68px; height:68px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:rgba(255,255,255,0.95); color:#C62828;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.5); transition:transform .2s ease;
}
.video-thumb-link:hover .video-play{ transform:scale(1.08); }
.video-modal-body{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:22px 28px 28px; }
.video-modal-body .section-eyebrow{ margin-bottom:0; }
.video-modal-body h2{ font-size:20px; font-weight:800; line-height:1.3; }
.video-modal-note{ font-size:14px; color:var(--muted); max-width:480px; }
.video-modal-btn{ margin-top:10px; }
.video-modal .modal-close{ top:-16px; right:-16px; z-index:2; box-shadow:0 8px 20px -6px rgba(0,0,0,0.45); }
@media (max-width:600px){
  .video-modal .modal-close{ top:-44px; right:0; }
  .video-modal-body{ padding:18px 18px 22px; }
  .video-modal-body h2{ font-size:18px; }
  .video-modal-btn{ width:100%; }
}
.zalo-modal h2{ font-size:22px; font-weight:800; margin-bottom:8px; }
.zalo-modal p{ color:var(--muted); font-size:15px; margin-bottom:22px; }
.modal-actions{ display:flex; flex-direction:column; gap:10px; }
.modal-actions .btn .icon{ color:#229ED9; }
.modal-alt{ display:inline-block; margin-top:16px; font-size:13px; font-weight:600; color:var(--muted); }
.modal-alt:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .navlinks{ gap:20px; }
  .mod-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:960px){
  .navlinks{ display:none; }
  .nav-actions .btn{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .orbit-chips-mobile{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:28px; }
  .orbit-chips-mobile .orbit-chip{ animation:none; box-shadow:none; }
  .stages{ grid-template-columns:1fr; }
  .stage{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  .stage-head{ grid-column:1 / -1; }
  .mod-grid, .related .mod-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kb-count{ display:none; }
  .mod-card.is-soon ~ .mod-card.is-soon{ display:none; }
  .kb-chips{ gap:8px; }
  .chip{ padding:9px 14px; }
  .community-inner{ grid-template-columns:1fr; padding:36px 28px; }
  .article-layout{ grid-template-columns:1fr; gap:40px; }
  .article-aside{ position:static; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid .footer-col:first-child{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .qualify-grid{ grid-template-columns:1fr; }
  .video-row{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:600px){
  :root{ --header-h:64px; }
  .wrap{ padding:0 16px; }
  .logo img{ width:34px; height:34px; }
  .logo-text{ font-size:15px; }
  .logo-text .sub{ letter-spacing:0; }
  .hero{ padding:32px 0 40px; }
  .hero::before, .hero::after{ width:130vw; height:130vw; min-width:0; max-width:none; filter:blur(40px); }
  .hero::after{ opacity:.35; }
  .hero-title{ font-size:32px; }
  .hero-lead{ font-size:15px; }
  .hero-cta .btn{ width:100%; }
  .proof-row{ flex-wrap:nowrap; gap:16px; }
  .proof-row li{ flex-direction:column; align-items:flex-start; gap:0; line-height:1.3; }
  .proof-row li + li{ padding-left:16px; }
  .proof-row b{ font-size:19px; }
  .orbit-chips-mobile{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .orbit-chips-mobile .orbit-chip{ height:44px; }
  .section{ padding:60px 0; }
  .section-head{ margin-bottom:34px; }
  .section-head h2{ font-size:24px; }
  .section-head p{ font-size:15px; }
  .stage{ grid-template-columns:1fr; }
  .timeline{ padding-left:26px; }
  .timeline::before{ left:5px; }
  .timeline-item::before{ left:-26px; width:14px; height:14px; }
  .video-row{ padding:14px; }
  .qualify-card{ padding:24px 22px; }
  .cta-final{ padding:64px 0; }
  .cta-final .btn{ width:100%; }
  .page-hero{ padding:48px 0 40px; }
  .page-hero p{ font-size:15px; }
  .kb-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
  .kb-chips::-webkit-scrollbar{ display:none; }
  .kb-count{ display:none; }
  .mod-grid, .related .mod-grid{ grid-template-columns:1fr; gap:24px; }
  .kb-body{ padding-bottom:60px; }
  .community{ padding:72px 0 64px; }
  .community-inner{ padding:28px 20px; border-radius:20px; }
  .prose{ font-size:16px; }
  .prose h2{ font-size:22px; }
  .prose table{ display:block; overflow-x:auto; }
  .article-layout{ padding-top:36px; padding-bottom:60px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .zalo-fab{ padding:6px; right:14px; bottom:14px; }
  .zalo-fab-text{ display:none; }
}

/* ---------- GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .nav-indicator{ transition:none; }
  .hero::before, .hero::after, .orbit-mini .orbit, .zalo-fab-ic::after, .logo-ring{ animation:none !important; }
  .orbit-mini .planet{ animation:none; transform:rotate(var(--angle)); }
  .orbit-chip{ animation:none; transform:rotate(calc(var(--angle) * -1)); }
}