:root{color-scheme:light;--navy:#17345c;--text:#637087;--muted:#61718b;--line:#e0e6ee;--panel:#f6f9fc;--accent:#839bc8}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:#fff;color:var(--text);font-family:Arial,"Helvetica Neue",sans-serif;font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased}.wrap{width:min(1140px,calc(100% - 80px));margin-inline:auto}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}p{margin:0 0 20px}p:last-child{margin-bottom:0}h1,h2,h3{color:var(--navy);line-height:1.35;margin:0 0 20px}h2{font-size:30px;letter-spacing:-.65px;font-weight:600}h3{font-size:23px;letter-spacing:-.4px;font-weight:600}.header{display:flex;align-items:center;justify-content:space-between;min-height:94px;border-bottom:1px solid var(--line);padding-inline:40px}.wordmark{color:var(--navy);font-family:Georgia,"Times New Roman",serif;font-size:31px;line-height:1;position:relative;padding:12px 0 18px;white-space:nowrap}.wordmark svg{position:absolute;width:92px;height:12px;left:17px;bottom:2px;fill:none;stroke:var(--accent);stroke-width:2.5}nav{display:flex;gap:34px;font-size:14px}nav a{padding:12px 0;transition:color .2s}nav a:hover{color:var(--navy)}.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:25px;padding:42px 42px 0;overflow:hidden}.hero-copy{padding:15px 0 48px;z-index:2}.hero h1{font-size:46px;line-height:1.24;font-weight:400;letter-spacing:-1.3px;margin-bottom:5px}.hero h1 strong{font-weight:700}.profession{font-size:25px;line-height:1.5;color:var(--navy);margin-bottom:25px}.hero-copy>p:not(.profession){max-width:500px;font-size:17px;line-height:1.8}.portrait{align-self:end;position:relative;z-index:1;display:flex;justify-content:center;padding-top:10px}.portrait:before{content:"";position:absolute;z-index:-1;top:10px;left:0;right:0;aspect-ratio:1;border-radius:50%;background:#f0f6fc}.portrait img{display:block;width:100%;height:auto;max-width:445px}.hero-wave{position:absolute;bottom:0;left:0;width:100%;height:85px;fill:#edf4fa;z-index:0}.reading{max-width:800px;margin-inline:auto}.hero-continuation{padding:45px 15px 58px}.section{margin-bottom:14px;padding:58px 44px}.panel{background:linear-gradient(115deg,#f8fafc,#f3f7fa)}.eyebrow{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.45px;color:var(--muted);margin-bottom:15px}.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px 48px;align-items:start}.placeholder{background:#f0f2f4;border:1px solid #e8ecef;border-radius:12px}.about-image{aspect-ratio:1.12;margin-top:8px}.about-rest{grid-column:1/-1;margin-top:8px}.approach{text-align:center;padding-block:63px}.approach .reading{max-width:830px}blockquote{position:relative;text-align:left;margin:30px 0 0;padding:22px 28px 22px 48px;background:#edf3f9;border-radius:12px;color:#43536a;font-size:17px}blockquote:before{content:"";position:absolute;left:25px;top:20px;bottom:20px;width:2px;background:var(--accent)}strong{color:var(--navy)}.sharing{padding:58px 8px 52px}.section-heading{text-align:center;margin-bottom:32px}.sharing-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.sharing article{border:1px solid var(--line);border-radius:20px;padding:29px 30px 32px;display:flex;flex-direction:column}.sharing-image{height:156px;margin-bottom:27px}.sharing article p{font-size:16px;line-height:1.85}.closing{padding-top:10px;margin-top:auto;color:var(--navy)}.connect{text-align:center;padding:54px 50px 58px;margin-bottom:32px}.connect .reading{max-width:820px}.connect p:not(.eyebrow){font-size:16px}.social-links{display:flex;justify-content:center;gap:16px;padding-top:30px;margin-top:28px;position:relative}.social-links:before{content:"";position:absolute;top:0;width:54px;height:2px;background:#cad6e6}.social{display:inline-flex;align-items:center;justify-content:center;min-width:175px;min-height:46px;border:1px solid #d9e2ed;background:#fff;border-radius:24px;font-size:14px;color:var(--navy);transition:background .2s,transform .2s}.social.primary{background:var(--navy);border-color:var(--navy);color:#fff}.social:hover{background:#eaf0f7;transform:translateY(-2px)}.social.primary:hover{background:#234875}.mobile-break{display:none}.skip-link{position:absolute;top:8px;left:8px;padding:10px 16px;background:#fff;color:var(--navy);transform:translateY(-150%);z-index:10}.skip-link:focus{transform:translateY(0)}
@media(min-width:1450px){.hero{padding-top:54px}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.header{padding-inline:20px}.hero{padding-inline:22px;grid-template-columns:1.1fr 1fr;gap:10px}.hero h1{font-size:37px}.profession{font-size:21px}.hero-copy>p:not(.profession){font-size:16px}.section{padding:42px 28px}.about{gap:28px}.sharing{padding-inline:0}.sharing article{padding:24px}.hero-continuation{padding-inline:28px}h2{font-size:27px}}
@media(max-width:620px){body{font-size:16px;line-height:1.8}.wrap{width:calc(100% - 36px)}.header{min-height:108px;padding:18px 0 8px;flex-direction:column;gap:10px}.wordmark{font-size:28px}nav{width:100%;justify-content:space-between;gap:12px;font-size:13px}nav a{min-height:44px;display:flex;align-items:center}.hero{grid-template-columns:1fr;padding:37px 8px 0;gap:0}.hero-copy{padding:0 0 18px}.hero h1{font-size:37px;line-height:1.25;letter-spacing:-1px}.profession{font-size:21px;margin-bottom:22px}.portrait{width:270px;max-width:90%;justify-self:center;padding-top:14px}.portrait img{max-height:315px;object-fit:contain;object-position:bottom}.hero-wave{height:48px}.hero-continuation{padding:30px 8px 40px}.section{padding:35px 22px;margin-bottom:12px}.eyebrow{font-size:11px;letter-spacing:1.15px;line-height:1.8}h2{font-size:25px;letter-spacing:-.5px}h3{font-size:22px}.about{display:flex;flex-direction:column;gap:26px}.about>div:nth-child(2){order:0}.about-image{order:1;width:100%;aspect-ratio:1.8;margin:0}.about-rest{order:2;margin:0}.approach{padding-inline:20px}.approach h2{font-size:26px}.mobile-break{display:initial}blockquote{font-size:16px;padding:20px 17px 20px 32px;margin-top:25px}blockquote:before{left:15px}.sharing{padding:35px 0}.section-heading{padding-inline:15px;margin-bottom:25px}.sharing-grid{grid-template-columns:1fr;gap:20px}.sharing article{padding:25px 24px}.sharing-image{height:145px;margin-bottom:24px}.connect{padding:36px 22px;margin-bottom:18px}.social-links{gap:12px}.social{min-width:0;flex:1;min-height:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* V1.1 — tinh chỉnh nhịp đọc; giữ nguyên hệ màu và cấu trúc V1. */
.hero { gap: 46px; padding: 64px 52px 0; }
.hero-copy { padding: 24px 0 64px; }
.hero-copy > p:not(.profession) { max-width: 470px; line-height: 1.9; }
.portrait { width: 100%; max-width: 415px; justify-self: center; }
.reading { max-width: 740px; }
.hero-continuation { max-width: 740px; padding: 62px 18px 78px; line-height: 1.95; }
.hero-continuation p { margin-bottom: 28px; }
.hero-continuation .transition-intro { font-size: 16px; margin-bottom: 36px; }
.section { margin-bottom: 28px; padding-block: 70px; }
.about { gap: 36px 48px; }
.about p:not(.eyebrow) { line-height: 1.95; margin-bottom: 26px; }
.about-image { width: 82%; justify-self: center; background: #f3f5f7; border-color: #eef1f4; }
.about-rest { max-width: 730px; margin-top: 4px; }
.approach { padding-block: 76px; }
.approach .reading { max-width: 740px; line-height: 1.95; }
.approach h2 { margin-bottom: 26px; }
blockquote { margin-top: 38px; padding: 28px 34px 28px 52px; line-height: 1.95; }
blockquote:before { top: 27px; bottom: 27px; }
.sharing { padding-block: 64px 66px; }
.section-heading { margin-bottom: 42px; }
.sharing-grid { gap: 28px; }
.sharing article { padding: 36px 40px 40px; }
.sharing article p { line-height: 1.95; margin-bottom: 28px; }
.sharing article h3 { margin-bottom: 25px; }
.sharing-image { height: 140px; margin-bottom: 32px; }
.sharing article .closing { padding-top: 14px; margin-top: auto; margin-bottom: 0; }
.connect { padding-block: 70px 76px; }
.connect .reading { max-width: 680px; }
.connect h2 { margin-bottom: 30px; }
.connect p:not(.eyebrow) { line-height: 1.95; margin-bottom: 27px; }
.social-links { margin-top: 42px; padding-top: 36px; }
@media (min-width: 621px) and (max-width: 900px) {
  .hero { padding: 50px 28px 0; gap: 28px; }
  .hero-copy { padding-bottom: 48px; }
  .section { padding-block: 56px; }
  .sharing article { padding: 30px 26px 34px; }
  .about { gap: 30px; }
}
@media (max-width: 620px) {
  .hero { padding: 32px 8px 0; gap: 0; }
  .hero-copy { padding: 0 0 24px; }
  .hero-copy > p:not(.profession) { line-height: 1.8; }
  .portrait { width: 260px; max-width: 90%; }
  .portrait img { max-height: 304px; }
  .hero-continuation { padding: 40px 12px 52px; line-height: 1.9; }
  .hero-continuation p { margin-bottom: 25px; }
  .hero-continuation .transition-intro { margin-bottom: 30px; }
  .section { padding: 44px 22px; margin-bottom: 20px; }
  .about { gap: 24px; }
  .about-image { width: 82%; align-self: center; aspect-ratio: 1.8; }
  .about p:not(.eyebrow) { line-height: 1.9; margin-bottom: 24px; }
  .approach { padding: 48px 22px; }
  .approach .reading { line-height: 1.9; }
  blockquote { padding: 24px 18px 24px 33px; margin-top: 30px; line-height: 1.9; }
  blockquote:before { top: 23px; bottom: 23px; }
  .sharing { padding: 44px 0; }
  .section-heading { margin-bottom: 30px; }
  .sharing-grid { gap: 26px; }
  .sharing article { padding: 30px 26px 32px; }
  .sharing article p { line-height: 1.9; margin-bottom: 26px; }
  .sharing-image { height: 120px; margin-bottom: 28px; }
  .connect { padding: 46px 24px 48px; }
  .connect p:not(.eyebrow) { line-height: 1.9; margin-bottom: 26px; }
  .social-links { margin-top: 34px; padding-top: 30px; }
}

/* V1.3 — chỉ áp dụng cho section bốn sản phẩm thật. */
.products { padding: 28px 8px 48px; }
.products .section-heading { max-width: 740px; margin-inline: auto; }
.products .section-heading > p { font-size: 16px; line-height: 1.9; }
.products-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 28px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; flex-direction: column; }
.product-thumbnail { aspect-ratio: 16 / 9; background: #f3f5f7; overflow: hidden; }
.product-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 26px 30px; }
.product-content .eyebrow { margin-bottom: 13px; }
.product-content h3 { font-size: 23px; margin-bottom: 16px; }
.product-description { font-size: 16px; line-height: 1.9; margin-bottom: 26px; }
.product-link { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 9px 24px; margin-top: auto; border: 1px solid #d9e2ed; border-radius: 24px; color: var(--navy); font-size: 14px; background: #fff; transition: background .2s; }
.product-link:hover { background: #edf3f9; }
@media(max-width:620px) {
  .products { padding: 20px 0 44px; }
  .products .section-heading { padding-inline: 16px; }
  .products-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .product-content { padding: 26px 24px 30px; }
  .product-content h3 { font-size: 22px; }
  .product-link { width: 100%; }
}

/* V1.4 — lecture éditoriale, sans images de remplissage. */
.about { display: block; padding-block: 64px; }
.about > div { max-width: 730px; margin-inline: auto; }
.about .about-rest { margin-top: 26px; }
.sharing article { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 30px 32px 24px; }
.journey { padding: 58px 32px 66px; }
.journey-heading { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.journey-heading > p:last-child { font-size: 17px; line-height: 1.9; }
.journey-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; list-style: none; margin: 0; padding: 0; position: relative; }
.journey-flow::before { content: ''; position: absolute; top: 19px; left: 0; right: 0; height: 1px; background: var(--line); }
.journey-flow li { min-width: 0; position: relative; display: flex; flex-direction: column; }
.journey-number { align-self: flex-start; color: var(--muted); background: white; padding: 5px 14px 5px 0; font-size: 14px; letter-spacing: 2px; margin-bottom: 24px; }
.journey-flow h3 { font-size: 23px; min-height: 62px; margin-bottom: 18px; }
.journey-flow p { font-size: 16px; line-height: 1.9; margin-bottom: 22px; }
.journey-flow .journey-note { font-size: 15px; color: var(--navy); margin-top: auto; margin-bottom: 0; padding-top: 10px; }
@media (min-width:621px) and (max-width:900px) {
  .journey { padding-inline: 24px; }
  .journey-flow { gap: 24px; }
  .journey-flow h3 { font-size: 22px; min-height: 90px; }
  .sharing article { padding-inline: 24px; }
}
@media (max-width:620px) {
  .about { padding: 42px 24px; }
  .about .about-rest { margin-top: 24px; }
  .sharing article { padding: 26px 24px 18px; }
  .journey { padding: 42px 20px 46px; }
  .journey-heading { margin-bottom: 32px; text-align: left; }
  .journey-heading > p:last-child { font-size: 16px; }
  .journey-flow { display: block; padding-left: 23px; }
  .journey-flow::before { top: 16px; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .journey-flow li { margin-bottom: 32px; }
  .journey-flow li:last-child { margin-bottom: 0; }
  .journey-flow li::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); left: -25px; top: 16px; }
  .journey-number { margin-bottom: 10px; padding-block: 2px; }
  .journey-flow h3 { font-size: 22px; min-height: 0; margin-bottom: 16px; }
  .journey-flow p { margin-bottom: 18px; }
  .journey-flow .journey-note { padding-top: 2px; }
}

/* V1.5 — trois chapitres éditoriaux. */
.hero h1 { font-size: 48px; font-weight: 600; letter-spacing: .5px; }
.hero-copy .hero-keywords { font-size: 17px; line-height: 1.8; color: var(--navy); letter-spacing: 1.3px; max-width: none; }
.bio { padding: 62px 32px 54px; }
.bio .reading { max-width: 740px; line-height: 1.95; }
.bio .transition-intro { font-size: inherit; }
.bio p { margin-bottom: 24px; }
.bio .bio-bridge { color: var(--navy); margin-top: 32px; margin-bottom: 0; }
.chapter { padding-top: 34px; margin-bottom: 44px; }
.chapter-heading { max-width: 1052px; margin: 0 auto 34px; padding-top: 25px; border-top: 1px solid var(--line); }
.chapter-number { display: block; font-size: 13px; letter-spacing: 2px; color: var(--muted); margin-bottom: 10px; }
.chapter-heading h2 { font-size: 32px; letter-spacing: 1px; margin-bottom: 15px; }
.chapter-heading > p { max-width: 740px; font-size: 17px; line-height: 1.9; }
.chapter .about h3 { font-size: 30px; }
.chapter .about .learning-notes { padding-top: 24px; margin-top: 30px; border-top: 1px solid var(--line); }
.chapter .sharing { padding-top: 26px; }
.chapter > .section:last-child { margin-bottom: 0; }
@media(max-width:900px) { .chapter-heading { margin-inline: 28px; } }
@media(max-width:620px) {
  .hero h1 { font-size: 39px; }
  .hero-copy .hero-keywords { font-size: 14px; letter-spacing: .75px; }
  .hero .profession { margin-bottom: 16px; }
  .bio { padding: 38px 18px; }
  .bio .reading { line-height: 1.9; }
  .bio p { margin-bottom: 22px; }
  .chapter { padding-top: 12px; margin-bottom: 30px; }
  .chapter-heading { margin: 0 18px 26px; padding-top: 20px; }
  .chapter-heading h2 { font-size: 27px; margin-bottom: 14px; }
  .chapter-heading > p { font-size: 16px; }
  .chapter .about h3 { font-size: 25px; }
  .chapter .sharing { padding-top: 18px; }
  .chapter .about .learning-notes { margin-top: 24px; padding-top: 22px; }
}

/* V5.1 — tinh chỉnh nội dung và hai nhóm sáng tạo. */
.hero-copy > .hero-position { font-size:16px; line-height:1.85; max-width:440px; margin-top:22px; }
.bio .bio-keywords { color:var(--navy); font-size:14px; letter-spacing:1px; margin-top:34px; margin-bottom:12px; }
.bio .bio-explanation { font-size:16px; margin-bottom:0; }
.creative-group { margin-top:44px; }
.creative-group + .creative-group { margin-top:64px; padding-top:36px; border-top:1px solid var(--line); }
.group-label { max-width:740px; margin:0 auto 20px; color:var(--navy); }
.group-intro { margin-bottom:36px; font-size:16px; line-height:1.9; }
.group-intro h3 { margin-bottom:24px; }
.group-intro p { margin-bottom:22px; }
.group-intro .closing { margin-bottom:0; padding-top:4px; }
.approach #approach-title { font-size:34px; max-width:850px; margin:28px auto 36px; line-height:1.45; }
.connect .connect-invitation { margin:34px auto 0; color:var(--navy); }
@media(max-width:900px) and (min-width:621px) {
  .hero h1 { font-size:40px; }
  .hero-copy .hero-keywords { font-size:15px; letter-spacing:.6px; }
  .group-intro, .group-label { margin-inline:24px; }
}
@media(max-width:620px) {
  .hero-copy > .hero-position { font-size:15px; line-height:1.8; margin-top:18px; }
  .hero-copy { padding-bottom:12px; }
  .hero-copy .hero-keywords { letter-spacing:.4px; }
  .bio .bio-keywords { font-size:12px; letter-spacing:.5px; }
  .creative-group { margin-top:32px; }
  .creative-group + .creative-group { margin-top:42px; padding-top:28px; }
  .group-intro, .group-label { margin-inline:20px; }
  .group-intro { margin-bottom:28px; }
  .approach #approach-title { font-size:28px; margin-top:26px; margin-bottom:30px; }
  .connect .connect-invitation { margin-top:28px; }
}

/* Hero V5.1 — ba từ khóa là heading chính. */
.hero h1 { font-size:38px; line-height:1.45; letter-spacing:.4px; margin-bottom:20px; text-wrap:balance; }
.hero h1 span { white-space:nowrap; }
.hero .profession { margin-bottom:0; }
.hero-copy > .hero-position { margin-top:24px; }
@media(min-width:621px) and (max-width:900px) {
  .hero h1 { font-size:29px; }
}
@media(max-width:620px) {
  .hero h1 { font-size:28px; line-height:1.5; letter-spacing:0; margin-bottom:16px; }
  .hero .profession { margin-bottom:0; }
  .hero-copy > .hero-position { margin-top:20px; }
}

/* Hero: heading ngang trên desktop, caption dưới chân dung. */
.hero { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:28px; padding-inline:36px; }
.hero h1 { font-size:clamp(22px,2.15vw,30px); white-space:nowrap; letter-spacing:0; }
.hero .portrait { margin:0; flex-direction:column; align-items:center; }
.hero .portrait:before { bottom:40px; }
.hero .portrait figcaption { width:100%; padding:12px 0 10px; text-align:center; font-size:14px; line-height:1.5; color:var(--text); background:#fff; }
.hero-wave { bottom:43px; }
.hero-copy > .hero-position { margin-top:20px; }
@media(min-width:621px) and (max-width:900px) {
  .hero { padding-inline:22px; gap:18px; }
  .hero h1 { font-size:clamp(16px,2.3vw,21px); }
}
@media(max-width:620px) {
  .hero { grid-template-columns:1fr; gap:0; padding-inline:8px; }
  .hero h1 { white-space:normal; font-size:28px; line-height:1.5; text-wrap:balance; }
  .hero .portrait { width:260px; }
  .hero .portrait figcaption { font-size:13px; padding:12px 0; }
  .hero-wave { bottom:43.5px; }
  .hero-copy > .hero-position { margin-top:18px; }
}