/* KTTV đào tạo landing (FB lần 5, 21/10/2026) — chỉ nạp ở page-template/template-dao-tao-landing.php. Tiền tố class: kttv-dl- */

/* ---------- Hero ---------- */
.kttv-dl-hero{position:relative;overflow:hidden;padding:40px 0 0;border-bottom:1px solid var(--line);background:radial-gradient(1100px 520px at 88% -12%,#D9E9F7 0%,rgba(217,233,247,0) 62%),linear-gradient(180deg,#F4F8FC 0%,#fff 100%)}
.kttv-dl-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:end}
.kttv-dl-hero-copy{padding-bottom:64px}
.kttv-dl-hero h1{margin:4px 0 16px;font-size:clamp(34px,4.2vw,58px);line-height:1.08;letter-spacing:-.03em}
.kttv-dl-hero .lead{max-width:56ch;font-size:17px;line-height:1.75;color:var(--body)}
.kttv-dl-ticks{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.kttv-dl-ticks li{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;color:var(--brand-ink)}
.kttv-dl-ticks svg,.kttv-dl-perk-acc li svg{flex:0 0 22px;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--gold);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kttv-dl-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* Ảnh: vòm xanh lồng mờ ảnh lớp học, ảnh tách nền cô Bình đứng trước và nhô lên khỏi vòm. */
.kttv-dl-hero-media{position:relative;height:600px}
.kttv-dl-arch{position:absolute;left:8%;right:4%;bottom:0;height:78%;overflow:hidden;border-radius:320px 320px 0 0;background:linear-gradient(160deg,var(--brand) 0%,var(--navy-d) 100%)}
.kttv-dl-arch img{width:100%;height:100%;object-fit:cover;opacity:.28;mix-blend-mode:luminosity}
.kttv-dl-cut{position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:100%;transform:translateX(-46%);filter:drop-shadow(0 30px 40px rgba(9,30,51,.35))}
.kttv-dl-float{position:absolute;z-index:1;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:#fff;text-decoration:none;box-shadow:0 20px 44px -20px rgba(13,43,71,.5)}
.kttv-dl-float b{display:block;font-size:15px;line-height:1.3;color:var(--brand-ink)}
.kttv-dl-float span{font-size:13px;line-height:1.45;color:var(--muted)}
.kttv-dl-float-name{left:0;bottom:110px}
.kttv-dl-float-team{right:0;top:190px;flex-direction:column;align-items:flex-start;gap:8px;transition:transform .3s var(--ease)}
.kttv-dl-float-team:hover{transform:translateY(-3px)}
.kttv-dl-float-team small{display:block;font-size:13px;line-height:1.45;color:var(--muted)}
.kttv-dl-ava{display:flex}
.kttv-dl-ava img{width:38px;height:38px;margin-left:-10px;border-radius:50%;border:3px solid #fff;object-fit:cover;object-position:50% 20%}
.kttv-dl-ava img:first-child{margin-left:0}
.kttv-dl-float-b{right:6%;bottom:60px;flex-direction:column;align-items:flex-start;gap:2px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-h) 100%)}
.kttv-dl-float-b b{font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--navy-d)}
.kttv-dl-float-b span{font-size:12.5px;font-weight:700;color:var(--navy-d)}
/* Số liệu: lưới 2 cột ngay dưới nút, ngăn bằng đường kẻ. */
.kttv-dl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:18px 32px;margin:30px 0 0;padding:22px 0 0;list-style:none;border-top:1px solid var(--line)}
.kttv-dl-stats b{display:block;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--brand)}
.kttv-dl-stats sup,.kttv-dl-price sup{font-size:.55em;top:-.7em;margin-left:1px}
.kttv-dl-stats span{font-size:13px;color:var(--muted)}

