/* ===========================================================================
 * atp-khoahoc.css — "Khoa hoc Advertising" page (post 5268) bespoke design.
 * Ported 1:1 from theme static/Khoa-Hoc-Advertising-standalone.html <style>,
 * with EVERY selector scoped under .aa-khoahoc-scope so nothing leaks into the
 * theme / other pages. Chrome (page-bg/scroll-behavior/site-shell) dropped —
 * the PHP shell renders header/footer.
 *
 * Headings: text-align declared explicitly inside scope (Rule 13) so the
 * Elementor container's text-align can't recentre section heads.
 * Buttons on dark backgrounds keep #fff ink; light buttons keep dark ink
 * (Rule 13 contrast). Dark surfaces (metrics band, featured product card,
 * combo section) hardened to white text at the bottom of this file.
 * ======================================================================== */

/* --- base + tokens (scoped; was :root/body/*) --- */
.aa-khoahoc-scope{
  --ink:#071322;--muted:#536170;--soft:#eef7f4;--paper:#ffffff;--line:#d9e7e2;
  --teal:#008b7a;--mint:#00c49a;--yellow:#ffd936;--blue:#1877f2;--red:#ef4444;
  --green:#18a957;--max:1370px;
  color:var(--ink);font-family:"Inter","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.55;text-align:left;letter-spacing:0
}
.aa-khoahoc-scope *{box-sizing:border-box}
.aa-khoahoc-scope a{color:inherit;text-decoration:none}
.aa-khoahoc-scope img{display:block;max-width:100%}
.aa-khoahoc-scope .wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.aa-khoahoc-scope .section{padding:92px 0}

