/* =====================================================================
   CyberSoft — Thư viện AI miễn phí /mien-phi/ (nạp sau dn.min.css + vibe-code/assets/vc.css)
   Hoạt ảnh chỉ transform / opacity / background-position; tôn trọng giảm chuyển động.
   ===================================================================== */
.trang-mp{--c:#FFB547;--c2:#7C5CFF;background:#F7F8FC}
.trang-mp .khoi.toi,.trang-mp .vc-toi{background:radial-gradient(900px 560px at 85% -10%,rgba(255,181,71,.22),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(124,92,255,.25),transparent 60%),linear-gradient(160deg,#0B1020,#141A33 55%,#0B1020)}
.trang-mp .chu-nau{color:#B5651D}

/* Chữ chạy màu (dùng cả ở menu "Miễn phí") */
.mp-chu-chay{background:linear-gradient(90deg,#FFD447,#FF8A5B,#C77DFF,#5CC8FF,#FFD447);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mp-chay 6s linear infinite}
@keyframes mp-chay{to{background-position:300% 0}}
.mp-nhan-moi{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,212,71,.14);border:1px solid rgba(255,212,71,.4);color:#FFD447;font-size:13px;font-weight:800;letter-spacing:.03em}
.mp-nhan-moi i{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:mp-nhip 1.8s infinite}
@keyframes mp-nhip{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* ---------- Hero toàn màn hình ---------- */
.mp-hero{position:relative;min-height:min(760px,calc(100vh - 90px));display:flex;align-items:center;padding:70px 0 90px;color:#fff;overflow:hidden;
  background:linear-gradient(100deg,rgba(11,16,32,.96) 0%,rgba(11,16,32,.82) 48%,rgba(11,16,32,.45) 100%),var(--nen) center/cover,#0B1020}
.mp-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(transparent,#F7F8FC);pointer-events:none}
.mp-hero-luoi{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.mp-hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.08;margin:18px 0 16px;color:#fff;letter-spacing:-.02em}
.mp-hero p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.78);max-width:600px}
.mp-so{display:grid;grid-template-columns:repeat(4,auto);gap:14px 26px;margin:26px 0 30px;justify-content:start}
.mp-so b{display:block;font-size:30px;font-weight:900;color:#FFD447;line-height:1}.mp-so span{font-size:13px;color:rgba(255,255,255,.65)}
/* Kệ sách 3D bay */
.mp-ke{position:relative;height:520px;perspective:1600px}
.mp-ke-sach{position:absolute;display:block;width:210px;text-decoration:none;animation:mp-bay 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
.mp-ke-sach:nth-child(1){left:36%;top:14%;z-index:5;width:250px}
.mp-ke-sach:nth-child(2){left:4%;top:4%;z-index:3;transform:rotate(-8deg)}
.mp-ke-sach:nth-child(3){right:0;top:0;z-index:2}
.mp-ke-sach:nth-child(4){left:10%;bottom:0;z-index:4}
.mp-ke-sach:nth-child(5){right:4%;bottom:4%;z-index:4}
@keyframes mp-bay{50%{translate:0 -16px}}

/* ---------- Bìa sách 3D ---------- */
.mp-sach{display:block;perspective:1200px}
.mp-sach-trong{position:relative;display:block;transform:perspective(900px) rotateY(-16deg);transition:transform .45s cubic-bezier(.2,.7,.2,1);
  box-shadow:14px 18px 30px -16px rgba(0,0,0,.55);border-radius:3px 8px 8px 3px}
.mp-sach-trong::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;z-index:1;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.18) 60%,transparent)}
.mp-sach-trong img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px 8px 8px 3px}
.mp-gay{position:absolute;left:0;top:0;bottom:0;width:18px;transform:rotateY(90deg) translateZ(-1px);transform-origin:left;background:linear-gradient(90deg,#3A1A10,#7A3A22);border-radius:3px 0 0 3px}
.mp-giay{position:absolute;right:-14px;top:3px;bottom:3px;width:14px;transform:rotateY(80deg);transform-origin:left;background:repeating-linear-gradient(90deg,#fff 0 1px,#E9E4D8 1px 2px)}
.mp-sach-trong::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,.35) 0%,transparent 22%,transparent 70%,rgba(0,0,0,.18));pointer-events:none}
.mp-the-sach:hover .mp-sach-trong,a:hover .mp-sach-trong{transform:perspective(900px) rotateY(-5deg) translateY(-5px)}
.mp-dt{position:relative;display:block;border-radius:22px;overflow:hidden;border:6px solid #0B1020;box-shadow:0 30px 50px -22px rgba(0,0,0,.6);background:#0B1020}
.mp-dt img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.mp-dt-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;background:rgba(255,212,71,.95);color:#0B1020}
.mp-dt-play svg{width:22px;height:22px;margin-left:3px}

/* ---------- Thanh công cụ thư viện ---------- */
.mp-thu-vien{position:relative;z-index:3;padding:10px 0 90px;margin-top:-60px}
.mp-cong-cu{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -40px rgba(11,16,32,.5);border:1px solid rgba(20,26,51,.06)}
.mp-tab{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:#F1F2F8}
.mp-tab button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:800;font-size:14.5px;color:#4A5070}
.mp-tab button svg{width:17px;height:17px}
.mp-tab button.on{background:#141A33;color:#FFD447;box-shadow:0 10px 20px -12px #141A33}
.mp-tim{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:999px;background:#F1F2F8;color:#6B7194}
.mp-tim svg{width:18px;height:18px}
.mp-tim input{all:unset;flex:1;padding:13px 0;font-size:15px;color:#141A33}
.mp-loc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 8px}
.mp-chip-loai{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.mp-chip-loai button{all:unset;cursor:pointer;padding:8px 14px;border-radius:999px;border:1px solid rgba(20,26,51,.12);font-size:13.5px;font-weight:700;color:#2B3050;background:#fff}
.mp-chip-loai button.on{background:#FFD447;border-color:#C8A028;color:#3A2A00}
.mp-loc select{padding:9px 12px;border-radius:12px;border:1px solid rgba(20,26,51,.14);background:#fff;font:600 13.5px Roboto,Arial,sans-serif;color:#2B3050;max-width:200px}
.mp-dem{font-size:13.5px;color:#6B7194;margin:6px 0 16px}
.mp-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mp-the-sach{position:relative;display:flex;flex-direction:column;border-radius:22px;background:#fff;border:1px solid rgba(20,26,51,.07);box-shadow:0 10px 24px -20px rgba(11,16,32,.5);contain:layout paint style;
  overflow:hidden;opacity:0;transform:translateY(18px);animation:mp-len .5s forwards;animation-delay:calc(var(--i) * 40ms)}
@keyframes mp-len{to{opacity:1;transform:none}}
.mp-the-sach .mp-bia-o{display:grid;place-items:center;padding:28px 34px 18px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--mau,#7C5CFF) 30%,#fff),#F4F1EA 70%);cursor:pointer}
.mp-the-sach .mp-bia-o .mp-sach{width:76%}
.mp-the-sach .mp-bia-o{position:relative}
.mp-the-sach .mp-bia-o::after{content:"Xem nhanh";position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);padding:7px 14px;border-radius:999px;background:#141A33;color:#FFD447;
  font-size:12.5px;font-weight:800;white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.mp-the-sach:hover .mp-bia-o::after{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.mp-the-sach .mp-bia-o::after{opacity:1;transform:translate(-50%,0)}}
.mp-the-sach .mp-bia-o .mp-dt{width:56%}
.mp-the-sach.video .mp-bia-o{background:radial-gradient(circle at 50% 30%,#2A1F6B,#0B1020 75%)}
.mp-the-sach .mp-dt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.mp-the-sach.chieu .mp-dt video{opacity:1}
.mp-the-chu{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.mp-the-dau{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mp-loai{padding:3px 9px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#141A33;color:#FFD447}
.mp-loai.video{background:#7C5CFF;color:#fff}.mp-loai.chuyen-de{background:#0E7490;color:#fff}.mp-loai.an-pham{background:#B5651D;color:#fff}
.mp-moi{padding:3px 8px;border-radius:7px;font-size:11px;font-weight:900;background:#FF5C5C;color:#fff}
@keyframes mp-nhay{50%{opacity:.55}}
.mp-the-chu h3{font-size:16.5px;line-height:1.35;color:#141A33;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-the-chu p{font-size:13.5px;line-height:1.55;color:#5B6078;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mp-the-hang{display:flex;gap:6px;flex-wrap:wrap}
.mp-the{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:#F1F2F8;color:#2B3050}
.mp-the.cc{background:#EDE9FE;color:#5B21B6}.mp-the.cn{background:#DBEAFE;color:#1E40AF}.mp-the.pb{background:#FEF3C7;color:#92400E}
.mp-the-chan{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:10px;border-top:1px dashed rgba(20,26,51,.1);font-size:12.5px;color:#6B7194}
.mp-the-chan span{display:inline-flex;align-items:center;gap:5px}.mp-the-chan svg{width:15px;height:15px}
.mp-the-chan a{margin-left:auto;font-weight:800;color:#B5651D;text-decoration:none;white-space:nowrap}
.mp-them-hang{text-align:center;margin-top:30px}
.mp-rong{text-align:center;color:#6B7194;padding:40px 0}

/* ---------- Popup xem nhanh ---------- */
.mp-hop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(5,8,18,.86)}
.mp-hop[hidden]{display:none}
.mp-hop-the{position:relative;width:min(1080px,100%);max-height:92vh;overflow:auto;display:grid;grid-template-columns:300px 1fr;gap:30px;padding:30px;border-radius:26px;background:#fff;
  animation:mp-mo .35s cubic-bezier(.2,.7,.2,1)}
@keyframes mp-mo{from{opacity:0;transform:translateY(20px) scale(.97)}}
.mp-hop-dong{position:absolute;right:14px;top:12px;width:38px;height:38px;border-radius:50%;border:0;background:#F1F2F8;font-size:24px;line-height:1;cursor:pointer}
.mp-hop-trai .mp-sach,.mp-hop-trai .mp-dt{width:100%}
.mp-hop h2{font-size:24px;line-height:1.25;margin:8px 0 10px;color:#141A33}
.mp-hop-mo{font-size:14.5px;line-height:1.6;color:#4A5070}
.mp-hop-toc{columns:2;gap:18px;margin:12px 0;padding:0;list-style:none;font-size:13px;color:#2B3050}
.mp-hop-toc li{break-inside:avoid;padding:4px 0;border-bottom:1px dashed rgba(20,26,51,.08)}
.mp-hop-toc span{color:#B5651D;font-weight:800;margin-right:6px}
.mp-truot{position:relative;margin-top:14px;border-radius:16px;background:#141A33;padding:16px;color:#fff}
.mp-truot-khung{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.mp-truot-khung figure{flex:0 0 46%;margin:0;scroll-snap-align:start}
.mp-truot-khung img{display:block;width:100%;border-radius:8px;box-shadow:0 12px 30px -12px #000}
.mp-truot-khung figcaption{font-size:12px;color:rgba(255,255,255,.65);margin-top:6px;text-align:center}
.mp-truot small{display:block;font-size:12.5px;color:#FFD447;margin-bottom:10px}
.mp-truot video{width:100%;max-height:420px;border-radius:12px;background:#000}

/* ---------- Đăng nhập học viên ---------- */
.mp-dn-khoi{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.mp-dn{padding:28px;border-radius:24px;background:#141A33;color:#fff;box-shadow:0 40px 80px -40px rgba(11,16,32,.8)}
.mp-dn-dau{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.mp-khoa-ic{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:16px;background:linear-gradient(145deg,#FFE58A,#C8A028);color:#1B0906}
.mp-khoa-ic svg{width:24px;height:24px}
.mp-dn-dau b{display:block;font-size:19px;color:#FFD447}.mp-dn-dau small{font-size:13.5px;color:rgba(255,255,255,.72)}
.mp-dn-form,.mp-hvc-form{display:grid;gap:12px}
.mp-dn-form label,.mp-hvc-form label{display:grid;gap:6px;font-size:13px;font-weight:700;color:rgba(255,255,255,.8)}
.mp-dn-form input,.mp-hvc-form input{padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:500 15px Roboto,Arial,sans-serif}
.mp-dn-form input:focus,.mp-hvc-form input:focus{outline:2px solid #FFD447;outline-offset:1px}
.mp-dn-bao{margin:0;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;background:rgba(255,92,92,.15);color:#FFB4B4}
.mp-dn-bao.ok{background:rgba(61,220,132,.15);color:#9BF0C0}
.mp-dn-chua{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:rgba(255,255,255,.7)}
.nut.nho{padding:8px 14px;font-size:13.5px;min-height:0}
.mp-dn-ben{position:relative;height:380px}
.mp-ke-nho{position:absolute;width:190px}
.mp-ke-nho:nth-child(1){left:6%;top:0}.mp-ke-nho:nth-child(2){left:44%;top:6%}.mp-ke-nho:nth-child(3){left:20%;top:40%}.mp-ke-nho:nth-child(4){left:58%;top:46%}

/* ---------- Khoá học liên quan ---------- */
.mp-tab-kh{margin:6px auto 24px;display:flex;width:max-content}
.mp-kh-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mp-kh{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(20,26,51,.07);text-decoration:none;color:inherit;transition:transform .25s;box-shadow:0 20px 40px -34px rgba(11,16,32,.5)}
.mp-kh:hover{transform:translateY(-5px)}
.mp-kh-anh{display:block;aspect-ratio:16/7;overflow:hidden;background:#141A33}
.mp-kh-anh img{display:block;width:100%;height:100%;object-fit:cover}
.mp-kh-anh.logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--c),#141A33)}
.mp-kh-anh.logo img{width:72px;height:72px;object-fit:contain}
.mp-kh-chu{padding:14px 16px 16px}
.mp-kh-chu small{font-size:12px;font-weight:800;color:#B5651D;text-transform:uppercase;letter-spacing:.05em}
.mp-kh-chu b{display:block;font-size:16px;color:#141A33;margin:4px 0}.mp-kh-chu em{font-style:normal;font-size:13.5px;color:#5B6078}

/* ---------- Trang chi tiết ---------- */
.mp-ct-hero{position:relative;padding:60px 0 70px;color:#fff;overflow:hidden;background:#0B1020}
.mp-ct-hero::before{content:"";position:absolute;inset:0;background:var(--nen) center/cover;opacity:.55}
.mp-ct-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,16,32,.95),rgba(11,16,32,.7))}
.mp-ct-luoi{position:relative;z-index:2;display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center}
.mp-ct-bia .mp-sach,.mp-ct-bia .mp-dt{width:100%;max-width:360px}
.mp-ct-bia .mp-dt{max-width:280px;margin:0 auto}
.mp-ct-chu h1{font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin:14px 0 8px;color:#fff}
.mp-ct-phu{font-size:18px;color:#FFD447;font-weight:700;margin:0 0 10px}
.mp-ct-mo{font-size:16px;line-height:1.65;color:rgba(255,255,255,.8)}
.mp-ct-chu .mp-the-hang{margin:16px 0}
.mp-ct-meta{display:grid;grid-template-columns:repeat(5,auto);gap:10px 28px;justify-content:start;margin:16px 0 24px}
.mp-ct-meta dt{font-size:12px;color:rgba(255,255,255,.55)}.mp-ct-meta dd{margin:0;font-weight:800;font-size:15px}
.mp-toc{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mp-toc li{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:#F7F8FC;border:1px solid rgba(20,26,51,.06)}
.mp-toc li>span{font-weight:900;color:#B5651D;font-size:18px}
.mp-toc b{display:block;font-size:14.5px;color:#141A33}.mp-toc small{font-size:12.5px;color:#6B7194}
.mp-xt-hang{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.mp-xt-hang>b{width:100%;font-size:15px;color:#141A33}
.mp-xt{all:unset;cursor:zoom-in;width:150px;text-align:center}
.mp-xt img{display:block;width:100%;border-radius:8px;box-shadow:0 14px 30px -16px rgba(11,16,32,.6);transition:transform .25s}
.mp-xt:hover img{transform:translateY(-4px) rotate(-1deg)}
.mp-xt span{font-size:12px;color:#6B7194}
.mp-lq-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.mp-lq{display:flex;gap:14px;align-items:center;padding:14px;border-radius:18px;background:#fff;text-decoration:none;color:inherit;border:1px solid rgba(20,26,51,.07)}
.mp-lq .mp-sach{flex:0 0 76px}
.mp-lq small{font-size:11.5px;color:#B5651D;font-weight:800}.mp-lq b{display:block;font-size:14px;color:#141A33;line-height:1.35}

/* ---------- Sách lật trang ---------- */
.mp-doc-khoi{padding:70px 0}
.mp-sach-doc{position:relative;user-select:none;-webkit-user-select:none}
.mp-lat{position:relative;margin:0 auto;perspective:2600px}
.mp-trai,.mp-phai{position:absolute;top:0;width:50%;height:100%;background:#fff;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mp-trai{left:0;border-radius:6px 0 0 6px}.mp-phai{right:0;border-radius:0 6px 6px 0}
.mp-trai::after,.mp-phai::after{content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none}
.mp-trai::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.18))}
.mp-phai::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.18))}
.mp-lat img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none}
.mp-la{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.45,.05,.3,1);z-index:5}
.mp-la.phai{left:50%;transform-origin:left center}.mp-la.trai{left:0;transform-origin:right center}
.mp-la>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;overflow:hidden}
.mp-la>.sau{transform:rotateY(180deg)}
.mp-la.phai.lat{transform:rotateY(-180deg)}.mp-la.trai.lat{transform:rotateY(180deg)}
.mp-la>div::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 30%,transparent 70%,rgba(0,0,0,.12));pointer-events:none}
.mp-mot .mp-trai{display:none}.mp-mot .mp-phai{width:100%;left:0;border-radius:6px}
.mp-khoa-trang{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;background:repeating-linear-gradient(135deg,#F7F8FC 0 14px,#EEF0F7 14px 28px);color:#141A33}
.mp-khoa-trang b{display:block;font-size:20px;margin:10px 0 6px}.mp-khoa-trang span{font-size:13.5px;color:#5B6078}
.mp-khoa-trang svg{width:44px;height:44px;color:#B5651D}
.mp-khoa-trang .nut{margin-top:14px}
.mp-dieu-khien{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:22px;color:#fff}
.mp-dieu-khien button{all:unset;cursor:pointer;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:22px}
.mp-dieu-khien button:hover{background:#FFD447;color:#141A33}
.mp-dieu-khien label{display:flex;gap:8px;align-items:center;font-size:14px}
.mp-dieu-khien input{width:64px;padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;text-align:center;font:700 15px Roboto,Arial,sans-serif}
.mp-tieu-doc{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:18px;color:#fff}
.mp-tieu-doc b{font-size:18px}.mp-tieu-doc small{color:#FFD447;font-size:13px}
.mp-dai-trang{display:flex;gap:8px;overflow-x:auto;padding:14px 4px 4px;margin-top:14px}
.mp-dai-trang button{all:unset;cursor:pointer;flex:0 0 58px;height:80px;border-radius:5px;background:#fff center/cover;opacity:.55;outline:2px solid transparent;position:relative}
.mp-dai-trang button.on{opacity:1;outline-color:#FFD447}
.mp-dai-trang button.khoa::after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;background:rgba(20,26,51,.55);border-radius:5px}
.mp-dai-trang button span{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#141A33;background:rgba(255,255,255,.85)}
.mp-video{max-width:960px;margin:0 auto;text-align:center}
.mp-video video{width:100%;max-height:78vh;border-radius:18px;background:#000;box-shadow:0 40px 80px -30px #000}
.mp-video[data-doc="1"] video{width:auto;max-width:100%;height:78vh}
.mp-video-ghi{color:rgba(255,255,255,.75);font-size:14px;margin-top:14px}.mp-video-ghi a{color:#FFD447;font-weight:800}
.mp-doc-dn{max-width:640px;margin:30px auto 0}
.mp-toan-man{position:fixed !important;inset:0;z-index:10001;background:#0B1020;display:flex;flex-direction:column;justify-content:center;padding:20px}

/* ---------- /dangkihvc/ ---------- */
.mp-hvc{min-height:calc(100vh - 90px)}
.mp-hvc .bao{display:flex;justify-content:center}
.mp-hvc-hop{position:relative;z-index:2;width:min(560px,100%);padding:34px;border-radius:26px;background:rgba(20,26,51,.88);border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 100px -40px #000}
.mp-hvc-hop h1{font-size:34px;margin:16px 0 10px}
.mp-hvc-hop p{font-size:15px}
.mp-hvc-form{margin-top:18px}
.mp-hvc-form i{color:#FF8A80;font-style:normal}.mp-hvc-form small{color:rgba(255,255,255,.5);font-weight:500}
.mp-cap-de{color:#FFD447}
.bay{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Menu "Miễn phí (New)" ---------- */
.mn-mien-phi a{font-weight:900 !important}
.mn-mien-phi .mp-chu-chay{font-weight:900}
.mn-mien-phi sup{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:5px;background:#FF3B3B;color:#fff;font-size:9px;font-weight:900;vertical-align:top;animation:mp-nhay 1.2s infinite}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.mp-luoi{grid-template-columns:repeat(3,1fr)}.mp-lq-luoi{grid-template-columns:repeat(2,1fr)}.mp-toc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){
  .mp-hero-luoi,.mp-dn-khoi,.mp-ct-luoi{grid-template-columns:1fr}
  .mp-ke{height:360px;order:-1}.mp-ke-sach{width:150px}.mp-ke-sach:nth-child(1){width:180px}
  .mp-dn-ben{display:none}
  .mp-luoi,.mp-kh-luoi{grid-template-columns:repeat(2,1fr)}
  .mp-hop-the{grid-template-columns:1fr}.mp-hop-trai{max-width:220px;margin:0 auto}
  .mp-ct-bia{max-width:280px;margin:0 auto}
  .mp-ct-meta{grid-template-columns:repeat(2,auto)}
  .mp-so{grid-template-columns:repeat(2,auto)}
}
@media (max-width:620px){
  .mp-luoi{grid-template-columns:1fr 1fr;gap:12px}
  .mp-the-sach .mp-bia-o{padding:18px 16px 12px}
  .mp-the-chu{padding:12px}.mp-the-chu h3{font-size:14.5px}.mp-the-chu p{display:none}
  .mp-the-hang .mp-the:nth-child(n+3){display:none}
  .mp-kh-luoi,.mp-lq-luoi,.mp-toc{grid-template-columns:1fr}
  .mp-loc select{flex:1 1 44%;max-width:none}
  .mp-hop-toc{columns:1}.mp-truot-khung figure{flex-basis:80%}
  .mp-hero{min-height:0;padding-top:30px}
  .mp-cong-cu{padding:10px}.mp-thu-vien .mp-tab{display:flex;width:100%}.mp-thu-vien .mp-tab button{flex:1;justify-content:center;padding:10px 6px;font-size:13.5px;white-space:nowrap}
  .mp-thu-vien .mp-tab button svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mp-chu-chay,.mp-ke-sach,.mp-ke-nho,.mp-moi,.mp-nhan-moi i,.mp-dt-play,.mn-mien-phi sup{animation:none}
  .mp-the-sach{animation:none;opacity:1;transform:none}.mp-la{transition:none}
}

/* ===== Hiệu năng: khối dưới màn hình chỉ vẽ khi cuộn tới; hoạt cảnh hero dừng khi đã cuộn qua ===== */
.trang-mp main>section:not(.mp-hero):not(.mp-thu-vien):not(.mp-ct-hero):not(.mp-doc-khoi){content-visibility:auto;contain-intrinsic-size:auto 900px}
.mp-hero.ngung .mp-ke-sach,.mp-hero.ngung .mp-chu-chay,.mp-hero.ngung .mp-nhan-moi i{animation-play-state:paused}
.mp-ke-sach{will-change:transform}
.mp-the-sach.video:hover .mp-dt-play{animation:vc-nhip 2.2s ease-out infinite}

/* ===== Học viên đã đăng nhập: không còn nút đăng nhập, phần giới thiệu gọn, vào thẳng màn đọc ===== */
.da-dn .an-khi-dn,.da-dn [data-mo-dn],.da-dn .mp-doc-dn{display:none !important}
.da-dn .mp-hero{min-height:0;padding:30px 0 86px}
.da-dn .mp-hero .mp-ke,.da-dn .mp-hero-chu>p,.da-dn .mp-so,.da-dn .mp-hero .nut-hang{display:none}
.da-dn .mp-hero-luoi{grid-template-columns:1fr}
.da-dn .mp-hero h1{font-size:clamp(26px,3vw,36px);margin:10px 0 0}
.da-dn .mp-hero h1 br{display:none}
.da-dn .mp-ct-hero,.da-dn #ben-trong{display:none}
.da-dn .mp-doc-khoi{padding:12px 0 26px;min-height:calc(100vh - 90px)}
.da-dn .mp-doc-khoi .bao{max-width:1680px;padding:0 18px}
.mp-thanh-doc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;color:#fff}
.mp-thanh-doc .mp-ve{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px}
.mp-thanh-doc .mp-ve:hover{background:#FFD447;color:#141A33}
.mp-thanh-doc b{font-size:17px;line-height:1.3;flex:1;min-width:200px}
.mp-thanh-doc small{color:#FFD447;font-size:13px;white-space:nowrap}
.mp-dieu-khien button.chu{width:auto;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:800}
.mp-dieu-khien button.on{background:#FFD447;color:#141A33}
.mp-lat.phong{overflow:visible}
@media (max-width:620px){.mp-thanh-doc b{font-size:15px}.da-dn .mp-doc-khoi .bao{padding:0 8px}}