:root{
  --nen:#F8F9FB; --trang:#FFFFFF; --nen-am:#E8EEF7; --nen-nhat:#F0F3F8;
  --muc:#141A22; --chu-phu:#4F5866; --chu-mo:#6B7480;
  --vien:#D5DBE3; --vien-dam:#B3B3B3;
  --xanh:#1C5AB3; --xanh-dam:#154A94; --xanh-nhat:#E3ECF8; --xanh-chu-toi:#C9DAF2;
  --tieude:"Be Vietnam Pro", system-ui, sans-serif;
  --sans:"Be Vietnam Pro", system-ui, sans-serif;
  --bong:0 2px 2px rgba(0,0,0,.01),0 4px 4px rgba(0,0,0,.02),0 16px 24px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--nen);color:var(--muc);font-family:var(--sans);font-size:17px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;line-break:strict;hyphens:none;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,blockquote{text-wrap:balance}
p,li{text-wrap:pretty}
.khung{max-width:1200px;margin:0 auto;padding:0 24px}
.hep>*{max-width:760px}
.an{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bo-qua{position:absolute;left:16px;top:-60px;background:var(--xanh);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.bo-qua:focus{top:12px}
:focus-visible{outline:3px solid var(--xanh);outline-offset:2px}

/* Đầu trang */
header.dau{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--vien);background:rgba(248,249,251,.94);backdrop-filter:saturate(1.4) blur(8px)}
header.dau .khung{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo img{height:48px;width:auto}
.logo span{font-size:15px;font-weight:600;line-height:1.25;padding-left:14px;border-left:1px solid var(--vien);white-space:nowrap}
nav.menu{display:flex;gap:26px;font-size:15.5px;font-weight:500;white-space:nowrap}
nav.menu a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav.menu a:hover{color:var(--xanh)}
nav.menu a[aria-current="page"]{color:var(--xanh);border-bottom-color:var(--xanh)}
.nut-menu{display:none;background:none;border:1px solid var(--vien);border-radius:8px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.nut-menu svg{width:22px;height:22px}
.menu-dt{display:none;border-top:1px solid var(--vien);background:var(--nen)}
.menu-dt a{display:block;padding:14px 24px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--vien)}
.menu-dt.mo{display:block}

/* Nút */
.nut{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:8px;font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;border:1px solid var(--xanh);cursor:pointer;transition:background .15s,color .15s}
.nut-dam{background:var(--xanh);color:#fff}
.nut-dam:hover{background:var(--xanh-dam);border-color:var(--xanh-dam)}
.nut-vien{background:transparent;color:var(--xanh)}
.nut-vien:hover{background:var(--xanh-nhat)}
.nut-trang{background:#fff;color:var(--xanh);border-color:#fff}
.nut-trang:hover{background:var(--xanh-nhat)}
.hang-nut{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* Chữ */
.nhan{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--xanh);margin-bottom:18px}
h1{font-family:var(--tieude);font-weight:700;font-size:clamp(36px,5.2vw,60px);line-height:1.15;letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--xanh)}
h2{font-family:var(--tieude);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.2;letter-spacing:-.02em}
h3{font-family:var(--tieude);font-weight:600;font-size:21px;line-height:1.35;letter-spacing:-.01em}
.dan{font-size:20px;line-height:1.6;color:var(--chu-phu);margin-top:24px;max-width:36ch}
.van{font-size:18px;line-height:1.75}
.van p+p,.van p+ul,.van ul+p{margin-top:18px}
.van ul{padding-left:22px}
.van li+li{margin-top:8px}
.van h2{margin:48px 0 16px}
.van h3{margin:32px 0 10px}
.phu{color:var(--chu-phu)}
.nho{font-size:14px;color:var(--chu-mo)}

/* Hero */
.hero{padding:88px 0 80px}
.hero .khung{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end}
.hero-trang{padding:72px 0 56px;border-bottom:1px solid var(--vien)}
.hero-trang .dan{max-width:52ch}
.the-hero{background:var(--nen-am);border-radius:16px;padding:32px}
.the-hero .so{font-family:var(--tieude);font-size:50px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--xanh)}
.the-hero p{margin-top:8px;color:var(--chu-phu);font-size:15px}
.the-hero hr{border:0;border-top:1px solid var(--vien-dam);margin:24px 0}

/* Khối xanh */
.khoi-xanh{background:var(--xanh);color:#fff;border-radius:16px;padding:56px 64px}
.khoi-xanh blockquote{font-family:var(--tieude);font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:-.015em;line-height:1.4;max-width:28ch}
.khoi-xanh cite{display:block;margin-top:28px;font-style:normal;font-size:14px;color:var(--xanh-chu-toi)}
.khoi-xanh h2{color:#fff}
.khoi-xanh p,.khoi-xanh .dau-muc p{color:var(--xanh-chu-toi)}

/* Mục */
section.muc{padding:80px 0}
section.muc.sau-hero{padding-top:56px}
section.muc.sat{padding-top:0}
.dau-muc{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.dau-muc h2{max-width:22ch}
.dau-muc p{max-width:46ch;color:var(--chu-phu)}
.luoi-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.luoi-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.luoi-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.the{background:var(--trang);border:1px solid var(--vien);border-radius:8px;padding:32px;transition:border-color .15s,box-shadow .15s}
.the:hover{border-color:var(--vien-dam);box-shadow:var(--bong)}
.the .stt{font-size:14px;font-weight:700;color:var(--xanh);margin-bottom:24px;display:block}
.the p{margin-top:12px;color:var(--chu-phu);font-size:16px}
.bieu-tuong{width:44px;height:44px;border-radius:8px;background:var(--xanh-nhat);color:var(--xanh);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.bieu-tuong svg{width:24px;height:24px}
.nen-am{background:var(--nen-nhat);border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.huy-hieu{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:4px;background:var(--xanh-nhat);color:var(--xanh-dam)}
.huy-hieu.xam{background:var(--nen-am);color:var(--muc)}

/* Bảng thông tin khóa */
.thong-so{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--vien);border-radius:8px;background:var(--trang);overflow:hidden}
.thong-so div{padding:28px;border-right:1px solid var(--vien)}
.thong-so div:last-child{border-right:0}
.thong-so b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--xanh);line-height:1.1}
.thong-so span{display:block;margin-top:8px;font-size:15px;color:var(--chu-phu)}

/* Danh sách lớp */
.ds-lop{border-top:1px solid var(--vien)}
.ds-lop li{list-style:none;display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--vien)}
.ds-lop b{font-weight:700;color:var(--xanh)}
.ds-lop span{color:var(--chu-phu)}

/* Mốc thời gian */
.moc{list-style:none;border-left:2px solid var(--xanh-nhat);padding-left:28px}
.moc li{position:relative;padding-bottom:24px}
.moc li::before{content:"";position:absolute;left:-35px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--xanh);box-shadow:0 0 0 4px var(--nen)}
.moc b{font-size:18px;font-weight:700;display:block;color:var(--xanh)}
.moc span{color:var(--chu-phu);font-size:16px}
.tieu-su{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}

/* Ảnh */
figure img{width:100%;height:auto;border-radius:12px;background:var(--nen-am)}
figure figcaption{margin-top:10px;font-size:14px;color:var(--chu-mo);line-height:1.5}
.anh-lon img{aspect-ratio:2/1;object-fit:cover;object-position:50% 35%}
@media (max-width:900px){.anh-lon img{aspect-ratio:3/2}}
.anh-giua{margin:28px 0}
.anh-giua img{aspect-ratio:1200/788;object-fit:cover}

.anh-sach img,.anh-dinh img{aspect-ratio:1/1;object-fit:cover}
.anh-dinh{position:sticky;top:100px}

/* Sách */
.ds-dau{list-style:none;padding:0!important;display:grid;gap:10px;margin-top:20px}
.ds-dau li{background:var(--trang);border:1px solid var(--vien);border-left:4px solid var(--xanh);border-radius:8px;padding:14px 18px;font-weight:600;margin:0!important}
.sach-thong-diep{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.thong-diep{list-style:none;counter-reset:td;display:grid;gap:14px}
.thong-diep li{counter-increment:td;position:relative;background:var(--trang);border:1px solid var(--vien);border-radius:8px;padding:22px 24px 22px 76px}
.thong-diep li::before{content:counter(td);position:absolute;left:22px;top:20px;width:38px;height:38px;border-radius:50%;background:var(--xanh);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.thong-diep h3{font-size:19px}
.thong-diep p{margin-top:8px;color:var(--chu-phu);font-size:16px}
.muc-luc{list-style:none;border-top:1px solid var(--vien)}
.muc-luc li{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--vien)}
.muc-luc .so-chuong{font-size:24px;font-weight:700;color:var(--xanh);letter-spacing:-.02em}
.muc-luc h3{font-size:19px}
.muc-luc p{margin-top:4px;color:var(--chu-phu);font-size:15.5px}
.muc-luc .so-trang{font-size:14px;color:var(--chu-mo);white-space:nowrap}
@media (max-width:900px){
  .sach-thong-diep{grid-template-columns:1fr}
  .anh-dinh{position:static}
  .muc-luc li{grid-template-columns:44px 1fr;gap:12px}
  .muc-luc .so-trang{grid-column:2}
  .muc-luc .so-chuong{font-size:20px}
}

/* Hỏi đáp */
.hoi-dap details{border-bottom:1px solid var(--vien);padding:22px 0}
.hoi-dap details:first-child{border-top:1px solid var(--vien)}
.hoi-dap summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:24px}
.hoi-dap summary::-webkit-details-marker{display:none}
.hoi-dap summary::after{content:"+";font-size:24px;line-height:1;color:var(--xanh);font-weight:400}
.hoi-dap details[open] summary::after{content:"\2212"}
.hoi-dap details p{margin-top:12px;color:var(--chu-phu);max-width:70ch}

/* Giảng viên */
.gv{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.gv img{border-radius:16px;aspect-ratio:4/5;object-fit:cover;width:100%}
.trich{border-left:3px solid var(--xanh);padding:4px 0 4px 20px;font-size:20px;font-weight:500;margin-top:28px}

/* Form */
.dang-ky{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
form.bieu-mau{display:grid;gap:18px;background:var(--trang);border:1px solid var(--vien);border-radius:12px;padding:32px}
.hai-cot{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}
label small{font-weight:400;color:var(--chu-mo)}
input,select,textarea{width:100%;font:inherit;font-size:16px;background:var(--nen);border:1px solid var(--vien);border-radius:8px;padding:11px 14px;min-height:46px;color:var(--muc)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--xanh);box-shadow:0 0 0 3px var(--xanh-nhat)}
.dong-y{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--chu-phu)}
.dong-y input{width:18px;height:18px;min-height:0;margin-top:3px;flex:none;accent-color:var(--xanh)}
.lien-he-nhanh{list-style:none;display:grid;gap:14px;margin-top:28px}
.lien-he-nhanh li{display:flex;gap:12px;align-items:center}
.lien-he-nhanh a{font-weight:600;text-decoration:none;color:var(--xanh)}

/* Chân trang */
footer{border-top:1px solid var(--vien);padding:56px 0 40px;font-size:14.5px;color:var(--chu-phu);background:var(--trang)}
footer .khung{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
footer h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muc);margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--xanh)}
.ban-quyen{grid-column:1/-1;border-top:1px solid var(--vien);padding-top:24px;margin-top:8px;font-size:13px;color:var(--chu-mo);line-height:1.65}

