/* ================================================================
   HIỆU ỨNG CAO CẤP cho bộ "Giấy ngọc" (24/10/2026) — trang nào muốn thì nạp thêm tệp này + hieu-ung-ngoc.js.
   Thầy 24/10: "sao làm hiệu ứng phèn trong khi skill cao cấp". Không dùng cao-cap.css cũ (đánh nhau với cothanh-ds.css, đo 20/10).
   Một điểm nhấn có chủ đích cho mỗi tiết (Tiết 3: mô phỏng AI tuyển dụng) + chuyển động có việc phải làm:
   trồi lên khi cuộn tới · viền sáng chạy quanh câu chốt · ảnh nổi khi rê · số bật ra.
   Máy báo "giảm chuyển động" (máy Thầy, khung xem thử) VẪN chạy, nhưng nhẹ hơn — quyết định 13/10/2026.
   ================================================================ */
@property --goc{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hu-quay{to{--goc:360deg}}
@keyframes hu-bat{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@keyframes hu-dong-dau{0%{transform:rotate(-14deg) scale(1.9);opacity:0}70%{transform:rotate(-8deg) scale(.94);opacity:1}100%{transform:rotate(-8deg) scale(1)}}
@keyframes hu-quet{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

/* ---------- 1. trồi lên khi cuộn tới (lớp do JS gắn — JS hỏng thì trang vẫn hiện đủ) ---------- */
.hu-cho{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.hu-cho.hu-on{opacity:1;transform:none}
.hang li.hu-cho::before,.buoc3 li.hu-cho::before{transform:scale(.4);opacity:0;transition:transform .7s var(--ease) .15s,opacity .4s .15s}
.hang li.hu-on::before,.buoc3 li.hu-on::before{transform:none;opacity:1}
.muc-dau h2{position:relative}

/* ---------- 2. viền sáng chạy quanh câu chốt ---------- */
.dai-chot{position:relative;isolation:isolate}
.dai-chot::before{content:"";position:absolute;inset:-3px;border-radius:27px;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--goc),var(--teal) 0deg,var(--teal-l) 90deg,var(--coral) 180deg,var(--coral-l) 250deg,var(--teal) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:hu-quay 6s linear infinite}
.dai-chot span{display:inline-block}
.dai-chot.hu-on span{animation:hu-bat .9s var(--ease) .35s both}

/* ---------- 3. ảnh nổi khi rê chuột / chạm ---------- */
.vi-du .hinh img,.chot-luoi .hinh img{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.vi-du .hinh:hover img,.chot-luoi .hinh:hover img{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 50px -26px rgba(23,52,50,.6),0 0 0 3px var(--teal-l)}
.dl>div{transition:background .3s,padding .4s var(--ease)}
.dl>div:hover{background:rgba(255,253,248,.7);padding-left:12px}
.buoc3 li{transition:transform .4s var(--ease)}
.buoc3 li:hover{transform:translateY(-6px)}
@media (hover:none){.vi-du .hinh:active img,.chot-luoi .hinh:active img{transform:translateY(-4px)}}

/* ---------- 4. ĐIỂM NHẤN TIẾT 3: mô phỏng AI tuyển dụng ---------- */
.mp{position:relative;isolation:isolate;margin-top:clamp(40px,6vw,64px);padding:clamp(22px,3.6vw,40px);background:var(--white);border-radius:24px;box-shadow:0 2px 0 var(--line),0 24px 44px -32px rgba(23,52,50,.45)}
.mp::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--goc),var(--line) 0deg,var(--teal) 70deg,var(--line) 140deg,var(--line) 220deg,var(--coral) 290deg,var(--line) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hu-quay 9s linear infinite}
.mp-dau{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(16px,4vw,48px);align-items:end}
.mp-dau h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:8px}
.mp-dau p{color:var(--ink-2)}
.mp-chon{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mp-chon button{font:inherit;font-weight:600;font-size:.98rem;min-height:48px;padding:10px 18px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink-2);cursor:pointer;text-align:left;transition:border-color .2s,background .2s,color .2s,transform .25s var(--ease)}
.mp-chon button:hover{transform:translateY(-2px);border-color:var(--teal)}
.mp-chon button[aria-pressed="true"]{border-color:var(--teal-d);background:var(--mint);color:var(--ink)}
.mp-chon small{display:block;font-weight:400;font-size:.88rem;color:var(--ink-3)}
.mp-hoc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line-2)}
.mp-hoc b{font-size:.92rem;letter-spacing:.04em;color:var(--ink-3);font-weight:700}
.mp-cham{display:flex;gap:6px}
.mp-cham i{width:16px;height:16px;border-radius:50%;background:var(--teal);transition:background .5s var(--ease),transform .5s var(--ease)}
.mp-cham i.nu{background:var(--coral)}
.mp-cham i.doi{transform:scale(1.35)}
.mp-chu-cham{font-size:.92rem;color:var(--ink-3)}
.mp-nut{margin-top:20px}
.mp-luoi{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}
.mp-ho{position:relative;overflow:hidden;padding:14px 12px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper);min-height:118px;transition:border-color .3s,background .3s,opacity .4s,transform .4s var(--ease)}
.mp-ho .so{font-size:.82rem;color:var(--ink-3);font-weight:600}
.mp-ho .gt{display:block;margin-top:2px;font-family:var(--serif);font-weight:600;font-size:1.3rem;line-height:1.2}
.mp-ho .nl{display:flex;gap:4px;margin-top:8px}
.mp-ho .nl i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink-3)}
.mp-ho .nl i.co{background:var(--ink);border-color:var(--ink)}
.mp-ho .nl-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mp-ho.dang::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(31,122,112,.18),transparent);animation:hu-quet .45s linear}
.mp-ho .dau{position:absolute;right:8px;bottom:10px;padding:2px 9px;border:2.5px solid currentColor;border-radius:8px;font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;opacity:0}
.mp-ho.chon{border-color:var(--teal);background:var(--mint)}
.mp-ho.chon .dau{color:var(--teal-d);animation:hu-dong-dau .45s var(--ease) both}
.mp-ho.loai{opacity:.62;transform:scale(.97)}
.mp-ho.loai .dau{color:var(--coral-d);animation:hu-dong-dau .45s var(--ease) both}
.mp-kq{margin-top:20px;min-height:3.2em;font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.35;max-width:40em}
.mp-kq strong{color:var(--coral-d)}
.mp-kq.cong-bang strong{color:var(--teal-d)}
.mp-kq.cho-kq{font-family:var(--sans);font-size:1rem;color:var(--ink-3)}
.mp-ghi{margin-top:6px;font-size:.88rem;color:var(--ink-3)}
@media (max-width:820px){.mp-dau{grid-template-columns:1fr}.mp-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- máy báo "giảm chuyển động": vẫn chạy, nhẹ hơn ---------- */
@media (prefers-reduced-motion:reduce){
  .hu-cho{transform:translateY(8px);transition-duration:.5s}
  .dai-chot::before{animation-duration:14s}
  .mp::before{animation-duration:18s}
  .vi-du .hinh:hover img,.chot-luoi .hinh:hover img{transform:translateY(-3px)}
}