/* Trang khoá học thử, giao diện ver 2 "Apple × EaseUI" (27/10, người dùng chọn quay về ver 2 cho trang khoá, giữ ít chữ như ver 1).
   Lớp phủ lên course.css: chỉ áp khi body có class k2 ([slug].astro). Nền xám nhạt #F5F5F7, thẻ trắng bo lớn, nút viên thuốc,
   màu nhấn theo landing từng khoá; máy tính có hàng tiêu đề (Đang học thử, tên khoá to, nút Đổi khoá học), sidebar là thẻ
   trắng bên trái, video bo 24px nền đen có lưới trôi, nút phát trắng có nhịp sáng. Bỏ class k2 là về giao diện ver 1. */
body.pg-k1.k2{
  --ink:#1D1D1F;--t2:#424245;--mut:#6E6E73;--ln:#E8E8ED;--ln2:#D2D2D7;--bg:#F5F5F7;--chip:rgba(0,0,0,.045);
  --acc:#1D1D1F;--lnk:#0066CC;--lnk-h:#004E9A;--tint:#F5F5F7;
  --ease:cubic-bezier(.2,.7,.2,1);--bounce:cubic-bezier(.2,.8,.2,1.2);
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased
}
html:has(body.pg-k1.k2){background:#F5F5F7}
/* Màu nhấn theo landing (người dùng chọn 26/10 cho ver 2) */
body.k2[data-k=ai4da]{--acc:#1A5FE8;--tint:#EEF3FD;--lnk:#1A5FE8}
body.k2[data-k=agentic-bi]{--acc:#00785F;--tint:#EEF8F3;--lnk:#00785F}
body.k2[data-k=aip]{--acc:#C2410C;--tint:#FEF4EC;--lnk:#C2410C}

.k2 h1,.k2 h2,.k2 h3{font-weight:600;letter-spacing:-.02em}

/* Nút viên thuốc */
.k2 .k1-acc,.k2 .k1-acc:hover,.k2 .k1-btn{border-radius:980px;font-weight:500}
.k2 .k1-acc{transition:transform .18s ease,filter .18s ease}
.k2 .k1-acc:hover{transform:translateY(-1px);filter:brightness(1.08)}
.k2 .k1-btn{background:var(--ln);border-color:var(--ln)}
.k2 .k1-btn:hover{background:#DEDEE3}

/* Thanh trên kính mờ */
.k2 .k1-hd{background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.k2 .k1-nav a[aria-current=page],.k2 .k1-nav a[aria-current=page]:hover{color:var(--ink)}
.k2 .k1-hd .avatar{background:var(--tint);color:var(--acc);border-color:var(--ln)}

/* Hàng tiêu đề (chỉ máy tính) */
.k2 .k2-ttl{display:none}
.k2 .k2-ttl .ey{font-size:14px;font-weight:600;color:var(--acc)}
.k2 .k2-pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.k2 .k2-pick h1{font-size:32px;line-height:1.15;margin:0}
.k2 .k1-csw-b{background:#fff;border:1px solid var(--ln);color:var(--acc);font-weight:500}
.k2 .k1-csw-b:hover{border-color:var(--ln2);background:#fff}
.k2 .k1-csw-m{border-radius:20px;border-color:var(--ln);box-shadow:0 24px 60px rgba(0,0,0,.16)}
.k2 .k1-copt{border-radius:14px;padding:14px}
.k2 .k1-copt.on{background:var(--tint)}

/* Sidebar lộ trình: thẻ trắng, dòng có đường kẻ mảnh */
.k2 .k1-toc{background:#fff;border:0;border-radius:20px}
.k2 .k1-toc-h{background:#fff}
.k2 .k1-tag{background:var(--tint);color:var(--acc);border-radius:980px;font-weight:600}
.k2 .k1-rows{padding:0 8px 8px;gap:0}
.k2 .k1-row{border:0;border-top:1px solid var(--ln);border-radius:12px;padding:14px 12px;background:transparent}
.k2 .k1-row:first-child,.k2 .k1-row.sel,.k2 .k1-row.sel+.k1-row{border-top-color:transparent}
.k2 .k1-row:hover{background:var(--bg)}
.k2 .k1-row.sel{background:var(--tint);border-color:transparent}
.k2 .k1-row.sel .tt{color:var(--acc);font-weight:600}
.k2 .k1-row .tt{font-size:15px}
.k2 .k1-dot{width:26px;height:26px;background:var(--ln);color:var(--ink);font-weight:600}
.k2 .k1-dot.on{background:var(--acc);color:#fff}
.k2 .k1-dot.ok{background:#248A3D}
.k2 .k1-dot.cp{background:#FFF1D6;color:#9A5C00}
.k2 .k1-row.lk .tt{color:var(--mut)}

/* Sidebar ver 2 theo ảnh mẫu (27/10): thẻ Bài học + thẻ Khóa học chính thức; chỉ máy tính, điện thoại giữ ngăn kéo */
.k2 .k2-lh,.k2 .k2-cta,.k2 .k2-du{display:none}
@media (min-width:961px){
  /* Màn thấp: sidebar tự cuộn bên trong để thẻ Khóa học chính thức luôn với tới được (thanh lăn ẩn) */
  /* Sidebar không tự cuộn cả khối: thẻ Khóa học chính thức luôn hiện đủ, danh sách bài học cuộn bên trong khi dài
     (max-height tính theo vị trí thật trong trial.js fitSide) */
  .k2 .k1-toc{background:transparent;border-radius:0;overflow:visible;scrollbar-width:none;display:flex;flex-direction:column;gap:16px}
  .k2 .k1-toc::-webkit-scrollbar{display:none}
  .k2 .k2-cta{flex:none}
  .k2 .k2-card{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden}
  .k2 .k2-card .k2-lh{flex:none}
  .k2 .k2-card .k1-rows{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .k2 .k2-lh{display:flex;align-items:center;gap:16px;padding:20px 20px 12px}
  .k2 .k2-lh svg circle:last-child{transition:stroke-dasharray .6s var(--ease)}
  .k2 .k2-lh span{display:flex;flex-direction:column;gap:2px}
  .k2 .k2-lh b{font-size:17px;font-weight:600;color:var(--ink)}
  .k2 .k2-lh small{font-size:13px;color:var(--mut)}
  .k2 .k1-row{align-items:center}
  .k2 .k2-du{display:block;flex:none;margin-left:auto;font-size:13px;color:var(--mut)}
  .k2 .k1-row.sel .k2-du{color:var(--acc)}
  .k2 .k2-cta{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:20px;background:var(--tint);position:relative;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent),0 10px 30px color-mix(in srgb,var(--acc) 18%,transparent);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  /* Hiệu ứng để khối mua không chìm (người dùng 27/10): viền và bóng màu khoá, nhấc lên khi rê chuột,
     nút có vệt sáng lướt qua mỗi 3,5 giây và nhịp sáng nhẹ quanh nút */
  .k2 .k2-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent),0 16px 40px color-mix(in srgb,var(--acc) 26%,transparent)}
  .k2 .k2-cta .k1-acc{position:relative;overflow:hidden;isolation:isolate;animation:k2glow 2.8s ease-out infinite}
  .k2 .k2-cta .k1-acc::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:k2shine 3.5s ease-in-out infinite}
  @keyframes k2shine{0%,55%{left:-60%}100%{left:130%}}
  @keyframes k2glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
  .k2 .k2-ct{display:flex;align-items:center;gap:14px}
  .k2 .k2-ct img{flex:none;width:112px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#fff}
  .k2 .k2-cp{display:flex;flex-direction:column;gap:2px;min-width:0}
  .k2 .k2-cp .ey{font-size:13px;font-weight:600;color:var(--acc)}
  .k2 .k2-cp b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
  .k2 .k2-cp s{font-size:13px;color:var(--mut)}
  .k2 .k2-cp small{font-size:13px;color:var(--mut);line-height:1.35}
  .k2 .k2-cta .k1-acc{min-height:48px;font-size:15px;font-weight:600}
}

/* Khung video: đen, lưới trôi chậm, ảnh bìa mờ, nút phát trắng có nhịp sáng */
.k2 .k1-stage{border-radius:24px;background-color:#000;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;box-shadow:0 20px 50px rgba(0,0,0,.12);animation:k2drift 20s linear infinite}
@keyframes k2drift{to{background-position:48px 48px,48px 48px}}
.k2 .k1-bg{opacity:.4;filter:blur(14px) saturate(.9);transform:scale(1.1)}
.k2 .k1-bg::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.75))}
.k2 .k1-poster{background-image:none;-webkit-mask-image:none;mask-image:none}
.k2 .k1-pill{border:0;padding:0;font-size:14px;font-weight:400;color:#A1A1A6}
.k2 .k1-layer h3{font-size:40px;line-height:1.1;letter-spacing:-.02em;font-weight:600;color:#F5F5F7}
.k2 .k1-play{width:84px;height:84px;background:#F5F5F7;color:#000;animation:k2pulse 2.4s ease-out infinite}
.k2 .k1-play svg{margin-left:3px}
@keyframes k2pulse{0%{box-shadow:0 0 0 0 rgba(245,245,247,.45)}70%{box-shadow:0 0 0 22px rgba(245,245,247,0)}100%{box-shadow:0 0 0 0 rgba(245,245,247,0)}}
.k2 .k1-resume{color:#A1A1A6}
.k2 .k1-ended{background:rgba(0,0,0,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.k2 .k1-ended .ic{background:var(--acc)}
.k2 .k1-ended h3{font-size:30px}
.k2 .k1-ended .k1-ghost-d{background:rgba(255,255,255,.16);border-color:transparent;color:#F5F5F7}
.k2 .k1-ended .k1-acc{background:#F5F5F7;border-color:#F5F5F7;color:#000}
.k2 .k1-upnext{border-radius:16px;background:rgba(40,40,44,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.12)}

/* Dưới video: không khung, chữ xám Apple; box nội dung trắng bo 18px */
.k2 .k1-info{background:transparent;border:0;border-radius:0;padding:4px 4px 0}
.k2 .k1-info .meta{color:var(--mut)}
.k2 .k1-info h1{font-size:24px;line-height:1.2;letter-spacing:-.015em}
.k2 .k1-info .desc{color:var(--mut)}
.k2 .k1-ptb{border-radius:980px;border-color:var(--ln);color:var(--acc);font-weight:500}
.k2 .k1-pt{background:#fff;border-radius:18px;padding:20px}
.k2 .k1-pt>svg{color:var(--acc)}

/* Phần chi tiết khoá */
.k2 .k1-pull:hover{background:#fff}
.k2 .k1-det{border:0;border-radius:28px}
.k2 .k1-det .h h2{font-weight:600;letter-spacing:-.025em}
.k2 .k1-tl .dt{background:var(--acc);box-shadow:0 0 0 6px #fff,0 0 0 7px var(--ln)}
.k2 .k1-tl li::before{background:var(--ln2)}
.k2 .k1-tl .cd{border-radius:18px}
.k2 .k1-tl .n{color:var(--acc)}
.k2 .k1-shots img,.k2 .k1-shots video{border-radius:14px}
.k2 .k1-shots .tg{color:var(--acc)}
.k2 .k1-tr div{border-radius:14px}
.k2 .k1-price{background:#1D1D1F;border-radius:22px}
/* Box giá phần chi tiết (27/10, người dùng: đen trông "AI"): giống thẻ mua ở sidebar, nền nhạt màu khoá, viền và bóng màu
   khoá, nhấc lên khi rê chuột, nút có vệt sáng và nhịp sáng */
.k2 .k1-det .k1-price{background:var(--tint);color:var(--ink);position:relative;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent),0 10px 30px color-mix(in srgb,var(--acc) 18%,transparent);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.k2 .k1-det .k1-price:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent),0 16px 40px color-mix(in srgb,var(--acc) 26%,transparent)}
.k2 .k1-det .k1-price .p b{color:var(--ink)}
.k2 .k1-det .k1-price .p s,.k2 .k1-det .k1-price dt{color:var(--mut)}
.k2 .k1-det .k1-price dd{color:var(--ink)}
.k2 .k1-det .k1-price dl{border-color:color-mix(in srgb,var(--acc) 18%,transparent)}
.k2 .k1-det .k1-price .lks a{color:var(--acc)}
.k2 .k1-det .k1-price .k1-acc{position:relative;overflow:hidden;isolation:isolate;animation:k2glow 2.8s ease-out infinite}
.k2 .k1-det .k1-price .k1-acc::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:k2shine 3.5s ease-in-out infinite}
@keyframes k2shine{0%,55%{left:-60%}100%{left:130%}}
@keyframes k2glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* Nút liên hệ nổi (ContactFab): chữ Inter như trang học thử; điện thoại trang khoá nâng lên trên thanh mua dính đáy */
.tfa-ct{--tfa-ct-face:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
@media (max-width:960px){body.pg-k1:has(#mbar:not([hidden])) .tfa-ct{--tfa-ct-bottom:88px}}
.k2 .k1-commit div{border-radius:14px}
.k2 .k1-commit svg{color:var(--acc)}
.k2 .k1-faq,.k2 .k1-faq details{border-color:var(--ln2)}
.k2 .k1-ft{background:#fff;border-top-color:var(--ln)}

/* Máy tính: khung giữa tối đa 1280px, hàng tiêu đề trên cùng, sidebar thẻ trắng bên trái dính khi cuộn */
@media (min-width:961px){
  .k2 .k1-lay{grid-template-columns:clamp(300px,26vw,360px) minmax(0,1fr);gap:24px;max-width:1280px;margin:0 auto;padding:32px 24px 24px}
  .k2 .k2-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:8px;grid-column:1/-1;position:relative;z-index:20}
  .k2 .k1-toc{position:sticky;top:calc(var(--hd) + 24px);height:auto;max-height:calc(100vh - var(--hd) - 48px);border:0}
  .k2 .k1-toc-h{display:none}
  .k2 .k1-rows{padding-top:8px}
  /* Video và nội dung vừa một màn (người dùng 27/10): bề rộng video tính theo chiều cao màn còn lại sau thanh trên, hàng
     tiêu đề và phần chữ dưới video (khoảng 400px), tỉ lệ 16:9; ít nhất 480px; căn giữa vùng bên phải */
  .k2 .k1-mid{width:min(100%,max(480px,calc((100vh - 400px) * 16 / 9)));max-width:none;justify-self:center;margin:0;gap:20px}
  .k2 #more{width:min(1232px,calc(100% - 48px))}
}
/* Màn thấp (laptop 13 inch, cửa sổ nhỏ): thu khoảng cách để video và chữ nằm gọn một màn */
@media (min-width:961px) and (max-height:860px){
  .k2 .k1-lay{padding-top:20px;gap:16px 20px}
  .k2 .k2-ttl{gap:4px}
  .k2 .k2-pick h1{font-size:26px}
  .k2 .k1-mid{width:min(100%,max(480px,calc((100vh - 340px) * 16 / 9)));gap:12px}
  .k2 .k1-info{gap:10px;padding-top:0}
  .k2 .k1-info h1{font-size:21px}
  .k2 .k1-layer h3{font-size:30px}
  .k2 .k1-play{width:72px;height:72px}
}
@media (min-width:961px) and (max-width:1180px){
  .k2 .k2-pick h1{font-size:26px}
  .k2 .k1-layer h3{font-size:30px}
}
@media (min-width:1600px){
  .k2 .k1-lay{max-width:1440px}
  .k2 #more{width:min(1392px,calc(100% - 48px))}
}

/* Điện thoại: giữ bố cục ver 1 (tên khoá trên video, ngăn kéo lộ trình, thanh mua đen), đổi màu và bo theo ver 2 */
@media (max-width:960px){
  .k2 .k1-toc{border-radius:0}
  .k2 .k1-stage{border-radius:18px}
  .k2 .k1-layer h3{font-size:22px}
  .k2 .k1-play{width:64px;height:64px}
  .k2 .k1-info h1{font-size:19px}
  .k2 .k1-ltb button{border-radius:980px;border-color:var(--ln)}
  .k2 .k1-ltb .k1-csw-b{background:#fff;color:var(--acc)}
  .k2 .mbar{background:rgba(29,29,31,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .k2 .mbar .btn-buy{border-radius:980px;background:var(--acc);border-color:var(--acc)}
}
@media (max-width:640px){
  .k2 .k1-layer h3{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .k2 .k1-stage,.k2 .k1-play,.k2 .k2-cta .k1-acc,.k2 .k2-cta .k1-acc::after,.k2 .k1-det .k1-price .k1-acc,.k2 .k1-det .k1-price .k1-acc::after{animation:none}
}

/* Trang tài khoản theo ver 2 (27/10): thẻ trắng bo 24px không viền, nút viên thuốc màu mực, link xanh Apple */
.k2 .acct{--c-emerald:#1D1D1F;--c-emerald-text:#0066CC;--c-emerald-tint:#F5F5F7;--c-emerald-ring:rgba(0,102,204,.18);--c-line:#D2D2D7}
.k2 .acct .card{border:0;border-radius:24px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.06);padding:28px 32px}
.k2 .acct .acct-head h1{font-size:40px;font-weight:600;letter-spacing:-.025em}
.k2 .acct .acct-head p{color:var(--mut)}
.k2 .acct .card-head h2{font-weight:600;letter-spacing:-.015em}
.k2 .acct .back{color:#0066CC}
.k2 .acct .field input{border-radius:12px;border-color:#D2D2D7;font-size:16px}
.k2 .acct .field input:focus{border-color:#0066CC;box-shadow:0 0 0 4px rgba(0,102,204,.15)}
.k2 .acct .btn-primary,.k2 .acct .btn-primary:hover{background:#1D1D1F;color:#fff;border-radius:980px;font-weight:500;filter:none}
.k2 .acct .btn-primary:hover{background:#000}
.k2 .acct .btn-ghost{border-radius:980px}
.k2 .acct .sessions{border-radius:14px;background:#F5F5F7}
.k2 .acct svg[stroke="#00806A"],.k2 .acct svg[stroke="#1D4ED8"]{stroke:#1D1D1F}
@media (max-width:700px){.k2 .acct .card{padding:22px 20px;border-radius:20px}.k2 .acct .acct-head h1{font-size:30px}}