/* =========================================================================
   Lộ trình học thi — bê từ lo-trinh.hoclainhanh.com, phạm vi hoá dưới .lt,
   remap màu thương hiệu xanh lá -> indigo của Học Lái Nhanh. Bỏ đăng
   nhập/đồng bộ/giáo vụ/học phí. Bản đồ 9 bước + theo dõi tiến độ + 11 bài
   sa hình tự kiểm, lưu localStorage ctl_lo_trinh_v1.
   ========================================================================= */
.lt{
  --nen:#f4f5fb; --the:#ffffff; --the2:#f1f2fb; --the3:#e6e8f6;
  --muc:#17153a; --mo:#5b5a79; --vien:#e4e4f2; --vien-dam:#cfcfe6;
  --luc:#4f46e5; --luc-tuoi:#6366f1; --luc-nhat:#eef2ff;
  --vang:#8a5a04; --vang-nhat:#fbf1dc;
  --do:#c0322b; --do-nhat:#fbe7e5;
  --lam:#1e5fa8; --lam-nhat:#e7f0fa;
  --nhua:#39434a; --vach:#f2f5f7; --ghim:#e23b32;
  --tren-luc:#ffffff;
  --bong-1:0 1px 2px rgba(23,21,58,.05);
  --bong-2:0 1px 3px rgba(23,21,58,.06),0 8px 22px rgba(23,21,58,.07);
  --bong-3:0 2px 6px rgba(23,21,58,.08),0 18px 40px rgba(23,21,58,.12);
  --r-nho:8px; --r:12px; --r-to:18px; --r-tron:999px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lt{
  --nen:#141229; --the:#1b1838; --the2:#221f42; --the3:#2c2950;
  --muc:#e9e8fb; --mo:#a3a1c4; --vien:#312e57; --vien-dam:#423e6e;
  --luc:#818cf8; --luc-tuoi:#a5b4fc; --luc-nhat:#1e1b4b;
  --vang:#f0b429; --vang-nhat:#2b2412;
  --do:#ff8078; --do-nhat:#2e1614;
  --lam:#6aaaf2; --lam-nhat:#132234;
  --nhua:#2a3238; --vach:#7c8791; --tren-luc:#13112b;
  --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"] .lt{
  --nen:#141229; --the:#1b1838; --the2:#221f42; --the3:#2c2950;
  --muc:#e9e8fb; --mo:#a3a1c4; --vien:#312e57; --vien-dam:#423e6e;
  --luc:#818cf8; --luc-tuoi:#a5b4fc; --luc-nhat:#1e1b4b;
  --vang:#f0b429; --vang-nhat:#2b2412;
  --do:#ff8078; --do-nhat:#2e1614;
  --lam:#6aaaf2; --lam-nhat:#132234;
  --nhua:#2a3238; --vach:#7c8791; --tren-luc:#13112b;
  --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);
}
/* .lt la vung widget trong trang app: bo margin dong, nen trong suot de an vao trang */
.lt{background:transparent}

/* ------------------------------------------------------------------- nền */
.lt *{box-sizing:border-box}
.lt{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.lt{margin:0;background:var(--nen);color:var(--muc);
  font-family:inherit;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.lt .bao{max-width:1040px;margin:0 auto;padding:0 20px}
.lt h1, .lt h2, .lt h3, .lt .nhan{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:500}
.lt 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}
.lt 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}
.lt h3{font-size:1.08rem;margin:0 0 .4rem;font-weight:600}
.lt p{margin:0 0 .95rem}
.lt ul, .lt ol{margin:0 0 .95rem;padding-left:1.3rem}
.lt li{margin-bottom:.35rem}
.lt a{color:var(--luc);text-underline-offset:2px}
.lt b, .lt strong{font-weight:600}
.lt code{background:var(--the3);padding:1px 6px;border-radius:var(--r-nho);font-size:.88em}
.lt :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 */
.lt 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;}
.lt .nhan{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--luc);
  display:block;margin-bottom:.55rem;font-weight:600}
.lt .y-nho{color:var(--mo);font-size:.88rem;line-height:1.6}
/* ------------------------------------------------------------- đầu trang */
.lt header.dinh{position:sticky;top:0;z-index:30;background:var(--the);
  border-bottom:1px solid var(--vien)}