@media (max-width:1080px){
  nav.menu,.dau .nut-dam{display:none}
  .nut-menu{display:inline-flex}
}
@media (max-width:900px){
  .hero{padding:48px 0 56px}
  .hero-trang{padding:48px 0 40px}
  .hero .khung,.tieu-su,.dang-ky,.gv,.luoi-2{grid-template-columns:1fr;gap:36px}
  .luoi-3{grid-template-columns:1fr}
  .luoi-4,.thong-so{grid-template-columns:1fr 1fr}
  .thong-so div:nth-child(2){border-right:0}
  .thong-so div:nth-child(-n+2){border-bottom:1px solid var(--vien)}
  .khoi-xanh{padding:44px 26px}
  section.muc{padding:56px 0}
  section.muc.sau-hero{padding-top:40px}
  .ds-lop li{grid-template-columns:1fr;gap:4px}
  footer .khung{grid-template-columns:1fr}
  .khung{padding:0 16px}
  .gv img{max-width:320px}
  .hai-cot{grid-template-columns:1fr}
  form.bieu-mau{padding:22px}
}
@media (max-width:520px){
  .luoi-4{grid-template-columns:1fr}
  .logo img{height:40px}
  .logo span{font-size:13.5px;padding-left:10px}
}

/* Ảnh minh họa */
.hero-anh{position:relative}
.anh-hero img{aspect-ratio:4/3;object-fit:cover;object-position:55% 30%;border-radius:16px}
.huy-hieu-anh{position:absolute;left:-20px;bottom:28px;background:var(--trang);border:1px solid var(--vien);border-radius:12px;padding:16px 20px;box-shadow:var(--bong);max-width:230px}
.huy-hieu-anh b{display:block;font-size:30px;font-weight:700;color:var(--xanh);letter-spacing:-.02em;line-height:1.1}
.huy-hieu-anh span{display:block;margin-top:4px;font-size:14px;color:var(--chu-phu);line-height:1.4}
.hai-cot-anh{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.anh-canh img{aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.anh-nhom img{aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.luoi-2 .ds-lop li{grid-template-columns:96px 1fr}
.luoi-2 .ds-lop li .nho{grid-column:2}
@media (max-width:900px){
  .hai-cot-anh{grid-template-columns:1fr;gap:32px}
  .huy-hieu-anh{left:12px;bottom:12px;padding:12px 16px}
  .huy-hieu-anh b{font-size:24px}
}

/* Nền ảnh mờ cho hero trang chủ */
.hero-nen{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--vien);padding:120px 0 112px}
.hero-nen .khung{grid-template-columns:1fr}
.hero-nen .khung>div{max-width:720px}
.hero-nen::before{content:"";position:absolute;inset:-24px;z-index:-2;background:url(/assets/hero-nen.jpg) center 30%/cover no-repeat;background-image:image-set(url(/assets/hero-nen.webp) type("image/webp"),url(/assets/hero-nen.jpg) type("image/jpeg"));filter:blur(3px)}
.hero-nen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,249,251,.9) 0%,rgba(248,249,251,.72) 48%,rgba(248,249,251,.35) 100%)}
@media (max-width:900px){
  .hero-nen::after{background:rgba(248,249,251,.84)}
  .hero-nen{padding:64px 0 60px}
}

