/* Trang khoá học thử, bố cục ver 1 (27/10). Chuyển từ prototype working/tfa-redesign/hocthu-v1/hoc-thu.html người dùng duyệt:
   thanh trên trắng có hàng tab khoá; sidebar lộ trình là một thanh dài dính dưới thanh trên (hết khi cuộn tới phần chi tiết);
   giữa là video (ảnh bìa mờ, tối, lưới kẻ) và nội dung phần đang xem; phải là khối mua có ảnh khoá; cuối trang là phần
   chi tiết khoá gập, bấm tay nắm hoặc kéo tiếp ở đáy trang thì sổ ra. Mọi luật nằm dưới body.pg-k1 (trial.css giữ
   nguyên cho các trang khác; luật cũ của trang khoá dùng .pg-khoa nên không còn áp vào). */
body.pg-k1{
  --ink:#0B1220;--t2:#334155;--mut:#566070;--mut-d:#9FB3D1;--soft-d:#C9D3E3;
  --ln:#E5E7EB;--ln2:#D5DAE1;--bg:#F6F7F9;--chip:#F1F3F6;--track:#EEF0F3;
  --acc:#2563EB;--lnk:#1D4ED8;--lnk-h:#1E40AF;--tint:#EEF4FF;--ok:#0E8A5F;
  --hd:69px;--sbw:clamp(320px,25vw,480px);
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5
}
html:has(body.pg-k1){background:var(--bg)}
.pg-k1 h1,.pg-k1 h2,.pg-k1 h3{color:var(--ink);letter-spacing:-.01em;line-height:1.3}
/* Màu link chung: :where giữ độ ưu tiên thấp để tab khoá, nút, link trong khối tối tự đặt màu riêng */
.pg-k1 :where(a:not(.btn):not(.k1-acc):not(.k1-btn)){color:var(--lnk)}
.pg-k1 :where(a:not(.btn):not(.k1-acc):not(.k1-btn)):hover{color:var(--lnk-h);text-decoration:none}
.pg-k1 a.btn:hover{text-decoration:none}
.pg-k1 :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pg-k1 .loading{padding:48px 24px;text-align:center;color:var(--mut)}