.lt header.dinh::after{content:"";display:block;height:4px;
  background:repeating-linear-gradient(to right,var(--luc-tuoi) 0 30px,transparent 30px 54px)}
.lt .dieu-huong{display:flex;align-items:center;gap:12px;padding:11px 20px;max-width:1040px;
  margin:0 auto;flex-wrap:wrap}
.lt .hieu{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:600;font-size:1.2rem;color:var(--muc);
  text-decoration:none;margin-right:auto;letter-spacing:.01em}
.lt .hieu span{color:var(--luc-tuoi)}
.lt .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)}
.lt .dieu-huong a.ngoai:hover{color:var(--luc);border-color:var(--luc-tuoi)}
/* --------------------------------------------------------------- khu vực */
.lt section{padding:clamp(1.9rem,4.2vw,3rem) 0;border-bottom:1px solid var(--vien)}
.lt section:first-of-type{border-bottom:none;
  background:radial-gradient(120% 92% at 10% -12%,var(--luc-nhat) 0%,transparent 60%);}
.lt section:last-of-type{border-bottom:none}
.lt .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}
.lt .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}
.lt .canh.mt{margin-top:.9rem}
/* --------------------------------------------------------------- nút bấm */
.lt .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);}
.lt .nut:hover{filter:brightness(1.1);box-shadow:var(--bong-2)}
.lt .nut:active{transform:translateY(1px)}
.lt .nut.phu{background:var(--the);color:var(--muc);border-color:var(--vien-dam);
  font-weight:500;box-shadow:none}
.lt .nut.phu:hover{border-color:var(--luc-tuoi);color:var(--luc);filter:none}
.lt .nut.nho{padding:7px 14px;font-size:.86rem}
/* --------------------------------------------------------------- ô nhập */
.lt .cong-cu{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lt .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. */
.lt .o-nhom{display:inline-flex;align-items:center;gap:.5rem}
.lt select, .lt input[type=number], .lt input[type=date], .lt 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;}
.lt select:hover, .lt input:hover{border-color:var(--luc-tuoi)}
.lt select:focus, .lt input:focus{outline:none;border-color:var(--luc-tuoi);
  box-shadow:0 0 0 3px var(--luc-nhat)}
.lt .o-hep{width:6.5rem}
/* ================================================================ HÔM NAY */
.lt .tr-om{position:relative;overflow:hidden;padding:20px 22px;border-radius:var(--r-to);
  box-shadow:var(--bong-3)}
.lt .tr-om::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--vien-dam)}
.lt .tr-om.tr-luc::before{background:var(--luc-tuoi)}
.lt .tr-om.tr-vang::before{background:var(--vang)}
.lt .tr-om.tr-do::before{background:var(--do)}
.lt .tr-dau{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.lt .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 */
.lt .tr-vong{flex:0 0 auto;position:relative;width:112px;height:112px}
.lt .tr-vong svg{width:100%;height:100%;transform:rotate(-90deg)}
.lt .tr-vong circle{fill:none;stroke-linecap:round}
.lt .tr-vong .nen-vong{stroke:var(--the3);stroke-width:11}
.lt .tr-vong .chay{stroke:var(--luc-tuoi);stroke-width:11;transition:stroke-dashoffset .5s ease}
.lt .tr-vong .chu{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.lt .tr-vong .chu b{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.75rem;line-height:1;
  color:var(--luc)}
.lt .tr-vong .chu span{font-size:.72rem;color:var(--mo)}
.lt .tr-thanh{position:relative;height:9px;background:var(--the3);border-radius:var(--r-tron);
  margin-top:1rem}
.lt .tr-thanh i{display:block;height:100%;background:var(--luc-tuoi);
  border-radius:var(--r-tron);transition:width .4s ease}
.lt .tr-thanh u{position:absolute;top:-5px;width:2px;height:19px;background:var(--muc);
  opacity:.5;text-decoration:none;border-radius:2px}
.lt .tr-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:.7rem;
  margin-top:1.15rem}
.lt .tr-o>div{background:var(--the2);border-radius:var(--r);padding:.7rem .85rem;
  border:1px solid var(--vien)}
.lt .tr-o b{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.5rem;line-height:1.15;
  font-variant-numeric:tabular-nums}
.lt .tr-o span{font-size:.78rem;color:var(--mo);line-height:1.35;display:block;margin-top:.1rem}
.lt .tr-o .luc b{color:var(--luc)}
.lt .tr-o .vang b{color:var(--vang)}
.lt .tr-o .do b{color:var(--do)}
/* dải nhắc tiền */
.lt .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)}
.lt .nhac-tien.gap{background:var(--do-nhat);border-left-color:var(--do)}
.lt .nhac-tien>div{flex:1;min-width:13rem}
.lt .nhac-tien b{display:block;font-size:.94rem;font-weight:600;line-height:1.45}
.lt .nhac-tien small{display:block;color:var(--mo);font-size:.82rem;margin-top:.25rem;
  line-height:1.5}