/* Khối xanh có ảnh */
.khoi-xanh-anh{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.anh-trong-xanh img{aspect-ratio:4/3;object-fit:cover;object-position:55% 35%;border-radius:12px;border:4px solid rgba(255,255,255,.18)}

/* Danh sách lớp và ảnh cao bằng nhau */
.cot-deu{align-items:stretch}
.cot-deu .anh-nhom{display:flex;flex-direction:column;height:100%}
.cot-deu .anh-nhom picture{flex:1;min-height:0;display:block}
.cot-deu .anh-nhom img{height:100%;aspect-ratio:auto;object-position:50% 60%}
@media (max-width:900px){
  .khoi-xanh-anh{grid-template-columns:1fr;gap:28px}
  .cot-deu .anh-nhom img{height:auto;aspect-ratio:3/2}
}

/* Cụm từ không được tách dòng */
.nw{white-space:nowrap}

/* Nền ảnh mờ cho đầu trang con */
.hero-trang-nen{position:relative;isolation:isolate;overflow:hidden;padding:96px 0 88px}
.hero-trang-nen::before{content:"";position:absolute;inset:-24px;z-index:-2;background:var(--anh-nen) center 35%/cover no-repeat;filter:blur(3px)}
.hero-trang-nen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,249,251,.94) 0%,rgba(248,249,251,.8) 50%,rgba(248,249,251,.4) 100%)}
.hero-trang-nen .dan{max-width:40ch}
@media (max-width:900px){
  .hero-trang-nen{padding:56px 0 48px}
  .hero-trang-nen::after{background:rgba(248,249,251,.86)}
}