/* ---------- Là gì / phù hợp với ai ---------- */
.kttv-dl-what-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end;margin-bottom:44px}
.kttv-dl-what-head h2{font-size:clamp(30px,3vw,42px);line-height:1.15}
.kttv-dl-what-copy p{margin:14px 0 0;line-height:1.8;color:var(--body)}
.kttv-dl-what-copy p:first-child{margin-top:0}
.kttv-dl-who-title{margin:0 0 18px;font-size:20px;color:var(--brand-ink)}
/* Thẻ đối tượng: ảnh lớp học tràn thẻ, chữ trắng trên nền gradient tối dần xuống dưới. */
.kttv-dl-who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kttv-dl-who-card{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:22px;background:var(--navy-d);color:#fff}
.kttv-dl-who-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.kttv-dl-who-card:hover img{transform:scale(1.05)}
.kttv-dl-who-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,43,71,0) 30%,rgba(13,43,71,.55) 55%,rgba(9,30,51,.95) 100%)}
.kttv-dl-who-card .n{position:absolute;z-index:1;left:18px;top:16px;padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;font-weight:800;letter-spacing:.12em}
.kttv-dl-who-tx{position:absolute;z-index:1;left:20px;right:20px;bottom:20px}
.kttv-dl-who-tx h4{margin:0 0 8px;font-size:18px;line-height:1.3;color:#fff}
.kttv-dl-who-tx p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.84)}
/* "Sau khóa học": dải xanh đậm dưới 4 thẻ. */
.kttv-dl-lam{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:center;margin-top:28px;padding:30px 36px;border-radius:22px;background:linear-gradient(120deg,var(--navy-d),var(--brand-d))}
.kttv-dl-lam b{font-size:22px;line-height:1.3;color:#fff}
.kttv-dl-lam b span{color:var(--gold-h)}
.kttv-dl-lam ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin:0;padding:0;list-style:none}
.kttv-dl-lam li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:500;line-height:1.55;color:#fff}
.kttv-dl-lam svg{flex:0 0 22px;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--gold);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Thẻ khóa học trượt ngang ---------- */
.kttv-dl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.kttv-dl-head .lead{max-width:70ch;margin-top:10px}
.kttv-dl-nav{display:flex;flex:0 0 auto;gap:10px}
.kttv-dl-nav button{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1px solid var(--sky-line);background:#fff;color:var(--brand-ink);transition:background .2s,color .2s,border-color .2s,opacity .2s}
.kttv-dl-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kttv-dl-nav button:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.kttv-dl-nav button:disabled{opacity:.38;cursor:default}
.kttv-dl-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.kttv-dl-filter button{padding:9px 16px;border-radius:100px;border:1px solid var(--sky-line);background:#fff;font-size:14px;font-weight:600;color:var(--brand-ink);transition:background .2s,color .2s,border-color .2s}
.kttv-dl-filter button i{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:4px;padding:0 6px;border-radius:11px;background:var(--brand-w);font-size:12px;font-style:normal;color:var(--brand)}
.kttv-dl-filter button:hover{border-color:var(--brand)}
.kttv-dl-filter button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.kttv-dl-filter button.on i{background:var(--gold);color:var(--navy-d)}
.kttv-dl-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 3.25);column-gap:20px;overflow-x:auto;padding:8px 2px 26px;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.kttv-dl-track::-webkit-scrollbar{display:none}
.kttv-dl-card{display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:start;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px -24px rgba(13,43,71,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kttv-dl-card[hidden]{display:none}
.kttv-dl-card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -24px rgba(13,43,71,.5)}
.kttv-dl-card-top{--c1:#123C63;--c2:#2E86C8;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:16px 20px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
.kttv-dl-card.g-1 .kttv-dl-card-top{--c1:#00477D;--c2:#3A9AD9}
.kttv-dl-card.g-2 .kttv-dl-card-top{--c1:#0E5C3A;--c2:#1FA36B}
.kttv-dl-card.g-3 .kttv-dl-card-top{--c1:#4B2E83;--c2:#8A63D2}
.kttv-dl-code{padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.17);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.kttv-dl-grp{font-size:13px;opacity:.88}
.kttv-dl-tag{margin-left:auto;padding:4px 10px;border-radius:100px;background:var(--gold);font-size:12px;font-weight:700;color:var(--navy-d)}
.kttv-dl-card-body{display:flex;flex:1;flex-direction:column;padding:20px 20px 4px}
.kttv-dl-card h3{min-height:2.7em;margin:0 0 8px;font-size:18.5px;line-height:1.35;color:var(--brand-ink)}
.kttv-dl-note{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted)}
.kttv-dl-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:auto 0 14px;padding-top:14px;border-top:1px dashed var(--line)}
.kttv-dl-price b{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--brand)}
.kttv-dl-price span{font-size:13px;color:var(--muted)}
.kttv-dl-meta{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.kttv-dl-meta li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.kttv-dl-meta svg{flex:0 0 18px;width:18px;height:18px;color:var(--brand)}
.kttv-dl-card-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 20px 20px}
.kttv-dl-card-acts .btn{justify-content:center;padding-left:10px;padding-right:10px;white-space:nowrap}
.kttv-dl-bar{height:4px;margin-top:2px;border-radius:4px;background:var(--line);overflow:hidden}
.kttv-dl-bar span{display:block;width:30%;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--gold));transition:transform .12s linear}

/* ---------- Vì sao chọn: khung ảnh lớn đổi theo lý do đang chọn ---------- */
.kttv-dl-why{background:linear-gradient(180deg,#F4F8FC 0%,#fff 100%)}
.kttv-dl-why-head{max-width:760px}
.kttv-dl-why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start;margin-top:44px}
.kttv-dl-why-media{position:sticky;top:110px;aspect-ratio:4/4.4;overflow:hidden;border-radius:26px;background:var(--sky);box-shadow:0 34px 64px -36px rgba(13,43,71,.6)}
.kttv-dl-why-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.kttv-dl-why-media img.on{opacity:1}
.kttv-dl-why-media img.is-doc,.kttv-dl-why-thumb.is-doc{object-fit:contain;padding:24px;background:#EEF3F8}
.kttv-dl-why-cap{position:absolute;z-index:1;left:18px;bottom:18px;max-width:calc(100% - 36px);padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.94);font-size:13.5px;font-weight:700;color:var(--brand-ink)}
.kttv-dl-why-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding:20px 20px 20px 16px;border-bottom:1px solid var(--line);border-left:3px solid transparent;cursor:pointer;outline:0;transition:background .25s,border-color .25s,box-shadow .25s}
.kttv-dl-why-row:first-child{border-top:1px solid var(--line)}
.kttv-dl-why-row .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--brand-w);color:var(--brand);transition:background .25s,color .25s}
.kttv-dl-why-row .ic svg{width:24px;height:24px}
.kttv-dl-why-row h3{display:flex;align-items:baseline;gap:10px;margin:2px 0 6px;font-size:18px;color:var(--brand-ink)}
.kttv-dl-why-row h3 em{font-size:13px;font-style:normal;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.kttv-dl-why-row p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.kttv-dl-why-row.on,.kttv-dl-why-row:focus-visible{background:#fff;border-left-color:var(--gold);box-shadow:0 18px 36px -28px rgba(13,43,71,.5)}
.kttv-dl-why-row.on .ic{background:linear-gradient(135deg,var(--gold),var(--gold-h));color:var(--navy-d)}
.kttv-dl-why-thumb{display:none}

/* ---------- Quyền lợi học viên: ảnh + 3 nhóm mở/đóng, nền tối ---------- */
.kttv-dl-perk{color:#fff;background:radial-gradient(900px 420px at 92% 0%,rgba(46,134,200,.32),transparent 60%),linear-gradient(160deg,#0D2B47 0%,#123C63 55%,#00477D 100%)}
.kttv-dl-perk h2{color:#fff}
.kttv-dl-perk h2 .kttv-hl{color:var(--gold-h)}
.kttv-dl-perk .eyebrow{color:var(--gold-soft)}
.kttv-dl-perk-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.kttv-dl-perk-media{position:relative;aspect-ratio:4/4.3}
.kttv-dl-perk-media figure{position:absolute;margin:0;overflow:hidden;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.kttv-dl-perk-media img{width:100%;height:100%;object-fit:cover}
.kttv-dl-perk-media .m1{inset:0 18% 18% 0}
.kttv-dl-perk-media .m2{right:0;bottom:0;width:52%;aspect-ratio:4/3;border:6px solid #123C63}
.kttv-dl-perk-media .m2 img{object-position:62% 50%}
.kttv-dl-perk-gift{position:absolute;left:18px;bottom:30%;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold-h));box-shadow:0 16px 30px -14px rgba(0,0,0,.5);font-size:14.5px;font-weight:800;color:var(--navy-d)}
.kttv-dl-perk-gift .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--navy-d);color:var(--gold-h)}
.kttv-dl-perk-gift .ic svg{width:21px;height:21px}
.kttv-dl-perk-acc{display:grid;gap:12px;margin-top:28px}
.kttv-dl-perk-acc details{overflow:hidden;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:background .25s,border-color .25s}
.kttv-dl-perk-acc details[open]{background:rgba(255,255,255,.1);border-color:rgba(219,162,22,.5)}
.kttv-dl-perk-acc summary{display:flex;align-items:center;gap:14px;padding:16px 18px;list-style:none;cursor:pointer}
.kttv-dl-perk-acc summary::-webkit-details-marker{display:none}
.kttv-dl-perk-acc summary em{font-size:13px;font-style:normal;font-weight:800;letter-spacing:.1em;color:var(--gold-soft)}
.kttv-dl-perk-acc summary h3{margin:0;font-size:17px;line-height:1.4;color:#fff}
.kttv-dl-perk-acc summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--gold-h)}
.kttv-dl-perk-acc details[open] summary::after{content:"–"}
.kttv-dl-perk-acc summary:focus-visible{outline:2px solid var(--gold-h);outline-offset:-2px;border-radius:16px}
.kttv-dl-perk-acc ul{display:grid;gap:12px;margin:0;padding:0 18px 18px;list-style:none}
.kttv-dl-perk-acc li{display:flex;gap:12px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.kttv-dl-perk-acc li b{display:block;font-size:15px;color:#fff}
.kttv-dl-perk-acc li svg{margin-top:1px}

/* ---------- Đội ngũ giáo viên ---------- */
/* Slider ngang như thẻ khóa học: ~3,5 thẻ để thấy còn thẻ phía sau. */
.kttv-dl-gv-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 54px) / 3.5);column-gap:18px;overflow-x:auto;padding:8px 2px 26px;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.kttv-dl-gv-track::-webkit-scrollbar{display:none}
.kttv-dl-gv-card{display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:start;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kttv-dl-gv-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(13,43,71,.5)}
.kttv-dl-gv-card figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--sky)}
.kttv-dl-gv-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kttv-dl-gv-card:hover img{transform:scale(1.04)}
.kttv-dl-gv-exp{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:100px;background:var(--gold);font-size:12.5px;font-weight:800;color:var(--navy-d)}
.kttv-dl-gv-tx{padding:16px 16px 20px}
.kttv-dl-gv-tx h3{margin:0 0 2px;font-size:16.5px;color:var(--brand-ink)}
.kttv-dl-gv-tx .role{display:block;margin-bottom:8px;font-size:13px;font-weight:600;line-height:1.4;color:var(--brand)}
.kttv-dl-gv-tx p{font-size:13.5px;line-height:1.65;color:var(--muted)}