.lt .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:"Plus Jakarta Sans",system-ui,sans-serif}
.lt .nhac-tien.gap .nhac-bieu{background:var(--do);color:#fff}
.lt .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. */
.lt .dm{position:relative;background:var(--luc-nhat);border-radius:var(--r-to);
  padding:1.2rem 1.1rem 1.4rem;border:1px solid var(--vien)}
.lt .dm-nen{display:none}
.lt .dm-lop{display:flex;flex-direction:column;gap:.6rem}
.lt .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;}
.lt .dm-the:hover, .lt .dm-the:focus-visible{border-color:var(--luc-tuoi);outline:none;
  box-shadow:var(--bong-2);transform:translateY(-1px)}
.lt .dm-the.mo{border-color:var(--luc-tuoi);box-shadow:0 0 0 2px var(--luc-tuoi),var(--bong-2)}
.lt .dm-the.tt-HOAN_THANH{border-left-color:var(--luc-tuoi)}
.lt .dm-the.tt-DANG_HOC{border-left-color:var(--vang)}
.lt .dm-the.tt-KHONG_DAT{border-left-color:var(--do)}
.lt .dm-the.tt-SAN_SANG{border-left-color:var(--lam)}
.lt .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:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1.06rem;display:flex;align-items:center;justify-content:center;line-height:1;}
.lt .dm-the.tt-KHONG_DAT .dm-so{background:var(--do);color:#fff}
.lt .dm-the.tt-KHOA .dm-so{background:var(--vien-dam);color:var(--mo)}
.lt .dm-noi{min-width:0;flex:1}
.lt .dm-noi>b{display:block;font-size:.96rem;line-height:1.32;color:var(--luc);font-weight:600}
.lt .dm-ngay{display:block;color:var(--mo);font-size:.79rem;font-variant-numeric:tabular-nums;
  margin:.15rem 0 .3rem}
.lt .dm-ngay.tre{color:var(--do);font-weight:500}
.lt .dm-thanh{display:block;height:5px;background:var(--the3);border-radius:var(--r-tron);
  margin-top:.45rem}
.lt .dm-thanh i{display:block;height:100%;border-radius:var(--r-tron);background:var(--luc-tuoi)}
.lt .dm-the.tt-DANG_HOC .dm-thanh i{background:var(--vang)}
.lt .dm-the.tt-KHONG_DAT .dm-thanh i{background:var(--do)}
.lt .dm-ghim{display:none}
.lt .dm-xe, .lt .dm-dich{font-size:1.7rem;line-height:1;display:block}
.lt .dm-xe{margin-bottom:.5rem}
.lt .dm-dich{margin-top:.5rem}
.lt .dm-cuoi{margin-top:.9rem}
.lt .dm-cuoi span{display:inline-block;background:var(--do);color:#fff;font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  letter-spacing:.07em;padding:.55rem 1.5rem;border-radius:var(--r-nho);font-size:1rem;
  box-shadow:var(--bong-2);}
.lt .dm-chan{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  color:var(--mo);font-size:.79rem;margin:.75rem 0 0}
.lt .dm-nay{color:var(--do);font-weight:600}
/* ---------------------------------------------------------- đường dọc */
/* App Học Lái Nhanh là cột hẹp mobile-first: LUÔN dùng bố cục đường dọc (bỏ
   bố cục uốn lượn ngang vì nó bật theo viewport >=1080px dù cột app vẫn hẹp,
   làm 9 thẻ đè chồng lên nhau). Đường dọc vừa mọi bề rộng, đầy đủ trên điện thoại. */
@media all{
  .lt .dm{padding-left:4.8rem}
  .lt .dm::before{content:"";position:absolute;left:1.6rem;top:1.1rem;bottom:1.1rem;
    width:2.2rem;background:var(--nhua);border-radius:1.1rem}
  .lt .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)}
  .lt .dm-lop{position:relative;z-index:1}
  .lt .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);}
  .lt .dm-the.tt-HOAN_THANH .dm-ghim{background:var(--luc-tuoi)}
  .lt .dm-xe, .lt .dm-dich, .lt .dm-cuoi{position:relative;z-index:1;margin-left:-3.2rem}
}
/* ------------------------------------------------------- đường uốn lượn (TẮT trong app) */
@media (min-width:100000px){
  .lt .dm{padding:0;aspect-ratio:1200/940;max-width:1200px;margin:0 auto}
  .lt .dm-nen{display:block;position:absolute;inset:0;width:100%;height:100%}
  .lt .dm-lop{display:block}
  .lt .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);}
  .lt .dm-the:hover, .lt .dm-the:focus-visible{transform:translate(-50%,-100%) translateY(-3px)}
  .lt .dm-the.tt-HOAN_THANH{border-top-color:var(--luc-tuoi)}
  .lt .dm-the.tt-DANG_HOC{border-top-color:var(--vang)}
  .lt .dm-the.tt-KHONG_DAT{border-top-color:var(--do)}
  .lt .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. */
  .lt .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}
  .lt .dm-noi{width:100%;text-align:center;display:flex;flex-direction:column;
    align-items:center;height:100%}
  .lt .dm-noi>b{font-size:.87rem;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .lt .dm-ngay{font-size:.73rem;white-space:nowrap;margin:.18rem 0 .22rem}
  .lt .dm-the .nhan-tt{margin-top:.1rem}
  .lt .dm-thanh{margin-top:auto;width:100%}
  .lt .dm-the .tuy-chon{position:absolute;top:.35rem;right:.45rem;margin:0;font-size:.64rem}
  .lt .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);}
  .lt .dm-ghim::after{content:"";position:absolute;left:.37rem;top:.37rem;width:.46rem;
    height:.46rem;border-radius:50%;background:var(--luc-nhat)}
  .lt .dm-the.tt-HOAN_THANH .dm-ghim{background:var(--luc-tuoi)}
  .lt .dm-xe{position:absolute;left:1.2%;top:26.6%;transform:translateY(-50%);font-size:2.5rem;
    margin:0;z-index:2}
  .lt .dm-dich{position:absolute;left:12%;top:94.7%;transform:translateY(-50%);font-size:2rem;
    margin:0;z-index:2}
  .lt .dm-cuoi{position:absolute;left:95%;top:94.7%;transform:translate(-50%,-50%);margin:0;
    z-index:2}
  .lt .dm-cuoi span{font-size:.92rem;padding:.5rem 1.05rem;white-space:nowrap}
}
/* ------------------------------------------------------ nhãn trạng thái */
.lt .nhan-tt{display:inline-block;padding:.14rem .6rem;border-radius:var(--r-tron);
  font-size:.75rem;font-weight:600;white-space:nowrap}
