/* =========================================================================
   Lộ trình của tôi — hệ thiết kế.

   Trước đây trang dùng hai bảng màu đá nhau: bản đồ đường đi màu xanh lá còn
   phần còn lại màu xanh dương của biển báo. Nay thống nhất một bảng: XANH LÁ
   là màu thương hiệu (lấy từ tờ quy trình đào tạo), các màu khác chỉ dùng để
   BÁO TRẠNG THÁI — hổ phách là đang làm / sắp tới hạn, đỏ là chưa đạt / quá
   hạn, xám là chưa mở. Không dùng màu để trang trí.
   ========================================================================= */

/* ------------------------------------------------------------------ token */
:root{
  --nen:#F4F7F5; --the:#FFFFFF; --the2:#EFF3F0; --the3:#E4EBE6;
  --muc:#12211B; --mo:#5C6C64; --vien:#DCE5DF; --vien-dam:#C6D3CA;

  --luc:#0E6B49; --luc-tuoi:#1FA463; --luc-nhat:#E4F2EA;

  /* #B87A08 chi dat 3,21:1 tren nen vang-nhat — duoi nguong WCAG AA 4,5.
     #8A5A04 dat 5,28:1, van doc ra la ho phach. */
  --vang:#8A5A04; --vang-nhat:#FBF1DC;
  --do:#C0322B; --do-nhat:#FBE7E5;
  --lam:#1E5FA8; --lam-nhat:#E7F0FA;

  --nhua:#39434A; --vach:#F2F5F7; --ghim:#E23B32;
  --tren-luc:#FFFFFF;   /* màu chữ đặt trên nền xanh lá đậm */

  --bong-1:0 1px 2px rgba(18,33,27,.05);
  --bong-2:0 1px 3px rgba(18,33,27,.06),0 8px 22px rgba(18,33,27,.06);
  --bong-3:0 2px 6px rgba(18,33,27,.08),0 18px 40px rgba(18,33,27,.10);
  --r-nho:8px; --r:12px; --r-to:18px; --r-tron:999px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nen:#0C1310; --the:#141D18; --the2:#1A241E; --the3:#222E27;
    --muc:#E6EFE9; --mo:#95A69C; --vien:#26332C; --vien-dam:#34443B;
    --luc:#5FD0A0; --luc-tuoi:#3FBE7E; --luc-nhat:#12291F;
    --vang:#F0B429; --vang-nhat:#2B2412;
    --do:#FF8078; --do-nhat:#2E1614;
    --lam:#6AAAF2; --lam-nhat:#132234;
    --nhua:#2A3238; --vach:#7C8791;
    --tren-luc:#0C1310;
    --bong-1:0 1px 2px rgba(0,0,0,.4);
    --bong-2:0 1px 3px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.35);
    --bong-3:0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --nen:#0C1310; --the:#141D18; --the2:#1A241E; --the3:#222E27;
  --muc:#E6EFE9; --mo:#95A69C; --vien:#26332C; --vien-dam:#34443B;
  --luc:#5FD0A0; --luc-tuoi:#3FBE7E; --luc-nhat:#12291F;
  --vang:#F0B429; --vang-nhat:#2B2412;
  --do:#FF8078; --do-nhat:#2E1614;
  --lam:#6AAAF2; --lam-nhat:#132234;
  --nhua:#2A3238; --vach:#7C8791;
  --tren-luc:#0C1310;
  --bong-1:0 1px 2px rgba(0,0,0,.4);
  --bong-2:0 1px 3px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.35);
  --bong-3:0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------------- nền */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nen);color:var(--muc);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.bao{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3,.nhan{font-family:Oswald,"Be Vietnam Pro",system-ui,sans-serif;font-weight:500}
h1{font-size:clamp(2rem,5.4vw,3.1rem);line-height:1.08;margin:0 0 .5rem;font-weight:600;
  letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.35rem,3vw,1.75rem);margin:0 0 .9rem;display:flex;align-items:center;
  gap:.65rem;text-wrap:balance;font-weight:600}
h3{font-size:1.08rem;margin:0 0 .4rem;font-weight:600}
p{margin:0 0 .95rem}
ul,ol{margin:0 0 .95rem;padding-left:1.3rem}
li{margin-bottom:.35rem}
a{color:var(--luc);text-underline-offset:2px}
b,strong{font-weight:600}
code{background:var(--the3);padding:1px 6px;border-radius:var(--r-nho);font-size:.88em}
:focus-visible{outline:2px solid var(--luc-tuoi);outline-offset:2px;border-radius:4px}

