/* Bố cục riêng từng trang (bổ sung cho bundle.css của design system) */
body{min-height:100%}
.mo-dau{background:var(--xanh-nhat);padding-block:var(--khoang-8) 0;overflow:hidden}
.mo-dau .khung{display:grid;gap:var(--khoang-6);align-items:end}
.mo-dau-chu{padding-bottom:var(--khoang-8);display:grid;gap:var(--khoang-4);align-content:center}
/* Logo đầy đủ ở phần mở đầu trang chủ */
.logo-lon{margin:0}
.logo-lon img{display:block;width:240px;height:auto}
.dan-lon{font-size:18px;line-height:28px;max-width:34ch}
/* Hai dòng dẫn dưới logo: mỗi câu một dòng, không rớt chữ (từ 375px; màn hẹp hơn cho xuống dòng để khỏi tràn ngang) */
.dan-hai-dong span{display:block}
@media (max-width:429px){.dan-lon.dan-hai-dong{font-size:17px;line-height:27px}}
@media (min-width:375px){.dan-hai-dong{max-width:none}.dan-hai-dong span{white-space:nowrap}}
.mo-dau-hinh{display:block;height:300px;width:auto;margin:0 auto}
.muc{padding-block:36px 0}
.muc-tieu-de{font-size:26px;line-height:34px;margin-bottom:var(--khoang-5)}
.su-menh{display:grid;gap:var(--khoang-6);align-items:center}
.su-menh .chu{display:grid;gap:var(--khoang-3);font-size:18px;line-height:28px;max-width:52ch}
.su-menh .chu p:first-child{font-size:22px;line-height:31px;font-weight:600;color:var(--xanh-dam)}
.su-menh-hinh{display:none}
.co-trang{display:grid;gap:var(--khoang-6);align-items:center}
.anh-co{aspect-ratio:1/1;width:100%;max-width:220px;margin:0 auto;border:2px dashed var(--nhan);border-radius:var(--bo-lon);background:var(--vang-nhat);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--khoang-3);color:var(--chu-phu)}
.co-trang h3{font-size:20px;line-height:28px;margin-bottom:var(--khoang-2)}
.gt-gv{margin:0 0 var(--khoang-4);max-width:60ch}
.moc-nam{margin:0;display:grid;gap:var(--khoang-5)}
.moc{display:grid;grid-template-columns:56px 1fr;gap:var(--khoang-1) var(--khoang-3);align-items:baseline;overflow-wrap:anywhere}
.moc dt{font-family:var(--font-tieu-de);font-weight:600;font-size:20px;line-height:28px;color:var(--nhan-chu)}
.moc dd{margin:0;grid-column:2}
@media (min-width:720px){
  .mo-dau{padding-top:var(--khoang-12)}
  .mo-dau .khung{grid-template-columns:1.15fr 1fr;gap:var(--khoang-8)}
  .logo-lon img{width:340px}
  .dan-lon{font-size:20px;line-height:30px}
  .mo-dau-hinh{height:420px}
  .muc{padding-block:var(--khoang-16) 0}
  .muc-tieu-de{font-size:32px;line-height:40px}
  .su-menh .chu p:first-child{font-size:28px;line-height:38px}
  .su-menh{grid-template-columns:240px 1fr;gap:var(--khoang-12)}
  .su-menh-hinh{display:block;height:320px;width:auto;margin:0 auto}
  .co-trang{grid-template-columns:220px 1fr;gap:var(--khoang-8)}
}

/* Trang khóa */
.khoa{display:grid;gap:var(--khoang-6);padding-block:var(--khoang-6) var(--khoang-8);grid-template-columns:minmax(0,1fr)}
/* Điện thoại: bìa+tên, thẻ đăng ký, mô tả+giảng viên, nội dung (V-033). Thứ tự DOM trùng thứ tự nhìn */
.khoa-mo-ta:empty{display:none}
.khoa .bia-lon{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:var(--bo-lon);background:var(--vang-nhat);border:1px solid var(--vien)}
.khoa h1{font-size:26px;line-height:34px;margin-top:var(--khoang-5)}
/* Mô tả trải hết cột trái (không dùng .dan-lon của trang chủ: chữ 22px trong khung 34 ký tự làm cột chữ hẹp, lệch so với ảnh bìa) */
.mo-ta-khoa{display:grid;gap:var(--khoang-3);margin-top:var(--khoang-3);max-width:68ch}
.mo-ta-khoa .dan{font-family:var(--font-tieu-de);font-size:18px;line-height:30px;color:var(--xanh-dam)}
.khoa .gv-dong{margin-top:var(--khoang-3)}
.khoa .gv-dong b{color:var(--chu)}
.khoa-nd{display:grid;gap:var(--khoang-8)}
.ket-qua{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ket-qua li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px}
.ket-qua li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:2px;background:var(--ma) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333663a' 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}
.dk-tt{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:15px;padding-block:var(--khoang-2) var(--khoang-1);border-top:1px solid var(--vien)}
.dk-tt dt{color:var(--chu-phu);padding-top:var(--khoang-2)}
.dk-tt dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere;padding-top:var(--khoang-2)}
.khoa-nd h2{font-size:20px;line-height:28px;margin-bottom:var(--khoang-3)}
.the-dk{display:grid;gap:var(--khoang-3)}
.the-dk .gia{font-size:26px;line-height:32px;font-weight:600;color:var(--xanh-dam)}
@media (min-width:860px){
  .mo-ta-khoa .dan{font-size:19px;line-height:31px}
  .khoa{grid-template-columns:minmax(0,1fr) var(--cot-ben);grid-template-areas:"dau ben" "mota ben" "nd ben";grid-template-rows:auto auto 1fr;gap:0 var(--khoang-8);align-items:start;padding-top:var(--khoang-8)}
  .khoa-dau{grid-area:dau}
  .khoa-mo-ta{grid-area:mota}
  .khoa-nd{grid-area:nd;margin-top:var(--khoang-8)}
  .khoa h1{font-size:32px;line-height:40px}
  .khoa-phai{grid-area:ben;position:sticky;top:84px}
}

/* Hồ sơ */
.ho-so{max-width:760px;margin:0 auto;padding:var(--khoang-8) var(--khoang-4) 0;display:grid;gap:var(--khoang-5)}
.ho-so h1{font-size:26px;line-height:34px}
.ho-so h2{font-size:20px;line-height:28px;margin-bottom:var(--khoang-3)}
.khoa-hs{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--khoang-4);align-items:start}
.khoa-hs img{width:120px;aspect-ratio:4/3;object-fit:contain;border-radius:var(--bo-vua);background:var(--vang-nhat)}
.khoa-hs .chi-tiet{display:grid;gap:6px}
.luoi-2{display:grid;gap:var(--khoang-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.luoi-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Hộp thư giáo viên */
.hop-thu{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--vien);border-radius:var(--bo-lon);overflow:hidden;background:var(--trang)}
.ds-hoi{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--vien)}
.ds-hoi a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--khoang-3);align-items:center;padding:var(--khoang-3) var(--khoang-4);color:inherit;text-decoration:none;border-bottom:1px solid var(--vien)}
.ds-hoi a:hover{background:var(--nen)}
.ds-hoi a[aria-current="true"]{background:var(--xanh-nhat)}
.ds-hoi .ten{font-weight:600;display:block}
.ds-hoi .tom{color:var(--chu-phu);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hop-thu .tro-chuyen{border:0;border-radius:0;min-height:560px}
@media (min-width:900px){.hop-thu{grid-template-columns:320px minmax(0,1fr)}.ds-hoi{border-bottom:0;border-right:1px solid var(--vien)}}