/* --- eyebrow + buttons --- */
.aa-khoahoc-scope .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:850;color:var(--teal)}
.aa-khoahoc-scope .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(0,196,154,.13)}
.aa-khoahoc-scope .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:900;white-space:nowrap;cursor:pointer}
.aa-khoahoc-scope .btn-primary{background:var(--ink);color:#fff;box-shadow:0 18px 45px -30px rgba(7,19,34,.82)}
.aa-khoahoc-scope .btn-yellow{background:var(--yellow);color:#121212}
.aa-khoahoc-scope .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}

/* --- hero --- */
.aa-khoahoc-scope .hero{position:relative;min-height:780px;overflow:hidden;display:flex;align-items:center;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(246,251,249,.97) 0%,rgba(246,251,249,.9) 36%,rgba(246,251,249,.18) 100%),url("https://advertisingagency.vn/wp-content/uploads/2026/06/academy-desk.jpg") center right/cover no-repeat}
.aa-khoahoc-scope .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,139,122,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,139,122,.055) 1px,transparent 1px);background-size:42px 42px;mix-blend-mode:multiply}
.aa-khoahoc-scope .hero-copy{position:relative;z-index:2;width:min(680px,100%);padding-top:70px}
.aa-khoahoc-scope h1{margin:18px 0 22px;font-size:74px;line-height:.96;letter-spacing:0;font-weight:900;text-align:left}
.aa-khoahoc-scope h1 span{color:var(--teal)}
.aa-khoahoc-scope .hero-sub{max-width:660px;color:#384857;font-size:20px;line-height:1.65}
.aa-khoahoc-scope .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.aa-khoahoc-scope .hero-note{display:flex;align-items:center;gap:13px;margin-top:24px;color:#4e5b68;font-size:14px;font-weight:700}
.aa-khoahoc-scope .hero-note b{color:var(--ink)}
.aa-khoahoc-scope .avatar-row{display:flex}
.aa-khoahoc-scope .avatar-row img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-8px}
.aa-khoahoc-scope .avatar-row img:first-child{margin-left:0}
.aa-khoahoc-scope .hero-products{position:absolute;z-index:1;right:5vw;top:130px;width:520px;height:520px}
.aa-khoahoc-scope .cover{position:absolute;width:178px;filter:drop-shadow(0 30px 30px rgba(7,19,34,.22));border-radius:8px;overflow:hidden;background:#fff;transform-origin:center}
.aa-khoahoc-scope .cover:nth-child(1){right:210px;top:12px;transform:rotate(-8deg)}
.aa-khoahoc-scope .cover:nth-child(2){right:76px;top:56px;transform:rotate(7deg)}
.aa-khoahoc-scope .cover:nth-child(3){right:0;top:220px;transform:rotate(12deg)}
.aa-khoahoc-scope .cover:nth-child(4){right:286px;top:230px;transform:rotate(-14deg)}
.aa-khoahoc-scope .cover:nth-child(5){right:130px;top:304px;transform:rotate(2deg)}
.aa-khoahoc-scope .lab-strip{position:absolute;z-index:2;right:0;bottom:70px;width:430px;padding:18px;border:1px solid rgba(7,19,34,.12);border-radius:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);box-shadow:0 30px 80px -54px rgba(7,19,34,.75)}
.aa-khoahoc-scope .lab-strip b{display:block;font-size:14px;margin-bottom:10px}
.aa-khoahoc-scope .lab-row{display:grid;grid-template-columns:1fr 62px;gap:14px;align-items:center;color:#607181;font-size:12px;font-weight:800}
.aa-khoahoc-scope .lab-bar{height:9px;border-radius:999px;background:linear-gradient(90deg,var(--blue) 0 32%,var(--yellow) 32% 55%,var(--teal) 55% 82%,var(--green) 82% 100%)}

/* --- metrics band (dark) --- */
.aa-khoahoc-scope .metrics{position:relative;margin-top:-52px;z-index:4}
.aa-khoahoc-scope .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#071322;color:#fff;box-shadow:0 25px 70px -45px rgba(7,19,34,.8)}
.aa-khoahoc-scope .metric{padding:28px 30px;border-right:1px solid rgba(255,255,255,.12)}
.aa-khoahoc-scope .metric:last-child{border-right:0}
.aa-khoahoc-scope .metric strong{display:block;font-size:34px;line-height:1;color:var(--yellow)}
.aa-khoahoc-scope .metric span{display:block;margin-top:10px;color:rgba(255,255,255,.68);font-size:13px;font-weight:750}

/* --- section head (explicit text-align — Rule 13) --- */
.aa-khoahoc-scope .section-head{display:grid;grid-template-columns:.82fr 1fr;gap:32px;align-items:end;margin-bottom:34px;text-align:left}
.aa-khoahoc-scope .section-head h2{margin:8px 0 0;font-size:46px;line-height:1.06;letter-spacing:0;text-align:left}
.aa-khoahoc-scope .section-head p{margin:0;color:var(--muted);font-size:17px;line-height:1.75}

/* --- fit "Ai nen hoc" --- */
.aa-khoahoc-scope .fit-grid{display:grid;grid-template-columns:1fr;gap:10px}
.aa-khoahoc-scope .fit-row{display:grid;grid-template-columns:210px 1fr 1fr;gap:16px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:8px;background:#fff}
.aa-khoahoc-scope .fit-row b{font-size:18px}
.aa-khoahoc-scope .fit-row span{color:var(--muted)}
.aa-khoahoc-scope .fit-row em{font-style:normal;color:var(--teal);font-weight:850}

/* --- products --- */
.aa-khoahoc-scope .products{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aa-khoahoc-scope .product-grid{display:grid;grid-template-columns:1.18fr 1fr 1fr;gap:18px}
.aa-khoahoc-scope .product-card{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:8px;background:#f8fbfa;overflow:hidden}
.aa-khoahoc-scope .product-card.featured{grid-row:span 2;background:#071322;color:#fff}
.aa-khoahoc-scope .product-art{min-height:272px;display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(135deg,#e9f8f4,#fff8ca)}
.aa-khoahoc-scope .featured .product-art{min-height:480px;background:linear-gradient(135deg,#06211f,#0a514b 48%,#ffd936)}
.aa-khoahoc-scope .product-art img{height:240px;width:auto;max-width:86%;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(7,19,34,.18))}
.aa-khoahoc-scope .featured .product-art img{height:430px}
.aa-khoahoc-scope .product-body{padding:20px;display:flex;flex-direction:column;gap:12px}
.aa-khoahoc-scope .product-body .btn{width:100%;margin-top:4px}
.aa-khoahoc-scope .tag{width:max-content;max-width:100%;display:inline-flex;padding:6px 9px;border-radius:8px;background:#e8f7f3;color:#006f63;font-size:12px;font-weight:900}
.aa-khoahoc-scope .featured .tag{background:rgba(255,217,54,.16);color:var(--yellow)}
.aa-khoahoc-scope .product-body h3{margin:0;font-size:24px;line-height:1.12;letter-spacing:0}
.aa-khoahoc-scope .product-body p{margin:0;color:#596879;font-size:14px;line-height:1.65}
.aa-khoahoc-scope .featured .product-body p{color:rgba(255,255,255,.74)}
.aa-khoahoc-scope .price{display:flex;align-items:baseline;gap:10px;margin-top:auto}
.aa-khoahoc-scope .price del{color:#8b98a8;font-size:14px;font-weight:800}
.aa-khoahoc-scope .price strong{font-size:26px;color:var(--teal)}
.aa-khoahoc-scope .featured .price strong{color:var(--yellow)}

/* --- roadmap --- */
.aa-khoahoc-scope .roadmap{background:#f5fbf8}
.aa-khoahoc-scope .timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:36px}
.aa-khoahoc-scope .module{min-height:260px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#fff}
.aa-khoahoc-scope .module b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px}
.aa-khoahoc-scope .module h3{margin:18px 0 10px;font-size:20px;line-height:1.16;letter-spacing:0}
.aa-khoahoc-scope .module p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* --- combo (dark) --- */
.aa-khoahoc-scope .combo{background:#071322;color:#fff;overflow:hidden}
.aa-khoahoc-scope .combo-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:42px;align-items:center}
.aa-khoahoc-scope .combo h2{margin:12px 0 18px;font-size:54px;line-height:1;letter-spacing:0;text-align:left}
.aa-khoahoc-scope .combo p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.72}
.aa-khoahoc-scope .combo-price{display:flex;gap:18px;align-items:center;margin:26px 0}
.aa-khoahoc-scope .combo-price del{color:rgba(255,255,255,.42);font-size:18px;font-weight:800}
.aa-khoahoc-scope .combo-price strong{font-size:48px;color:var(--yellow)}
.aa-khoahoc-scope .shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.aa-khoahoc-scope .shelf img{height:230px;width:100%;object-fit:contain;border-radius:8px;background:#fff;padding:8px}

/* --- difference --- */
.aa-khoahoc-scope .difference-grid{display:grid;grid-template-columns:1fr .82fr;gap:28px;align-items:stretch}
.aa-khoahoc-scope .diff-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aa-khoahoc-scope .diff{padding:22px;border:1px solid var(--line);border-radius:8px;background:#fff}
.aa-khoahoc-scope .diff b{display:block;margin-bottom:10px;font-size:18px}
.aa-khoahoc-scope .diff p{margin:0;color:var(--muted)}
.aa-khoahoc-scope .studio-photo{min-height:520px;border-radius:8px;background:url("https://advertisingagency.vn/wp-content/uploads/2026/06/academy-desk.jpg") center/cover no-repeat;position:relative;overflow:hidden}
.aa-khoahoc-scope .studio-photo::after{content:attr(data-caption);position:absolute;left:22px;bottom:22px;padding:10px 12px;border-radius:8px;background:#fff;font-weight:900}

/* --- upcoming --- */
.aa-khoahoc-scope .upcoming{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aa-khoahoc-scope .upcoming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.aa-khoahoc-scope .up-card{border:1px solid var(--line);border-radius:8px;background:#f8fbfa;overflow:hidden}
.aa-khoahoc-scope .up-card img{height:300px;width:100%;object-fit:contain;background:#fff;padding:18px}
.aa-khoahoc-scope .up-card div{padding:18px}
.aa-khoahoc-scope .up-card h3{margin:0 0 10px;font-size:23px;line-height:1.12;letter-spacing:0}
.aa-khoahoc-scope .up-card strong{color:var(--teal)}

/* --- register (FAQ + form) --- */
.aa-khoahoc-scope .register{background:#f5fbf8}
.aa-khoahoc-scope .register-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}
.aa-khoahoc-scope .faq{display:grid;gap:10px}
.aa-khoahoc-scope .faq details{border:1px solid var(--line);border-radius:8px;background:#fff;padding:18px}
.aa-khoahoc-scope .faq summary{cursor:pointer;font-weight:900}
.aa-khoahoc-scope .faq p{margin:12px 0 0;color:var(--muted)}
.aa-khoahoc-scope .form{display:grid;gap:12px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#fff}
.aa-khoahoc-scope .form h3{margin:0 0 8px;font-size:30px;letter-spacing:0;text-align:left}
.aa-khoahoc-scope .field{display:grid;gap:7px}
.aa-khoahoc-scope .field span{font-size:13px;font-weight:850;color:#596879}
.aa-khoahoc-scope .field input,.aa-khoahoc-scope .field select,.aa-khoahoc-scope .field textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:#f8fbfa;padding:13px 14px;font:inherit;color:var(--ink)}
.aa-khoahoc-scope .field textarea{min-height:98px;resize:vertical}
.aa-khoahoc-scope .mini-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.aa-khoahoc-scope .mini-proof div{padding:14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.aa-khoahoc-scope .mini-proof b{display:block;font-size:22px;color:var(--teal)}
.aa-khoahoc-scope .mini-proof span{font-size:12px;color:var(--muted);font-weight:750}
.aa-khoahoc-scope .form .btn{width:100%}
.aa-khoahoc-scope .form .atp-lf-msg{margin-top:4px;font-size:14px;font-weight:700;display:none}
.aa-khoahoc-scope .form .atp-lf-msg.ok{display:block;color:#16a34a}
.aa-khoahoc-scope .form .atp-lf-msg.err{display:block;color:#dc2626}

/* --- responsive --- */
@media(max-width:1060px){
  .aa-khoahoc-scope .hero{min-height:900px;background-position:center}
  .aa-khoahoc-scope .hero-products{opacity:.42;right:-80px;top:250px}
  .aa-khoahoc-scope .section-head,.aa-khoahoc-scope .combo-grid,.aa-khoahoc-scope .difference-grid,.aa-khoahoc-scope .register-grid{grid-template-columns:1fr}
  .aa-khoahoc-scope .product-grid{grid-template-columns:1fr 1fr}
  .aa-khoahoc-scope .timeline{grid-template-columns:1fr 1fr}
  .aa-khoahoc-scope .shelf{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .aa-khoahoc-scope .wrap{width:min(100% - 28px,var(--max))}
  .aa-khoahoc-scope .section{padding:66px 0}
  .aa-khoahoc-scope .hero{min-height:760px}
  .aa-khoahoc-scope h1{font-size:44px}
  .aa-khoahoc-scope .hero-sub{font-size:16px}
  .aa-khoahoc-scope .hero-products{display:none}
  .aa-khoahoc-scope .lab-strip{display:none}
  .aa-khoahoc-scope .metric-grid,.aa-khoahoc-scope .product-grid,.aa-khoahoc-scope .fit-row,.aa-khoahoc-scope .timeline,.aa-khoahoc-scope .diff-list,.aa-khoahoc-scope .upcoming-grid,.aa-khoahoc-scope .mini-proof{grid-template-columns:1fr}
  .aa-khoahoc-scope .metric{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .aa-khoahoc-scope .section-head h2,.aa-khoahoc-scope .combo h2{font-size:34px}
  .aa-khoahoc-scope .featured .product-art{min-height:330px}
  .aa-khoahoc-scope .featured .product-art img{height:280px}
  .aa-khoahoc-scope .product-art img{height:220px}
  .aa-khoahoc-scope .shelf{grid-template-columns:repeat(2,1fr)}
  .aa-khoahoc-scope .shelf img{height:190px}
}

/* ===========================================================================
 * Rule 13 CONTRAST HARDENING — white text on every dark / ink surface.
 * The Elementor Global Kit re-colours bare h1-h6 / a / button elements
 * (low-specificity element rules), which drag headings & labels inside dark
 * cards back to dark ink. Re-assert #fff with class-scoped specificity so the
 * kit can't win — no !important needed.
 * ======================================================================== */

/* --- buttons: dark primary keeps white ink; light buttons keep dark ink --- */
.aa-khoahoc-scope a.btn-primary,.aa-khoahoc-scope .btn-primary,
.aa-khoahoc-scope a.btn-primary span,.aa-khoahoc-scope .btn-primary span{color:#fff}
.aa-khoahoc-scope a.btn-yellow,.aa-khoahoc-scope .btn-yellow,
.aa-khoahoc-scope .btn-yellow span,
.aa-khoahoc-scope a.btn-ghost,.aa-khoahoc-scope .btn-ghost,
.aa-khoahoc-scope .btn-ghost span{color:var(--ink)}
.aa-khoahoc-scope .btn-yellow,.aa-khoahoc-scope .btn-yellow span{color:#121212}

/* --- metrics band: dark ink grid --- */
.aa-khoahoc-scope .metric-grid,.aa-khoahoc-scope .metric{color:#fff}
.aa-khoahoc-scope .metric strong{color:var(--yellow)}
.aa-khoahoc-scope .metric span{color:rgba(255,255,255,.68)}

/* --- products: dark featured card --- */
.aa-khoahoc-scope .product-card.featured,
.aa-khoahoc-scope .product-card.featured .product-body h3{color:#fff}
.aa-khoahoc-scope .product-card.featured .product-body p{color:rgba(255,255,255,.74)}
.aa-khoahoc-scope .product-card.featured .tag{color:var(--yellow)}
.aa-khoahoc-scope .product-card.featured .price strong{color:var(--yellow)}

/* --- combo: dark ink section --- */
.aa-khoahoc-scope .combo,
.aa-khoahoc-scope .combo h2{color:#fff}
.aa-khoahoc-scope .combo p{color:rgba(255,255,255,.72)}
.aa-khoahoc-scope .combo-price del{color:rgba(255,255,255,.42)}
.aa-khoahoc-scope .combo-price strong{color:var(--yellow)}