/* số thứ tự mục — huy hiệu tròn, lấy ý từ tờ quy trình đào tạo */
h2 .stt{
  flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--luc);color:var(--tren-luc);display:inline-flex;align-items:center;
  justify-content:center;font-size:1.02rem;line-height:1;
}
.nhan{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--luc);
  display:block;margin-bottom:.55rem;font-weight:600}
.y-nho{color:var(--mo);font-size:.88rem;line-height:1.6}

/* ------------------------------------------------------------- đầu trang */
header.dinh{position:sticky;top:0;z-index:30;background:var(--the);
  border-bottom:1px solid var(--vien)}
header.dinh::after{content:"";display:block;height:4px;
  background:repeating-linear-gradient(to right,var(--luc-tuoi) 0 30px,transparent 30px 54px)}
.dieu-huong{display:flex;align-items:center;gap:12px;padding:11px 20px;max-width:1040px;
  margin:0 auto;flex-wrap:wrap}
.hieu{font-family:Oswald,sans-serif;font-weight:600;font-size:1.2rem;color:var(--muc);
  text-decoration:none;margin-right:auto;letter-spacing:.01em}
.hieu span{color:var(--luc-tuoi)}
.dieu-huong a.ngoai{color:var(--mo);text-decoration:none;font-size:.88rem;
  padding:5px 12px;border-radius:var(--r-tron);border:1px solid var(--vien)}
.dieu-huong a.ngoai:hover{color:var(--luc);border-color:var(--luc-tuoi)}

/* --------------------------------------------------------------- khu vực */
section{padding:clamp(1.9rem,4.2vw,3rem) 0;border-bottom:1px solid var(--vien)}
section:first-of-type{
  border-bottom:none;
  background:radial-gradient(120% 92% at 10% -12%,var(--luc-nhat) 0%,transparent 60%);
}
section:last-of-type{border-bottom:none}

.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--bong-2);color:inherit;display:block}
.canh{background:var(--vang-nhat);border-left:4px solid var(--vang);
  border-radius:0 var(--r-nho) var(--r-nho) 0;padding:.7rem .9rem;font-size:.9rem;
  margin:.7rem 0 0}
.canh.mt{margin-top:.9rem}

/* --------------------------------------------------------------- nút bấm */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--luc);color:var(--tren-luc);text-decoration:none;
  padding:11px 20px;border-radius:var(--r-nho);font-weight:600;border:1px solid transparent;
  cursor:pointer;font-family:inherit;font-size:.98rem;line-height:1.2;
  transition:filter .15s,transform .1s,box-shadow .15s;box-shadow:var(--bong-1);
}
.nut:hover{filter:brightness(1.1);box-shadow:var(--bong-2)}
.nut:active{transform:translateY(1px)}
.nut.phu{background:var(--the);color:var(--muc);border-color:var(--vien-dam);
  font-weight:500;box-shadow:none}
.nut.phu:hover{border-color:var(--luc-tuoi);color:var(--luc);filter:none}
.nut.nho{padding:7px 14px;font-size:.86rem}