/* ---------- Ưu đãi: tự tính học phí + cách thanh toán ---------- */
.kttv-dl-calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);margin-top:40px;overflow:hidden;border-radius:26px;border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(13,43,71,.6)}
.kttv-dl-calc-in{padding:32px 34px;background:#fff}
.kttv-dl-calc-l{display:block;margin-bottom:8px;padding:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#936900}
.kttv-dl-calc select{width:100%;height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:#F7FAFD;font:inherit;font-size:15px;font-weight:600;color:var(--brand-ink)}
.kttv-dl-calc-opts{display:grid;gap:10px;min-width:0;margin:22px 0 0;padding:0;border:0}
.kttv-dl-calc-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.kttv-dl-calc-opt input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--brand)}
.kttv-dl-calc-opt b{display:block;font-size:15px;color:var(--brand-ink)}
.kttv-dl-calc-opt small{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.kttv-dl-calc-opt em{margin-left:auto;padding-left:8px;font-style:normal;font-weight:800;white-space:nowrap;color:#936900}
.kttv-dl-calc-opt:has(input:checked){border-color:var(--gold);background:#FFF8E6}
.kttv-dl-calc-res{display:flex;flex-direction:column;align-items:flex-start;padding:32px 34px;color:#fff;background:linear-gradient(160deg,#0D2B47,#00477D)}
.kttv-dl-calc-lbl{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kttv-dl-calc-old{margin-top:6px;font-size:16px;color:rgba(255,255,255,.55)}
.kttv-dl-calc-new{font-size:clamp(34px,3.6vw,46px);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--gold-h)}
.kttv-dl-calc-save{margin-top:8px;padding:5px 12px;border-radius:100px;background:rgba(219,162,22,.18);font-size:13.5px;font-weight:700;color:var(--gold-soft)}
.kttv-dl-calc-note{margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.6)}
.kttv-dl-calc-tkb{align-self:stretch;margin:22px 0 24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.kttv-dl-calc-tkb h3{margin:0 0 10px;font-size:15px;color:#fff}
.kttv-dl-calc-tkb ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.kttv-dl-calc-tkb li{font-size:14px;line-height:1.55;color:rgba(255,255,255,.8)}
.kttv-dl-calc-tkb b{color:#fff}
.kttv-dl-calc-res .btn{align-self:stretch;justify-content:center;margin-top:auto}
.kttv-dl-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
.kttv-dl-pay-box{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-radius:18px;background:#F5F8FC;border:1px solid var(--line)}
.kttv-dl-pay-box .ic{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:13px;background:var(--brand-w);color:var(--brand)}
.kttv-dl-pay-box .ic svg{width:22px;height:22px}
.kttv-dl-pay-box b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px;font-size:15.5px;color:var(--brand-ink)}
.kttv-dl-pay-box p{margin:0;font-size:14px;line-height:1.6;color:var(--body)}
.kttv-dl-stk{letter-spacing:.06em}
.kttv-dl-copy{padding:4px 12px;border-radius:100px;border:1px solid var(--sky-line);background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer;transition:background .2s,color .2s}
.kttv-dl-copy:hover{border-color:var(--brand)}
.kttv-dl-copy.ok{background:var(--gold);border-color:var(--gold);color:var(--navy-d)}

/* ---------- 4 bước: dải ảnh so le + thanh tiến trình, nền tối ---------- */
.kttv-dl-road{color:#fff;background:radial-gradient(900px 420px at 8% 0%,rgba(46,134,200,.35),transparent 60%),linear-gradient(160deg,#0D2B47 0%,#123C63 55%,#00477D 100%)}
.kttv-dl-road h2{color:#fff}
.kttv-dl-road h2 .kttv-hl{color:var(--gold-h)}
.kttv-dl-road .eyebrow{color:var(--gold-soft)}
.kttv-dl-road-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:46px}
.kttv-dl-road-photos figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:#123C63}
.kttv-dl-road-photos figure:nth-child(even){margin-top:34px}
.kttv-dl-road-photos img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.kttv-dl-road-photos figure:hover img{transform:scale(1.05)}
.kttv-dl-road-photos figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,30,51,0) 45%,rgba(9,30,51,.85) 100%)}
.kttv-dl-road-photos b{position:absolute;z-index:1;left:18px;bottom:12px;font-size:64px;font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.kttv-dl-road-list{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:30px 0 0;padding:0;list-style:none}
.kttv-dl-road-list::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand-l),var(--gold-h))}
.kttv-dl-road-list li{position:relative;padding-top:36px}
.kttv-dl-road-list li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:#123C63;border:3px solid var(--gold-h);box-sizing:border-box}
.kttv-dl-road-list em{display:block;margin-bottom:4px;font-size:12px;font-style:normal;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.kttv-dl-road-list h3{margin:0 0 6px;font-size:18px;color:#fff}
.kttv-dl-road-list p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.75)}
.kttv-dl-road-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;margin-top:40px;font-size:14.5px;color:rgba(255,255,255,.7)}
.kttv-dl-road-cta a:not(.btn){font-weight:700;color:#fff}

/* ---------- Ảnh lớp học ---------- */
/* Mọi ô theo đúng tỉ lệ 4:3 của ảnh lớp học (720×540) để không cắt mất đầu người, logo. Ảnh 1 to (2×2), 2 ảnh bên phải, 3 ảnh hàng dưới. */
.kttv-dl-lop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.kttv-dl-lop-grid figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--sky)}
.kttv-dl-lop-grid figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.kttv-dl-lop-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kttv-dl-lop-grid figure:hover img{transform:scale(1.04)}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
  .kttv-dl-gv-track{grid-auto-columns:calc((100% - 36px) / 2.5)}
}
@media (max-width:1099px){
  .kttv-dl-hero-in,.kttv-dl-what-head{grid-template-columns:minmax(0,1fr);gap:40px}
  .kttv-dl-what-head{gap:18px;margin-bottom:32px}
  .kttv-dl-who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kttv-dl-who-card{aspect-ratio:1/1}
  .kttv-dl-lam{grid-template-columns:minmax(0,1fr);gap:20px}
  .kttv-dl-hero-copy{padding-bottom:0}
  .kttv-dl-hero-media{width:100%;max-width:560px;height:560px;margin:0 auto}
  /* Không còn khung ảnh chung: mỗi lý do thành một thẻ có ảnh riêng. */
  .kttv-dl-why-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:32px}
  .kttv-dl-why-media{display:none}
  .kttv-dl-why-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .kttv-dl-why-row,.kttv-dl-why-row:first-child,.kttv-dl-why-row.on{overflow:hidden;padding:0 18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:none;cursor:default}
  .kttv-dl-why-row .ic,.kttv-dl-why-row.on .ic{background:linear-gradient(135deg,var(--gold),var(--gold-h));color:var(--navy-d)}
  .kttv-dl-why-thumb{display:block;grid-column:1/-1;width:calc(100% + 36px);max-width:none;margin:0 -18px 2px;aspect-ratio:16/9;object-fit:cover}
  .kttv-dl-calc{grid-template-columns:minmax(0,1fr)}
  .kttv-dl-perk-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .kttv-dl-perk-media{width:100%;max-width:560px}
  .kttv-dl-road-photos{gap:14px}
  .kttv-dl-road-photos figure{aspect-ratio:3/4}
  .kttv-dl-road-photos figure:nth-child(even){margin-top:22px}
  .kttv-dl-road-photos b{font-size:44px;left:14px}
  .kttv-dl-road-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .kttv-dl-road-list::before{display:none}
  .kttv-dl-track{grid-auto-columns:calc((100% - 20px) / 2.15)}
}
@media (max-width:640px){
  .kttv-dl-hero{padding:26px 0 0}
  .kttv-dl-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .kttv-dl-hero-media{height:440px}
  .kttv-dl-float{gap:8px;padding:9px 12px;border-radius:12px}
  .kttv-dl-float b{font-size:13.5px}
  .kttv-dl-float span{font-size:12px}
  .kttv-dl-cut{transform:translateX(-62%)}
  .kttv-dl-float-name{bottom:92px}
  .kttv-dl-float-team{top:118px}
  .kttv-dl-float-team small{display:none}
  .kttv-dl-ava img{width:30px;height:30px}
  .kttv-dl-float-b{right:0;bottom:22px}
  .kttv-dl-float-b b{font-size:22px}
  .kttv-dl-why-list{grid-template-columns:minmax(0,1fr)}
  .kttv-dl-perk-media{aspect-ratio:4/3.9}
  .kttv-dl-perk-media .m2{border-width:4px}
  .kttv-dl-perk-gift{left:10px;bottom:26%;font-size:13px}
  .kttv-dl-perk-acc summary h3{font-size:15.5px}
  .kttv-dl-who-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;margin-right:-18px;padding-right:18px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .kttv-dl-who-grid::-webkit-scrollbar{display:none}
  .kttv-dl-who-card{scroll-snap-align:start;aspect-ratio:3/4}
  .kttv-dl-lam{padding:24px 20px}
  .kttv-dl-lam ul{grid-template-columns:minmax(0,1fr)}
  .kttv-dl-head{flex-direction:column;align-items:flex-start}
  .kttv-dl-nav{display:none}
  .kttv-dl-filter{flex-wrap:nowrap;overflow-x:auto;margin-right:-18px;padding-right:18px;scrollbar-width:none}
  .kttv-dl-filter button{flex:0 0 auto}
  .kttv-dl-track{grid-auto-columns:86%;column-gap:14px}
  .kttv-dl-gv-track{grid-auto-columns:76%;column-gap:14px}
  /* Ảnh thành dải vuốt ngang; các bước xếp dọc trên đường tiến trình dọc. */
  .kttv-dl-road-photos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;gap:14px;margin-right:-18px;padding-right:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .kttv-dl-road-photos::-webkit-scrollbar{display:none}
  .kttv-dl-road-photos figure{scroll-snap-align:start;aspect-ratio:4/5}
  .kttv-dl-road-photos figure:nth-child(even){margin-top:24px}
  .kttv-dl-road-photos b{font-size:48px}
  .kttv-dl-road-list{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .kttv-dl-road-list::before{display:block;left:9px;right:auto;top:10px;bottom:10px;width:3px;height:auto;background:linear-gradient(180deg,var(--brand-l),var(--gold-h))}
  .kttv-dl-road-list li{padding:0 0 0 38px}
  .kttv-dl-lop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kttv-dl-lop-grid figure:first-child{grid-row:auto;aspect-ratio:4/3}
  .kttv-dl-lop-grid figure:last-child:nth-child(even){grid-column:span 2}
  .kttv-dl-calc-in,.kttv-dl-calc-res{padding:24px 20px}
  .kttv-dl-calc-opt{align-items:flex-start}
  .kttv-dl-calc-opt input{margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .kttv-dl-card,.kttv-dl-who-card img,.kttv-dl-why-media img,.kttv-dl-why-row,.kttv-dl-gv-card,.kttv-dl-gv-card img,.kttv-dl-lop-grid img{transition:none}
}