/* Hệ thiết kế chung KHA V2 (Home, KHA AI 2027, trang ngoài). Rút từ home-2 của Nhựt, hệ màu A2 «A hồng» từ 11/10/2026. Mọi section dùng biến này. */
:root{
  /* nền móng chung (giữ từ bản cũ) */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Dancing Script","Be Vietnam Pro",cursive;
  --yellow:#fecd1f;
  --gold:linear-gradient(135deg,#fff1b8 0%,#f5c542 42%,#d79a1c 70%,#fbe08b 100%);
  --radius:18px; --container:1240px; --gut:56px; --pad-y:clamp(64px,7vw,104px);
  /* ===== HỆ MÀU A2 «A HỒNG» (Mon chốt 11/10/2026): dán nguyên từ kha-v2-trang/nen-hong/tokens-A2.css, sửa ở file đó rồi dán lại ===== */
  /* 1 · thang hồng KHA (hue 356 = đúng hue logo #F41E92) */
  --hong-50:#fff2f7; --hong-100:#ffdeea; --hong-200:#ffbcd7; --hong-300:#ff98c5;
  --hong-400:#ff489e; --hong-500:#f41e92; --hong-600:#ce1e78; --hong-700:#9d0f5b;
  --hong-800:#660a3b; --hong-900:#3a0621;
  /* than hồng sẫm: 0.160 0.032 352 · 0.175 0.040 354 · 0.195 0.048 354 · 0.215 0.055 355 */
  --than-0:#17070f; --than:#1d0812; --than-2:#250a16; --than-3:#2c0d1b;
  --cam:#fa9524; --cam-dam:#ec7c0e; --vang:#fdd343; --tim-bong:var(--hong-800);

  /* 2 · vai trò */
  --nen-sang:#fff8fb; --nen-sang-2:var(--hong-50); --nen-toi:var(--than); --nen-toi-2:var(--than-2);
  --khoi:var(--than-2); --khoi-chu:#ffffff;
  --chu:#16090f; --chu-2:#4d3a43; --chu-3:#85707a;
  --chu-toi:#ffffff; --chu-toi-2:#efd6e1;
  --nhan:var(--hong-600); --nhan-toi:var(--hong-400); --neon:var(--hong-500);
  --vien:#f5d6e3; --vien-toi:rgba(255,72,158,.28);
  --the:#ffffff; --the-toi:var(--than-2);
  /* nút cam: chữ mực #1e0e15 (9,4:1 trên #ffa448, 5,8:1 ở đáy #e2700f), không đặt trên mảng hồng */
  --cta-a:#ffa448; --cta-b:var(--cam-dam); --cta-chu:#1e0e15;
  --em-sang:linear-gradient(90deg in oklch,var(--hong-600),var(--hong-500));
  --em-toi:linear-gradient(90deg in oklch,var(--hong-400),var(--hong-300));

  /* 3 · gán lại biến kha.css: section cũ dùng .kha-s.toi / .lav tự đổi theo */
  --ink:var(--chu); --ink-2:var(--chu-2); --ink-3:var(--chu-3);
  --lav:var(--nen-sang-2); --lav-2:var(--hong-100); --line:var(--vien);
  --violet:var(--hong-600); --violet-2:var(--hong-500); --pink:var(--hong-500);
  --deep:var(--than); --deep-2:var(--than-2); --deep-3:var(--than-3);
  --shadow:0 1px 2px rgba(22,9,15,.05),0 14px 36px rgba(102,10,59,.10);

  /* 4 · công thức nền (chỉ gradient tĩnh + 1 ảnh 11KB) */
  --hat:url("img/hat-nhieu.png");
  /* caro của Hùng nhỏ AI, hồng rõ hơn A (.07 → .11) */
  --caro-toi:repeating-conic-gradient(rgba(255,72,158,.11) 0 25%,transparent 0 50%) 0 0/56px 56px;
  --cham-sang:radial-gradient(circle,rgba(157,15,91,.16) 1.1px,transparent 1.6px) 0 0/22px 22px;
  --ke-toi:linear-gradient(rgba(255,72,158,.15) 1px,transparent 1px) 0 0/100% 64px,linear-gradient(90deg,rgba(255,72,158,.15) 1px,transparent 1px) 0 0/64px 100%;
  /* than nhuốm hồng: dải tối đi từ than-3 (sáng hơn, hồng hơn) về than-0, nội suy oklch */
  --than-nen:linear-gradient(170deg in oklch,var(--than-3),var(--than) 55%,var(--than-0));
  --quang-tren:radial-gradient(70% 55% at 50% 0%,rgba(244,30,146,.30),transparent 72%);
  --quang-goc:radial-gradient(55% 60% at 100% 100%,rgba(206,30,120,.22),transparent 70%);

  --hero-bg:var(--hat),radial-gradient(60% 55% at 80% 15%,rgba(244,30,146,.26),transparent 70%),radial-gradient(55% 50% at 8% 100%,rgba(157,15,91,.34),transparent 70%),var(--than-nen);
  --hero-ke:var(--caro-toi); --hero-ke-mask:radial-gradient(75% 70% at 60% 35%,#000 25%,transparent 78%);
  --hero-fg:var(--chu-toi); --hero-fg2:var(--chu-toi-2); --hero-acc:var(--em-toi); --hero-khoi:transparent; --hero-khoi-clip:none;
  --hero-dong:linear-gradient(100deg,transparent 30%,rgba(255,72,158,.16) 48%,rgba(255,152,197,.22) 50%,rgba(255,72,158,.16) 52%,transparent 70%);
  --hero-dong-anim:nenQuet 11s cubic-bezier(.45,0,.25,1) infinite;

  --so-bg:radial-gradient(50% 80% at 85% 0%,rgba(244,30,146,.16),transparent 70%),linear-gradient(180deg in oklch,var(--than-2),var(--than));
  --so-fg:var(--chu-toi); --so-fg2:var(--chu-toi-2); --so-so:var(--hong-400); --so-ke:var(--ke-toi);
  --so-keo:72px; --so-the:var(--than-3); --so-the-vien:rgba(255,72,158,.40); --so-clip:none; --so-cat:0px;

  --sang-bg:radial-gradient(48% 60% at 100% 0%,rgba(244,30,146,.12),transparent 70%),linear-gradient(180deg in oklch,var(--hong-50),#ffe9f2);
  --sang-ke:var(--cham-sang); --sang-fg:var(--chu); --sang-fg2:var(--chu-2); --sang-acc:var(--em-sang); --sang-chu-nen:rgba(244,30,146,.12);

  --moi-toi:linear-gradient(90deg,transparent,var(--hong-500) 20%,var(--hong-300) 50%,var(--hong-500) 80%,transparent); --moi-toi-h:2px; --moi-toi-bang:none;
  --toi-bg:var(--hat),var(--quang-tren),var(--quang-goc),var(--than-nen);
  --toi-ke:var(--ke-toi); --toi-fg:var(--chu-toi); --toi-fg2:var(--chu-toi-2); --toi-acc:var(--em-toi);
  --toi-dong:linear-gradient(180deg,transparent,rgba(255,72,158,.0) 30%,rgba(255,72,158,.20) 49%,rgba(255,200,226,.55) 50%,transparent 51%) 0 0/100% 220px no-repeat;
  --toi-dong-anim:nenTroi 8s linear infinite;

  --tinh-bg:var(--cham-sang),linear-gradient(180deg in oklch,var(--hong-100),var(--hong-50) 40%,#fff8fb);
  --tinh-fg:var(--chu); --tinh-fg2:var(--chu-2); --tinh-keo:120px;

  --dn-truoc:var(--hong-50); --dn-sau:var(--than); --dn-fg:var(--chu-toi); --dn-fg2:var(--chu-toi-2); --dn-fg-truoc:var(--chu); --dn-fg2-truoc:var(--chu-2);
  --dn-den:conic-gradient(from 180deg at 50% -10%,transparent 160deg,rgba(255,72,158,.18) 175deg,rgba(255,152,197,.22) 180deg,rgba(255,72,158,.18) 185deg,transparent 200deg),var(--quang-goc);
  --dn-the:var(--than-2); --dn-the-vien:rgba(255,72,158,.30); --dn-the-fg:#fff;

  --cta-bg:var(--hat),radial-gradient(90% 70% at 50% 110%,rgba(244,30,146,.55),transparent 70%),radial-gradient(40% 40% at 50% 104%,rgba(255,152,197,.55),transparent 70%),var(--than-nen);
  --cta-ke:var(--caro-toi); --cta-ke-mask:linear-gradient(0deg,#000,transparent 70%);
  --cta-fg:var(--chu-toi); --cta-fg2:var(--chu-toi-2); --cta-acc:var(--em-toi);
  --moi-cta:var(--moi-toi); --moi-cta-h:2px; --bang:none;
}
@media (max-width:1023px){:root{--gut:34px;--pad-y:56px}}
@media (max-width:600px){:root{--gut:16px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--nen-sang);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
.kha-wrap{width:min(100% - 2*var(--gut),var(--container));margin-inline:auto}
.kha-s{position:relative;padding-block:var(--pad-y);overflow:hidden}
/* dải tối A2: than nhuốm hồng + quầng hồng mép trên + quầng góc + lưới hồng mảnh + hạt nhiễu (vẽ 1 lần, không động) */
.kha-s.toi{background:var(--hat),var(--quang-tren),var(--quang-goc),linear-gradient(rgba(255,72,158,.07) 1px,transparent 1px) 0 0/100% 64px,linear-gradient(90deg,rgba(255,72,158,.07) 1px,transparent 1px) 0 0/64px 100%,var(--than-nen);color:#fff}
.kha-s.lav{background:var(--lav)}
.kha-h2{font-size:clamp(28px,3.6vw,48px);line-height:1.22;font-weight:800;margin:0 0 16px;text-wrap:balance}
@media (max-width:1023px){.kha-h2{text-wrap:pretty}}
.kha-h2 em{font-style:normal;background:var(--em-sang);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kha-s.toi .kha-h2 em{background:var(--em-toi);-webkit-background-clip:text;background-clip:text}
.kha-eb{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--lav-2);color:var(--hong-700);font-weight:700;font-size:13px;line-height:1}
.kha-s.toi .kha-eb{background:rgba(255,72,158,.14);color:#fff;box-shadow:0 0 0 1px rgba(255,72,158,.3) inset}
.kha-lead{font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);max-width:46em}
.kha-s.toi .kha-lead{color:var(--chu-toi-2)}
.kha-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:0;font:700 16px/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.kha-btn span{display:block}
.kha-btn.cam{background:linear-gradient(180deg,#ff9d3d,var(--cam));color:var(--cta-chu);box-shadow:0 10px 24px rgba(240,138,36,.35)}
.kha-btn.vien{background:transparent;color:inherit;border:1.5px solid currentColor}
.kha-btn:hover{transform:translateY(-2px)}
.kha-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.kha-hl{background:linear-gradient(transparent 62%,var(--yellow) 62%)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== NÚT KÊU GỌI CÓ CHẤT XÁM (Mon 10/10: «nút CTA trông rất ít chất xám», «nâng cấp thì luôn có hoàn tiền 7 ngày không cần lý do») =====
   Dùng: <div class="kha-cta [giua]">
           <a class="kha-cta-btn" href="..."><span class="t"><b>Dòng chính</b><small>dòng lợi ích phụ</small></span><i class="mui"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></i></a>
           <p class="kha-cta-dam"><svg viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/><path d="M8.5 12l2.5 2.5 4.5-5"/></svg><span><b>Hoàn tiền 7 ngày</b>, không cần lý do</span></p>
         </div>
   Nút nâng cấp: BẮT BUỘC có dòng kha-cta-dam hoàn tiền. Nút học miễn phí: dòng kha-cta-dam ghi «Không nhập thẻ · không giới hạn thời gian». */
.kha-cta{display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}
.kha-cta.giua{align-items:center;text-align:center}
.kha-cta-dam{display:inline-flex;align-items:center;gap:8px;margin:0;font:500 14px/1.3 var(--font);color:var(--ink-2)}
.kha-cta-dam svg{flex:none;width:18px;height:18px;fill:none;stroke:#16a34a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kha-cta-dam b{font-weight:700;color:var(--ink)}
.kha-s.toi .kha-cta-dam{color:var(--chu-toi-2)}.kha-s.toi .kha-cta-dam b{color:#fff}.kha-s.toi .kha-cta-dam svg{stroke:#4ade80}
/* ==ND-BAT== */
/* Hệ nút vé tuyến 9 khâu (concept D, Mon 12/10/2026 22:40: «chỉ thích A với B»). KHÔNG sửa tay ở đây:
   nguồn ~/KHA/content/kha-v2-trang/v2/thiet-ke-nut/d.css, chép bằng ~/KHA/specs/kha-v2/thiet-ke-nut/may/dong_bo_nd.py */
.nd-mini,.nd-ve,.kha-cta-btn.nd{--nd-cam:linear-gradient(180deg,#ffb15c 0%,#f8902a 52%,#e5730f 100%);--nd-giay:#fff4e6;--nd-duc:#e3b48c;--nd-chu:#1e0e15;--nd-nau:#7a3d0c;--nd-moi:#b5560a;--nd-hong:#f41e92}
/* lỗ đục giữa thân và cuống: mỗi bên tự khoét nửa vòng tròn ở 2 góc sát nhau, nền gì cũng khớp */
.nd-mini-than,.nd-than{-webkit-mask:radial-gradient(circle var(--nd-lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--nd-lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.nd-mini-cuong,.nd-cuong{-webkit-mask:radial-gradient(circle var(--nd-lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--nd-lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  background-color:var(--nd-giay);background-image:linear-gradient(var(--nd-duc) 50%,transparent 0);background-size:1.5px 6px;background-repeat:repeat-y;background-position:0 0;
  transform-origin:0 100%;transition:transform .4s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
/* 9 chấm khâu: đã qua hồng, đang ở đậm có vòng, chưa tới mờ */
.nd-9{display:inline-flex;align-items:center;gap:2.5px;position:relative}
.nd-9 i{flex:none;width:4px;height:4px;border-radius:50%;background:rgba(122,61,12,.26)}
.nd-9 i.qua{background:var(--nd-hong)}
.nd-9 i.day{background:var(--nd-chu);box-shadow:0 0 0 1.5px var(--nd-giay),0 0 0 2.5px var(--nd-chu)}
.nd-9.lon{gap:10px}
.nd-9.lon::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2.5px;margin-top:-1.25px;border-radius:2px;background:rgba(30,14,21,.2)}
.nd-9.lon i{position:relative;width:8px;height:8px;background:#e9862a;box-shadow:0 0 0 2px rgba(30,14,21,.32) inset}
.nd-9.lon i.qua{background:var(--nd-hong);box-shadow:none}
.nd-9.lon i.day{width:13px;height:13px;background:var(--nd-chu);box-shadow:0 0 0 2.5px #ffd9ad}
.nd-xoay{display:none;width:14px;height:14px;border-radius:50%;border:2.2px solid rgba(30,14,21,.25);border-top-color:var(--nd-chu);animation:ndXoay .7s linear infinite;flex:none}
@keyframes ndXoay{to{transform:rotate(360deg)}}

/* ---- nút trên menu ---- */
.nd-mini{--nd-lo:5px;position:relative;display:inline-flex;align-items:stretch;height:46px;flex:none;text-decoration:none;color:var(--nd-chu);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 3px 0 var(--nd-moi)) drop-shadow(0 9px 14px rgba(240,138,36,.30));transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .14s}
.nd-mini-than{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:0 13px 0 17px;background:var(--nd-cam);border-radius:12px 0 0 12px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
.nd-mini-than small{display:block;font:600 11.5px/1 var(--font);color:rgba(30,14,21,.72);overflow:hidden;text-overflow:ellipsis;max-width:12em}
.nd-mini-than b{display:flex;align-items:center;gap:7px;font:800 14.5px/1.05 var(--font);letter-spacing:-.005em}
.nd-mini-cuong{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:62px;padding:0 10px 0 11px;border-radius:0 12px 12px 0}
.nd-mini-cuong em{font:800 11px/1 var(--font);font-style:normal;letter-spacing:.05em;color:var(--nd-nau);font-variant-numeric:tabular-nums}
.nd-mini-cuong img{display:block;height:15px;width:auto}
.nd-mini-cuong em s{text-decoration:none}
.nd-mini:hover{transform:translateY(-1px);filter:drop-shadow(0 4px 0 var(--nd-moi)) drop-shadow(0 12px 18px rgba(240,138,36,.38))}
.nd-mini:hover .nd-mini-cuong{transform:rotate(4deg)}
.nd-mini:active,.nd-mini.is-bam{transform:translateY(3px);filter:drop-shadow(0 0 0 var(--nd-moi)) drop-shadow(0 3px 6px rgba(240,138,36,.28))}
.nd-mini:focus-visible,.nd-mini.is-focus{outline:3px solid #fdd343;outline-offset:4px;border-radius:13px}
.nd-mini.dang-tai .nd-mini-cuong{transform:translateX(18px) rotate(14deg);opacity:0}
.nd-mini.dang-tai .nd-xoay,.nd-mini.dang-tai .xoay{display:inline-block}
.nd-mini.nd-pro .nd-mini-cuong em{display:flex}

/* ---- vé (khách lạ, có tên thì gọi tên) ---- */
.nd-ve-o{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:100%}
.nd-ve{--cuong:176px;--nd-lo:10px;display:block;max-width:100%;text-decoration:none;color:var(--nd-chu);border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 5px 0 var(--nd-moi)) drop-shadow(0 16px 22px rgba(240,138,36,.30));transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .14s}
.nd-ve-in{display:grid;grid-template-columns:minmax(0,1fr) var(--cuong);min-height:118px}
.nd-than{text-align:left;background:var(--nd-cam);padding:16px 24px 15px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-radius:16px 0 0 16px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;min-width:0}
.nd-nhan{font:800 11px/1.25 var(--font);letter-spacing:.11em;text-transform:uppercase;color:rgba(30,14,21,.66)}
.nd-chinh{display:flex;align-items:center;gap:10px;min-width:0;font:800 22px/1.15 var(--font);letter-spacing:-.01em;text-wrap:balance}
.nd-chinh .ic{width:22px;height:22px;stroke-width:2.6;transition:transform .25s;flex:none}
.nd-phu{font:600 13.5px/1.35 var(--font);color:rgba(30,14,21,.8);max-width:46ch;text-wrap:pretty}
.nd-tuyen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px}
.nd-tuyen-t{font:700 11.5px/1.2 var(--font);color:rgba(30,14,21,.74)}
.nd-cuong{position:relative;border-radius:0 16px 16px 0;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:7px;background-position:0 0}
.nd-th{border-radius:8px;box-shadow:0 0 0 1px rgba(122,61,12,.15)}
.nd-cuong-t{display:flex;flex-direction:column;align-items:center;gap:2px;font:800 11.5px/1.2 var(--font);color:var(--nd-nau);text-align:center}
.nd-cuong-t span{font-weight:600;opacity:.85}
.nd-ve:hover{transform:translateY(-2px);filter:drop-shadow(0 7px 0 var(--nd-moi)) drop-shadow(0 20px 28px rgba(240,138,36,.4))}
.nd-ve:hover .nd-cuong,.nd-ve.is-hover .nd-cuong{transform:rotate(3deg) translate(2px,-2px)}
.nd-ve.is-hover{transform:translateY(-2px);filter:drop-shadow(0 7px 0 var(--nd-moi)) drop-shadow(0 20px 28px rgba(240,138,36,.4))}
.nd-ve:hover .nd-chinh .ic,.nd-ve.is-hover .nd-chinh .ic{transform:translateX(4px)}
.nd-ve:active,.nd-ve.is-bam{transform:translateY(5px);filter:drop-shadow(0 0 0 var(--nd-moi)) drop-shadow(0 4px 8px rgba(240,138,36,.3))}
.nd-ve:focus-visible,.nd-ve.is-focus{outline:3px solid #fdd343;outline-offset:6px}
.nd-ve.dang-tai .nd-cuong{transform:translate(46px,10px) rotate(12deg);opacity:0}
.nd-ve.dang-tai .nd-chinh .ic{display:none}
.nd-ve.dang-tai .nd-xoay,.nd-ve.dang-tai .xoay{display:inline-block}
.nd-ve.dang-tai .nd-phu{opacity:.6}
.nd-ve-o.nd-lon{align-items:center}
.nd-lon .nd-ve{--cuong:230px;--nd-lo:12px}.nd-lon .nd-ve-in{min-height:140px}.nd-lon .nd-chinh{font-size:28px}.nd-lon .nd-than{padding:22px 30px 20px}
.nd-ngang .nd-ve{filter:drop-shadow(0 5px 0 var(--nd-moi)) drop-shadow(0 12px 18px rgba(206,30,120,.16))}
@media (max-width:600px){
  .nd-ve-o,.nd-ve{width:100%}
  .nd-ve{--cuong:112px;--nd-lo:8px}
  .nd-than{padding:14px 15px 13px;gap:5px}
  .nd-chinh{font-size:18.5px;gap:8px}.nd-chinh .ic{width:19px;height:19px}
  .nd-phu{font-size:12.5px}
  .nd-nhan{font-size:10px;letter-spacing:.08em}
  .nd-9.lon{gap:6px}.nd-9.lon i{width:7px;height:7px}.nd-9.lon i.day{width:11px;height:11px}
  .nd-tuyen-t{font-size:11px}
  .nd-lon .nd-ve{--cuong:118px}.nd-lon .nd-chinh{font-size:20px}.nd-lon .nd-than{padding:16px 17px 15px}
  .nd-cuong{padding:8px}
  .nd-ve.dang-tai .nd-cuong{transform:translate(14px,8px) rotate(8deg)}
  .nd-cuong-t{font-size:10.5px}
  .nd-mini{height:42px}
  .nd-mini-than{padding:0 10px 0 13px;gap:2px}
  .nd-mini-than b{font-size:13.5px}.nd-mini-than small{font-size:10.5px;max-width:8.5em}
  .nd-mini-cuong{min-width:52px;padding:0 7px 0 8px;gap:5px}
  .nd-mini-cuong em{font-size:10px}.nd-mini-cuong em s{display:none}
  .nd-mini .nd-9{gap:1.5px}.nd-mini .nd-9 i{width:3.5px;height:3.5px}
}
@media (max-width:380px){
  .nd-mini{height:40px}
  .nd-mini-than{padding:0 8px 0 11px}
  .nd-mini-than b{font-size:13px;gap:5px}.nd-mini-than small{font-size:10px;max-width:7.5em}
  .nd-mini-cuong{min-width:44px;padding:0 5px 0 6px;gap:4px}
  .nd-mini-cuong em{font-size:9.5px;letter-spacing:.03em}
  .nd-mini .nd-9{gap:1px}.nd-mini .nd-9 i{width:3px;height:3px}
}
@media (prefers-reduced-motion:reduce){.nd-mini,.nd-ve,.nd-mini-cuong,.nd-cuong{transition:none}.nd-xoay{animation-duration:2s}}
/* ---- mọi nút .kha-cta-btn đang có trên trang ngoài V2 thành vé tuyến 9 khâu, CHỈ bằng CSS trên khuôn sẵn có
   <a class="kha-cta-btn"><span class="t"><b/><small/></span><i class="mui"><svg/></i></a>: .t = thân vé (nhãn ::before, vạch 9 khâu ::after),
   i.mui = cuống giấy (FREE / PRO). Chữ nhãn gọi tên do header gắn lên <html>: --nd-nhan (nút học miễn phí), --nd-nhan-up (nút nâng cấp).
   !important vì vài trang tự tô nền/viền nút theo #pg-… (khuôn cũ viên thuốc). ---- */
.kha-cta-btn{--cw:108px;--nd-lo:9px;position:relative;isolation:auto;overflow:visible!important;display:inline-flex!important;align-items:stretch!important;gap:0!important;min-height:98px;padding:0!important;
  border-radius:16px!important;background:none!important;box-shadow:none!important;color:#1e0e15;text-decoration:none;max-width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 4px 0 #b5560a) drop-shadow(0 14px 20px rgba(240,138,36,.30));transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .14s}
.kha-cta-btn::after{content:none!important;animation:none!important}
.kha-cta-btn .t{flex:1 1 auto;min-width:0;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px!important;padding:15px 22px 14px 24px;text-align:left;line-height:1.15;
  background:linear-gradient(180deg,#ffb15c 0%,#f8902a 52%,#e5730f 100%);border-radius:16px 0 0 16px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-mask:radial-gradient(circle var(--nd-lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--nd-lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.kha-cta-btn .t::before{content:var(--nd-nhan,"Vé vào lớp · miễn phí");font:800 10.5px/1.25 var(--font);letter-spacing:.11em;text-transform:uppercase;color:rgba(30,14,21,.66)}
.kha-cta-btn[href*="/learn/upgrade"] .t::before{content:var(--nd-nhan-up,"Thẻ nâng cấp · KHA AI 2027")}
html.nd-co-ten .kha-cta-btn .t::before{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:700;color:rgba(30,14,21,.78)}
.kha-cta-btn .t b{font:800 19px/1.15 var(--font)!important;letter-spacing:-.01em;text-wrap:balance}
.kha-cta-btn .t small{font:600 13px/1.3 var(--font)!important;color:rgba(30,14,21,.8)!important;text-wrap:pretty}
.kha-cta-btn .t::after{content:"Lộ trình 9 khâu · bạn bắt đầu ở khâu 1";display:block;min-height:15px;margin-top:3px;padding-left:126px;font:700 11px/15px var(--font);color:rgba(30,14,21,.72);white-space:nowrap;
  background:
    radial-gradient(circle at 6px 50%,#1e0e15 5.0px,#ffd9ad 5.5px 7.5px,#0000 8.0px) 0 0/14px 100% no-repeat,
    radial-gradient(circle at 19px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/25.2px 100% no-repeat,
    radial-gradient(circle at 32px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/38.2px 100% no-repeat,
    radial-gradient(circle at 45px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/51.2px 100% no-repeat,
    radial-gradient(circle at 58px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/64.2px 100% no-repeat,
    radial-gradient(circle at 71px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/77.2px 100% no-repeat,
    radial-gradient(circle at 84px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/90.2px 100% no-repeat,
    radial-gradient(circle at 97px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/103.2px 100% no-repeat,
    radial-gradient(circle at 110px 50%,#e9862a 2.6px,rgba(30,14,21,.36) 3.0px 4.2px,#0000 4.7px) 0 0/116.2px 100% no-repeat,
    linear-gradient(rgba(30,14,21,.22),rgba(30,14,21,.22)) 6px 50%/104px 2.5px no-repeat}
.kha-cta-btn[href*="/learn/upgrade"] .t::after{content:"PRO mở đủ 9 khâu · máy làm giùm"}
html.kha-pro .kha-cta-btn .t::after{content:"Lộ trình 9 khâu · bạn đã có trọn bộ"}
.kha-cta-btn .mui{flex:none!important;width:var(--cw)!important;height:auto!important;border-radius:0 16px 16px 0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 8px;
  background-color:#fff4e6!important;background-image:linear-gradient(#e3b48c 50%,transparent 0)!important;background-size:1.5px 6px!important;background-repeat:repeat-y!important;background-position:0 0!important;box-shadow:none!important;
  transform-origin:0 100%;transition:transform .4s cubic-bezier(.2,.9,.3,1.2),opacity .3s;
  -webkit-mask:radial-gradient(circle var(--nd-lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--nd-lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--nd-lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.kha-cta-btn .mui svg{display:none!important}
.kha-cta-btn .mui::before{content:"FREE";font:900 17px/1 var(--font);letter-spacing:.06em;color:#7a3d0c}
.kha-cta-btn .mui::after{content:"0đ · mở liền";font:700 10.5px/1.2 var(--font);color:rgba(122,61,12,.85);text-align:center}
.kha-cta-btn[href*="/learn/upgrade"] .mui::before{content:"PRO";padding:4px 9px;border-radius:7px;background:#1e0e15;color:#ffd36b;font-size:14px}
.kha-cta-btn[href*="/learn/upgrade"] .mui::after{content:"giữ giá tới 20/11"}
.kha-cta-btn.nd-da-pro .t::before{content:"Đồng nghiệp PRO · không cần mua lại"}
.kha-cta-btn.nd-da-pro .t::after{content:"Lộ trình 9 khâu · bạn đã có trọn bộ"}
.kha-cta-btn.nd-da-pro .mui::before{content:"PRO";padding:4px 9px;border-radius:7px;background:#1e0e15;color:#ffd36b;font-size:14px}
.kha-cta-btn.nd-da-pro .mui::after{content:"đã giữ giá"}
.nd-mini.nd-pro .nd-mini-cuong em{padding:2px 6px;border-radius:5px;background:#1e0e15;color:#ffd36b;letter-spacing:.08em}
.kha-cta-btn:hover{transform:translateY(-2px)!important;filter:drop-shadow(0 6px 0 #b5560a) drop-shadow(0 18px 26px rgba(240,138,36,.4));box-shadow:none!important}
.kha-cta-btn:hover .mui{transform:rotate(3deg) translate(2px,-2px)!important}
.kha-cta-btn:active{transform:translateY(4px)!important;filter:drop-shadow(0 0 0 #b5560a) drop-shadow(0 4px 8px rgba(240,138,36,.3))}
.kha-cta-btn:focus-visible{outline:3px solid #fdd343!important;outline-offset:5px;border-radius:16px}
.kha-cta-btn.dang-tai .mui{transform:translate(40px,10px) rotate(12deg)!important;opacity:0}
.kha-cta.giua .kha-cta-btn .t{text-align:left}
@media (max-width:600px){
  .kha-cta-btn{--cw:84px;--nd-lo:8px;width:100%;min-height:92px}
  .kha-cta-btn .t{padding:13px 14px 12px 16px;gap:4px!important}
  .kha-cta-btn .t b{font-size:16.5px!important}
  .kha-cta-btn .t small{font-size:12.5px!important}
  .kha-cta-btn .t::before{font-size:9.5px;letter-spacing:.08em}
  html.nd-co-ten .kha-cta-btn .t::before{font-size:11.5px}
  .kha-cta-btn .t::after{padding-left:102px;font-size:10px;background:
    radial-gradient(circle at 6px 50%,#1e0e15 4.5px,#ffd9ad 5px 7px,#0000 7.5px) 0 0/14px 100% no-repeat,
    radial-gradient(circle at 16px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/21.6px 100% no-repeat,
    radial-gradient(circle at 26px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/31.6px 100% no-repeat,
    radial-gradient(circle at 36px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/41.6px 100% no-repeat,
    radial-gradient(circle at 46px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/51.6px 100% no-repeat,
    radial-gradient(circle at 56px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/61.6px 100% no-repeat,
    radial-gradient(circle at 66px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/71.6px 100% no-repeat,
    radial-gradient(circle at 76px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/81.6px 100% no-repeat,
    radial-gradient(circle at 86px 50%,#e9862a 2.0px,rgba(30,14,21,.36) 2.4000000000000004px 3.6px,#0000 4.1px) 0 0/91.6px 100% no-repeat,
    linear-gradient(rgba(30,14,21,.22),rgba(30,14,21,.22)) 6px 50%/80px 2.5px no-repeat}
  .kha-cta-btn .t::after{content:"9 khâu · bắt đầu ở khâu 1";white-space:nowrap}
  .kha-cta-btn[href*="/learn/upgrade"] .t::after{content:"PRO mở đủ 9 khâu"}
  html.kha-pro .kha-cta-btn .t::after,.kha-cta-btn.nd-da-pro .t::after{content:"9 khâu · đã có trọn bộ"}
  .kha-cta-btn .mui::before{font-size:14px}.kha-cta-btn .mui::after{font-size:9.5px}
  .kha-cta-btn.nd-da-pro .mui::before{font-size:12px;padding:3px 7px}
  .kha-cta-btn[href*="/learn/upgrade"] .mui::before{font-size:12px;padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){.kha-cta-btn,.kha-cta-btn .mui{transition:none}}
/* ==ND-HET== */
@media (max-width:600px){.kha-cta{width:100%}}

/* ===== Bộ icon V2 (Hugeicons tạm chọn 11/10/2026, chờ Mon chốt): <svg class="ic"><use href="vendor/icons-v2.svg#ten"/></svg>. Không vẽ icon tay rải rác. Danh sách tên: xem vendor/icons-v2.svg ===== */
.ic{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;color:inherit}
.ic.lg{width:28px;height:28px}.ic.xl{width:36px;height:36px}

/* ===== NỀN ĐỘNG + MỐI NỐI A2 (11/10/2026) =====
   Ngân sách: chỉ animate transform/opacity, mỗi màn tối đa 2 lớp động, lớp động dừng khi ra khỏi màn, reduced-motion đứng yên.
   .kha-ke = lớp hoạ tiết tĩnh, .kha-dong = lớp động (chỉ chạy trong section có .kha-chay). Demo gọi .ke/.dong, ở đây thêm tiền tố kha- vì h03, s12, dong-nghiep đã có lớp .dong/.ke riêng. Script ở footer master gắn .kha-chay khi section vào màn.
   Tương tự .kha-chay chứ không .chay như demo: h02, h12, s15, hoi-dap tự dùng .chay với nghĩa riêng, dùng chung sẽ đè nhau. */
.kha-ke{position:absolute;inset:0;z-index:0;pointer-events:none}
.kha-dong{position:absolute;inset:0 0 0 -40px;z-index:1;pointer-events:none;will-change:transform;animation-play-state:paused!important}
.kha-chay .kha-dong{animation-play-state:running!important}
@keyframes nenQuet{0%{transform:translateX(-80%)}62%,100%{transform:translateX(80%)}}
@keyframes nenTroi{0%{transform:translateY(-220px)}100%{transform:translateY(100%)}}
@keyframes nenBang{from{transform:translateX(0)}to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.kha-dong{animation:none!important;transform:none!important}}
html.dung .kha-dong{animation:none!important}
/* dừng MỌI animation CSS của section khuất màn (kể cả ::before/::after của con) (html.kha-io do script footer gắn; tắt JS thì không dừng gì) */
html.kha-io section:not(.kha-chay) *,html.kha-io section:not(.kha-chay) *::before,html.kha-io section:not(.kha-chay) *::after,html.kha-io section:not(.kha-chay)::before,html.kha-io section:not(.kha-chay)::after{animation-play-state:paused!important}
/* mối nối kiểu A: vạch neon hồng 2px + đèn viền (quầng hồng rọi xuống dải tối). Không dải pha, không blur. */
.moi-neon{position:relative;z-index:4;height:2px;margin:-1px 0;pointer-events:none;background:var(--moi-toi);box-shadow:0 0 18px rgba(244,30,146,.55),0 0 4px rgba(255,152,197,.6)}
.moi-neon.den::after{content:"";position:absolute;left:0;right:0;top:1px;height:min(260px,40vh);background:radial-gradient(60% 100% at 50% 0%,rgba(244,30,146,.26),transparent 72%);mix-blend-mode:screen;pointer-events:none}
.moi-neon.den-len::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:min(200px,32vh);background:radial-gradient(60% 100% at 50% 100%,rgba(244,30,146,.20),transparent 72%);mix-blend-mode:screen;pointer-events:none}
.moi-neon.nhe{opacity:.55}
/* đổi nền theo cuộn (1b cột A): nền tối đặc nằm sẵn trong section, 1 lớp phủ sáng đè lên rồi mờ đi khi mép trên section qua 88% màn (chỉ opacity, compositor lo).
   Script footer tự chèn lớp phủ cho section đứng sau .moi-neon[data-doi-nen]. Tắt JS: không có lớp phủ, section tối đọc được ngay. */
.doi-nen{isolation:isolate}
.doi-nen-phu{position:absolute;inset:0;z-index:-1;background:var(--lav);opacity:1;transition:opacity .6s ease;pointer-events:none}
.doi-nen.qua .doi-nen-phu{opacity:0}
@media (prefers-reduced-motion:reduce){.doi-nen-phu{display:none}}
html.dung .doi-nen-phu{display:none}

/* ===== Nhận người (Mon 12/10/2026): khách chưa từng đăng ký học FREE thì không lộ PRO. Class đặt bởi sections/chung-nhan-nguoi.html.
   data-kdk="an"   ẩn với khách lạ (chữ PRO, giá, +50%, nút Nâng cấp PRO) · data-kdk="hien" chỉ khách lạ thấy (lời mời học miễn phí)
   data-kdk="pro"  chỉ đồng nghiệp PRO thấy. Mặc định (JS tắt, đang tải) = khách lạ. Gắn tự động lúc ráp bởi kha-v2-trang/build/an_pro.py. */
html:not(.kha-dk) [data-kdk="an"]{display:none!important}
html.kha-dk [data-kdk="hien"]{display:none!important}
html:not(.kha-pro) [data-kdk="pro"]{display:none!important}