/* ===== KHÓA HỌC — bổ sung trên styles.css gốc ===== */

/* HERO */
.kh-hero{position:relative;overflow:hidden;background:radial-gradient(120% 130% at 80% 0%, var(--navy-700) 0%, var(--navy-900) 45%, var(--ink) 100%);color:#fff;padding:7.5rem 0 4rem;text-align:center}
.kh-hero__glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.26),transparent 65%);top:-160px;right:-100px;filter:blur(20px)}
.kh-hero__inner{position:relative;max-width:840px;margin-inline:auto}
.kh-hero__title{font-family:var(--ff-display);font-weight:700;font-size:clamp(2.1rem,5.6vw,3.6rem);line-height:1.1;margin:.6rem 0 1rem}
.kh-hero__title em{font-style:italic;color:var(--gold-2)}
.kh-hero__lead{color:#c7d4e6;font-size:1.08rem;max-width:680px;margin:0 auto 1.8rem}
.kh-hero__lead b{color:#fff}
.kh-hero__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:2rem}
.kh-pill{background:rgba(255,255,255,.06);border:1px solid rgba(201,162,75,.3);color:#e7eef7;font-size:.88rem;font-weight:500;padding:.5rem 1rem;border-radius:999px}
.kh-hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* 3 KHÓA */
.kh-courses{padding:5.5rem 0;background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.kh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}
.kh-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(20,40,75,.08);border-radius:var(--r);padding:2rem 1.7rem;box-shadow:0 20px 44px -32px rgba(10,20,40,.5);transition:transform .4s var(--ease),box-shadow .4s}
.kh-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(10,20,40,.6)}
.kh-card--feature{background:linear-gradient(170deg,var(--navy-800),var(--navy-900));color:#fff;border-color:rgba(201,162,75,.55);transform:translateY(-12px)}
.kh-card--feature:hover{transform:translateY(-18px)}
.kh-card__ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#241a06;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.35rem .9rem;border-radius:999px;white-space:nowrap}
.kh-card__tag{display:inline-block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.kh-card--feature .kh-card__tag{color:var(--gold-2)}
.kh-card__head h3{font-family:var(--ff-display);font-size:1.32rem;line-height:1.25;margin:.5rem 0 .9rem;color:var(--navy-900)}
.kh-card--feature .kh-card__head h3{color:#fff}
.kh-card__price{display:flex;align-items:baseline;gap:.25rem;color:var(--gold)}
.kh-card__price b{font-family:var(--ff-display);font-size:2.4rem;line-height:1}
.kh-card__price span{font-size:1rem;font-weight:600}
.kh-card--feature .kh-card__price{color:var(--gold-2)}
.kh-card__sub{font-size:.86rem;color:#5d6b80;margin:.4rem 0 1.2rem}
.kh-card--feature .kh-card__sub{color:#bccadd}
.kh-card__list{list-style:none;display:grid;gap:.6rem;margin-bottom:1.6rem;flex:1}
.kh-card__list li{position:relative;padding-left:1.6rem;font-size:.92rem;color:#46566c}
.kh-card--feature .kh-card__list li{color:#cdd9e8}
.kh-card__list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--jade);font-weight:800}
.kh-card--feature .kh-card__list li::before{color:var(--gold-2)}
.kh-card__list b{color:inherit;font-weight:700}
.kh-note{text-align:center;margin-top:2.2rem;color:#5d6b80;font-size:.95rem}
.kh-note a{color:var(--gold);font-weight:600;text-decoration:underline}
@media(max-width:900px){.kh-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}.kh-card--feature{transform:none}.kh-card--feature:hover{transform:translateY(-8px)}}

/* CHI TIẾT */
.kh-detail{padding:5.5rem 0;background:radial-gradient(120% 120% at 20% 0%, var(--navy-700), var(--navy-900) 55%, var(--ink));color:#fff}
.kh-detail .section-title{color:#fff}
.kh-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.kh-detail__box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.kh-detail__box h3{font-family:var(--ff-display);font-size:1.4rem;color:var(--gold-2);margin-bottom:1rem}
.kh-detail__box p{color:#c7d4e6;margin-bottom:1rem}
.kh-detail__box b{color:#fff}
.kh-check{list-style:none;display:grid;gap:.55rem;margin:0 0 1.4rem}
.kh-check li{position:relative;padding-left:1.7rem;color:#dbe5f1;font-size:.95rem}
.kh-check li::before{content:"✅";position:absolute;left:0;top:0}
.kh-time{border-top:1px solid rgba(255,255,255,.12);padding-top:1.1rem}
.kh-time h4{color:var(--gold-2);margin-bottom:.5rem;font-family:var(--ff-display);font-size:1.1rem}
.kh-time p{margin:0;color:#dbe5f1}
.kh-diseases{display:flex;flex-wrap:wrap;gap:.55rem}
.kh-diseases span{background:rgba(201,162,75,.1);border:1px solid rgba(201,162,75,.28);color:#eaf1fa;font-size:.86rem;padding:.5rem .85rem;border-radius:10px}
@media(max-width:820px){.kh-detail__grid{grid-template-columns:1fr}}

/* SO SÁNH */
.kh-compare{padding:5.5rem 0;background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.kh-table-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:0 20px 44px -34px rgba(10,20,40,.5)}
.kh-table{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
.kh-table th,.kh-table td{padding:1rem 1.1rem;text-align:center;border-bottom:1px solid rgba(20,40,75,.08)}
.kh-table thead th{background:var(--navy-900);color:#fff;font-family:var(--ff-display);font-weight:600;font-size:1rem}
.kh-table thead th span{display:block;font-family:var(--ff-body);font-size:.8rem;color:var(--gold-2);font-weight:600}
.kh-table thead th.hl{background:linear-gradient(160deg,var(--gold),var(--gold-d));color:#241a06}
.kh-table thead th.hl span{color:#5a4410}
.kh-table tbody td:first-child{text-align:left;font-weight:500;color:var(--navy-900)}
.kh-table tbody tr:nth-child(even){background:var(--paper)}
.kh-table tbody td{color:#46566c;font-size:.92rem}
.kh-table tbody td:nth-child(3){background:rgba(201,162,75,.07);font-weight:600;color:var(--navy-900)}

/* CHECKOUT */
.kh-checkout{padding:5.5rem 0;background:radial-gradient(120% 120% at 80% 0%, var(--navy-700), var(--navy-900) 55%, var(--ink));color:#fff}
.kh-checkout .section-title{color:#fff}
.kh-checkout__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.kh-step{font-family:var(--ff-display);font-size:1.2rem;color:var(--gold-2);margin:0 0 1rem}
.kh-step--pay{margin-top:0}
.kh-picker{display:grid;gap:.7rem;margin-bottom:2rem}
.kh-opt{cursor:pointer}
.kh-opt input{position:absolute;opacity:0;pointer-events:none}
.kh-opt__box{display:block;position:relative;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:1rem 1.1rem;transition:.25s}
.kh-opt__box b{display:block;color:#fff;font-size:1.02rem}
.kh-opt__box small{display:block;color:#bccadd;font-size:.82rem;margin:.15rem 0 .35rem}
.kh-opt__box em{font-style:normal;font-weight:700;color:var(--gold-2);font-size:1.05rem}
.kh-opt input:checked + .kh-opt__box{border-color:var(--gold);background:rgba(201,162,75,.14);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.kh-opt__box::after{content:"";position:absolute;right:1.1rem;top:1.1rem;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.kh-opt input:checked + .kh-opt__box::after{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 45%,transparent 50%)}
.kh-form .field{margin-bottom:.9rem}
.kh-form__note{margin-top:1rem;background:rgba(58,163,146,.16);border:1px solid rgba(58,163,146,.4);color:#d7f0e9;padding:.9rem 1rem;border-radius:12px;font-size:.9rem}
.kh-form__note a{color:var(--gold-2);font-weight:700}

/* QR */
.kh-checkout__right{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}
.kh-qr__img{background:#fff;border-radius:16px;padding:1rem;display:grid;place-items:center;min-height:260px;margin-bottom:1.1rem}
.kh-qr__img img{width:100%;max-width:280px;height:auto;display:block}
.kh-qr__placeholder{text-align:center;color:#8190a6;padding:1.5rem}
.kh-qr__placeholder svg{width:64px;height:64px;fill:#c9d3e0;margin-bottom:.8rem}
.kh-qr__placeholder p{font-size:.88rem;line-height:1.5}
.kh-bank{display:grid;gap:.55rem;margin-bottom:1rem}
.kh-bank__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.92rem;color:#c7d4e6;border-bottom:1px dashed rgba(255,255,255,.1);padding-bottom:.5rem}
.kh-bank__row span{min-width:110px;color:#9fb0c6;font-size:.82rem}
.kh-bank__row b{color:#fff;font-weight:600;font-size:1rem;letter-spacing:.02em}
.kh-bank__row--amount b{color:var(--gold-2);font-size:1.25rem;font-family:var(--ff-display)}
.kh-copy{margin-left:auto;background:rgba(201,162,75,.16);border:1px solid rgba(201,162,75,.4);color:var(--gold-2);font-size:.74rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;cursor:pointer;transition:.2s}
.kh-copy:hover{background:var(--gold);color:#241a06}
.kh-copy.done{background:var(--jade);color:#fff;border-color:transparent}
.kh-qr__hint{font-size:.84rem;color:#9fb0c6;line-height:1.5}
/* gói đặt cọc nổi bật */
.kh-opt--deposit .kh-opt__box{border-color:rgba(201,162,75,.5);background:rgba(201,162,75,.1)}
.kh-opt--deposit .kh-opt__box b{color:var(--gold-2)}
/* liên hệ trước khi CK */
.kh-help{margin-top:1rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
.kh-help>p{font-size:.86rem;color:#c7d4e6;margin-bottom:.7rem}
.kh-help b{color:#fff}
.kh-help__btns{display:grid;gap:.5rem}
.kh-help__btns a{display:block;text-align:center;background:rgba(42,139,242,.16);border:1px solid rgba(42,139,242,.45);color:#cfe2fb;font-size:.86rem;font-weight:600;padding:.6rem .8rem;border-radius:10px;transition:.2s}
.kh-help__btns a:hover{background:#2a8bf2;color:#fff;border-color:transparent}
@media(max-width:860px){.kh-checkout__grid{grid-template-columns:1fr}}

/* LIÊN HỆ NHANH */
.kh-contact{padding:4.5rem 0;background:var(--paper-2);text-align:center}
.kh-contact__inner h2{font-family:var(--ff-display);font-size:1.9rem;color:var(--navy-900);margin-bottom:.5rem}
.kh-contact__inner>p{color:#5d6b80;margin-bottom:2rem}
.kh-contact__people{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.kh-person{background:#fff;border:1px solid rgba(20,40,75,.08);border-radius:16px;padding:1.3rem 1.8rem;min-width:200px;box-shadow:0 16px 36px -28px rgba(10,20,40,.5);transition:.3s}
.kh-person:hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgba(10,20,40,.6)}
.kh-person__role{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.kh-person b{display:block;font-family:var(--ff-display);font-size:1.3rem;color:var(--navy-900);margin:.25rem 0}
.kh-person__phone{color:var(--navy-700);font-weight:600}
.kh-contact__zalo{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.kh-contact__zalo .btn--ghost{color:var(--navy-800);border-color:rgba(20,40,75,.25)}
.kh-contact__zalo .btn--ghost:hover{background:var(--navy-900);color:#fff}

/* FAQ */
.kh-faq{padding:5rem 0;background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.kh-faq__list{max-width:760px;margin-inline:auto;display:grid;gap:.8rem}
.kh-q{background:#fff;border:1px solid rgba(20,40,75,.08);border-radius:14px;padding:.3rem 1.3rem;box-shadow:0 14px 34px -30px rgba(10,20,40,.5)}
.kh-q summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:600;color:var(--navy-900);position:relative;padding-right:2rem}
.kh-q summary::-webkit-details-marker{display:none}
.kh-q summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--gold);transition:.3s}
.kh-q[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.kh-q p{padding:0 0 1.1rem;color:#5d6b80;font-size:.95rem;line-height:1.6}
.kh-q b{color:var(--navy-900)}

/* ===== MOBILE — chữ to/rõ, heading phân cấp, giãn cách thoáng ===== */
@media(max-width:768px){
  .kh-courses,.kh-detail,.kh-compare,.kh-checkout,.kh-faq,.kh-contact{padding:4rem 0}
}
@media(max-width:600px){
  /* HERO — H1 */
  .kh-hero{padding:6.5rem 0 3.4rem}
  .kh-hero__title{font-size:clamp(2.2rem,8.6vw,2.9rem);line-height:1.12;margin:.7rem 0 1.1rem}
  .kh-hero__lead{font-size:1.08rem;line-height:1.8;margin-bottom:1.8rem}
  .kh-hero__pills{gap:.65rem;margin-bottom:2rem}
  .kh-pill{font-size:.96rem;padding:.6rem 1.1rem}
  .kh-hero__actions{flex-direction:column;gap:.9rem}
  .kh-hero__actions .btn{width:100%;justify-content:center;padding:1.05rem 1.4rem;font-size:1.02rem}

  /* H2 + phụ đề chung */
  .section-title{font-size:clamp(1.85rem,7.4vw,2.25rem);line-height:1.22}
  .section-sub{font-size:1.05rem;line-height:1.7}
  .section-head{margin-bottom:2.4rem}

  /* THẺ KHÓA HỌC — H3 + giá + danh sách */
  .kh-grid{gap:1.6rem}
  .kh-card{padding:2.2rem 1.8rem}
  .kh-card__tag{font-size:.8rem}
  .kh-card__head h3{font-size:1.5rem;line-height:1.25;margin:.6rem 0 1rem}
  .kh-card__price b{font-size:2.7rem}
  .kh-card__price span{font-size:1.15rem}
  .kh-card__sub{font-size:.96rem;margin:.5rem 0 1.4rem}
  .kh-card__list{gap:.8rem;margin-bottom:1.8rem}
  .kh-card__list li{font-size:1.02rem;line-height:1.55;padding-left:1.7rem}
  .kh-card .btn{padding:1rem;font-size:1.02rem}
  .kh-note{font-size:1.02rem;line-height:1.7}

  /* CHI TIẾT */
  .kh-detail__grid{gap:1.4rem}
  .kh-detail__box{padding:1.9rem 1.6rem}
  .kh-detail__box h3{font-size:1.45rem;margin-bottom:1.1rem}
  .kh-detail__box p{font-size:1.04rem;line-height:1.8}
  .kh-check li{font-size:1.02rem;padding-left:1.9rem;line-height:1.5}
  .kh-time h4{font-size:1.2rem}
  .kh-time p{font-size:1.05rem}
  .kh-diseases{gap:.6rem}
  .kh-diseases span{font-size:.96rem;padding:.6rem 1rem}

  /* BẢNG SO SÁNH — cho phép cuộn ngang, chữ đủ lớn */
  .kh-table{min-width:600px}
  .kh-table th,.kh-table td{padding:.95rem 1rem;font-size:.98rem}
  .kh-table thead th{font-size:1.05rem}

  /* THANH TOÁN — bước rõ, ô chọn thoáng */
  .kh-checkout__grid{gap:1.6rem}
  .kh-step{font-size:1.3rem;margin-bottom:1.1rem}
  .kh-picker{gap:.9rem;margin-bottom:2.2rem}
  .kh-opt__box{padding:1.15rem 1.2rem}
  .kh-opt__box b{font-size:1.1rem}
  .kh-opt__box small{font-size:.9rem;margin:.25rem 0 .4rem}
  .kh-opt__box em{font-size:1.12rem}
  .kh-form .field{margin-bottom:1.05rem}
  .kh-form__note{font-size:.98rem;line-height:1.6}

  /* QR + thông tin TK — to, rõ, dễ đối chiếu */
  .kh-checkout__right{padding:1.5rem}
  .kh-qr__img{min-height:280px;padding:1.1rem}
  .kh-qr__img img{max-width:300px}
  .kh-bank{gap:.7rem;margin-bottom:1.1rem}
  .kh-bank__row{font-size:1rem;padding-bottom:.65rem;gap:.5rem}
  .kh-bank__row span{min-width:100%;flex-basis:100%;font-size:.82rem;margin-bottom:.1rem}
  .kh-bank__row b{font-size:1.1rem}
  .kh-bank__row--amount b{font-size:1.4rem}
  .kh-copy{font-size:.8rem;padding:.4rem .9rem}
  .kh-qr__hint{font-size:.92rem;line-height:1.6}
  .kh-help>p{font-size:.96rem}
  .kh-help__btns a{font-size:.96rem;padding:.7rem .9rem}

  /* LIÊN HỆ NHANH */
  .kh-contact__inner h2{font-size:1.7rem}
  .kh-contact__inner>p{font-size:1.05rem}
  .kh-contact__people{flex-direction:column;align-items:center;gap:1rem}
  .kh-person{width:100%;max-width:320px;padding:1.4rem}
  .kh-person b{font-size:1.4rem}
  .kh-person__phone{font-size:1.05rem}
  .kh-contact__zalo{flex-direction:column}
  .kh-contact__zalo .btn{width:100%;justify-content:center;padding:1rem}

  /* FAQ */
  .kh-q{padding:.3rem 1.4rem}
  .kh-q summary{font-size:1.08rem;padding:1.1rem 0}
  .kh-q p{font-size:1rem;line-height:1.65}
}