/* ============================================================
   SJE — nâng cấp thị giác 28/07/2026
   Nạp SAU cùng nên thắng mọi lớp tiện ích. Xoá file này là hoàn tác.
   ============================================================ */
:root{
  --brand-navy:#0D2472;
  --brand-blue:#194BA2;
  --brand-yellow:#FFC20F;
}

/* --- 1. Thang chữ: tách bậc H1/H2/H3/H4 (trước đây H1 = H2 = 36px) --- */
h1[class][class]{
  font-size:clamp(2.125rem,1.35rem + 3.2vw,3.375rem);
  line-height:1.12;letter-spacing:-.022em;
}
h2[class][class]{
  font-size:clamp(1.625rem,1.15rem + 1.9vw,2.375rem);
  line-height:1.2;letter-spacing:-.015em;
}
h3[class][class]{
  font-size:clamp(1.1875rem,1.05rem + .55vw,1.4375rem);
  line-height:1.3;letter-spacing:-.008em;
}
h4[class][class]{font-size:1.0625rem;line-height:1.4}
.section-title{
  font-size:clamp(1.625rem,1.15rem + 1.9vw,2.375rem)!important;
  line-height:1.2;letter-spacing:-.015em;
}

/* --- 2. Độ dài dòng: chặn ~68 ký tự, chỉ ảnh hưởng khối chữ rộng --- */
main p,section p,header p,footer p{max-width:68ch}
main p[class][class],section p[class][class]{max-width:68ch}
.text-center p,
.text-center > p[class][class]{margin-inline:auto}

/* --- 3. Nhịp cuộn: bớt đệm trên điện thoại, giữ thoáng trên máy tính --- */
section[class*="py-24"],section[class*="py-20"],section[class*="py-16"]{
  padding-top:clamp(3rem,7vw,6rem);
  padding-bottom:clamp(3rem,7vw,6rem);
}
/* mục xen kẽ được thở rộng hơn để mắt có mốc */
section[class*="py-24"]:nth-of-type(2n),
section[class*="py-20"]:nth-of-type(2n){
  padding-top:clamp(3.75rem,9vw,7.5rem);
  padding-bottom:clamp(3.75rem,9vw,7.5rem);
}

/* --- 4. Bo góc về một thang duy nhất --- */
[class~="rounded-md"][class]{border-radius:.5rem}
[class~="rounded-lg"][class]{border-radius:.75rem}
[class~="rounded-xl"][class]{border-radius:1rem}
[class~="rounded-2xl"][class]{border-radius:1.25rem}

/* --- 5. Ảnh không kéo giãn --- */
img{max-width:100%}