.lt .nhan-tt.tt-KHOA{background:var(--the3);color:var(--mo)}
.lt .nhan-tt.tt-SAN_SANG{background:var(--lam-nhat);color:var(--lam)}
.lt .nhan-tt.tt-DANG_HOC{background:var(--vang-nhat);color:var(--vang)}
.lt .nhan-tt.tt-HOAN_THANH{background:var(--luc-nhat);color:var(--luc)}
.lt .nhan-tt.tt-KHONG_DAT{background:var(--do-nhat);color:var(--do)}
.lt .nhan-tt.tt-DA_NOP{background:var(--luc-nhat);color:var(--luc)}
.lt .nhan-tt.tt-QUA_HAN{background:var(--do-nhat);color:var(--do)}
.lt .nhan-tt.tt-SAP_DEN_HAN{background:var(--vang-nhat);color:var(--vang)}
.lt .nhan-tt.tt-CHUA_DEN_HAN{background:var(--the3);color:var(--mo)}
.lt .nhan-tt.tt-LECH_SO{background:var(--lam-nhat);color:var(--lam)}
.lt .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 */
.lt .ct-dau{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--vien)}
.lt .ct-dau h3{margin:0;color:var(--luc);font-size:1.2rem}
.lt .ct-dau>span{margin-left:auto}
.lt .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)}
.lt .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:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:.78rem;font-style:normal;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--the)}
.lt .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}
.lt .ct-dm{background:var(--luc-nhat);border-radius:var(--r);padding:.85rem 1rem;margin:1.1rem 0;
  border:1px solid var(--vien)}