/* --------------------------------------------------------------- ô nhập */
.cong-cu{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cong-cu label{color:var(--mo);font-size:.88rem;font-weight:500}
/* Nhãn phải dính với ô của nó: để rời trong flex thì lúc xuống dòng nhãn ở lại
   hàng trên còn ô rớt xuống hàng dưới. */
.o-nhom{display:inline-flex;align-items:center;gap:.5rem}
select,input[type=number],input[type=date],input[type=text]{
  font:inherit;font-size:.92rem;padding:9px 12px;border-radius:var(--r-nho);
  border:1px solid var(--vien-dam);background:var(--the);color:inherit;
  transition:border-color .15s,box-shadow .15s;
}
select:hover,input:hover{border-color:var(--luc-tuoi)}
select:focus,input:focus{outline:none;border-color:var(--luc-tuoi);
  box-shadow:0 0 0 3px var(--luc-nhat)}
.o-hep{width:6.5rem}

/* ================================================================ HÔM NAY */
.tr-om{position:relative;overflow:hidden;padding:20px 22px;border-radius:var(--r-to);
  box-shadow:var(--bong-3)}
.tr-om::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--vien-dam)}
.tr-om.tr-luc::before{background:var(--luc-tuoi)}
.tr-om.tr-vang::before{background:var(--vang)}
.tr-om.tr-do::before{background:var(--do)}
.tr-dau{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.tr-dau h3{font-size:1.22rem;color:var(--luc)}

/* vòng tiến độ — thay cho con số trơ trọi, đọc nhanh hơn hẳn */
.tr-vong{flex:0 0 auto;position:relative;width:112px;height:112px}
.tr-vong svg{width:100%;height:100%;transform:rotate(-90deg)}
.tr-vong circle{fill:none;stroke-linecap:round}
.tr-vong .nen-vong{stroke:var(--the3);stroke-width:11}
.tr-vong .chay{stroke:var(--luc-tuoi);stroke-width:11;transition:stroke-dashoffset .5s ease}
.tr-vong .chu{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.tr-vong .chu b{font-family:Oswald,sans-serif;font-size:1.75rem;line-height:1;
  color:var(--luc)}
.tr-vong .chu span{font-size:.72rem;color:var(--mo)}

.tr-thanh{position:relative;height:9px;background:var(--the3);border-radius:var(--r-tron);
  margin-top:1rem}
.tr-thanh i{display:block;height:100%;background:var(--luc-tuoi);
  border-radius:var(--r-tron);transition:width .4s ease}
.tr-thanh u{position:absolute;top:-5px;width:2px;height:19px;background:var(--muc);
  opacity:.5;text-decoration:none;border-radius:2px}

.tr-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:.7rem;
  margin-top:1.15rem}
.tr-o>div{background:var(--the2);border-radius:var(--r);padding:.7rem .85rem;
  border:1px solid var(--vien)}
.tr-o b{display:block;font-family:Oswald,sans-serif;font-size:1.5rem;line-height:1.15;
  font-variant-numeric:tabular-nums}
.tr-o span{font-size:.78rem;color:var(--mo);line-height:1.35;display:block;margin-top:.1rem}
.tr-o .luc b{color:var(--luc)} .tr-o .vang b{color:var(--vang)} .tr-o .do b{color:var(--do)}

/* dải nhắc tiền */
.nhac-tien{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;margin-top:1.15rem;
  padding:.8rem 1rem;border-radius:var(--r);background:var(--vang-nhat);
  border-left:4px solid var(--vang)}
.nhac-tien.gap{background:var(--do-nhat);border-left-color:var(--do)}
.nhac-tien>div{flex:1;min-width:13rem}
.nhac-tien b{display:block;font-size:.94rem;font-weight:600;line-height:1.45}
.nhac-tien small{display:block;color:var(--mo);font-size:.82rem;margin-top:.25rem;
  line-height:1.5}
.nhac-bieu{width:2rem;height:2rem;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--vang);color:#fff;
  font-weight:700;font-family:Oswald,sans-serif}