/* Danh sách "bạn sẽ nhận" ở trang Lớp học */
.se-nhan{list-style:none;margin-top:28px;display:grid;gap:12px}
.se-nhan li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:start}
.se-nhan li::before{content:"";grid-row:span 2;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--xanh-nhat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C5AB3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.se-nhan b{font-weight:600}
.se-nhan span{color:var(--chu-phu);font-size:15.5px}
.gv picture{display:block}

/* Icon Phosphor duotone */
.bieu-tuong{width:48px;height:48px;border-radius:10px}
.bieu-tuong svg{width:26px;height:26px}

/* Mục "Các lớp đã khai giảng" tràn hết bề ngang: chữ bám lề khung, ảnh tràn mép phải */
.lop-tran{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);background:var(--trang)}
.lop-tran-chu{padding:64px 48px 64px max(24px,calc(112.5% - 576px));display:flex;flex-direction:column;justify-content:center}
.lop-tran-chu h2{margin-bottom:22px}
.lop-tran-chu .ds-lop li{grid-template-columns:88px 1fr;padding:13px 0;row-gap:0}
.lop-tran-chu .ds-lop li .nho{grid-column:2;font-size:13.5px}
.lop-tran-chu .hang-nut{margin-top:28px}
.lop-tran-anh{position:relative;margin:0;min-height:480px;overflow:hidden}
.lop-tran-anh picture,.lop-tran-anh img{position:absolute;inset:0;width:100%;height:100%}
.lop-tran-anh img{object-fit:cover;object-position:50% 58%;border-radius:0;background:var(--nen-am)}
.lop-tran-anh figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:48px 32px 22px;color:#fff;font-size:15px;font-weight:600;background:linear-gradient(to top,rgba(10,20,40,.72),rgba(10,20,40,0))}
.lop-tran + section.muc.sat{padding-top:80px}
@media (max-width:1700px){
  .lop-tran{grid-template-columns:1fr}
  .lop-tran-anh{order:-1;min-height:0;aspect-ratio:2/1}
  .lop-tran-chu{padding:48px max(24px,calc(50% - 576px)) 64px}
}
@media (max-width:900px){
  .lop-tran-anh{aspect-ratio:3/2}
  .lop-tran-chu{padding:40px 16px 56px}
  .lop-tran + section.muc.sat{padding-top:56px}
}

/* Nhãn thuật ngữ theo sách, trên tiêu đề thẻ */
.the .thuat-ngu{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--xanh);margin-bottom:8px}