/* Trang /khoa-hoc — quảng cáo khóa học DBIM thiết kế kết cấu.
   Mọi selector đều nằm dưới .kh để không đụng tới các trang khác.
   Màu lấy theo chuẩn của trang Bảng giá: navy #1f5fa8, thép #c2703d.
   Template gốc (main.css) gán Montserrat + màu cho a/p, a:hover đổi màu, a:focus bỏ viền,
   ul/li bỏ dấu đầu dòng — các rule bên dưới cố ý ghi đè lại những điểm đó. */

.kh {
    --kh-navy: #1f5fa8;
    --kh-navy-deep: #123d70;
    --kh-steel: #c2703d;
    --kh-steel-soft: #f6e9df;
    --kh-ink: #16202c;
    --kh-graphite: #55606b;
    --kh-line: #d7dee7;
    --kh-paper: #f4f7fa;
    --kh-card: #ffffff;
    --kh-zalo: #0068ff;
    font-family: "Be Vietnam Pro", Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--kh-ink);
    background: var(--kh-paper);
    font-size: 15.5px;
    line-height: 1.6;
}
.kh *, .kh *::before, .kh *::after { box-sizing: border-box; }
.kh p { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.kh a { font-family: inherit; line-height: inherit; }
.kh a:focus-visible, .kh button:focus-visible { outline: 3px solid var(--kh-steel) !important; outline-offset: 2px; }
.kh-in { max-width: 1140px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.kh h1, .kh h2, .kh h3 {
    font-family: "Barlow Condensed", "Be Vietnam Pro", Montserrat, sans-serif;
    text-wrap: balance; margin: 0; line-height: 1.1; letter-spacing: .01em;
}
.kh-mono {
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* ===== Nút ===== */
.kh a.kh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 22px; border-radius: 4px; font-weight: 600; font-size: 15.5px;
    text-decoration: none; transition: transform .15s, box-shadow .15s, background-color .15s;
}
.kh a.kh-btn:hover { transform: translateY(-1px); text-decoration: none; }
.kh a.kh-btn-zalo, .kh a.kh-btn-zalo:hover, .kh a.kh-btn-zalo:focus { background: var(--kh-steel); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.kh a.kh-btn-zalo:hover { background: #ad5f2f; }
.kh a.kh-btn-ghost, .kh a.kh-btn-ghost:hover, .kh a.kh-btn-ghost:focus { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.kh a.kh-btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ===== Đầu trang — nền bản vẽ ===== */
.kh-hero { background: var(--kh-navy-deep); color: #fff; position: relative; overflow: hidden; padding: 56px 0 64px; }
.kh-hero::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 32px 32px;
}
.kh-hero .kh-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.kh-eyebrow { display: inline-flex; gap: 10px; align-items: center; color: #ffd2b0; }
.kh-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--kh-steel); }
.kh-hero h1 { font-size: clamp(38px, 6vw, 62px); font-weight: 700; margin-top: 14px; text-transform: uppercase; color: #fff; }
.kh-hero h1 em { font-style: normal; color: #ffb98a; }
.kh-hero .kh-lead { margin-top: 18px; max-width: 34em; color: rgba(255,255,255,.88); font-size: 17px; }
.kh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kh-chip { border: 1px solid rgba(255,255,255,.28); border-radius: 3px; padding: 5px 10px; font-size: 13.5px; color: rgba(255,255,255,.92); }
.kh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kh-sheet { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 14px; margin: 0; }
.kh-sheet svg { display: block; width: 100%; height: auto; }
.kh-sheet-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border-top: 1px solid rgba(255,255,255,.22); margin-top: 10px; padding-top: 10px; color: rgba(255,255,255,.75);
}
.kh-sheet-foot b { color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 22px; letter-spacing: .02em; white-space: nowrap; }

/* ===== Khối nội dung ===== */
.kh-sec { padding: 64px 0; }
.kh-sec + .kh-sec { border-top: 1px solid var(--kh-line); }
.kh-head { display: grid; gap: 10px; max-width: 720px; margin-bottom: 34px; }
.kh-head .kh-mono { color: var(--kh-steel); }
.kh-head h2 { font-size: clamp(30px, 4vw, 42px); color: var(--kh-ink); text-transform: uppercase; }
.kh-head p { color: var(--kh-graphite); }

/* Vấn đề */
.kh-pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kh-pain-item { background: var(--kh-card); border: 1px solid var(--kh-line); border-radius: 4px; padding: 20px; }
.kh-x { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kh-steel-soft); color: var(--kh-steel); font-weight: 700; margin-bottom: 10px; }
.kh-pain-item p { color: var(--kh-graphite); }
.kh-pain-item strong { display: block; color: var(--kh-ink); margin-bottom: 4px; }
.kh-callout { margin-top: 22px; background: var(--kh-card); border: 1px solid var(--kh-line); border-left: 4px solid var(--kh-navy); padding: 18px 20px; border-radius: 0 4px 4px 0; }
.kh-callout b { color: var(--kh-navy); }

/* Nội dung khóa học: 8 phần, lưới 4 cột */
.kh-flow { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--kh-line); border-radius: 4px; background: var(--kh-card); overflow: hidden; }
.kh-step { padding: 22px 20px 24px; border-right: 1px solid var(--kh-line); border-bottom: 1px solid var(--kh-line); }
.kh-step:nth-child(4n) { border-right: 0; }
.kh-step:nth-last-child(-n+4) { border-bottom: 0; }
.kh-step .kh-mono { color: var(--kh-navy); }
.kh-step h3 { font-size: 23px; margin: 6px 0 8px; color: var(--kh-ink); }
.kh-step p { color: var(--kh-graphite); font-size: 14.5px; }
.kh-note { margin-top: 14px; color: var(--kh-graphite); font-size: 14px; }
.kh-note b { color: var(--kh-ink); }

/* Đối tượng */
.kh-aud { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kh-aud-card { background: var(--kh-card); border: 1px solid var(--kh-line); border-radius: 4px; padding: 22px; }
.kh-aud-card h3 { font-size: 24px; color: var(--kh-navy); }
.kh-aud-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--kh-graphite); }
.kh-aud-card li { list-style-type: disc; }
.kh-aud-card li + li { margin-top: 4px; }

/* Học phí */
.kh-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; padding-top: 12px; }
.kh-plan { background: var(--kh-card); border: 1px solid var(--kh-line); border-radius: 4px; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.kh-plan.is-main { border: 2px solid var(--kh-navy); box-shadow: 0 14px 34px rgba(31,95,168,.16); }
.kh-badge { position: absolute; top: -12px; left: 22px; background: var(--kh-navy); color: #fff; padding: 3px 10px; border-radius: 3px; }
.kh-plan h3 { font-size: 26px; color: var(--kh-ink); }
.kh-meta { color: var(--kh-graphite); font-size: 14px; }
.kh-amt { font-family: "Barlow Condensed", sans-serif; font-size: 44px; font-weight: 700; color: var(--kh-navy); line-height: 1; font-variant-numeric: tabular-nums; }
.kh-amt small { font-family: "Be Vietnam Pro", Montserrat, sans-serif; font-size: 14px; font-weight: 500; color: var(--kh-graphite); margin-left: 4px; }
.kh-plan ul { margin: 0; padding: 0; display: grid; gap: 8px; color: var(--kh-ink); font-size: 14.5px; }
.kh-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.kh-plan li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border: 2px solid var(--kh-steel); transform: rotate(45deg); }
.kh-plan a.kh-btn { margin-top: auto; }
.kh-plan a.kh-btn, .kh-plan a.kh-btn:hover, .kh-plan a.kh-btn:focus { background: var(--kh-navy); color: #fff; }
.kh-plan a.kh-btn:hover { background: #184d8a; }
.kh-plan:not(.is-main) a.kh-btn, .kh-plan:not(.is-main) a.kh-btn:focus { background: transparent; color: var(--kh-navy); border: 1.5px solid var(--kh-navy); }
.kh-plan:not(.is-main) a.kh-btn:hover { background: var(--kh-navy); color: #fff; }

/* Ưu đãi */
.kh-offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kh-offer-item { display: flex; gap: 16px; align-items: center; background: var(--kh-steel-soft); border-radius: 4px; padding: 18px 20px; }
.kh-big { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 40px; color: var(--kh-steel); line-height: 1; min-width: 70px; text-align: center; }
.kh-big small { font-size: 18px; }
.kh-offer-item b { color: var(--kh-ink); }
.kh-offer-item p { color: var(--kh-graphite); font-size: 14.5px; }

.kh-commit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.kh-commit div { border-top: 3px solid var(--kh-navy); padding-top: 12px; }
.kh-commit b { display: block; color: var(--kh-ink); }
.kh-commit span { color: var(--kh-graphite); font-size: 14px; }

/* Liên hệ cuối trang */
.kh-final { background: var(--kh-navy); color: #fff; border-radius: 4px; padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.kh-final .kh-mono { color: #ffd2b0; }
.kh-final p { color: rgba(255,255,255,.88); margin-top: 8px; }
.kh a.kh-phone, .kh a.kh-phone:hover, .kh a.kh-phone:focus {
    font-family: "Barlow Condensed", sans-serif; font-size: 40px; font-weight: 700; letter-spacing: .02em;
    color: #fff; text-decoration: none; display: block; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.kh-final .kh-cta { margin-top: 0; }
.kh-final a.kh-btn-zalo, .kh-final a.kh-btn-zalo:hover, .kh-final a.kh-btn-zalo:focus { background: #fff; color: var(--kh-zalo); }

/* ===== Máy tính bảng ===== */
@media (max-width: 991px) {
    .kh-hero .kh-in { grid-template-columns: 1fr; }
    .kh-pain, .kh-price, .kh-offer { grid-template-columns: 1fr; }
    .kh-plan.is-main { order: -1; }
    .kh-flow { grid-template-columns: 1fr 1fr; }
    .kh-step:nth-child(4n) { border-right: 1px solid var(--kh-line); }
    .kh-step:nth-child(2n) { border-right: 0; }
    .kh-step:nth-last-child(-n+4) { border-bottom: 1px solid var(--kh-line); }
    .kh-step:nth-last-child(-n+2) { border-bottom: 0; }
    .kh-commit { grid-template-columns: 1fr 1fr; }
    .kh-final { grid-template-columns: 1fr; }
}
/* ===== Điện thoại ===== */
@media (max-width: 575px) {
    .kh { font-size: 15px; }
    .kh-hero { padding: 40px 0 44px; }
    .kh-sec { padding: 44px 0; }
    .kh-flow, .kh-aud { grid-template-columns: 1fr; }
    .kh-step, .kh-step:nth-child(2n), .kh-step:nth-child(4n) { border-right: 0; }
    .kh-step, .kh-step:nth-last-child(-n+2), .kh-step:nth-last-child(-n+4) { border-bottom: 1px solid var(--kh-line); }
    .kh-step:last-child { border-bottom: 0; }
    .kh-final { padding: 24px; }
    .kh a.kh-btn { width: 100%; }
    .kh a.kh-phone { font-size: 34px; }
    .kh-sheet-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .kh a.kh-btn { transition: none; }
    .kh a.kh-btn:hover { transform: none; }
}