.logo-img{height:clamp(44px,6.5vw,64px)!important;width:auto}
.sje-blue{color:#0D2472}.sje-blue-bg{background-color:#0D2472}.sje-yellow{color:#FFC20F}.sje-yellow-bg{background-color:#FFC20F}.sje-secondary-blue{color:#194BA2}.sje-secondary-blue-bg{background-color:#194BA2}

/* --- 6. Hiệu ứng khi cuộn tới (thay cho hover — điện thoại không có hover) --- */
.sje-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.sje-reveal.sje-in{opacity:1;transform:none}
.sje-reveal[data-d="1"]{transition-delay:.08s}
.sje-reveal[data-d="2"]{transition-delay:.16s}
.sje-reveal[data-d="3"]{transition-delay:.24s}
.sje-reveal[data-d="4"]{transition-delay:.32s}
.sje-reveal[data-d="5"]{transition-delay:.4s}

/* --- 7. Bấm được trên điện thoại: vùng chạm tối thiểu 44px --- */
/* min-height không có tác dụng với phần tử inline -> phải đổi sang inline-flex */
@media (max-width:767px){
  a[class*="rounded"],button[class*="rounded"]{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .course-card-main a[class~="mt-auto"],
  .feature-card a,
  footer li a,
  footer a[href^="tel:"],footer a[href^="mailto:"]{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* --- 8. Tôn trọng người tắt hiệu ứng trong hệ điều hành --- */
@media (prefers-reduced-motion:reduce){
  .sje-reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}


/* ============================================================
   SJE — lớp kỹ thuật layout (28/07, vòng 3)
   ============================================================ */

/* --- 1. Neo trong trang không bị thanh dính che ---------------
   Thanh đầu trang dính cao ~72px. Không có hai dòng này thì bấm
   "Hệ Thống Học" trên menu sẽ nhảy tới nơi mà tiêu đề nằm KHUẤT sau thanh. */
:root{ --sje-header: 72px; }
@media (min-width:768px){ :root{ --sje-header: 132px; } }
html{ scroll-padding-top: calc(var(--sje-header) + 1.25rem); }
[id]{ scroll-margin-top: calc(var(--sje-header) + 1.25rem); }

/* --- 2. Ngắt dòng có chủ đích ---------------------------------
   balance: cân số chữ giữa các dòng tiêu đề, không để rơi 1 chữ xuống dòng cuối.
   pretty : tránh chữ mồ côi ở cuối đoạn văn. */
h1,h2,h3,h4,.section-title{ text-wrap: balance; }
p,li,blockquote,figcaption{ text-wrap: pretty; }

/* --- 3. Nhịp dọc thống nhất ----------------------------------- */
h2 + p, .section-title + p{ margin-top: .75rem; }
h3 + p{ margin-top: .5rem; }

/* --- 4. Máng lề co giãn theo màn hình ------------------------- */
.container{
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
  width: 100%;
}
[class*="gap-8"]{ gap: clamp(1.25rem, 2.6vw, 2rem); }
[class*="gap-12"]{ gap: clamp(1.75rem, 4vw, 3rem); }

/* --- 5. Ô lưới không bị chữ dài phá khung --------------------- */
.grid > *{ min-width: 0; }
a,p,li,td,th,h1,h2,h3,h4{ overflow-wrap: break-word; }
footer a[href^="mailto:"], footer a[href^="tel:"]{ overflow-wrap: anywhere; }

/* --- 6. Ảnh giữ đúng tỉ lệ, không giật khung ------------------ */
img:not([class*="h-"]):not([class*="object-"]){ height: auto; }

/* --- 7. Bảng rộng thì cuộn trong khung, KHÔNG đẩy cả trang ---- */
@media (max-width: 767px){
  .comparison-table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table thead th{ white-space: nowrap; }
}

/* --- 8. Bàn phím nhìn thấy mình đang ở đâu -------------------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--brand-yellow, #FFC20F);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline: none; }

/* --- 9. Nhảy nhanh tới nội dung chính (bàn phím / trình đọc) -- */
.sje-skip{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-navy, #0D2472); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0; font-weight: 600;
}
.sje-skip:focus{ left: 0; }


/* ============================================================
   SJE — bộ tăng sức sống + mục Hệ thống học (28/07, vòng 4)
   ============================================================ */

/* --- Bút dạ vàng dưới chữ khoá trong tiêu đề ------------------ */
.sje-mark{
  background-image:linear-gradient(transparent 58%, rgba(255,194,15,.55) 58%);
  background-repeat:no-repeat; padding:0 .08em;
}
.sje-os .sje-mark{ background-image:linear-gradient(transparent 58%, rgba(255,194,15,.42) 58%); }

/* --- Nhãn mục có gạch nhấn ------------------------------------ */
.sje-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-yellow,#FFC20F);
}
.sje-eyebrow::before{ content:""; width:28px; height:3px; border-radius:2px; background:currentColor; }

/* ============================ MỤC HỆ THỐNG HỌC (nền navy) ==== */
.sje-os{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60rem 32rem at 12% -10%, rgba(255,194,15,.16), transparent 60%),
    radial-gradient(48rem 28rem at 95% 108%, rgba(25,75,162,.55), transparent 62%),
    linear-gradient(160deg,#0D2472 0%,#122E86 58%,#0B1E5E 100%);
  color:#EAF0FF;
  padding-block:clamp(3.5rem,8vw,7rem);
}
.sje-os::before{ /* hoa văn chấm mờ */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
  mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.sje-os-inner{
  position:relative; width:min(1180px,100%); margin-inline:auto;
  padding-inline:clamp(1.125rem,4vw,2.5rem);
}
.sje-os-head{ max-width:62ch; }
.sje-os-head h2{
  margin:.9rem 0 0; color:#fff; font-weight:800;
  font-size:clamp(1.7rem,1.1rem + 2.3vw,2.75rem); line-height:1.16; letter-spacing:-.02em;
}
.sje-os-head p{ margin-top:1rem; color:#B9C7EA; font-size:1.0625rem; line-height:1.65; max-width:58ch; }

/* --- Vòng học ------------------------------------------------- */
.sje-loop{ margin-top:clamp(2.25rem,5vw,3.5rem); }
.sje-loop-track{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  counter-reset:none;
}
.sje-loop-step{
  position:relative; padding:1.25rem 1.15rem 1.35rem;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; backdrop-filter:blur(2px);
}
.sje-loop-step::after{ /* mũi tên nối */
  content:"→"; position:absolute; right:-1.05rem; top:50%; transform:translateY(-50%);
  color:rgba(255,194,15,.85); font-size:1.15rem; font-weight:700; z-index:2;
}
.sje-loop-step:last-child::after{ content:none; }
.sje-loop-num{
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.1em;
  color:#0D2472; background:var(--brand-yellow,#FFC20F);
  padding:.15rem .45rem; border-radius:5px;
}
.sje-loop-title{ display:block; margin-top:.6rem; font-weight:700; color:#fff; font-size:1.0625rem; }
.sje-loop-desc{ display:block; margin-top:.35rem; color:#AFC0E8; font-size:.9375rem; line-height:1.55; }
.sje-loop-back{
  margin-top:1.15rem; display:flex; align-items:center; gap:.6rem;
  color:#FFD873; font-size:.9375rem; font-weight:600;
}
.sje-loop-back::before{
  content:"↺"; font-size:1.25rem; line-height:1;
  color:var(--brand-yellow,#FFC20F);
}
@media (max-width:640px){
  .sje-loop-step::after{ content:"↓"; right:auto; left:1.5rem; top:auto; bottom:-1.05rem; transform:none; }
}

/* --- Ba khung minh hoạ ---------------------------------------- */
.sje-shots{
  margin-top:clamp(2.25rem,5vw,3.5rem);
  display:grid; gap:clamp(1rem,2.4vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.sje-shots figure{ margin:0; }
.sje-panel{
  display:block; width:100%; height:auto;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(3,10,34,.42);
  transform:translateZ(0); transition:transform .35s ease;
}
.sje-shots figure:hover .sje-panel{ transform:translateY(-6px); }
.sje-shots figcaption{
  margin-top:.7rem; color:#C6D3F0; font-size:.9375rem; font-weight:600; text-align:center;
}
.sje-shots-note{ margin-top:.9rem; color:#8FA2D0; font-size:.8125rem; text-align:center; }

/* --- 6 thẻ lợi ích -------------------------------------------- */
.sje-cards{
  list-style:none; margin:clamp(2.25rem,5vw,3.5rem) 0 0; padding:0;
  display:grid; gap:clamp(.9rem,2vw,1.35rem);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.sje-card{
  position:relative; padding:1.5rem 1.35rem 1.6rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden; transition:background .28s ease, transform .28s ease;
}
.sje-card::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--brand-yellow,#FFC20F),transparent 78%);
  opacity:.75;
}
.sje-card:hover{ background:rgba(255,255,255,.1); transform:translateY(-4px); }
.sje-card-num{
  font-size:.75rem; font-weight:800; letter-spacing:.12em; color:#FFC20F; opacity:.9;
}
.sje-card h3{ margin:.55rem 0 .45rem; color:#fff; font-size:1.125rem; font-weight:700; line-height:1.3; }
.sje-card p{ margin:0; color:#AFC0E8; font-size:.9375rem; line-height:1.6; }

/* --- Nút gọi hành động ---------------------------------------- */
.sje-os-cta{ margin-top:clamp(2.25rem,5vw,3.25rem); text-align:center; }
.sje-os-cta a{
  display:inline-block; background:var(--brand-yellow,#FFC20F); color:#0D2472;
  font-weight:800; font-size:1.0625rem; padding:1rem 2.4rem; border-radius:999px;
  box-shadow:0 14px 34px rgba(255,194,15,.28); transition:transform .25s ease, box-shadow .25s ease;
}
.sje-os-cta a:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(255,194,15,.36); }
.sje-os-cta p{ margin-top:1rem; color:#8FA2D0; font-size:.875rem; }

/* ============================ SỨC SỐNG CHO PHẦN CÒN LẠI ====== */
/* thẻ nổi khối hơn khi rê chuột */
.feature-card,.course-card-main,.testimonial-card,.resource-item{
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.feature-card:hover,.course-card-main:hover,.testimonial-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(13,36,114,.14);
}
/* gạch nhấn vàng dưới tiêu đề mục ở giữa trang */
.section-title::after{
  content:""; display:block; width:56px; height:4px; border-radius:2px;
  background:var(--brand-yellow,#FFC20F); margin:.85rem auto 0;
}


/* ============================================================
   SJE — trang Phương pháp LIS (28/07, vòng 7: MỘT chuỗi duy nhất)
   ============================================================ */
.lis-wrap{ width:min(1140px,100%); margin-inline:auto; padding-inline:clamp(1.125rem,4vw,2.5rem); }

.lis-hero{
  position:relative; overflow:hidden; color:#EAF0FF;
  padding-block:clamp(3.5rem,8vw,6.5rem);
  background:
    radial-gradient(52rem 30rem at 8% -12%, rgba(255,194,15,.18), transparent 60%),
    radial-gradient(44rem 26rem at 96% 110%, rgba(25,75,162,.6), transparent 62%),
    linear-gradient(155deg,#0D2472 0%,#14318F 55%,#0B1E5E 100%);
}
.lis-hero::before{
  content:""; position:absolute; inset:0; opacity:.32; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.lis-hero .lis-wrap{ position:relative; }
.lis-lockup{
  margin:1rem 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .85rem;
  font-weight:800; letter-spacing:-.03em; line-height:1.02; color:#fff;
  font-size:clamp(2.1rem,1.1rem + 4.4vw,4.25rem);
}
.lis-lockup i{ font-style:normal; color:var(--brand-yellow,#FFC20F); opacity:.9; }
.lis-lead{ margin-top:1.35rem; max-width:64ch; color:#C3D0EE; font-size:clamp(1rem,.96rem + .3vw,1.1875rem); line-height:1.7; }
.lis-lead b{ color:#fff; font-weight:700; }
.lis-facts{ list-style:none; margin:2.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,3.5rem); }
.lis-facts li{ display:flex; flex-direction:column; }
.lis-facts b{ font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem); font-weight:800; color:var(--brand-yellow,#FFC20F); line-height:1; }
.lis-facts span{ margin-top:.35rem; font-size:.875rem; color:#9FB2DC; }

.lis-sec{ padding-block:clamp(3rem,7vw,5.5rem); background:#fff; }
.lis-sec-alt{ background:#F5F7FC; }
.lis-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; color:var(--brand-navy,#0D2472);
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.lis-eyebrow::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--brand-yellow,#FFC20F); }
.lis-sec h2,.lis-flow h2,.lis-princ h2{
  margin:.85rem 0 0; font-weight:800; letter-spacing:-.02em; line-height:1.18;
  font-size:clamp(1.55rem,1.05rem + 2.1vw,2.5rem);
}
.lis-sec h2{ color:var(--brand-navy,#0D2472); }
.lis-sub{ margin-top:.85rem; max-width:62ch; color:#4B5563; font-size:1.0625rem; line-height:1.65; }

.lis-pillars{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.lis-pillar{
  position:relative; padding:2rem 1.5rem 1.75rem; background:#fff; border:1px solid #E3E8F2;
  border-radius:18px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;
}
.lis-pillar:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(13,36,114,.12); }
.lis-pillar-letter{
  position:absolute; right:.9rem; top:.2rem; font-size:5.5rem; font-weight:800; line-height:1;
  color:var(--brand-yellow,#FFC20F); opacity:.22;
}
.lis-pillar h3{ position:relative; margin:0 0 .6rem; color:var(--brand-navy,#0D2472); font-size:1.1875rem; font-weight:700; }
.lis-pillar p{ position:relative; margin:0; color:#4B5563; line-height:1.6; }
.lis-pillar-note{ margin-top:.75rem !important; padding-top:.75rem; border-top:1px dashed #E3E8F2;
  color:var(--brand-navy,#0D2472) !important; font-weight:600; font-size:.9375rem; }

/* ===== ĐIỂM NHẤN: MỘT chuỗi — ổ khóa nằm ngay trên xương sống ===== */
.lis-flow{
  position:relative; overflow:hidden; color:#EAF0FF;
  padding-block:clamp(3.5rem,8vw,6.5rem);
  background:
    radial-gradient(46rem 26rem at 92% -10%, rgba(255,194,15,.14), transparent 58%),
    linear-gradient(165deg,#0B1E5E 0%,#122E86 60%,#0D2472 100%);
}
.lis-flow h2{ color:#fff; max-width:20ch; }
.lis-flow-lead{ margin-top:1.15rem; max-width:64ch; color:#B9C7EA; font-size:1.0625rem; line-height:1.7; }
.lis-flow-lead b{ color:#FFD873; }

.lis-chain{ list-style:none; position:relative; margin:2.75rem 0 0; padding:0; }
.lis-chain::before{
  content:""; position:absolute; left:1.6rem; top:1.6rem; bottom:1.6rem; width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(255,194,15,.95), rgba(255,194,15,.3) 55%, rgba(255,255,255,.12));
}
.lis-node{ position:relative; display:flex; gap:1.25rem; }
.lis-node-num{
  flex:0 0 auto; width:3.2rem; height:3.2rem; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:1.25rem; color:#0D2472; background:var(--brand-yellow,#FFC20F); z-index:1;
  box-shadow:0 0 0 7px #102A7A, 0 14px 30px rgba(0,0,0,.3);
}
.lis-node-body{ flex:1 1 auto; min-width:0; padding-top:.15rem; }
.lis-node h3{ margin:.15rem 0 .5rem; color:#fff; font-weight:700; line-height:1.25;
  font-size:clamp(1.125rem,1rem + .55vw,1.4375rem); }
.lis-node-teach{ margin:0; color:#B9C7EA; line-height:1.62; max-width:56ch; }
.lis-node-sys{
  margin:.9rem 0 0; padding:.75rem .95rem; border-radius:13px; max-width:56ch;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  color:#DCE6FF; font-size:.9375rem; line-height:1.55;
}
.lis-node-sys span{
  display:block; margin-bottom:.22rem; font-size:.6875rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-yellow,#FFC20F);
}
.lis-gate{
  position:relative; display:flex; align-items:center; gap:.65rem;
  margin:1rem 0; padding-left:calc(1.6rem - 12px); color:#8FA2D0; font-size:.8125rem;
}
.lis-gate-ico{
  flex:0 0 auto; width:24px; height:24px; padding:3px; border-radius:50%;
  background:#102A7A; border:1px solid rgba(255,255,255,.18); color:#9FB2DC; z-index:1;
}
.lis-gate-ico svg{ width:100%; height:100%; }
.lis-loop{ margin-top:2rem; display:flex; align-items:flex-start; gap:.7rem; color:#FFD873; font-weight:600; line-height:1.6; }
.lis-loop::before{ content:"\21ba"; font-size:1.4rem; line-height:1.2; color:var(--brand-yellow,#FFC20F); }
@media (max-width:640px){
  .lis-chain::before{ left:1.3rem; }
  .lis-node{ gap:1rem; }
  .lis-node-num{ width:2.6rem; height:2.6rem; font-size:1.0625rem; box-shadow:0 0 0 6px #102A7A; }
  .lis-gate{ padding-left:calc(1.3rem - 12px); }
}

.lis-tiers{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.lis-tier{ position:relative; padding:1.75rem 1.4rem; background:#fff; border:1px solid #E3E8F2; border-radius:18px; }
.lis-tier::before{ content:""; position:absolute; left:0; top:1.75rem; bottom:1.75rem; width:4px;
  border-radius:0 4px 4px 0; background:var(--brand-yellow,#FFC20F); }
.lis-tier-no{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8A93A8; }
.lis-tier h3{ margin:.4rem 0 .5rem; color:var(--brand-navy,#0D2472); font-size:1.25rem; font-weight:800; }
.lis-tier-q{ margin:0; color:#4B5563; line-height:1.55; }
.lis-tier-s{ margin:.8rem 0 0; padding-top:.7rem; border-top:1px dashed #E3E8F2; color:#194BA2; font-size:.9375rem; font-weight:600; }

.lis-techs{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.lis-tech{ padding:1.75rem 1.5rem; background:#fff; border:1px solid #E3E8F2; border-radius:18px;
  transition:transform .3s ease, box-shadow .3s ease; }
.lis-tech:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(13,36,114,.12); }
.lis-tech-skill{ display:inline-block; background:#EEF2FC; color:var(--brand-navy,#0D2472);
  font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem; border-radius:6px; }
.lis-tech h3{ margin:.75rem 0 .55rem; color:var(--brand-navy,#0D2472); font-size:1.1875rem; font-weight:700; line-height:1.3; }
.lis-tech p{ margin:0; color:#4B5563; line-height:1.62; }
.lis-tech b{ color:var(--brand-navy,#0D2472); }
.lis-tech-note{ margin-top:.85rem !important; padding-top:.75rem; border-top:1px dashed #E3E8F2;
  color:#194BA2 !important; font-weight:600; font-size:.9375rem; }

.lis-princ{ padding-block:clamp(3rem,7vw,5.5rem); background:#0D2472; color:#EAF0FF; }
.lis-princ h2{ color:#fff; max-width:26ch; }
.lis-princ-list{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.lis-princ-list li{ display:flex; gap:.9rem; align-items:flex-start; color:#C3D0EE; line-height:1.6; }
.lis-tick{ flex:0 0 auto; width:22px; height:22px; margin-top:.15rem; color:var(--brand-yellow,#FFC20F); }
.lis-tick svg{ width:100%; height:100%; }
.lis-scope{ margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.15);
  max-width:70ch; color:#8FA2D0; font-size:.9375rem; line-height:1.6; }


/* ============================================================
   SJE — bảng màu theo ĐÚNG BRAND BOOK (28/07, vòng 8)
   Xanh #034EA2 = brand book tr.07 (C100 M80 Y0 K0)
   Vàng #FFC20D = đo từ pixel logo gốc
   Sửa 3 dòng dưới là hoàn tác toàn bộ.
   ============================================================ */
:root{
  --brand-navy:#034EA2;   /* xanh thương hiệu — chữ, nút, tiêu đề */
  --brand-blue:#2A6FC4;   /* sắc phụ, sáng hơn */
  --brand-deep:#022C5C;   /* nền các khối tối, cùng hệ màu */
  --brand-yellow:#FFC20D; /* vàng thương hiệu */
}
.sje-blue{ color:#034EA2 } .sje-blue-bg{ background-color:#034EA2 }
.sje-yellow{ color:#FFC20D } .sje-yellow-bg{ background-color:#FFC20D }
.sje-secondary-blue{ color:#2A6FC4 } .sje-secondary-blue-bg{ background-color:#2A6FC4 }

/* các khối nền tối dùng lại đúng hệ màu thương hiệu */
.sje-os{
  background:
    radial-gradient(60rem 32rem at 12% -10%, rgba(255,194,13,.16), transparent 60%),
    radial-gradient(48rem 28rem at 95% 108%, rgba(42,111,196,.5), transparent 62%),
    linear-gradient(160deg,#022C5C 0%,#034EA2 62%,#02264E 100%) !important;
}
.lis-hero{
  background:
    radial-gradient(52rem 30rem at 8% -12%, rgba(255,194,13,.18), transparent 60%),
    radial-gradient(44rem 26rem at 96% 110%, rgba(42,111,196,.55), transparent 62%),
    linear-gradient(155deg,#022C5C 0%,#034EA2 58%,#02264E 100%) !important;
}
.lis-flow{
  background:
    radial-gradient(46rem 26rem at 92% -10%, rgba(255,194,13,.14), transparent 58%),
    linear-gradient(165deg,#02264E 0%,#034EA2 62%,#022C5C 100%) !important;
}
.lis-princ{ background:#022C5C !important; }
.lis-node-num{ box-shadow:0 0 0 7px #033F84, 0 14px 30px rgba(0,0,0,.3) !important; }
.lis-gate-ico{ background:#033F84 !important; }
@media (max-width:640px){ .lis-node-num{ box-shadow:0 0 0 6px #033F84 !important; } }

/* ============================================================
   SJE — trang Giới thiệu (vòng 8)
   ============================================================ */
.ab-wrap{ width:min(1140px,100%); margin-inline:auto; padding-inline:clamp(1.125rem,4vw,2.5rem); }
.ab-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; color:var(--brand-navy,#034EA2);
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.ab-eyebrow::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--brand-yellow,#FFC20D); }

/* mở đầu */
.ab-hero{
  position:relative; overflow:hidden; color:#EAF0FF; padding-block:clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(50rem 28rem at 6% -14%, rgba(255,194,13,.17), transparent 60%),
    linear-gradient(158deg,#022C5C 0%,#034EA2 60%,#02264E 100%);
}
.ab-hero::before{
  content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 74%);
  mask-image:linear-gradient(180deg,#000,transparent 74%);
}
.ab-hero .ab-wrap{ position:relative; }
.ab-hero-grid{ display:grid; gap:clamp(1.75rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:center; }
.ab-hero h1{
  margin:1rem 0 0; color:#fff; font-weight:800; letter-spacing:-.025em; line-height:1.14;
  font-size:clamp(1.85rem,1.15rem + 2.9vw,3rem); max-width:18ch;
}
.ab-lead{ margin-top:1.2rem; color:#C3D0EE; font-size:clamp(1rem,.96rem + .28vw,1.125rem); line-height:1.72; max-width:60ch; }
.ab-lead b{ color:#fff; font-weight:700; }
.ab-hero-img{ margin:0; }
.ab-hero-img img{ width:100%; height:auto; border-radius:20px; box-shadow:0 26px 60px rgba(2,20,50,.45); }

/* vì sao tồn tại */
.ab-why{ padding-block:clamp(3rem,7vw,5.5rem); background:#fff; }
.ab-why h2,.ab-beliefs h2,.ab-proof h2,.ab-gaps h2,.ab-founder h2{
  margin:.85rem 0 0; font-weight:800; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem);
}
.ab-why h2,.ab-proof h2{ color:var(--brand-navy,#034EA2); }
.ab-why-grid{ margin-top:2.25rem; display:grid; gap:clamp(1rem,2.5vw,1.75rem); grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.ab-why-old,.ab-why-new{ padding:1.85rem 1.6rem; border-radius:20px; border:1px solid #E3E8F2; }
.ab-why-old{ background:#F5F7FC; }
.ab-why-new{ background:#fff; border-color:rgba(3,78,162,.28); box-shadow:0 18px 44px rgba(3,78,162,.09); }
.ab-tag{
  display:inline-block; background:#E7ECF6; color:#5A6478; font-size:.75rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem; border-radius:6px; margin-bottom:1rem;
}
.ab-tag-live{ background:var(--brand-yellow,#FFC20D); color:#022C5C; }
.ab-why-old p,.ab-why-new p{ margin:0 0 .85rem; color:#4B5563; line-height:1.68; }
.ab-why-old p:last-child,.ab-why-new p:last-child{ margin-bottom:0; }
.ab-why-old b,.ab-why-new b{ color:var(--brand-navy,#034EA2); }
.ab-links{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.25rem !important; }
.ab-links a{ color:var(--brand-navy,#034EA2); font-weight:700; }
.ab-links a:hover{ text-decoration:underline; }

/* người sáng lập */
.ab-founder{ padding-block:clamp(3rem,7vw,5.5rem); background:#F5F7FC; }
.ab-founder-grid{ display:grid; gap:clamp(1.75rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:center; }
.ab-founder-img{ margin:0; }
.ab-founder-img img{ width:100%; height:auto; border-radius:20px; box-shadow:0 20px 48px rgba(3,78,162,.16); }
.ab-founder h2{ color:var(--brand-navy,#034EA2); }
.ab-founder-cred{ margin:.6rem 0 1.1rem; color:#2A6FC4; font-weight:700; }
.ab-founder p{ color:#4B5563; line-height:1.68; }
.ab-quote{
  margin:1.5rem 0 0; padding:1.15rem 1.35rem; border-left:4px solid var(--brand-yellow,#FFC20D);
  background:#fff; border-radius:0 14px 14px 0; color:var(--brand-navy,#034EA2);
  font-style:italic; line-height:1.6;
}
.ab-quote cite{ display:block; margin-top:.6rem; font-style:normal; font-size:.875rem; color:#8A93A8; }

/* điều chúng tôi tin */
.ab-beliefs{ padding-block:clamp(3rem,7vw,5.5rem); background:#fff; }
.ab-beliefs h2{ color:var(--brand-navy,#034EA2); }
.ab-belief-list{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.ab-belief{ position:relative; padding:1.75rem 1.5rem 1.6rem; background:#fff; border:1px solid #E3E8F2; border-radius:18px;
  transition:transform .3s ease, box-shadow .3s ease; }
.ab-belief:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(3,78,162,.12); }
.ab-belief-no{
  display:inline-grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--brand-yellow,#FFC20D); color:#022C5C; font-weight:800; font-size:.875rem;
}
.ab-belief h3{ margin:.75rem 0 .5rem; color:var(--brand-navy,#034EA2); font-size:1.125rem; font-weight:700; line-height:1.32; }
.ab-belief p{ margin:0; color:#4B5563; line-height:1.62; }

/* kiểm chứng được */
.ab-proof{ padding-block:clamp(3rem,7vw,5.5rem); background:#F5F7FC; }
.ab-proof-list{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.ab-proof-list li{ background:#fff; border:1px solid #E3E8F2; border-radius:18px; padding:1.6rem 1.35rem; text-align:center; }
.ab-proof-list b{ display:block; color:var(--brand-navy,#034EA2); font-weight:800; line-height:1.1;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem); overflow-wrap:anywhere; }
.ab-proof-list span{ display:block; margin-top:.6rem; color:#5A6478; font-size:.9375rem; line-height:1.5; }

/* nói cho đủ — phần chưa làm được */
.ab-gaps{ padding-block:clamp(3rem,7vw,5.5rem); background:#022C5C; color:#EAF0FF; }
.ab-gaps h2{ color:#fff; max-width:24ch; }
.ab-gaps-lead{ margin-top:1.1rem; max-width:62ch; color:#B9C7EA; line-height:1.7; }
.ab-gap-list{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.ab-gap{ padding:1.5rem 1.35rem; border-radius:16px; background:rgba(255,255,255,.055); border:1px dashed rgba(255,255,255,.28); }
.ab-gap h3{ margin:0 0 .5rem; color:var(--brand-yellow,#FFC20D); font-size:1.0625rem; font-weight:700; line-height:1.35; }
.ab-gap p{ margin:0; color:#B9C7EA; font-size:.9375rem; line-height:1.6; }


/* ============================================================
   SJE — TOKEN THEO BAN CHUAN DA MERGE
   Nguon: docs/design/SJE_FLOW_DESIGN_LANGUAGE.md v1.3 (origin/main), muc 3.1-3.3
   LUU Y: ban nhap docs/design/SJE_DESIGN_LANGUAGE_V1.md KHONG phai chuan.
   Luat vang: accent CHI danh cho "ban dang o day / nhin vao day" + link tren nen dam.
   ============================================================ */
:root{
  --sje-primary:#034ea2;
  --sje-primary-deep:#0b2c5f;
  --sje-accent:#fcd34d;
  --sje-ok:#16a34a;
  --sje-danger:#dc2626;
  --sje-ink:#0f172a;
  --sje-muted:#64748b;
  --sje-bg:#f4f7fc;
  --sje-line:#dbe4f0;

  --brand-navy:var(--sje-primary);
  --brand-blue:var(--sje-primary);
  --brand-deep:var(--sje-primary-deep);
  --brand-yellow:var(--sje-accent);
}
.sje-blue{ color:var(--sje-primary) } .sje-blue-bg{ background-color:var(--sje-primary) }
.sje-yellow{ color:var(--sje-accent) } .sje-yellow-bg{ background-color:var(--sje-accent) }
.sje-secondary-blue{ color:var(--sje-primary) } .sje-secondary-blue-bg{ background-color:var(--sje-primary) }

/* vo toi dung --sje-primary-deep */
.sje-os{
  background:
    radial-gradient(60rem 32rem at 12% -10%, rgba(252,211,77,.15), transparent 60%),
    radial-gradient(48rem 28rem at 95% 108%, rgba(3,78,162,.55), transparent 62%),
    linear-gradient(160deg,#0b2c5f 0%,#0e3a7a 58%,#082346 100%) !important;
}
.lis-hero,.ab-hero{
  background:
    radial-gradient(52rem 30rem at 8% -12%, rgba(252,211,77,.17), transparent 60%),
    radial-gradient(44rem 26rem at 96% 110%, rgba(3,78,162,.5), transparent 62%),
    linear-gradient(155deg,#0b2c5f 0%,#0e3a7a 58%,#082346 100%) !important;
}
.lis-flow{
  background:
    radial-gradient(46rem 26rem at 92% -10%, rgba(252,211,77,.13), transparent 58%),
    linear-gradient(165deg,#082346 0%,#0e3a7a 62%,#0b2c5f 100%) !important;
}
.lis-princ,.ab-gaps{ background:var(--sje-primary-deep) !important; }
.lis-node-num{ box-shadow:0 0 0 7px #0e3a7a, 0 14px 30px rgba(0,0,0,.3) !important; }
.lis-gate-ico{ background:#0e3a7a !important; }
@media (max-width:640px){ .lis-node-num{ box-shadow:0 0 0 6px #0e3a7a !important; } }
.lis-sec-alt,.ab-founder{ background:var(--sje-bg) !important; }

/* hinh khoi: card 14-20px, nut 8-10px, chip 999px */
.lis-pillar,.lis-tier,.lis-tech,.ab-belief,.sje-card,
.ab-why-old,.ab-why-new,.ab-gap{ border-radius:18px !important; }
.lis-pillar,.lis-tier,.lis-tech,.ab-belief{ border-color:var(--sje-line) !important; }
.lis-pillar:hover,.lis-tech:hover,.ab-belief:hover{ box-shadow:0 14px 36px rgba(15,23,42,.10) !important; }
.ab-tag,.lis-tech-skill{ border-radius:999px !important; }

/* chu phu / chu chinh theo token */
.lis-node-teach,.lis-sub,.lis-tier-q,.lis-tech p,.ab-belief p,.ab-why-old p,.ab-why-new p{
  color:#475569 !important;
}
.sje-figures span{ color:var(--sje-muted) !important; }

/* KY LUAT VANG (muc 3.1): accent chi cho "dang o day / nhin vao day" + link tren nen dam.
   Bo vang trang tri o cac mang nen sang. */
.lis-eyebrow::before,.ab-eyebrow::before{ background:var(--sje-primary) !important; }
.section-title::after{ background:var(--sje-primary) !important; }
.lis-tier::before{ background:var(--sje-primary) !important; }
.ab-quote{ border-left-color:var(--sje-primary) !important; }
.ab-belief-no{ background:var(--sje-primary) !important; color:#fff !important; }
/* giu vang o dung 3 cho: buoc dang mo, nut tren nen dam, but da danh dau cum chu khoa */
.lis-node-num{ background:var(--sje-accent) !important; color:#0b2c5f !important; }
.sje-os-cta a{ background:var(--sje-accent) !important; color:#0b2c5f !important;
  border-radius:10px !important; box-shadow:0 12px 28px rgba(252,211,77,.26) !important; }
.sje-mark{ background-image:linear-gradient(transparent 58%, rgba(252,211,77,.55) 58%) !important; }

/* eyebrow: sans hoa, letter-spacing .06em (muc 3.2) */
.sje-eyebrow,.lis-eyebrow,.ab-eyebrow{ font-size:12px !important; letter-spacing:.06em !important; }

/* P: mot man, mot con so */
.sje-figures{
  list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:1.4fr 1fr 1fr 1fr; text-align:left;
}
@media (max-width:900px){ .sje-figures{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .sje-figures{ grid-template-columns:1fr; } }
.sje-figures li{ background:#fff; border:1px solid var(--sje-line); border-radius:18px; padding:1.4rem 1.3rem; }
.sje-figures b{ display:block; color:var(--sje-primary); font-weight:800; line-height:1.05;
  font-size:20px; overflow-wrap:anywhere; }
.sje-figures span{ display:block; margin-top:.5rem; font-size:14px; line-height:1.5; }
.sje-figures li.is-lead{ background:#eaf2fb; border-color:#cfe0f4; }
.sje-figures li.is-lead b{ font-size:clamp(34px,2rem + 1vw,40px); }
.sje-figures li.is-lead span{ color:#0b2c5f !important; font-weight:600; }


/* ============================================================
   SJE — font giao dien: Be Vietnam Pro (28/07, vong 10)
   Founder uy quyen chon. Dau tieng Viet duoc ve rieng thay vi ghep may.
   Doi lai font = sua dong nay + the <link> trong tung trang.
   ============================================================ */
body,button,input,select,textarea,
h1,h2,h3,h4,h5,h6,p,li,a,span,div,blockquote,figcaption,cite,label,th,td{
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
}
/* Be Vietnam Pro dung hoi rong hon Inter o cung co -> siet nhe khoang chu tieu de */
h1,h2,.lis-lockup,.ab-hero h1,.sje-os-head h2{ letter-spacing:-.025em; }


/* ============================================================
   SJE — vong 11: khoi "Bat dau o SJE" + sua but da tren nen dam
   ============================================================ */
.ab-start{ padding-block:clamp(3rem,7vw,5.5rem); background:var(--sje-primary-deep,#0b2c5f); color:#EAF0FF; }
.ab-start h2{ margin:.85rem 0 0; color:#fff; font-weight:800; letter-spacing:-.025em; line-height:1.2;
  font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem); max-width:24ch; }
.ab-start-lead{ margin-top:1.05rem; max-width:60ch; color:#B9C7EA; line-height:1.7; }

.ab-steps{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); counter-reset:none; }
.ab-step{ position:relative; padding:1.75rem 1.45rem 1.6rem; border-radius:18px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  transition:transform .28s ease, background .28s ease; }
.ab-step:hover{ transform:translateY(-4px); background:rgba(255,255,255,.1); }
.ab-step-no{ display:inline-grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%;
  background:var(--sje-accent,#fcd34d); color:#0b2c5f; font-weight:800; font-size:1rem; }
.ab-step h3{ margin:.8rem 0 .5rem; color:#fff; font-size:1.125rem; font-weight:700; line-height:1.3; }
.ab-step p{ margin:0; color:#B9C7EA; line-height:1.62; }

.ab-assure{ list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.ab-assure li{ display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#DCE6FF; font-size:.875rem; font-weight:600; padding:.4rem .9rem; border-radius:999px; }
.ab-assure li::before{ content:"✓"; color:var(--sje-accent,#fcd34d); font-weight:800; }

/* But da vang de len chu trang tren nen dam -> nhin duc. Tren nen dam: doi thanh chu vang. */
.ab-hero .sje-mark,.lis-hero .sje-mark,.lis-flow .sje-mark,
.ab-start .sje-mark,.sje-os .sje-mark,.lis-princ .sje-mark{
  background-image:none !important; color:var(--sje-accent,#fcd34d) !important; padding:0 !important;
}


/* ============================================================
   SJE — muc "Vi sao chon ..." o trang chu (28/07, vong 14)
   ============================================================ */
.why-sec{ padding-block:clamp(3rem,7vw,5.5rem); background:var(--sje-bg,#f4f7fc); }
.why-wrap{ width:min(1140px,100%); margin-inline:auto; padding-inline:clamp(1.125rem,4vw,2.5rem); }
.why-head h2{
  margin:.85rem 0 0; color:var(--sje-primary,#034ea2); font-weight:800; letter-spacing:-.025em;
  line-height:1.2; font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem); max-width:22ch;
}
.why-head p{ margin-top:.9rem; max-width:62ch; color:#475569; line-height:1.7; font-size:1.0625rem; }

.why-list{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid;
  gap:clamp(1rem,2.4vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.why-card{
  position:relative; background:#fff; border:1px solid var(--sje-line,#dbe4f0);
  border-radius:18px; padding:1.75rem 1.5rem 1.6rem;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.why-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(15,23,42,.10); }
.why-no{
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.12em;
  color:var(--sje-primary,#034ea2); background:#eaf2fb; padding:.25rem .55rem; border-radius:999px;
}
.why-card h3{ margin:.8rem 0 .5rem; color:var(--sje-primary,#034ea2); font-size:1.125rem;
  font-weight:700; line-height:1.32; }
.why-card p{ margin:0; color:#475569; line-height:1.62; }

.why-links{ margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:1.5rem; }
.why-links a{ color:var(--sje-primary,#034ea2); font-weight:700; }
.why-links a:hover{ text-decoration:underline; }


/* ============================================================
   SJE — khung doi chieu "neu khong hoc o day" (29/07, vong 17)
   ============================================================ */
.alt-sec{ padding-block:clamp(3rem,7vw,5.5rem); background:#fff; }
.alt-wrap{ width:min(1140px,100%); margin-inline:auto; padding-inline:clamp(1.125rem,4vw,2.5rem); }
.alt-sec h2{ margin:.85rem 0 0; color:var(--sje-primary,#034ea2); font-weight:800;
  letter-spacing:-.025em; line-height:1.2; font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem); max-width:24ch; }
.alt-lead{ margin-top:.9rem; max-width:62ch; color:#475569; line-height:1.7; font-size:1.0625rem; }
.alt-list{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid;
  gap:clamp(1rem,2.4vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.alt-card{ background:var(--sje-bg,#f4f7fc); border:1px solid var(--sje-line,#dbe4f0);
  border-radius:18px; padding:1.6rem 1.4rem; }
.alt-card h3{ margin:0 0 .7rem; color:var(--sje-primary,#034ea2); font-size:1.0625rem; font-weight:700; }
.alt-plus,.alt-gap{ margin:0; line-height:1.6; font-size:.9375rem; }
.alt-plus{ color:#475569; }
.alt-plus::before{ content:"+ "; color:#16a34a; font-weight:800; }
.alt-gap{ margin-top:.6rem !important; padding-top:.6rem; border-top:1px dashed var(--sje-line,#dbe4f0); color:#5b6b87; }
.alt-gap::before{ content:"− "; color:#b45309; font-weight:800; }
.alt-close{ margin-top:1.75rem; max-width:70ch; color:#475569; line-height:1.7; }
.alt-close b{ color:var(--sje-primary,#034ea2); }