.lt .ct-dm>b{color:var(--luc);font-size:.92rem}
.lt .ct-dm table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.5rem}
.lt .ct-dm td{padding:.24rem 0;border-bottom:1px dashed var(--vien)}
.lt .ct-dm tr:last-child td{border-bottom:none}
.lt .ct-dm td:last-child{text-align:right;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.lt .ct-ghi{border-top:1px solid var(--vien);padding-top:1rem;margin-top:1.2rem}
.lt .ct-ghi>b{font-size:.98rem;color:var(--luc)}
.lt .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)}
.lt .ct-tien.tt-QUA_HAN{background:var(--do-nhat);border-left-color:var(--do)}
.lt .ct-tien b{flex:1;min-width:12rem;font-size:.94rem}
.lt .ct-tien small{width:100%;color:var(--mo);font-size:.83rem}
.lt .ct-tien a.nut{text-decoration:none}
.lt .lk{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.lt .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)}
.lt .ghi-o:last-child{border-bottom:none}
.lt .ghi-o label{font-size:.92rem;font-weight:500}
.lt .ghi-o label span{display:block;color:var(--mo);font-size:.8rem;font-weight:400}
.lt .ghi-hang{display:flex;gap:.45rem;align-items:center}
.lt .ghi-hang input[type=number]{width:7.5rem}
.lt .ghi-hang .g-ngay{width:9.5rem}
/* ============================================ HỌC PHÍ THEO GIAI ĐOẠN */
.lt .hp-dat{margin-bottom:.5rem}
.lt .hp-dat input[type=number]{width:11rem}
.lt .hp-nguon{margin:0 0 1.2rem;padding:.7rem .9rem;background:var(--the2);
  border-radius:var(--r-nho);border:1px solid var(--vien)}
.lt .hp-tong{margin-bottom:1.2rem}
.lt .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ở. */
.lt .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);}
.lt .hp-dong.hp-DA_NOP{border-left-color:var(--luc-tuoi);background:var(--the2)}
.lt .hp-dong.hp-QUA_HAN{border-left-color:var(--do)}
.lt .hp-dong.hp-SAP_DEN_HAN{border-left-color:var(--vang)}
.lt .hp-dong.hp-LECH_SO{border-left-color:var(--lam)}
.lt .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. */
.lt .hp-ten>b{display:block;font-size:1rem;font-weight:600;color:var(--luc)}
.lt .hp-ten small b{font-weight:600;color:var(--muc)}
.lt .hp-ten small{display:block;color:var(--mo);font-size:.82rem;line-height:1.55;
  margin-top:.18rem}
.lt .hp-tien{text-align:right;white-space:nowrap}
.lt .hp-tien b{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.4rem;line-height:1.2;
  font-variant-numeric:tabular-nums}
