/* LDP Executive CV Writing with AI — train.digisource.vn/executive-cv-writing (task Lark t101697).
 * SINH TỪ thiết kế docs/design/executive-cv-writing/Main.dc.html bằng docs/superpowers/scripts/port-executive-cv-design.py.
 * Mọi selector nằm dưới .ecv để không va preflight Tailwind của app.css (popup đăng ký nằm NGOÀI .ecv). */
/* Bù app.css: svg{width:100%} đè width="18" của icon; body,h1..h6{color:#374151} đè màu kế thừa của tiêu đề;
 * preflight ::before{box-sizing:border-box} làm vòng số thứ tự hụt 2px (thiết kế để mặc định content-box). */
.ecv :where(svg[width]:not([width$="%"])){width:auto}
.ecv :where(h1,h2,h3,h4,h5,h6){color:inherit}
.ecv ::before,.ecv ::after{box-sizing:content-box}
.ecv{
    color-scheme: light;
    --surface:#f5f6f6;
    --ink:#07592b;
    --ink-muted:#4a5750;
    --accent:#ff7b00;
    --on-accent:#1a1a1a;
    --on-brand:#f5f6f6;
    --support-light:#b0d683;
    --support-mid:#569746;
    --border:#569746;
    --border-subtle:#dde1de;

    --font-sans:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

    --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem;
    --space-5:2rem; --space-6:3rem; --space-7:4rem; --space-8:6rem;

    --radius-sm:4px; --radius-md:8px; --radius-full:999px;
    --shadow-sm:0 1px 2px rgba(7,89,43,.08);
    --shadow-lg:0 20px 48px rgba(7,89,43,.12);

    --wrap:1120px;
  }

  .ecv *{box-sizing:border-box}
  .ecv{
    background:var(--surface);
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .ecv img{max-width:100%;display:block}
  .ecv h1,.ecv h2,.ecv h3,.ecv p,.ecv ul,.ecv ol,.ecv figure,.ecv blockquote{margin:0}
  .ecv ul,.ecv ol{padding:0;list-style:none}
  .ecv a{color:inherit}
  .ecv .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.25rem}
  .ecv section{padding-block:var(--space-8)}
  .ecv h1,.ecv h2,.ecv h3{text-wrap:balance}

  .ecv .eyebrow{
    font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--support-mid);display:flex;align-items:center;gap:.5rem;margin-bottom:var(--space-3);
  }
  .ecv .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);display:inline-block;flex:none}
  .ecv .eyebrow.on-dark{color:var(--support-light)}

  .ecv h2.section-title{
    font-size:2.4375rem;font-weight:700;line-height:1.15;color:var(--ink);
    max-width:640px;
  }
  .ecv h2.section-title.on-dark{color:var(--on-brand)}
  .ecv p.section-lede{font-size:.875rem;color:var(--ink-muted);max-width:600px;margin-top:var(--space-3)}
  .ecv p.section-lede.on-dark{color:#d7e6d3}

  .ecv .section-head{margin-bottom:var(--space-6)}

  .ecv /* header */
  header.site-nav{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
    background:#ffffff;
    border-bottom:1px solid var(--border-subtle);
  }
  .ecv .nav-row{display:flex;align-items:center;justify-content:space-between;padding-block:.75rem;gap:1rem}
  .ecv .nav-row img.logo{height:30px;width:auto}
  .ecv .nav-links{display:flex;gap:1.75rem;font-size:.875rem;font-weight:600}
  .ecv .nav-links a{text-decoration:none;color:var(--ink);opacity:1;transition:color .15s}
  .ecv .nav-links a:hover{color:var(--accent)}
  @media (max-width:760px){ .ecv .nav-links{display:none} }

  .ecv .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.85rem 1.6rem;border-radius:var(--radius-sm);font-weight:700;font-size:.9375rem;
    text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
    white-space:nowrap;
  }
  .ecv .btn:hover{transform:translateY(-2px)}
  .ecv .btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm)}
  .ecv .btn-accent:hover{box-shadow:var(--shadow-lg)}
  .ecv .btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
  .ecv .btn-outline.on-dark{border-color:var(--on-brand);color:var(--on-brand)}
  .ecv .btn-sm{padding:.6rem 1.1rem;font-size:.8125rem}

  .ecv /* hero */
  .hero{padding-top:var(--space-6);position:relative;overflow:hidden}
  .ecv .hero .hex-bg{
    position:absolute;inset:0;width:100%;height:100%;z-index:0;
    fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.07;
  }
  .ecv .hero .wrap{position:relative;z-index:1}
  .ecv .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-7);align-items:center}
  @media (max-width:900px){ .ecv .hero-grid{grid-template-columns:1fr} }
  .ecv .hero h1{
    font-size:clamp(3.15rem,6.9vw,5.25rem);font-weight:800;line-height:1.02;letter-spacing:-.01em;color:var(--ink);
  }
  @media (max-width:520px){ .ecv .hero h1{font-size:clamp(2.5rem,11vw,3.6rem)} }
  .ecv .hero .vi-title{
    margin-top:var(--space-4);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;color:var(--ink-muted);line-height:1.4;
  }
  .ecv .hero .byline{margin-top:var(--space-4);font-size:.9375rem;color:var(--ink-muted)}
  .ecv .hero .byline strong{color:var(--ink)}

  .ecv .ai-highlight{position:relative;display:inline-block;isolation:isolate}
  .ecv .ai-highlight .ai-swirl{position:absolute;left:50%;bottom:-.34em;transform:translateX(-50%);width:1.7em;height:.95em;pointer-events:none;overflow:visible;z-index:-1}
  .ecv .ai-highlight .ai-swirl .swirl-glow{fill:none;stroke:#ffb066;stroke-width:3.2px;opacity:.5;transform-box:fill-box;transform-origin:center}
  .ecv .ai-highlight .ai-swirl .swirl-line{fill:none;stroke:#ffc48a;stroke-width:1.3px;transform-box:fill-box;transform-origin:center}
  .ecv .ai-highlight .ai-swirl .loop-a{transform:rotate(26deg)}
  .ecv .ai-highlight .ai-swirl .loop-b{transform:rotate(-26deg)}
  .ecv .ai-highlight .ai-swirl .glitter{fill:#ffb066;transform-box:fill-box;transform-origin:center;animation:ai-glitter-twinkle 2.2s ease-in-out infinite}
  .ecv .ai-highlight .ai-swirl .glitter-1{animation-delay:0s}
  .ecv .ai-highlight .ai-swirl .glitter-2{animation-delay:1s}
  .ecv .ai-highlight .ai-swirl .dust{fill:#ffcf9e;animation:ai-dust-pulse 3s ease-in-out infinite}
  .ecv .ai-highlight .ai-swirl .dust-1{animation-delay:.2s}
  .ecv .ai-highlight .ai-swirl .dust-2{animation-delay:1.1s}
  .ecv .ai-highlight .ai-swirl .dust-3{animation-delay:2s}
  .ecv .ai-highlight .ai-swirl .dust-4{animation-delay:.6s}
  .ecv .ai-highlight .ai-swirl .glitter-3{animation-delay:1.7s}
  .ecv .ai-highlight .text-glitter{position:absolute;fill:#ffb066;pointer-events:none;animation:ai-glitter-twinkle 2.2s ease-in-out infinite}
  .ecv .ai-highlight .text-glitter-3{width:.2em;height:.2em;top:.15em;left:-.5em;animation-delay:.9s}
  .ecv .ai-highlight .text-glitter-4{width:.22em;height:.22em;top:.05em;right:-.4em;animation-delay:.2s}
  .ecv .ai-highlight .text-glitter-5{width:.16em;height:.16em;top:.4em;right:-.6em;animation-delay:1.1s}
  @keyframes ai-glitter-twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
  @keyframes ai-dust-pulse{0%,100%{opacity:.25}50%{opacity:.9}}
  @media (prefers-reduced-motion:reduce){ .ecv .ai-highlight .ai-swirl .glitter,.ecv .ai-highlight .ai-swirl .dust,.ecv .ai-highlight .text-glitter{animation:none;opacity:.7} }

  .ecv .info-pills{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:var(--space-5);max-width:506px}
  .ecv .info-pill{
    display:flex;align-items:center;gap:1rem;background:var(--ink);color:var(--on-brand);
    padding:.7rem 1.1rem;border-radius:var(--radius-full);
  }
  .ecv .info-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:.1rem}
  .ecv .info-pill .txt{display:flex;flex-direction:column;line-height:1.25}
  .ecv .info-pill .txt small{font-size:.6875rem;font-weight:600;letter-spacing:.03em;color:#bcd9b3;text-transform:uppercase}
  .ecv .info-pill .txt span{font-size:.8125rem;font-weight:700}
  @media (max-width:420px){ .ecv .info-pills{grid-template-columns:1fr} }

  .ecv .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--space-6)}

  .ecv .hero-photo{position:relative}
  .ecv .hero-photo .frame{ position:relative }
  .ecv .hero-photo img{
    width:100%;height:auto;aspect-ratio:4/3.1;object-fit:cover;display:block;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite:intersect;
  }
  .ecv .coach-pill{
    position:static;margin:1rem auto 0;max-width:420px;
    background:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);
    padding:.75rem 1.4rem;display:flex;align-items:center;gap:.6rem;
  }
  .ecv .coach-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
  .ecv .coach-pill .txt{display:flex;flex-direction:column;line-height:1.3}
  .ecv .coach-pill .txt strong{font-size:.875rem;font-weight:800;color:var(--ink)}
  .ecv .coach-pill .txt small{font-size:.75rem;font-weight:600;color:var(--ink-muted)}

  .ecv /* hex divider */
  .hex-divider{display:flex;justify-content:center;gap:.5rem;padding-block:var(--space-4)}
  .ecv .hex-divider span{
    width:14px;height:14px;
    clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0% 50%);
  }
  .ecv .hex-divider span:nth-child(1){background:var(--support-mid)}
  .ecv .hex-divider span:nth-child(2){background:var(--accent);width:18px;height:18px}
  .ecv .hex-divider span:nth-child(3){background:var(--ink)}
  .ecv .hex-divider span:nth-child(4){background:var(--support-light)}
  .ecv .hex-divider span:nth-child(5){background:var(--support-mid)}

  .ecv /* quote band */
  .quote-band{background:var(--ink);color:var(--on-brand);text-align:center;padding-block:4.5rem}
  .ecv .quote-band .wrap{max-width:780px}
  .ecv .quote-band .eyebrow{
    justify-content:center;font-size:2.4375rem;letter-spacing:0;text-transform:none;font-weight:800;
    color:var(--on-brand);margin-bottom:var(--space-5);
  }
  .ecv .quote-band .eyebrow::before{display:none}
  .ecv .quote-band blockquote{
    font-size:.875rem;font-weight:500;font-style:italic;line-height:1.6;
    margin-inline:auto;
  }
  .ecv .quote-band .attrib{margin-top:var(--space-4);font-size:.875rem;color:#bfe0b4;font-weight:600}

  .ecv /* problem cards */
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  @media (max-width:920px){ .ecv .grid-4{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .ecv .grid-4{grid-template-columns:1fr} }

  .ecv .problem-card{
    background:#fff;border:1px solid var(--border-subtle);padding:var(--space-4);border-radius:var(--radius-md);
    transition:border-color .15s,transform .15s;
  }
  .ecv .problem-card:hover{border-color:var(--support-mid);transform:translateY(-3px)}
  .ecv .problem-card .num{font-size:.8125rem;font-weight:800;color:var(--accent);letter-spacing:.05em}
  .ecv .problem-card h3{margin-top:.5rem;font-size:1.59375rem;font-weight:700;color:var(--ink)}
  .ecv .problem-card p{margin-top:.5rem;font-size:.875rem;color:var(--ink-muted)}

  .ecv /* mission band */
  .mission-band{background:var(--support-light);padding-block:4.5rem}
  .ecv .mission-band .wrap{max-width:760px;text-align:center}
  .ecv .mission-band .eyebrow{justify-content:center;color:var(--ink);font-size:2.4375rem;font-weight:800;text-transform:none;letter-spacing:0}
  .ecv .mission-band .eyebrow::before{background:var(--ink)}
  .ecv .mission-band h2{
    font-size:clamp(1.125rem,2.25vw,1.59375rem);font-weight:600;font-style:italic;color:var(--ink);line-height:1.2;margin-bottom:var(--space-4);
  }
  .ecv .mission-band p{font-size:.875rem;font-weight:500;color:#0a3d20;line-height:1.65}

  .ecv /* audience */
  .audience-card{
    background:#fff;border:2px solid var(--ink);border-radius:var(--radius-md);padding:var(--space-4);
    display:flex;flex-direction:column;gap:var(--space-3);height:100%;
  }
  .ecv .audience-card .tag{
    align-self:flex-start;background:var(--support-light);color:var(--ink);font-size:.75rem;font-weight:800;
    padding:.25rem .6rem;border-radius:var(--radius-full);letter-spacing:.03em;
  }
  .ecv .audience-card h3{font-size:1.59375rem;font-weight:700}
  .ecv .audience-card ul{display:flex;flex-direction:column;gap:.4rem}
  .ecv .audience-card li{font-size:.875rem;color:var(--ink-muted);padding-left:1rem;position:relative}
  .ecv .audience-card li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--support-mid)}

  .ecv /* perks */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
  @media (max-width:860px){ .ecv .grid-3{grid-template-columns:1fr} }
  .ecv .perk-card{
    background:var(--ink);color:var(--on-brand);border-radius:var(--radius-md);padding:var(--space-5);
    display:flex;flex-direction:column;gap:var(--space-3);
  }
  .ecv .perk-card .perk-icon{
    width:44px;height:44px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:1.125rem;
    display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);
  }
  .ecv .perk-card h3{font-size:1.6875rem;font-weight:700}
  .ecv .perk-card ul{display:flex;flex-direction:column;gap:.4rem}
  .ecv .perk-card li{font-size:.875rem;color:var(--on-brand);padding-left:1rem;position:relative}
  .ecv .perk-card li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--support-light)}

  .ecv /* curriculum */
  .curriculum-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
  @media (max-width:860px){ .ecv .curriculum-overview{grid-template-columns:1fr} }
  .ecv .part-tile{
    border:2px solid var(--ink);border-radius:var(--radius-md);padding:var(--space-5);background:#fff;
    display:flex;flex-direction:column;transition:border-color .15s,transform .15s;
  }
  .ecv .part-tile:hover{border-color:var(--support-mid);transform:translateY(-3px)}
  .ecv .part-tile .part-no{font-size:.75rem;font-weight:800;color:var(--accent);letter-spacing:.08em}
  .ecv .part-tile h3{margin-top:.5rem;font-size:1.78125rem;font-weight:800;line-height:1.3;color:var(--ink);text-wrap:wrap}
  .ecv .part-topics{margin-top:var(--space-4);display:flex;flex-direction:column;gap:.7rem;counter-reset:topic}
  .ecv .part-topics li{
    display:flex;align-items:flex-start;gap:.65rem;font-size:.875rem;font-weight:600;color:var(--ink-muted);line-height:1.4;
  }
  .ecv .part-topics li::before{
    counter-increment:topic;content:counter(topic);flex:none;width:24px;height:24px;border-radius:50%;
    background:var(--surface);border:1.5px solid var(--support-mid);color:var(--ink);
    font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:.05rem;
  }

  .ecv .table-wrap{overflow-x:auto;margin-block:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
  .ecv table{border-collapse:collapse;width:100%;min-width:640px;font-size:.875rem}
  .ecv table caption{caption-side:top;text-align:left;padding:.75rem 1rem;font-weight:700;color:var(--ink);background:var(--surface)}
  .ecv th,.ecv td{padding:.75rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-subtle)}
  .ecv thead th{background:var(--ink);color:var(--on-brand);font-weight:700;font-size:.8125rem}
  .ecv tbody tr:nth-child(even){background:var(--surface)}
  .ecv td.bad{color:#8a2f18}
  .ecv td.good{color:var(--ink);font-weight:600}

  .ecv /* wrapup */
  .wrapup-band{background:var(--surface)}
  .ecv .wrapup-list{display:flex;flex-direction:column;gap:.65rem;padding-left:5.25rem}
  .ecv .wrapup-list li{font-size:.875rem;color:var(--ink-muted);display:flex;align-items:flex-start;gap:.6rem}

  .ecv /* host */
  .host-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
  @media (max-width:860px){ .ecv .host-grid{grid-template-columns:1fr} }
  .ecv .host-photo{overflow:hidden}
  .ecv .host-photo img{width:100%;height:auto}
  .ecv .host-copy{background:var(--ink);padding:var(--space-7) var(--space-6);display:flex;flex-direction:column;justify-content:center}
  .ecv .host-copy .eyebrow{margin-bottom:var(--space-2);font-size:1.625rem;font-weight:800;color:var(--accent)}
  .ecv .host-copy h3{font-size:1.5rem;font-weight:800;color:var(--on-brand)}
  .ecv .host-titles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
  .ecv .host-titles .title-break{flex-basis:100%;height:0}
  .ecv .title-pill{
    display:inline-flex;align-items:center;border:1.5px solid var(--accent);color:var(--on-brand);
    font-size:.75rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
    padding:.45rem .9rem;border-radius:var(--radius-full);
  }
  .ecv .host-copy p.bio{margin-top:var(--space-4);font-size:.875rem;color:#d7e6d3}
  .ecv .host-orgs{padding-inline:.5rem}

  .ecv /* final cta -> resources band */
  .cta-final{background:#e8e8e8;color:var(--ink);text-align:left}
  .ecv .cta-columns{display:grid;grid-template-columns:.75fr .75fr 1.7fr;gap:2.5rem}
  .ecv .cta-final .wrap{padding-inline:0}
  @media (max-width:760px){ .ecv .cta-columns{grid-template-columns:1fr;gap:var(--space-6)} }
  .ecv .cta-col-title{font-size:1.25rem;font-weight:800;color:var(--ink);margin-bottom:var(--space-3);white-space:nowrap}
  .ecv .cta-link-list{display:flex;flex-direction:column;gap:.55rem}
  .ecv .cta-link-list a{font-size:.875rem;color:var(--ink);text-decoration:none;transition:color .15s;white-space:nowrap}
  .ecv .cta-link-list a:hover{color:var(--accent)}
  .ecv .cta-col p{font-size:.875rem;font-weight:600;color:var(--ink-muted)}
  .ecv .cta-col .contact-label{margin-top:var(--space-5);font-size:.875rem;font-weight:700;color:var(--ink-muted);max-width:none;white-space:nowrap;text-align:center}
  .ecv .social-row{display:flex;gap:.6rem;margin-top:.6rem;max-width:277px;justify-content:center}
  .ecv .social-icon{
    width:34px;height:34px;border-radius:10px;background:#1a1a1a;color:#fff;
    display:flex;align-items:center;justify-content:center;flex:none;
    font-size:.75rem;font-weight:800;text-decoration:none;letter-spacing:.01em;
  }
  .ecv .social-icon.zalo{width:44px;font-size:.6875rem;letter-spacing:0}


  @media (prefers-reduced-motion:reduce){ .ecv *{transition:none!important} }
/* Màn hẹp: cho chữ nowrap xuống dòng (style inline cần !important), thu cỡ tiêu đề mục như hero h1 của thiết kế.
 * Footer 3 cột cần >=1059px mới giữ chữ 1 dòng (min-content 938px + 2 khe 40px + lề 40px) — hẹp hơn là tràn ngang. */
.ecv [style*="white-space:nowrap"]{white-space:normal!important}
@media (max-width:1058px){.ecv .cta-col-title,.ecv .cta-col .contact-label,.ecv .cta-link-list a{white-space:normal}}
/* .cta-final .wrap{padding-inline:0} và .host-orgs{padding-inline:.5rem} chỉ đúng khi .wrap còn lề tự động hai bên
 * (màn >=1160px = 1120 + 2*20); hẹp hơn thì chữ dính mép màn hình → trả lại lề chuẩn của .wrap. */
@media (max-width:1159px){.ecv .cta-final .wrap,.ecv .host-orgs{padding-inline:1.25rem}}
@media (max-width:520px){.ecv h2.section-title{font-size:clamp(1.75rem,8vw,2.4375rem)}}
/* Khối "Tổng kết": thiết kế thụt trái 3rem (inline) + 5.25rem = 132px — trên điện thoại cột chữ còn ~1/2 màn hình. */
@media (max-width:520px){.ecv .wrapup-band .wrap{padding-left:1.25rem!important}.ecv .wrapup-list{padding-left:0}}