/* Nút */
.pg-k1 .k1-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--ln2);background:#fff;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;cursor:pointer}
.pg-k1 .k1-btn:hover{color:var(--ink);background:#FAFBFC;text-decoration:none}
.pg-k1 .k1-acc,.pg-k1 .k1-acc:hover{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);border:1px solid var(--acc);color:#fff;font-weight:700;border-radius:8px;text-decoration:none}
.pg-k1 .k1-acc:hover{filter:brightness(1.08)}
.pg-k1 .k1-ghost-d,.pg-k1 .k1-ghost-d:hover{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.pg-k1 .k1-block{display:flex;width:100%}
.pg-k1 .k1-lg{min-height:48px;font-size:15px;font-weight:700}
.pg-k1 .k1-sm{min-height:40px;padding:0 16px;font-size:14px}
.pg-k1 .k1-off{display:inline-block;background:#DC2626;color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;margin-left:6px;vertical-align:middle;line-height:1.4}

/* ---------- Thanh trên cùng ---------- */
.pg-k1 .k1-hd{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--ln);padding:12px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.pg-k1 .k1-hd .logo{justify-self:start;display:flex;align-items:center;gap:10px;color:var(--mut)}
.pg-k1 .k1-hd .logo img{height:32px;width:auto;display:block}
.pg-k1 .k1-hd .logo small{font-size:14px;white-space:nowrap}
.pg-k1 .k1-hr{justify-self:end;display:flex;align-items:center;gap:10px}
.pg-k1 .k1-hd .avatar{width:40px;height:40px;border:1px solid var(--ln);background:#EEF2F7;color:var(--ink);font-weight:700;font-size:13px}
.pg-k1 .k1-hd .me{margin:0}
.pg-k1 .k1-hd .me .btn{min-height:40px}

/* Ba mục điều hướng giữa thanh trên (27/10, như bản ver 2): Học thử (trang đang xem), Khóa học, Cộng đồng */
.pg-k1 .k1-nav{justify-self:center;display:flex;gap:2px;padding:4px;border-radius:980px;background:rgba(0,0,0,.045)}
.pg-k1 .k1-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:980px;font-size:14px;font-weight:500;color:#424245;transition:background-color .2s ease,color .2s ease}
.pg-k1 .k1-nav a:hover{background:rgba(0,0,0,.05);color:var(--ink);text-decoration:none}
.pg-k1 .k1-nav a[aria-current=page],.pg-k1 .k1-nav a[aria-current=page]:hover{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10)}

/* Nút Đổi khoá học (27/10, như bản ver 2): viên viền xanh, mở danh sách khoá */
.pg-k1 .k1-csw{position:relative}
.pg-k1 .k1-csw-b{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:980px;border:1px solid #BFD3FB;background:var(--tint);color:var(--lnk);font-size:14px;font-weight:600;transition:background-color .2s ease}
.pg-k1 .k1-csw-b:hover{background:#E1EBFE}
.pg-k1 .k1-csw-b svg{transition:transform .2s ease}
.pg-k1 .k1-csw.open .k1-csw-b svg{transform:rotate(180deg)}
.pg-k1 .k1-csw-m{display:none;position:absolute;z-index:50;top:calc(100% + 8px);left:0;width:min(420px,calc(100vw - 32px));background:#fff;border:1px solid #E8E8ED;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.16);padding:8px;flex-direction:column;gap:4px}
.pg-k1 .k1-csw.open .k1-csw-m{display:flex;animation:k1pop .18s ease}
@keyframes k1pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.pg-k1 .k1-csw-l{padding:8px 10px 4px;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.pg-k1 .k1-copt{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:12px;padding:10px;border-radius:12px;color:var(--ink);transition:background-color .2s ease,transform .2s ease}
.pg-k1 .k1-copt:hover{background:var(--bg);transform:translateX(3px);text-decoration:none;color:var(--ink)}
.pg-k1 .k1-copt.on{background:var(--tint)}
.pg-k1 .k1-copt .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-k1 .k1-copt b{font-size:14px;line-height:1.3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-k1 .k1-copt small{font-size:12px;line-height:1.35;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-k1 .k1-copt svg{color:var(--lnk)}
/* Tên khoá theo màu chủ đạo landing từng khoá, đường kẻ mảnh giữa các khoá (người dùng 27/10) */
.pg-k1 .k1-copt[data-k=ai4da] b{color:#1A5FE8}
.pg-k1 .k1-copt[data-k=agentic-bi] b{color:#00785F}
.pg-k1 .k1-copt[data-k=aip] b{color:#C2410C}
.pg-k1 .k1-copt[data-k=ai4da] svg{color:#1A5FE8}
.pg-k1 .k1-copt[data-k=agentic-bi] svg{color:#00785F}
.pg-k1 .k1-copt[data-k=aip] svg{color:#C2410C}
.pg-k1 .k1-copt+.k1-copt{position:relative}
.pg-k1 .k1-copt+.k1-copt::before{content:"";position:absolute;left:10px;right:10px;top:-3px;height:1px;background:#E5E7EB}
.pg-k1 .k1-toc-h .k1-csw{align-self:flex-start}
.pg-k1 .k1-ltb .k1-csw{margin-left:auto}
.pg-k1 .k1-ltb .k1-csw-b{border-color:#BFD3FB;background:var(--tint);color:var(--lnk);border-radius:980px}
.pg-k1 .k1-ltb .k1-csw-m{left:auto;right:0}
/* Sidebar cuộn được: danh sách khoá mở trong đầu sidebar dính, không bị cắt */
@media (min-width:961px){.pg-k1 .k1-toc:has(.k1-csw.open){overflow:visible;z-index:20}}

/* ---------- Khung 3 cột ---------- */
.pg-k1 .k1-lay{display:flex;flex-direction:column;gap:16px;padding:16px}
.pg-k1 .k1-card{background:#fff;border:1px solid var(--ln);border-radius:12px}

/* Sidebar lộ trình */
.pg-k1 .k1-toc{overflow:hidden;min-width:0}
.pg-k1 .k1-toc-h{padding:20px 20px 16px;border-bottom:1px solid var(--ln);display:flex;flex-direction:column;gap:12px;background:#fff}
.pg-k1 .k1-tag{align-self:flex-start;font-size:12px;font-weight:600;color:var(--lnk);background:var(--tint);padding:4px 8px;border-radius:6px}
.pg-k1 .k1-toc-h h2{font-size:17px;line-height:1.35;font-weight:700}
.pg-k1 .k1-rows{padding:8px;display:flex;flex-direction:column;gap:2px}
.pg-k1 .k1-row{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;border:1px solid transparent;background:#fff;border-radius:10px;padding:12px;color:var(--ink);transition:transform .2s ease,background-color .2s ease}
/* Rê chuột: dòng trượt nhẹ sang phải (người dùng 27/10, giống bản ver 2) */
.pg-k1 .k1-row:hover{background:#FAFBFC;transform:translateX(4px)}
.pg-k1 .k1-row.sel{background:var(--tint);border-color:var(--acc)}
.pg-k1 .k1-row.lk{color:#98A2B3}
.pg-k1 .k1-dot{flex:none;width:28px;height:28px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--track);color:var(--t2)}
.pg-k1 .k1-dot.on{background:var(--acc);color:#fff}
.pg-k1 .k1-dot.ok{background:var(--ok);color:#fff}
.pg-k1 .k1-dot.cp{background:#FFF4DB;color:#9A5C00}
.pg-k1 .k1-row .tx{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;min-height:28px}
.pg-k1 .k1-row .tt{font-size:14px;line-height:1.35;font-weight:500}
.pg-k1 .k1-row.sel .tt{font-weight:700}
.pg-k1 .k1-row .mt{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.pg-k1 .k1-row .mt svg{flex:none}
.pg-k1 .k1-ph{padding:12px 12px 4px;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.pg-k1 .k1-dr-x{display:none}

/* Giữa: video + nội dung */
.pg-k1 .k1-mid{min-width:0;display:flex;flex-direction:column;gap:16px}
.pg-k1 .k1-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0B1220;color:#fff}
.pg-k1 .k1-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(12px) brightness(.4) saturate(.9);transform:scale(1.12)}
.pg-k1 .k1-bg::after{content:"";position:absolute;inset:0;background:rgba(11,18,32,.6)}
.pg-k1 .k1-layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px;text-align:center}
/* Lưới kẻ ngang dọc một màu phủ trên ảnh bìa mờ, mờ dần ra mép (người dùng chọn 27/10) */
.pg-k1 .k1-poster{background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:32px 32px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 45%,#000 55%,rgba(0,0,0,.35) 100%);mask-image:radial-gradient(ellipse 85% 85% at 50% 45%,#000 55%,rgba(0,0,0,.35) 100%)}
.pg-k1 .k1-pill{font-size:13px;font-weight:600;color:var(--soft-d);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:99px}
.pg-k1 .k1-layer h3{font-size:30px;line-height:1.25;font-weight:700;max-width:680px;color:#fff}
.pg-k1 .k1-play{width:76px;height:76px;border-radius:999px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.pg-k1 .k1-play:hover{transform:scale(1.06)}
.pg-k1 .k1-resume{font-size:13px;color:var(--soft-d)}
.pg-k1 .k1-pl{position:absolute;inset:0;background:#000}
.pg-k1 .k1-pl .yt,.pg-k1 .k1-pl iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Gợi ý video tiếp theo trong khung video khi bấm dừng (27/10, kiểu YouTube) */
.pg-k1 .k1-upnext{position:absolute;z-index:3;right:12px;bottom:60px;display:flex;align-items:center;gap:10px;max-width:min(360px,72%);padding:8px 12px 8px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(11,18,32,.9);color:#fff;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:k1pop .2s ease}
.pg-k1 .k1-upnext[hidden]{display:none}
.pg-k1 .k1-upnext:hover{background:rgba(11,18,32,.97)}
.pg-k1 .k1-upnext img{flex:none;width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#1A2233}
.pg-k1 .k1-upnext span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-k1 .k1-upnext small{font-size:11px;font-weight:600;color:#9FB3D1;text-transform:uppercase;letter-spacing:.04em}
.pg-k1 .k1-upnext b{font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-k1 .k1-upnext svg{flex:none;color:#fff}
@media (max-width:640px){
  .pg-k1 .k1-upnext{right:8px;bottom:44px;max-width:80%;padding:6px 10px 6px 6px;gap:8px}
  .pg-k1 .k1-upnext img{width:64px}
  .pg-k1 .k1-upnext b{font-size:13px}
}
.pg-k1 .k1-ended{background:rgba(11,18,32,.92);gap:14px}
.pg-k1 .k1-ended h3{font-size:24px}
.pg-k1 .k1-ended p{color:var(--soft-d);font-size:15px;max-width:480px}
.pg-k1 .k1-ended .ic{width:52px;height:52px;border-radius:99px;background:var(--ok);display:flex;align-items:center;justify-content:center}
.pg-k1 .k1-ended .b{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pg-k1 .k1-perr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;color:#C9D0DA;font-size:14px}
.pg-k1 .k1-perr b{color:#fff;font-size:16px;font-weight:600}
.pg-k1 .k1-ltb{display:none}
.pg-k1 .k1-mcn{display:none}
.pg-k1 .k1-burger{display:none}

.pg-k1 .k1-info{padding:24px;display:flex;flex-direction:column;gap:16px}
.pg-k1 .k1-info .meta{font-size:13px;color:var(--mut)}
.pg-k1 .k1-info h1{font-size:24px;font-weight:700;margin-top:6px}
.pg-k1 .k1-info .desc{font-size:15px;line-height:1.6;color:var(--t2)}
.pg-k1 .k1-info .k1-sep{border:0;border-top:1px solid var(--ln);margin:4px 0 0}
.pg-k1 .k1-info .k1-unit{font-size:17px;font-weight:650;line-height:1.35;letter-spacing:-.01em}
.pg-k1 .k1-info .note{font-size:14px;color:var(--t2);background:var(--bg);padding:12px 14px;border-radius:10px}
.pg-k1 .k1-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg-k1 .k1-pt{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:10px;background:var(--bg);font-size:14px;line-height:1.45}
.pg-k1 .k1-pt:only-child{grid-column:1/-1}
/* Nút mở nội dung chi tiết phần đang xem (box dưới video ẩn sẵn, người dùng 27/10) */
.pg-k1 .k1-ptb{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:980px;border:1px solid var(--ln2);background:#fff;color:var(--ink);font-size:14px;font-weight:600;transition:background-color .2s ease}
.pg-k1 .k1-ptb:hover{background:var(--bg)}
.pg-k1 .k1-ptb svg{transition:transform .2s ease}
.pg-k1 .k1-ptb[aria-expanded=true] svg{transform:rotate(180deg)}
.pg-k1 .k1-pts:not([hidden]){animation:k1pop .2s ease}
.pg-k1 .k1-pt>svg{flex:none;color:var(--ok);margin-top:1px}
.pg-k1 .k1-pt b{display:block;font-weight:600}
.pg-k1 .k1-pt ul{margin:6px 0 0;padding-left:16px;color:var(--mut);font-size:13px}
.pg-k1 .k1-pt .out{margin-top:6px;font-size:13px;color:var(--ink)}
.pg-k1 .k1-pt .out em{font-style:normal;color:var(--mut)}

/* Phải: khối mua */
.pg-k1 .k1-buy{min-width:0;display:flex;flex-direction:column;gap:16px}
/* Thử ẩn cột mua bên phải (người dùng 27/10): nút mua còn ở phần chi tiết, lớp phủ xem xong, thanh mua điện thoại */
.pg-k1 .k1-buy{display:none}
.pg-k1 .k1-note{background:#ECFDF5;border:1px solid #A7E3C9;border-radius:12px;padding:16px;font-size:14px;line-height:1.5;color:#065F46}
.pg-k1 .k1-note strong{display:block;margin-bottom:4px}
.pg-k1 .k1-dk{background:var(--ink);color:#fff;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px}
.pg-k1 .k1-dk img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#1A2233}
.pg-k1 .k1-dk .ey{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-d)}
.pg-k1 .k1-dk .fs{display:flex;gap:10px;font-size:14px;color:#D3DCEA}
.pg-k1 .k1-dk .fs svg{flex:none}
.pg-k1 .k1-dk .pr{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;display:flex;flex-direction:column;gap:4px}
.pg-k1 .k1-dk .pr span{font-size:13px;color:var(--mut-d)}
.pg-k1 .k1-dk .pr b{font-size:26px;font-weight:800;color:#fff}
.pg-k1 .k1-dk .pr s{font-size:14px;color:var(--mut-d)}
/* Badge giảm giá trong khối mua: chữ trắng (luật .pr span ở trên làm chữ xám xanh) */
.pg-k1 .k1-dk .pr .k1-off{color:#fff;font-size:12px}
.pg-k1 .k1-oc{padding:20px;display:flex;flex-direction:column;gap:12px}
.pg-k1 .k1-oc>b{font-size:14px;font-weight:700;color:var(--ink)}
.pg-k1 .k1-oc div{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--t2)}
.pg-k1 .k1-oc svg{flex:none;margin-top:2px;color:var(--lnk)}

/* ---------- Phần chi tiết khoá (gập) ---------- */
.pg-k1 .k1-more{max-width:1440px;margin:0 auto;padding:8px 16px 24px;display:flex;flex-direction:column;align-items:center}
.pg-k1 .k1-pull{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mut);font-size:14px;font-weight:600;padding:12px 24px;border-radius:12px}
.pg-k1 .k1-pull:hover{color:var(--ink);background:#fff}
.pg-k1 .k1-pull .grip{width:44px;height:5px;border-radius:99px;background:#CBD2DC}
.pg-k1 .k1-pull .chev{display:flex;flex-direction:column;align-items:center;animation:k1nudge 1.6s ease-in-out infinite}
.pg-k1 .k1-pull .chev svg+svg{margin-top:-10px;opacity:.5}
.pg-k1 .k1-pull small{font-size:12px;font-weight:500;color:#98A2B3}
@keyframes k1nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.pg-k1 .k1-more.pulling .k1-pull .chev{transform:translateY(8px);animation:none}
.pg-k1 .k1-more.pulling .k1-pull{color:var(--acc)}
.pg-k1 .k1-det-w{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.pg-k1 .k1-det-w>div{overflow:hidden;min-height:0}
.pg-k1 .k1-more.open .k1-det-w{grid-template-rows:1fr}
.pg-k1 .k1-more.open .k1-pull{display:none}
.pg-k1 .k1-det{scroll-margin-top:88px;margin-top:8px;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:28px 18px;display:flex;flex-direction:column;gap:28px;opacity:0;transform:translateY(16px);transition:opacity .45s ease .1s,transform .45s ease .1s}
.pg-k1 .k1-more.open .k1-det{opacity:1;transform:none}
.pg-k1 .k1-det .h{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pg-k1 .k1-det .h h2{font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.02em;max-width:760px}
.pg-k1 .k1-det .h .sub{font-size:16px;line-height:1.5;color:var(--mut);max-width:640px;white-space:pre-line}
/* headline trong trial.json có thể chứa xuống dòng để ngắt câu đúng chỗ (người dùng 27/10); chỗ chữ một dòng tự gộp lại */
.pg-k1 .k1-det .lbl{font-size:13px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.pg-k1 .k1-det .blk{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Lộ trình dạng timeline: dọc trên điện thoại, ngang từ 961px; chấm nằm giữa thẻ, đường nối từ tâm chấm sang tâm chấm kế */
.pg-k1 .k1-tl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.pg-k1 .k1-tl li{min-width:0;position:relative;display:flex;gap:14px}
.pg-k1 .k1-tl li::before{content:"";position:absolute;top:46px;bottom:-8px;left:19px;width:2px;background:rgba(37,99,235,.3)}
.pg-k1 .k1-tl li:last-child::before{display:none}
.pg-k1 .k1-tl .dt{flex:none;position:relative;z-index:1;width:40px;height:40px;border-radius:99px;background:var(--acc);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(37,99,235,.25);transition:transform .25s ease}
.pg-k1 .k1-tl li:hover .dt{transform:scale(1.1)}
.pg-k1 .k1-tl .cd{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;background:var(--bg);flex:1;transition:transform .25s ease,box-shadow .25s ease}
.pg-k1 .k1-tl li:hover .cd{transform:translateY(-3px);box-shadow:0 10px 24px rgba(11,18,32,.08)}
.pg-k1 .k1-tl .n{font-size:12px;font-weight:700;color:var(--lnk)}
.pg-k1 .k1-tl b{font-size:15px;line-height:1.3;color:var(--ink)}
.pg-k1 .k1-tl small{font-size:13px;line-height:1.5;color:var(--mut)}
.pg-k1 .k1-tl li.cpst .dt{background:#F2A900;color:#3D2600;box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(242,169,0,.35);font-size:12px}
.pg-k1 .k1-tl li.cpst .cd{background:#FFF8EB}
.pg-k1 .k1-tl li.cpst .n{color:#9A5C00}
@supports (animation-timeline: view()){
  .pg-k1 .k1-tl li{animation:k1up linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes k1up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pg-k1 .k1-two{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.pg-k1 .k1-two>.a{flex:3 1 460px}
.pg-k1 .k1-two>.b{flex:2 1 300px}
.pg-k1 .k1-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pg-k1 .k1-shots figure{margin:0;display:flex;flex-direction:column;gap:8px}
.pg-k1 .k1-shots img,.pg-k1 .k1-shots video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--bg);display:block}
.pg-k1 .k1-shots figcaption{font-size:12px;line-height:1.4;color:var(--t2)}
.pg-k1 .k1-shots .tg{display:block;font-size:12px;font-weight:700;color:var(--lnk);margin-bottom:2px}
.pg-k1 .k1-shots figure[data-clone]{display:none}
.pg-k1 .k1-tr{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.pg-k1 .k1-tr div{flex:1 1 220px;display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--bg)}
.pg-k1 .k1-tr img{width:48px;height:48px;border-radius:99px;object-fit:cover;flex:none}
.pg-k1 .k1-tr b{display:block;font-size:14px;color:var(--ink)}
.pg-k1 .k1-tr span{font-size:12px;color:var(--mut)}
/* Box giá gọn: không kéo cao theo cột trái */
.pg-k1 .k1-buyrow{align-items:flex-start}
.pg-k1 .k1-buyrow>.b{flex:0 1 340px}
.pg-k1 .k1-price{padding:20px;border-radius:12px;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:12px}
.pg-k1 .k1-price .p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pg-k1 .k1-price .p b{font-size:26px;font-weight:800;color:#fff}
.pg-k1 .k1-price .p s{color:var(--mut-d);font-size:14px}
.pg-k1 .k1-price .k1-lg{min-height:44px;font-size:14px}
.pg-k1 .k1-price dl{margin:0;display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);font-size:13px}
.pg-k1 .k1-price dl div{display:flex;justify-content:space-between;gap:12px}
.pg-k1 .k1-price dt{color:var(--mut-d)}
.pg-k1 .k1-price dd{margin:0;text-align:right}
.pg-k1 .k1-price .lks{display:flex;justify-content:center;font-size:14px}
.pg-k1 .k1-price .lks a{color:#C9D3E3}
.pg-k1 .k1-price .lks a:hover{color:#fff}
.pg-k1 .k1-commit{display:flex;flex-direction:column;gap:8px}
.pg-k1 .k1-commit div{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:10px;background:var(--bg);font-size:14px;color:var(--ink)}
.pg-k1 .k1-commit svg{width:20px;height:20px;flex:none;color:var(--lnk)}
.pg-k1 .k1-faq{display:flex;flex-direction:column;border-top:1px solid var(--ln)}
.pg-k1 .k1-faq details{border-bottom:1px solid var(--ln);padding:16px 4px}
.pg-k1 .k1-faq summary{cursor:pointer;font-size:15px;font-weight:600;line-height:1.4;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.pg-k1 .k1-faq summary::-webkit-details-marker{display:none}
.pg-k1 .k1-faq summary::after{content:"+";font-weight:400;color:var(--mut);font-size:20px;line-height:1;transition:transform .2s}
.pg-k1 .k1-faq details[open] summary::after{transform:rotate(45deg)}
.pg-k1 .k1-faq p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--mut)}
.pg-k1 .k1-close{align-self:center}

/* Khung chờ có hình (27/10): lúc mở trang và lúc đổi sang khoá chưa nạp xong, thay dòng chữ "Đang mở lớp học thử" */
.pg-k1 .k1-sk{display:block;border-radius:6px;background:linear-gradient(90deg,#EEF0F3 25%,#F7F8FA 50%,#EEF0F3 75%);background-size:200% 100%;animation:k1sh 1.2s linear infinite}
.pg-k1 .k1-dk .k1-sk{background:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.07) 75%);background-size:200% 100%}
@keyframes k1sh{from{background-position:100% 0}to{background-position:-100% 0}}
.pg-k1 .k1-sk.t{width:110px;height:22px}
.pg-k1 .k1-sk.h{width:72%;height:22px;margin-top:10px}
.pg-k1 .k1-sk.l{width:100%;height:12px;margin-top:10px}
.pg-k1 .k1-sk.s{width:40%;height:12px;margin-top:8px}
.pg-k1 .k1-sk.c{flex:none;width:28px;height:28px;border-radius:99px}
.pg-k1 .k1-sk.img{width:100%;aspect-ratio:16/9;border-radius:8px}
.pg-k1 .k1-sk.b{height:48px;margin-top:16px;border-radius:8px}
.pg-k1 .k1-stage.k1-sk{border-radius:12px}
.pg-k1 .k1-sk-row{display:flex;gap:12px;padding:12px}
.pg-k1 .k1-sk-row span{flex:1;min-width:0}
.pg-k1 .k1-skel .k1-info{gap:0}

/* Trang tài khoản (27/10): thanh trên CourseTopbar, thẻ trắng viền mảnh, nút và màu nhấn xanh ver 1 */
.pg-k1 .acct{--c-emerald:#2563EB;--c-emerald-text:#1D4ED8;--c-on-emerald:#fff;--c-emerald-tint:#EEF4FF;--c-emerald-ring:rgba(37,99,235,.15);max-width:760px;padding-top:40px}
.pg-k1 .acct .card{border:1px solid var(--ln);box-shadow:none;border-radius:14px}
.pg-k1 .acct .acct-head h1{font-size:30px;font-weight:700;letter-spacing:-.01em}
.pg-k1 .acct .card-head h2{font-weight:700}
.pg-k1 .acct .btn-primary,.pg-k1 .acct .btn-primary:hover{background:#2563EB;color:#fff;font-weight:700}
.pg-k1 .acct .btn-primary:hover{filter:brightness(1.08)}
.pg-k1 .acct .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.pg-k1 .acct svg[stroke="#00806A"]{stroke:#1D4ED8}
.pg-k1 .acct .back{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-bottom:16px}

/* Dòng cuối trang (TrialFooter) */
.pg-k1 .k1-ft{border-top:1px solid var(--ln);background:#fff;padding:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;font-size:12px;color:var(--mut)}
.pg-k1 .k1-ft nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.pg-k1 .k1-ft a,.pg-k1 .k1-ft a:hover{color:var(--t2)}
.pg-k1 .k1-ft a:hover{text-decoration:underline}

/* Thanh mua dính đáy (điện thoại) và popup: giữ của trial.css, đổi nút chính sang màu xanh v1 */
.pg-k1 .mbar .btn-buy,.pg-k1 .dlg .btn-primary{background:var(--acc);color:#fff;border-color:var(--acc)}

/* ---------- Từ 961px: 3 cột, sidebar dài dính dưới thanh trên ---------- */
@media (min-width:961px){
  .pg-k1 .k1-lay{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);align-items:start;gap:24px;padding:0 24px 0 0}
  /* Video và nội dung nằm giữa vùng bên phải sidebar, giữ cỡ như lúc còn cột mua (tối đa 760px) */
  /* Giữ tỉ lệ như trên laptop người dùng gửi 27/10 ở mọi cỡ màn: sidebar khoảng 1/4 bề ngang (320 đến 480px), video và
     nội dung khoảng 85% vùng bên phải (ít nhất 760px, tối đa 1400px), căn giữa; màn lớn toàn màn hình to ra theo tỉ lệ */
  .pg-k1 .k1-mid{width:min(100%,clamp(760px,85%,1400px));justify-self:center}
  .pg-k1 .k1-dr-bg{display:none}
  .pg-k1 .k1-mid,.pg-k1 .k1-buy{margin:24px 0}
  .pg-k1 .k1-toc{position:sticky;top:var(--hd);height:calc(100vh - var(--hd));border:0;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);border-radius:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .pg-k1 .k1-toc-h{position:sticky;top:0;z-index:1}
  .pg-k1 .k1-buy{position:sticky;top:calc(var(--hd) + 16px)}
  .pg-k1 .k1-more{width:90%;max-width:none;padding:32px 0 24px}
  .pg-k1 .k1-det{padding:48px;gap:40px}
  .pg-k1 .k1-det .h h2{font-size:34px}
  .pg-k1 .k1-det .h .sub{font-size:18px}
  .pg-k1 .k1-tl{flex-direction:row;gap:0;margin:8px -8px 0}
  .pg-k1 .k1-tl li{flex:1 1 0;flex-direction:column;padding:0 8px}
  .pg-k1 .k1-tl .dt{align-self:center}
  .pg-k1 .k1-tl li::before{top:19px;bottom:auto;left:calc(50% + 26px);right:calc(-50% + 26px);width:auto;height:2px;background:linear-gradient(90deg,var(--acc),rgba(37,99,235,.35))}
}
/* Laptop 13 inch (961 đến 1366px): gọn hơn; tab khoá đổi sang tên viết tắt dưới 1180px */
@media (min-width:961px) and (max-width:1366px){
  .pg-k1 .k1-lay{gap:16px;padding:0 20px 0 0}
  .pg-k1 .k1-mid,.pg-k1 .k1-buy{margin:16px 0}
  .pg-k1 .k1-buy{top:calc(var(--hd) + 16px)}
  .pg-k1 .k1-layer h3{font-size:24px}
  .pg-k1 .k1-toc-h{padding:16px}
  .pg-k1 .k1-row{padding:10px;gap:10px}
  .pg-k1 .k1-dk{padding:20px}
  .pg-k1 .k1-dk .pr b{font-size:24px}
  .pg-k1 .k1-info{padding:20px}
  .pg-k1 .k1-info h1{font-size:22px}
  .pg-k1 .k1-hd{padding:10px 20px}
}
@media (min-width:961px) and (max-width:1180px){
  .pg-k1 .k1-pts{grid-template-columns:1fr}
}
/* "Khóa học có gì?" từ 961 đến 1536px: carousel thấy 2 ảnh, trượt một chiều sang phải mỗi 3 giây (trial.js) */
@media (min-width:961px) and (max-width:1536px){
  .pg-k1 .k1-buyrow .k1-shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
  .pg-k1 .k1-buyrow .k1-shots::-webkit-scrollbar{display:none}
  .pg-k1 .k1-buyrow .k1-shots figure{flex:0 0 calc(50% - 6px);scroll-snap-align:start}
  .pg-k1 .k1-buyrow .k1-shots figure[data-clone]{display:flex}
  .pg-k1 .k1-shots figcaption{font-size:13px}
}
/* Màn lớn toàn màn hình (từ 1600px, người dùng 27/10): giữ nguyên cỡ chữ, chỉ nới khoảng cách để khung rộng không trống */
@media (min-width:1600px){
  .pg-k1 .k1-nav a{min-height:40px;padding:0 20px}
  .pg-k1 .k1-toc-h{padding:28px 24px 22px;gap:16px}
  .pg-k1 .k1-csw-b{min-height:40px;padding:0 18px}
  .pg-k1 .k1-rows{padding:12px}
  .pg-k1 .k1-row{padding:16px;gap:16px}
  .pg-k1 .k1-rows{gap:6px}
  .pg-k1 .k1-mid{gap:24px}
  .pg-k1 .k1-mid{margin:32px 0}
  .pg-k1 .k1-layer{gap:28px}
  .pg-k1 .k1-info{padding:32px;gap:20px}
  /* Sidebar chữ nhỉnh hơn một chút cho đầy đặn (người dùng 27/10); phần còn lại giữ cỡ chữ */
  .pg-k1 .k1-toc-h h2{font-size:19px}
  .pg-k1 .k1-tag{font-size:13px}
  .pg-k1 .k1-csw-b{font-size:15px}
  .pg-k1 .k1-row .tt{font-size:15.5px}
  .pg-k1 .k1-dot{width:30px;height:30px;font-size:13px}
}
/* Màn lớn: box giá rộng hơn, cao bằng khối ảnh và trainer */
@media (min-width:1537px){
  .pg-k1 .k1-buyrow{align-items:stretch}
  .pg-k1 .k1-buyrow>.b{flex:0 1 440px;display:flex}
  .pg-k1 .k1-price{flex:1;padding:28px;gap:16px;justify-content:space-between}
  .pg-k1 .k1-price .p b{font-size:32px}
  .pg-k1 .k1-price dl{font-size:14px;gap:10px;padding:14px 0}
  .pg-k1 .k1-price .k1-lg{min-height:48px;font-size:15px}
}

/* ---------- Dưới 960px: video lên đầu, lộ trình là ngăn kéo trái mở bằng nút "Lộ trình", thanh mua dính đáy ---------- */
@media (max-width:960px){
  .pg-k1 .k1-hd{display:flex;flex-wrap:wrap;padding:10px 16px}
  .pg-k1 .k1-hr{margin-left:auto}
  /* Điện thoại: nút Đổi khoá học nằm cạnh nút Lộ trình, không lặp trong ngăn kéo */
  .pg-k1 .k1-toc .k1-csw{display:none}
  .pg-k1 .k1-toc{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(360px,88vw);border-radius:0;border:0;overflow-y:auto;transform:translateX(-102%);transition:transform .25s ease;box-shadow:0 0 40px rgba(11,18,32,.25)}
  .pg-k1 .k1-toc.open{transform:none}
  .pg-k1 .k1-dr-bg{position:fixed;inset:0;z-index:55;background:rgba(11,18,32,.42);display:none}
  .pg-k1 .k1-dr-bg.open{display:block}
  .pg-k1 .k1-dr-x{display:flex;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:99px;align-items:center;justify-content:center;background:var(--chip)}
  .pg-k1 .k1-toc-h{padding-right:60px}
  .pg-k1 .k1-ltb{display:flex;align-items:center;gap:10px}
  /* Tên khoá trên video ở điện thoại: to hơn, căn giữa (người dùng 27/10) */
  .pg-k1 .k1-mcn{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:4px 8px 0}
  .pg-k1 .k1-mcn b{font-size:23px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
  .pg-k1 .k1-ltb button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:8px;background:#fff;border:1px solid var(--ln2);font-size:14px;font-weight:600;color:var(--ink)}
  .pg-k1 .k1-ltb span{font-size:13px;color:var(--mut)}
  .pg-k1 .k1-layer h3{font-size:22px}
  .pg-k1 .k1-pts{grid-template-columns:1fr}
  .pg-k1 .k1-shots{grid-template-columns:1fr 1fr}
  .pg-k1 .mbar{display:flex}
  .pg-k1 .k1-ft{padding-bottom:110px}
  /* Thanh mua dính đáy: dòng lịch học, hình thức học trên giá (27/10) */
  /* Thanh mua dính đáy (27/10): nền đen, giá sale đậm trắng, hàng dưới là nút Xem video tiếp theo */
  .pg-k1 .mbar{background:#0B1220;border-top-color:#0B1220;box-shadow:0 -8px 24px rgba(11,18,32,.25)}
  .pg-k1 .mbar .p s,.pg-k1 .mbar .p small{color:#9FB3D1}
  .pg-k1 .mbar .p b{color:#fff;font-weight:800;font-size:21px;letter-spacing:-.01em}
  .pg-k1 .mbar .pill.sale{background:#DC2626;border-color:#DC2626;color:#fff;font-weight:700}
  /* Phần chi tiết: ẩn box giá (đã có thanh mua dưới đáy); "Khóa học có gì?" thấy 1 ảnh, trượt mỗi 2 giây */
  .pg-k1 .k1-buyrow>.b{display:none}
  .pg-k1 .k1-buyrow .k1-shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
  .pg-k1 .k1-buyrow .k1-shots::-webkit-scrollbar{display:none}
  .pg-k1 .k1-buyrow .k1-shots figure{flex:0 0 100%;scroll-snap-align:start}
  .pg-k1 .k1-buyrow .k1-shots figure[data-clone]{display:flex}
  /* Thanh trên: hàng điều hướng chỉ rộng vừa chữ, căn giữa (27/10) */
  .pg-k1 .k1-hd{display:grid;grid-template-columns:1fr auto}
  /* Điện thoại: ba mục điều hướng gom vào nút 3 gạch cạnh avatar, mở thành danh sách thả xuống (người dùng 27/10) */
  .pg-k1 .k1-hd{position:sticky}
  .pg-k1 .k1-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--ln);background:#fff;color:var(--ink)}
  .pg-k1 .k1-hd.navopen .k1-burger{background:var(--bg)}
  .pg-k1 .k1-hd .k1-nav{display:none;position:absolute;top:calc(100% + 6px);right:16px;left:auto;grid-column:auto;grid-row:auto;width:220px;flex-direction:column;gap:2px;padding:6px;border-radius:14px;background:#fff;border:1px solid #E8E8ED;box-shadow:0 18px 48px rgba(0,0,0,.16);z-index:40}
  .pg-k1 .k1-hd.navopen .k1-nav{display:flex;animation:k1pop .18s ease}
  .pg-k1 .k1-hd .k1-nav a{border-radius:10px;min-height:44px;padding:0 14px}
  .pg-k1 .k1-hd .k1-nav a[aria-current=page]{background:var(--tint);box-shadow:none;color:var(--lnk)}
  /* Tên phase, module dưới video nhỏ lại */
  .pg-k1 .k1-info h1{font-size:19px}
  html.dr-lock{overflow:hidden}
}
@media (max-width:640px){
  .pg-k1 .k1-layer{padding:20px;gap:12px}
  .pg-k1 .k1-layer h3{font-size:18px}
  .pg-k1 .k1-play{width:60px;height:60px}
  .pg-k1 .k1-pill{display:none}
  .pg-k1 .k1-info{padding:18px}
  .pg-k1 .k1-hd .logo small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pg-k1 *,.pg-k1 *::before,.pg-k1 *::after{animation:none!important;transition:none!important}
}