.lt .hp-tien small{display:block;color:var(--mo);font-size:.78rem;margin-top:.1rem}
.lt .hp-tt{grid-column:1;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.lt .hp-tt small{color:var(--mo);font-size:.79rem}
.lt .hp-ghi{grid-column:2;display:flex;gap:.45rem;align-items:center;justify-content:flex-end;
  flex-wrap:wrap}
.lt .hp-ghi input[type=number]{width:7.5rem}
.lt .hp-xong{color:var(--luc);font-size:.88rem;font-weight:600}
.lt .hp-canh{grid-column:1/-1;margin:.35rem 0 0}
.lt .hp-chi-tiet{margin-top:1.1rem;font-size:.92rem}
.lt .hp-chi-tiet summary{cursor:pointer;color:var(--luc);font-weight:500;padding:.3rem 0}
.lt .bang-phi{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:.5rem}
.lt .bang-phi td{padding:.38rem 0;border-bottom:1px solid var(--vien)}
.lt .bang-phi td:last-child{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.lt .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ý */
.lt .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}
.lt .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}
.lt .nk-dong:last-child{border-bottom:none}
.lt .nk-dong time{color:var(--mo);font-variant-numeric:tabular-nums;font-size:.84rem}
.lt .nk-dong span b:first-child{display:inline-block;min-width:1.7rem;color:var(--luc);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.lt .nk-dong.nk-tien span b:last-child{color:var(--luc)}
.lt .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}
.lt .nk-dong .x:hover{border-color:var(--do);color:var(--do)}
/* -------------------------------------------------------------- báo nhỏ */
.lt .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)}
.lt .bao-nho.loi{background:var(--do);color:#fff}
.lt footer{padding:2.2rem 0 3.2rem;color:var(--mo);font-size:.86rem;background:var(--the2);
  border-top:1px solid var(--vien)}
.lt footer a{color:var(--mo)}
/* ----------------------------------------------------------- điện thoại */
@media (max-width:720px){
  .lt .ghi-o{align-items:stretch}
  .lt .tr-vong{width:92px;height:92px}
  .lt .tr-vong .chu b{font-size:1.45rem}
}
@media (max-width:560px){
  .lt .hp-dong{grid-template-columns:1fr}
  .lt .hp-tien{text-align:left}
  .lt .hp-tt, .lt .hp-ghi{grid-column:1;justify-content:flex-start}
  .lt .hp-dat input[type=number]{width:100%}
  .lt .hp-ghi input[type=number], .lt .hp-ghi .g-ngay, .lt .hp-ghi .nut{width:100%}
}
@media (max-width:480px){
  .lt .ghi-hang{flex-wrap:wrap}
  .lt .ghi-hang .g-ngay, .lt .ghi-hang input[type=number], .lt .ghi-hang .nut{width:100%}
  .lt .cong-cu{gap:.7rem}
  .lt .o-nhom{flex-direction:column;align-items:stretch;gap:.25rem;width:100%}
  .lt .cong-cu label{width:100%}
  .lt select, .lt input[type=number], .lt input[type=date], .lt .o-hep{width:100%}
  .lt .tr-o{grid-template-columns:1fr 1fr}
  .lt .nk-dong{grid-template-columns:4.9rem 1fr 1.8rem;gap:.5rem}
}
/* ============================================ 11 bài sa hình (bước 3) */
.lt .bs{margin:1.1rem 0;border:1px solid var(--vien);border-radius:var(--r);
  background:var(--luc-nhat);padding:.9rem 1rem}
.lt .bs-dau{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
  flex-wrap:wrap}
.lt .bs-dau b{color:var(--luc);font-size:1rem}
.lt .bs-dau span{color:var(--mo);font-size:.85rem;font-variant-numeric:tabular-nums}
.lt .bs-ghi{margin:.5rem 0 .9rem}
.lt .bs-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.lt .bs-bai{background:var(--the);border:1px solid var(--vien);border-radius:var(--r-nho);
  border-left:4px solid var(--vien-dam);overflow:hidden}
.lt .bs-bai.bs-dat{border-left-color:var(--luc-tuoi)}
.lt .bs-bai.bs-dang{border-left-color:var(--vang)}
.lt .bs-bai.bs-cho{border-left-color:var(--lam)}
.lt .bs-bai.bs-khoa{opacity:.55}
.lt .bs-bai.mo{border-color:var(--luc-tuoi);box-shadow:var(--bong-1)}
.lt .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}
.lt .bs-nut:disabled{cursor:not-allowed}
.lt .bs-nut:not(:disabled):hover{background:var(--the2)}
.lt .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:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.92rem}
.lt .bs-dat .bs-so{background:var(--luc-tuoi);color:var(--tren-luc)}
.lt .bs-dang .bs-so{background:var(--vang);color:#fff}
.lt .bs-cho .bs-so{background:var(--lam);color:#fff}
.lt .bs-ten{flex:1;min-width:0}
.lt .bs-ten b{display:block;font-size:.93rem;line-height:1.3}
.lt .bs-ten small{display:block;color:var(--mo);font-size:.78rem;
  font-variant-numeric:tabular-nums}
.lt .bs-nut .nhan-tt{flex:0 0 auto}
.lt .bs-than{padding:.2rem .9rem .9rem;border-top:1px dashed var(--vien);font-size:.92rem}
.lt .bs-than p{margin:.6rem 0}
.lt .bs-loi{color:var(--mo);font-size:.86rem}
.lt .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)}
.lt .bs-gio label{font-size:.86rem;font-weight:500;width:100%}
.lt .bs-gio input[type=number]{width:5.5rem}
.lt .bs-qua{color:var(--luc);font-weight:500}
.lt .bs-chua{color:var(--mo)}
.lt .bs-truot{color:var(--do);font-weight:500}
.lt .bs-kiem{margin-top:.8rem;padding:.85rem .95rem;background:var(--the);
  border:1px solid var(--luc-tuoi);border-radius:var(--r)}