.nhac-tien.gap .nhac-bieu{background:var(--do);color:#fff}
.nhac-tien a.nut{text-decoration:none}

/* ===================================== BẢN ĐỒ ĐƯỜNG ĐI (trục 9 bước) =====
   < 1080px : đường chạy dọc, thẻ xếp bên phải
   >=1080px : đường uốn lượn 3 làn, thẻ cắm theo toạ độ --x/--y
   Khung giữ tỉ lệ cố định để nét SVG không bị kéo méo. */
.dm{position:relative;background:var(--luc-nhat);border-radius:var(--r-to);
  padding:1.2rem 1.1rem 1.4rem;border:1px solid var(--vien)}
.dm-nen{display:none}
.dm-lop{display:flex;flex-direction:column;gap:.6rem}

.dm-the{
  display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;position:relative;
  background:var(--the);border:1px solid var(--vien);border-left:4px solid var(--vien-dam);
  border-radius:var(--r);padding:.7rem .9rem;box-shadow:var(--bong-1);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.dm-the:hover,.dm-the:focus-visible{border-color:var(--luc-tuoi);outline:none;
  box-shadow:var(--bong-2);transform:translateY(-1px)}
.dm-the.mo{border-color:var(--luc-tuoi);box-shadow:0 0 0 2px var(--luc-tuoi),var(--bong-2)}
.dm-the.tt-HOAN_THANH{border-left-color:var(--luc-tuoi)}
.dm-the.tt-DANG_HOC{border-left-color:var(--vang)}
.dm-the.tt-KHONG_DAT{border-left-color:var(--do)}
.dm-the.tt-SAN_SANG{border-left-color:var(--lam)}

.dm-so{
  flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--luc-tuoi);color:var(--tren-luc);font-family:Oswald,sans-serif;
  font-size:1.06rem;display:flex;align-items:center;justify-content:center;line-height:1;
}
.dm-the.tt-KHONG_DAT .dm-so{background:var(--do);color:#fff}
.dm-the.tt-KHOA .dm-so{background:var(--vien-dam);color:var(--mo)}
.dm-noi{min-width:0;flex:1}
.dm-noi>b{display:block;font-size:.96rem;line-height:1.32;color:var(--luc);font-weight:600}
.dm-ngay{display:block;color:var(--mo);font-size:.79rem;font-variant-numeric:tabular-nums;
  margin:.15rem 0 .3rem}
.dm-ngay.tre{color:var(--do);font-weight:500}
.dm-thanh{display:block;height:5px;background:var(--the3);border-radius:var(--r-tron);
  margin-top:.45rem}
.dm-thanh i{display:block;height:100%;border-radius:var(--r-tron);background:var(--luc-tuoi)}
.dm-the.tt-DANG_HOC .dm-thanh i{background:var(--vang)}
.dm-the.tt-KHONG_DAT .dm-thanh i{background:var(--do)}
.dm-ghim{display:none}

.dm-xe,.dm-dich{font-size:1.7rem;line-height:1;display:block}
.dm-xe{margin-bottom:.5rem}
.dm-dich{margin-top:.5rem}
.dm-cuoi{margin-top:.9rem}
.dm-cuoi span{
  display:inline-block;background:var(--do);color:#fff;font-family:Oswald,sans-serif;
  letter-spacing:.07em;padding:.55rem 1.5rem;border-radius:var(--r-nho);font-size:1rem;
  box-shadow:var(--bong-2);
}
.dm-chan{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  color:var(--mo);font-size:.79rem;margin:.75rem 0 0}
.dm-nay{color:var(--do);font-weight:600}

/* ---------------------------------------------------------- đường dọc */
@media (max-width:1079px){
  .dm{padding-left:4.8rem}
  .dm::before{content:"";position:absolute;left:1.6rem;top:1.1rem;bottom:1.1rem;
    width:2.2rem;background:var(--nhua);border-radius:1.1rem}
  .dm::after{content:"";position:absolute;left:2.63rem;top:2.1rem;bottom:2.1rem;width:3px;
    background:repeating-linear-gradient(var(--vach) 0 15px,transparent 15px 28px)}
  .dm-lop{position:relative;z-index:1}
  .dm-ghim{
    display:block;position:absolute;left:-2.45rem;top:.95rem;width:1.1rem;height:1.1rem;
    border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ghim);
    box-shadow:0 0 0 3px var(--luc-nhat);
  }
  .dm-the.tt-HOAN_THANH .dm-ghim{background:var(--luc-tuoi)}
  .dm-xe,.dm-dich,.dm-cuoi{position:relative;z-index:1;margin-left:-3.2rem}
}

/* ------------------------------------------------------- đường uốn lượn */
@media (min-width:1080px){
  .dm{padding:0;aspect-ratio:1200/940;max-width:1200px;margin:0 auto}
  .dm-nen{display:block;position:absolute;inset:0;width:100%;height:100%}
  .dm-lop{display:block}

  .dm-the{
    position:absolute;left:var(--x);top:var(--y);
    transform:translate(-50%,-100%);margin-top:-2.9rem;
    width:16.5%;min-width:186px;flex-direction:column;gap:.15rem;align-items:center;
    padding:1.35rem .7rem .6rem;border-left-width:1px;border-top:4px solid var(--vien-dam);
    /* Chiều cao CỐ ĐỊNH: thẻ tự cao theo số dòng tiêu đề thì thẻ dài đè lên làn
       phía trên và che kín mặt đường. Tiêu đề cắt tối đa 2 dòng. */
    height:9.1rem;box-shadow:var(--bong-2);
  }
  .dm-the:hover,.dm-the:focus-visible{transform:translate(-50%,-100%) translateY(-3px)}
  .dm-the.tt-HOAN_THANH{border-top-color:var(--luc-tuoi)}
  .dm-the.tt-DANG_HOC{border-top-color:var(--vang)}
  .dm-the.tt-KHONG_DAT{border-top-color:var(--do)}
  .dm-the.tt-SAN_SANG{border-top-color:var(--lam)}
  /* Thẻ số nằm trong dòng chảy, xếp trên tiêu đề — đặt tuyệt đối thì nó đè lên
     chữ, vì thân thẻ bắt đầu ngay từ mép trên. */
  .dm-so{margin:-1.55rem auto .15rem;box-shadow:0 0 0 4px var(--the);width:2.2rem;
    height:2.2rem;font-size:1.15rem}
  .dm-noi{width:100%;text-align:center;display:flex;flex-direction:column;
    align-items:center;height:100%}
  .dm-noi>b{font-size:.87rem;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .dm-ngay{font-size:.73rem;white-space:nowrap;margin:.18rem 0 .22rem}
  .dm-the .nhan-tt{margin-top:.1rem}
  .dm-thanh{margin-top:auto;width:100%}
  .dm-the .tuy-chon{position:absolute;top:.35rem;right:.45rem;margin:0;font-size:.64rem}

  .dm-ghim{
    display:block;position:absolute;left:50%;bottom:-3.1rem;
    width:1.2rem;height:1.2rem;margin-left:-.6rem;
    border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ghim);
    box-shadow:0 0 0 3px var(--luc-nhat);
  }
  .dm-ghim::after{content:"";position:absolute;left:.37rem;top:.37rem;width:.46rem;
    height:.46rem;border-radius:50%;background:var(--luc-nhat)}
  .dm-the.tt-HOAN_THANH .dm-ghim{background:var(--luc-tuoi)}

  .dm-xe{position:absolute;left:1.2%;top:26.6%;transform:translateY(-50%);font-size:2.5rem;
    margin:0;z-index:2}
  .dm-dich{position:absolute;left:12%;top:94.7%;transform:translateY(-50%);font-size:2rem;
    margin:0;z-index:2}
  .dm-cuoi{position:absolute;left:95%;top:94.7%;transform:translate(-50%,-50%);margin:0;
    z-index:2}
  .dm-cuoi span{font-size:.92rem;padding:.5rem 1.05rem;white-space:nowrap}
}

/* ------------------------------------------------------ nhãn trạng thái */
.nhan-tt{display:inline-block;padding:.14rem .6rem;border-radius:var(--r-tron);
  font-size:.75rem;font-weight:600;white-space:nowrap}
.nhan-tt.tt-KHOA{background:var(--the3);color:var(--mo)}
.nhan-tt.tt-SAN_SANG{background:var(--lam-nhat);color:var(--lam)}
.nhan-tt.tt-DANG_HOC{background:var(--vang-nhat);color:var(--vang)}
.nhan-tt.tt-HOAN_THANH{background:var(--luc-nhat);color:var(--luc)}
.nhan-tt.tt-KHONG_DAT{background:var(--do-nhat);color:var(--do)}
.nhan-tt.tt-DA_NOP{background:var(--luc-nhat);color:var(--luc)}
.nhan-tt.tt-QUA_HAN{background:var(--do-nhat);color:var(--do)}
.nhan-tt.tt-SAP_DEN_HAN{background:var(--vang-nhat);color:var(--vang)}
.nhan-tt.tt-CHUA_DEN_HAN{background:var(--the3);color:var(--mo)}
.nhan-tt.tt-LECH_SO{background:var(--lam-nhat);color:var(--lam)}
.tuy-chon{display:inline-block;background:var(--vang-nhat);color:var(--vang);
  border-radius:var(--r-tron);padding:.05rem .5rem;font-size:.7rem;font-style:normal;
  margin-left:.4rem;font-weight:600}

/* ======================================================== CHI TIẾT BƯỚC */
.ct-dau{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--vien)}
.ct-dau h3{margin:0;color:var(--luc);font-size:1.2rem}
.ct-dau>span{margin-left:auto}
.ct-so{position:relative;width:3rem;height:3rem;border-radius:var(--r);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-style:normal;
  background:var(--luc-nhat);border:1px solid var(--vien)}
