/* Trang ngành, khối ngành, tổng quan ngành: bố cục nhiều dạng thay cho các danh sách chữ.
   Màu theo khối ngành lấy từ biến --tk (đã có sẵn ở .k1 … .k5). Tiền tố ng2- để không trùng CSS chung. */

.k1,.k2,.k3,.k4,.k5{--tk-soft:color-mix(in srgb,var(--tk) 30%,#fff);--tk-s:var(--tk);--tk-on:var(--brand-900)}
.k5{--tk-s:#2f6fc4;--tk-on:#fff}

/* Bạn sẽ học: các thẻ đánh số */
.ng2-learn{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ng2-learn li{display:grid;gap:14px;align-content:start;padding:22px 20px;background:#fff;border:1px solid var(--track);border-top:5px solid var(--tk-s);border-radius:6px;transition:transform var(--t-mid,.3s) var(--ease,ease),box-shadow var(--t-mid,.3s) var(--ease,ease)}
.ng2-learn li:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,38,79,.45)}
.ng2-n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--tk-s);color:var(--tk-on);font:600 1.25rem/1 var(--font-serif)}
.ng2-learn p{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ink)}

/* Sau khóa học bạn làm được + Phù hợp với bạn nếu: nền nhạt theo màu khối */
.ng2-outcome{background:var(--tk-soft)}
.ng2-outcome-in{display:grid;gap:32px}
@media (min-width:900px){.ng2-outcome-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:start}.ng2-outcome-in--one{grid-template-columns:minmax(0,1fr)}}
.ng2-outcome h2{margin-bottom:18px;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.015em;color:var(--brand-900)}
.ng2-can,.ng2-fit{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ng2-can li{position:relative;padding:16px 18px 16px 58px;background:#fff;border-radius:6px;font-size:1.0625rem;line-height:1.5}
.ng2-can li::before{content:"";position:absolute;left:16px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--brand-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ng2-fit li{padding:14px 18px;background:rgba(255,255,255,.65);border:2px solid #fff;border-radius:999px;font-weight:600;line-height:1.4;color:var(--brand-900)}

/* Cơ hội việc làm: số thứ tự lớn */
.ng2-jobs .ng-joblist{counter-reset:j}
.ng2-jobs .ng-joblist li{counter-increment:j;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;border-left:0;border-radius:6px;padding:18px 20px;transition:background-color var(--t-fast,.2s) var(--ease,ease)}
.ng2-jobs .ng-joblist li:hover{background:rgba(255,255,255,.13)}
.ng2-jobs .ng-joblist li::before{content:counter(j,decimal-leading-zero);font:600 1.75rem/1 var(--font-serif);color:var(--tk)}

/* Hình đầu trang khối ngành / tổng quan: ba ảnh xếp chồng */
.ng2-meta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.ng2-meta li{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:.9375rem}
.ng2-meta b{color:var(--accent-yellow);font-size:1.125rem;margin-right:2px}
.ng2-collage{position:relative;aspect-ratio:3/2;width:100%;max-width:560px}
.ng2-collage>div{position:absolute;display:block;width:56%;aspect-ratio:3/2;overflow:hidden;background:#fff;border:4px solid #fff;border-radius:8px;box-shadow:0 18px 36px -14px rgba(0,0,0,.55)}
.ng2-collage .a{left:0;top:8%;transform:rotate(-4deg)}
.ng2-collage .b{right:0;top:0;transform:rotate(3.5deg)}
.ng2-collage .c{left:22%;bottom:0;transform:rotate(-1deg);z-index:2}
.ng2-collage>div:nth-of-type(n+4){display:none}
@media (min-width:900px){
  .ng2-herocol .container{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
}

/* Trang tổng quan: số ngành lớn trong từng khối */
.ng2-count{display:block;margin-bottom:6px;font-size:.9375rem;font-weight:600;color:var(--brand-900);opacity:.8}
.ng2-count b{margin-right:4px;font:600 2.75rem/1 var(--font-serif);letter-spacing:-.02em;vertical-align:-4px}

@media (max-width:639px){
  .ng2-learn{gap:10px}
  .ng2-learn li{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:16px;border-top-width:1px;border-left:5px solid var(--tk-s)}
}

/* ===== Banner đồng bộ cho ngành / khối (thay poster cũ) ===== */
.k1{--b1:#e4fbc0;--b2:#9fd05a;--bt:#0b2a14}
.k2{--b1:#fff3b0;--b2:#fed933;--bt:#3a2d00}
.k3{--b1:#ffe6d6;--b2:#fe9c70;--bt:#4a1a00}
.k4{--b1:#d4e5fa;--b2:#6b97cf;--bt:#00264f}
.k5{--b1:#6aa6f0;--b2:#1f5fb8;--bt:#fff}
.ng2-banner{position:relative;display:block;margin:0;aspect-ratio:3/2;width:100%;max-width:560px;overflow:hidden;border-radius:12px;background:#dbe8f7;isolation:isolate;box-shadow:0 22px 40px -22px rgba(0,0,0,.6)}
.ng2-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.ng2-note{position:absolute;right:10px;top:10px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.02em;line-height:1.4;backdrop-filter:blur(2px)}
.ng2-note--c{right:auto;left:50%;bottom:-6px;top:auto;transform:translateX(-50%);z-index:3}
.ng2-banner figcaption{position:absolute;left:12px;bottom:12px;display:grid;gap:1px;padding:8px 16px 9px;border-radius:10px;background:rgba(0,38,79,.88);color:#fff;backdrop-filter:blur(2px)}
.ng2-banner figcaption small{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-yellow)}
.ng2-banner figcaption b{font:600 clamp(1rem,.9vw + .7rem,1.375rem)/1.15 var(--font-serif)}
.ng-hero .ng2-banner{justify-self:end}

/* Ô biểu tượng ngành trong đầu trang khối / tổng quan */
.ng2-tiles{display:grid;gap:12px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));max-width:560px;width:100%}
.ng2-tile{display:grid;gap:8px;justify-items:center;align-content:center;min-height:118px;padding:14px 10px;text-align:center;border-radius:10px;background:linear-gradient(135deg,var(--b1),var(--b2));color:var(--bt);box-shadow:0 14px 26px -18px rgba(0,0,0,.6)}
.ng2-tile>span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.5)}
.k5.ng2-tile>span{background:rgba(255,255,255,.16)}
.ng2-tile svg{width:30px;height:30px}
.ng2-tile b{font-size:.875rem;font-weight:700;line-height:1.25;text-wrap:balance}
.ng2-tiles--k{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}

/* Thẻ ngành trong trang khối: tranh minh họa */
.ng2-thumb{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#dbe8f7}
.ng2-thumb .ng2-photo{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ng-card:hover .ng2-thumb .ng2-photo{transform:scale(1.05)}

/* Thanh các ngành trong khối: biết đang ở khối nào, nhảy sang ngành cùng khối */
.ng2-sibnav{background:#fff;border-bottom:1px solid var(--track)}
.ng2-sibnav .container{display:flex;flex-direction:column;gap:6px;padding-block:12px}
.ng2-sibnav-l{font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ng2-sibnav-l a{color:var(--brand);text-decoration:none}
.ng2-sibnav-l a:hover{text-decoration:underline}
.ng2-sibnav ul{display:flex;gap:8px;margin:0;padding:2px 0 4px;list-style:none;overflow-x:auto;scrollbar-width:none}
.ng2-sibnav ul::-webkit-scrollbar{display:none}
.ng2-sibnav li{flex:none}
.ng2-sibnav li a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;background:var(--paper-2);color:var(--ink);font-size:.9375rem;font-weight:600;text-decoration:none;box-shadow:inset 0 0 0 1px var(--track);transition:background-color .2s,color .2s}
.ng2-sibnav li a:hover{background:var(--brand-50)}
.ng2-sibnav li a[aria-current=page]{background:var(--brand-900);color:#fff;box-shadow:none}
@media (min-width:900px){
  .ng2-sibnav .container{flex-direction:row;align-items:center;gap:18px}
  .ng2-sibnav ul{flex-wrap:wrap;overflow:visible}
}