.lt .bs-kiem>b{color:var(--luc)}
.lt .bs-cau{margin-top:.8rem}
.lt .bs-cau p{margin:0 0 .45rem;font-weight:500}
.lt .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}
.lt .bs-da:hover{border-color:var(--luc-tuoi)}
.lt .bs-da.chon{background:var(--luc-nhat);border-color:var(--luc-tuoi);font-weight:500}
.lt .bs-kiem-nut{display:flex;gap:.45rem;margin-top:.9rem;flex-wrap:wrap}
@media (max-width:480px){
  .lt .bs-nut{flex-wrap:wrap}
  .lt .bs-nut .nhan-tt{margin-left:2.6rem}
  .lt .bs-gio input[type=number], .lt .bs-gio .g-ngay, .lt .bs-gio .nut{width:100%}
}

/* ===================== BẢN ĐỒ HÀNH TRÌNH 3D (đường uốn lượn + cảnh vật) */
.lt{--nui:#c7d2fe}
.lt .dm3-wrap{border-radius:var(--r-to);overflow:hidden;border:1px solid var(--vien);
  box-shadow:var(--bong-2);
  background:linear-gradient(to bottom,#cfe6ff 0%,#e9f4ff 20%,#e2f4d7 44%,#c3eaa9 100%)}
.lt .dm3{display:block;width:100%;height:auto}
.lt .dm3-pin{cursor:pointer}
.lt .dm3-giot-g{transform-box:fill-box;transition:transform .15s}
.lt .dm3-giot{filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
.lt .dm3-pin:hover .dm3-giot-g,.lt .dm3-pin:focus-visible .dm3-giot-g{transform:translateY(-3px) scale(1)}
.lt .dm3-pin.mo .dm3-giot{filter:drop-shadow(0 0 2px var(--luc)) drop-shadow(0 0 2px var(--luc)) drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.lt .dm3-pin:focus-visible{outline:none}
.lt .dm3-pin:focus-visible .dm3-nhan{text-decoration:underline}
.lt .dm3-nhan{fill:var(--muc)}
.lt .dm3-tt{fill:var(--mo)}
.lt .dm3-tt.tt-HOAN_THANH{fill:var(--luc)}
.lt .dm3-tt.tt-DANG_HOC{fill:var(--vang)}
.lt .dm3-tt.tt-SAN_SANG{fill:var(--lam)}
.lt .dm3-tt.tt-KHONG_DAT{fill:var(--do)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lt{--nui:#312e81}
  :root:not([data-theme="light"]) .lt .dm3-wrap{background:linear-gradient(to bottom,#15233b 0%,#122033 22%,#143320 48%,#0e2a16 100%)}}
:root[data-theme="dark"] .lt{--nui:#312e81}
:root[data-theme="dark"] .lt .dm3-wrap{background:linear-gradient(to bottom,#15233b 0%,#122033 22%,#143320 48%,#0e2a16 100%)}