.ct-so em{position:absolute;right:-.4rem;bottom:-.4rem;width:1.35rem;height:1.35rem;
  border-radius:50%;background:var(--luc);color:var(--tren-luc);font-family:Oswald,sans-serif;
  font-size:.78rem;font-style:normal;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--the)}
.ct-dien{background:var(--the2);border:1px solid var(--vien);border-radius:var(--r-nho);
  padding:.65rem .9rem;font-size:.92rem;margin:0 0 1.1rem}
.ct-dm{background:var(--luc-nhat);border-radius:var(--r);padding:.85rem 1rem;margin:1.1rem 0;
  border:1px solid var(--vien)}
.ct-dm>b{color:var(--luc);font-size:.92rem}
.ct-dm table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.5rem}
.ct-dm td{padding:.24rem 0;border-bottom:1px dashed var(--vien)}
.ct-dm tr:last-child td{border-bottom:none}
.ct-dm td:last-child{text-align:right;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ct-ghi{border-top:1px solid var(--vien);padding-top:1rem;margin-top:1.2rem}
.ct-ghi>b{font-size:.98rem;color:var(--luc)}
.ct-tien{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:0 0 1.1rem;
  padding:.75rem .95rem;border-radius:var(--r);background:var(--vang-nhat);
  border-left:4px solid var(--vang)}
.ct-tien.tt-QUA_HAN{background:var(--do-nhat);border-left-color:var(--do)}
.ct-tien b{flex:1;min-width:12rem;font-size:.94rem}
.ct-tien small{width:100%;color:var(--mo);font-size:.83rem}
.ct-tien a.nut{text-decoration:none}
.lk{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}

.ghi-o{display:flex;gap:.85rem;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;padding:.65rem 0;border-bottom:1px dashed var(--vien)}
.ghi-o:last-child{border-bottom:none}
.ghi-o label{font-size:.92rem;font-weight:500}
.ghi-o label span{display:block;color:var(--mo);font-size:.8rem;font-weight:400}
.ghi-hang{display:flex;gap:.45rem;align-items:center}
.ghi-hang input[type=number]{width:7.5rem}
.ghi-hang .g-ngay{width:9.5rem}

/* ============================================ HỌC PHÍ THEO GIAI ĐOẠN */
.hp-dat{margin-bottom:.5rem}
.hp-dat input[type=number]{width:11rem}
.hp-nguon{margin:0 0 1.2rem;padding:.7rem .9rem;background:var(--the2);
  border-radius:var(--r-nho);border:1px solid var(--vien)}
.hp-tong{margin-bottom:1.2rem}
.hp-bang{display:flex;flex-direction:column;gap:.7rem}

/* Bố cục cũ nhồi 4 cột nên cột tên bị bóp, chữ xuống dòng lộn xộn.
   Nay hai cột chính (TÊN co giãn — SỐ TIỀN), trạng thái và thao tác xuống
   hàng dưới, mỗi vùng có chỗ thở. */
.hp-dong{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.55rem 1.2rem;align-items:start;padding:1rem 1.15rem;
  border:1px solid var(--vien);border-radius:var(--r);background:var(--the);
  border-left:4px solid var(--vien-dam);box-shadow:var(--bong-1);
}
.hp-dong.hp-DA_NOP{border-left-color:var(--luc-tuoi);background:var(--the2)}
.hp-dong.hp-QUA_HAN{border-left-color:var(--do)}
.hp-dong.hp-SAP_DEN_HAN{border-left-color:var(--vang)}
.hp-dong.hp-LECH_SO{border-left-color:var(--lam)}
.hp-ten{min-width:0}
/* CHỈ con trực tiếp: để nguyên `.hp-ten b` thì thẻ <b> nằm trong dòng chữ nhỏ
   (ngày hạn) cũng bị ép xuống dòng riêng, câu vỡ làm ba mảnh. */
.hp-ten>b{display:block;font-size:1rem;font-weight:600;color:var(--luc)}
.hp-ten small b{font-weight:600;color:var(--muc)}
.hp-ten small{display:block;color:var(--mo);font-size:.82rem;line-height:1.55;
  margin-top:.18rem}
.hp-tien{text-align:right;white-space:nowrap}
.hp-tien b{display:block;font-family:Oswald,sans-serif;font-size:1.4rem;line-height:1.2;
  font-variant-numeric:tabular-nums}
.hp-tien small{display:block;color:var(--mo);font-size:.78rem;margin-top:.1rem}
.hp-tt{grid-column:1;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.hp-tt small{color:var(--mo);font-size:.79rem}
.hp-ghi{grid-column:2;display:flex;gap:.45rem;align-items:center;justify-content:flex-end;
  flex-wrap:wrap}
.hp-ghi input[type=number]{width:7.5rem}
.hp-xong{color:var(--luc);font-size:.88rem;font-weight:600}
.hp-canh{grid-column:1/-1;margin:.35rem 0 0}
.hp-chi-tiet{margin-top:1.1rem;font-size:.92rem}
.hp-chi-tiet summary{cursor:pointer;color:var(--luc);font-weight:500;padding:.3rem 0}
.bang-phi{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:.5rem}
.bang-phi td{padding:.38rem 0;border-bottom:1px solid var(--vien)}
.bang-phi td:last-child{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bang-phi tr.tong td{font-weight:700;border-bottom:none;border-top:2px solid var(--vien-dam);
  padding-top:.55rem;color:var(--luc)}

/* -------------------------------------------------------------- nhật ký */
.nk{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);
  box-shadow:var(--bong-2);padding:.35rem 1rem;max-height:24rem;overflow:auto}
.nk-dong{display:grid;grid-template-columns:5.8rem 1fr 2rem;gap:.7rem;align-items:center;
  padding:.55rem 0;border-bottom:1px solid var(--vien);font-size:.9rem}
.nk-dong:last-child{border-bottom:none}
.nk-dong time{color:var(--mo);font-variant-numeric:tabular-nums;font-size:.84rem}
.nk-dong span b:first-child{display:inline-block;min-width:1.7rem;color:var(--luc);
  font-family:Oswald,sans-serif}
.nk-dong.nk-tien span b:last-child{color:var(--luc)}
.nk-dong .x{border:1px solid var(--vien);background:transparent;color:var(--mo);
  border-radius:var(--r-nho);width:1.8rem;height:1.8rem;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s}
.nk-dong .x:hover{border-color:var(--do);color:var(--do)}

/* -------------------------------------------------------------- báo nhỏ */
.bao-nho{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:60;
  background:var(--muc);color:var(--nen);padding:.65rem 1.1rem;border-radius:var(--r);
  font-size:.9rem;box-shadow:var(--bong-3);max-width:min(92vw,34rem)}
.bao-nho.loi{background:var(--do);color:#fff}

footer{padding:2.2rem 0 3.2rem;color:var(--mo);font-size:.86rem;background:var(--the2);
  border-top:1px solid var(--vien)}
footer a{color:var(--mo)}

/* ----------------------------------------------------------- điện thoại */
@media (max-width:720px){
  .ghi-o{align-items:stretch}
  .tr-vong{width:92px;height:92px}
  .tr-vong .chu b{font-size:1.45rem}
}
@media (max-width:560px){
  .hp-dong{grid-template-columns:1fr}
  .hp-tien{text-align:left}
  .hp-tt,.hp-ghi{grid-column:1;justify-content:flex-start}
  .hp-dat input[type=number]{width:100%}
  .hp-ghi input[type=number],.hp-ghi .g-ngay,.hp-ghi .nut{width:100%}
}
@media (max-width:480px){
  .ghi-hang{flex-wrap:wrap}
  .ghi-hang .g-ngay,.ghi-hang input[type=number],.ghi-hang .nut{width:100%}
  .cong-cu{gap:.7rem}
  .o-nhom{flex-direction:column;align-items:stretch;gap:.25rem;width:100%}
  .cong-cu label{width:100%}
  select,input[type=number],input[type=date],.o-hep{width:100%}
  .tr-o{grid-template-columns:1fr 1fr}
  .nk-dong{grid-template-columns:4.9rem 1fr 1.8rem;gap:.5rem}
}

/* ================================================ ĐĂNG NHẬP & ĐỒNG BỘ */
.bao-hep{max-width:560px}
.khoi-dn{margin-bottom:1.1rem}
.o-doc{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.o-doc label{font-size:.9rem;font-weight:600}
.o-doc input{width:100%}
.o-doc small{margin-top:.1rem}
.rieng-tu{background:var(--luc-nhat);border-color:var(--vien)}
.rieng-tu h3{color:var(--luc);font-size:1rem}
.rieng-tu ul{padding-left:1.15rem}

/* thanh trạng thái đồng bộ trên trang học viên */
.thanh-db{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1.2rem;
  padding:.6rem .9rem;background:var(--the);border:1px solid var(--vien);
  border-radius:var(--r-tron);font-size:.87rem;box-shadow:var(--bong-1);width:fit-content;
  max-width:100%}
.thanh-db a.nut,.thanh-db button{text-decoration:none;margin-left:.2rem}
.db-cham{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto}
.db-on{background:var(--luc-tuoi)}
.db-loi{background:var(--do)}
.db-tat{background:var(--vien-dam)}
.ai{color:var(--mo);font-size:.9rem;margin-left:auto;font-weight:500}

/* ------------------------------------------------------- bảng giáo vụ */
.hv-bang{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.hv-dong{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) 7rem 8rem 7rem auto;
  gap:.6rem 1rem;align-items:center;padding:.85rem 1.05rem;background:var(--the);
  border:1px solid var(--vien);border-radius:var(--r);box-shadow:var(--bong-1)}
.hv-dong.hv-khoa{opacity:.62;background:var(--the2)}
.hv-ten b{display:block;font-size:.97rem;font-weight:600}
.hv-ten small{display:block;color:var(--mo);font-size:.79rem;line-height:1.45}
.hv-buoc{display:flex;align-items:center;gap:.5rem;min-width:0}
.hv-buoc span:last-child{font-size:.87rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hv-so{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--luc-tuoi);
  color:var(--tren-luc);font-family:Oswald,sans-serif;font-size:.85rem;display:flex;
  align-items:center;justify-content:center}
.hv-pt small{display:block;color:var(--mo);font-size:.76rem;margin-top:.2rem;
  font-variant-numeric:tabular-nums}
.hv-tien{text-align:right;font-variant-numeric:tabular-nums;font-size:.88rem;
  white-space:nowrap}
.hv-tien.qua-han{color:var(--do);font-weight:600}
.hv-nut{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}

.mk-moi{margin-top:1rem;padding:1rem 1.1rem;background:var(--luc-nhat);
  border:1px solid var(--luc-tuoi);border-radius:var(--r)}
.mk-moi>b{display:block;font-size:1rem;color:var(--luc)}
.mk-moi p{margin:.3rem 0 .6rem;font-size:.88rem}
.mk-chu{display:inline-block;font-family:Oswald,ui-monospace,monospace;font-size:1.5rem;
  letter-spacing:.14em;background:var(--the);border:1px dashed var(--luc-tuoi);
  padding:.4rem .9rem;border-radius:var(--r-nho);user-select:all;margin-right:.5rem}
.mk-moi small{display:block;margin-top:.6rem}

@media (max-width:900px){
  .hv-dong{grid-template-columns:minmax(0,1fr) 7rem;gap:.5rem .8rem}
  .hv-buoc,.hv-pt,.hv-tt{grid-column:1}
  .hv-tien{grid-column:2;text-align:right}
  .hv-nut{grid-column:1/-1;justify-content:flex-start}
}

#t-nhieu{width:100%;font:inherit;font-size:.9rem;padding:.7rem .85rem;
  border:1px solid var(--vien-dam);border-radius:var(--r-nho);background:var(--the);
  color:inherit;margin-bottom:.7rem;resize:vertical;font-variant-numeric:tabular-nums}
#t-nhieu:focus{outline:none;border-color:var(--luc-tuoi);box-shadow:0 0 0 3px var(--luc-nhat)}
.mk-moi .bang-phi td{font-variant-numeric:tabular-nums}
.mk-moi .bang-phi td:last-child{text-align:left;font-weight:600}

/* ============================================ 11 bài sa hình (bước 3) */
.bs{margin:1.1rem 0;border:1px solid var(--vien);border-radius:var(--r);
  background:var(--luc-nhat);padding:.9rem 1rem}
.bs-dau{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
  flex-wrap:wrap}
.bs-dau b{color:var(--luc);font-size:1rem}
.bs-dau span{color:var(--mo);font-size:.85rem;font-variant-numeric:tabular-nums}
.bs-ghi{margin:.5rem 0 .9rem}
.bs-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.bs-bai{background:var(--the);border:1px solid var(--vien);border-radius:var(--r-nho);
  border-left:4px solid var(--vien-dam);overflow:hidden}
.bs-bai.bs-dat{border-left-color:var(--luc-tuoi)}
.bs-bai.bs-dang{border-left-color:var(--vang)}
.bs-bai.bs-cho{border-left-color:var(--lam)}
.bs-bai.bs-khoa{opacity:.55}
.bs-bai.mo{border-color:var(--luc-tuoi);box-shadow:var(--bong-1)}
.bs-nut{display:flex;align-items:center;gap:.7rem;width:100%;background:transparent;
  border:0;padding:.6rem .8rem;cursor:pointer;font:inherit;color:inherit;text-align:left}
.bs-nut:disabled{cursor:not-allowed}
.bs-nut:not(:disabled):hover{background:var(--the2)}
.bs-so{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--the3);color:var(--mo);
  font-family:Oswald,sans-serif;font-size:.92rem}
.bs-dat .bs-so{background:var(--luc-tuoi);color:var(--tren-luc)}
.bs-dang .bs-so{background:var(--vang);color:#fff}
.bs-cho .bs-so{background:var(--lam);color:#fff}
.bs-ten{flex:1;min-width:0}
.bs-ten b{display:block;font-size:.93rem;line-height:1.3}
.bs-ten small{display:block;color:var(--mo);font-size:.78rem;
  font-variant-numeric:tabular-nums}
.bs-nut .nhan-tt{flex:0 0 auto}
.bs-than{padding:.2rem .9rem .9rem;border-top:1px dashed var(--vien);font-size:.92rem}
.bs-than p{margin:.6rem 0}
.bs-loi{color:var(--mo);font-size:.86rem}
.bs-gio{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:.8rem 0;
  padding:.6rem .7rem;background:var(--the2);border-radius:var(--r-nho)}
.bs-gio label{font-size:.86rem;font-weight:500;width:100%}
.bs-gio input[type=number]{width:5.5rem}
.bs-qua{color:var(--luc);font-weight:500}
.bs-chua{color:var(--mo)}
.bs-truot{color:var(--do);font-weight:500}
.bs-kiem{margin-top:.8rem;padding:.85rem .95rem;background:var(--the);
  border:1px solid var(--luc-tuoi);border-radius:var(--r)}
.bs-kiem>b{color:var(--luc)}
.bs-cau{margin-top:.8rem}
.bs-cau p{margin:0 0 .45rem;font-weight:500}
.bs-da{display:block;width:100%;text-align:left;background:var(--the2);
  border:1px solid var(--vien);border-radius:var(--r-nho);padding:.5rem .7rem;
  margin-bottom:.35rem;cursor:pointer;font:inherit;font-size:.9rem;color:inherit}
.bs-da:hover{border-color:var(--luc-tuoi)}
.bs-da.chon{background:var(--luc-nhat);border-color:var(--luc-tuoi);font-weight:500}
.bs-kiem-nut{display:flex;gap:.45rem;margin-top:.9rem;flex-wrap:wrap}
@media (max-width:480px){
  .bs-nut{flex-wrap:wrap}
  .bs-nut .nhan-tt{margin-left:2.6rem}
  .bs-gio input[type=number],.bs-gio .g-ngay,.bs-gio .nut{width:100%}
}