/* =====================================================================
   IPAS – CSS THIẾT KẾ MỚI (header, menu Solutions, footer, trang chủ, trang Solution, Expertise)
   Dán SAU file A_toan_site/A01_ipas_updates_2026-10.css. Tăng ?v= trong thẻ <link>.
   Mọi class có tiền tố "ip-" để không đụng class cũ. Dùng biến màu/chữ sẵn có của site:
   --navy #022452 · --navy-3 #04346F · --gold #C8A562 · --gold-2 #7D5E22 · --soft #F7F4EC · --line #E4E1D6
   --text #4B5A72 · --f-serif (TeX Gyre Pagella) · --f-body (Inter)
   Bản V3: thay toàn bộ D00 cũ, không dán chồng hai phiên bản. Xem preview/index.html.
   ===================================================================== */

/* ---------- 0. Nền tảng ---------- */
/* Vàng đậm cho chữ nhỏ: đạt tương phản WCAG AA 4,5:1 trên nền trắng (6,0:1), kem #F7F4EC (5,5:1) và #EFE9DA (5,0:1).
   Vàng #C8A562 giữ cho viền, nút, chi tiết trang trí. */
:root { --navy:#022452; --navy-3:#04346F; --gold:#C8A562; --gold-2:#7D5E22; --soft:#F7F4EC; --line:#E4E1D6; --text:#4B5A72; --f-serif:"TeX Gyre Pagella", Georgia, serif; --f-body:Inter, Arial, sans-serif; }
.ip-team-code { text-transform: uppercase !important; }
.ip-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.ip-sec { padding: clamp(64px, 7vw, 96px) 0; }
.ip-sec--soft { background: var(--soft); }
.ip-sec--navy { background: var(--navy); color: #fff; }
.ip-eyebrow { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.ip-sec--navy .ip-eyebrow, .ip-hero .ip-eyebrow { color: #E6CF98; }
.ip-h1 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.ip-h2 { margin: 0 0 14px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; color: var(--navy); text-wrap: balance; }
.ip-sec--navy .ip-h2 { color: #fff; }
.ip-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text); max-width: 62ch; text-wrap: pretty; }
.ip-sec--navy .ip-lead { color: #C9D3E3; }
.ip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 44px; }
.ip-head > div { max-width: 720px; }
.ip-link { font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
.ip-sec--navy .ip-link { color: #fff; }
.ip-link:hover { color: var(--gold-2); }
.ip-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 4px; font-size: 16px; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: background .2s, color .2s; }
.ip-btn--gold { background: var(--gold); color: var(--navy); }
.ip-btn--gold:hover { background: #fff; color: var(--navy); }
.ip-btn--navy { background: var(--navy); color: #fff; }
.ip-btn--navy:hover { background: var(--navy-3); color: #fff; }
.ip-btn--line { border: 1px solid var(--navy); color: var(--navy); font-weight: 600; }
.ip-btn--line-light { border: 1px solid rgba(255,255,255,.5); color: #fff; font-weight: 600; }
.ip-btn svg { width: 17px; height: 17px; }
.ip-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 1. Header + thanh trên cùng ---------- */
.ip-topbar { background: #011B3E; color: #D7DDE8; font-size: 13px; }
.ip-topbar .ip-wrap { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ip-topbar a { color: #D7DDE8; text-decoration: none; }
.ip-topbar__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ip-topbar__profile { color: #E6CF98 !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ip-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.ip-header > .ip-wrap { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ip-logo img { display: block; width: 140px; height: auto; }
.ip-nav { display: flex; align-items: stretch; gap: 34px; height: 84px; margin: 0; padding: 0; list-style: none; }
.ip-nav > li { position: static; display: flex; }
.ip-nav > li > a { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 3px solid transparent; padding-top: 3px; }
.ip-nav > li > a[aria-current="page"], .ip-nav > li.is-open > a, .ip-nav > li > a:hover { border-bottom-color: var(--gold); }
.ip-nav svg { width: 14px; height: 14px; color: var(--gold-2); }
.ip-header__actions { display: flex; align-items: center; gap: 14px; }
.ip-header__actions .ip-btn { height: 46px; font-size: 15px; padding: 0 22px; }
.ip-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); place-items: center; cursor: pointer; }

/* ---------- 2. Menu Solutions (mega menu) ---------- */
.ip-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(2,36,82,.35); display: none; }
.ip-nav > li.is-open > .ip-mega { display: block; }
.ip-mega > .ip-wrap { height: auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-top: 24px; padding-bottom: 24px; align-items: start; }
.ip-mega__label { display: block; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.ip-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 18px; }
.ip-mega a { display: block; text-decoration: none; }
.ip-mega__t { display: block; font-family: var(--f-serif); font-size: 20px; line-height:1.25; color: var(--navy); }
.ip-mega__d { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text); }
.ip-mega a:hover .ip-mega__t { color: var(--gold-2); }
.ip-mega__also { border-left: 1px solid var(--line); padding-left: 32px; display: flex; flex-direction: column; gap: 20px; }
.ip-mega__also .ip-mega__t { font-family: var(--f-body); font-size: 15px; font-weight: 600; }
.ip-mega__box { background: var(--soft); border-radius: 4px; padding: 24px; }
.ip-mega__box p { margin: 8px 0 16px; font-size: 14px; line-height: 1.55; color: var(--text); }
.ip-mega__box .ip-mega__t { font-size: 21px; }

/* ---------- 3. Footer ---------- */
.ip-footer { background: var(--navy); color: #C9D3E3; }
.ip-footer a { color: #C9D3E3; text-decoration: none; }
.ip-footer a:hover { color: #fff; }
.ip-footer__main { display: grid; grid-template-columns: 1.55fr 1fr .85fr 1.3fr; gap: 44px; padding-top: 48px; padding-bottom: 32px; }
.ip-footer__main > * { min-width: 0; }
.ip-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.ip-footer__brand img { width: 190px; height: auto; display: block; }
.ip-footer__tagline { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #E6CF98; white-space: nowrap; }
.ip-footer__brand p { margin: 0; font-size: 15px; line-height: 1.65; max-width: 34ch; }
.ip-footer__social { width: 44px; height: 44px; border: 1px solid rgba(201,211,227,.35); border-radius: 50%; display: grid; place-items: center; }
.ip-footer__h { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E6CF98; }
.ip-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.4; }
.ip-footer__offices { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.5; }
.ip-footer__offices strong { display: block; color: #fff; font-weight: 600; }
.ip-footer__contact { padding-top: 14px; border-top: 1px solid rgba(201,211,227,.2); display: flex; flex-direction: column; gap: 6px; }
.ip-footer__bar { border-top: 1px solid rgba(201,211,227,.18); }
.ip-footer__bar .ip-wrap { padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #AEB9CC; }
.ip-footer__bar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ip-footer__bar a { color: #AEB9CC; }

/* ---------- 4. Trang chủ ---------- */
.ip-hero { background: var(--navy); color: #fff; }
.ip-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 64px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.ip-hero__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ip-hero__text p { margin: 0; font-size: 19px; line-height: 1.65; color: #D7DDE8; max-width: 52ch; }
.ip-hero__meta { font-size: 14px; color: #AEB9CC; }
.ip-chain { background: var(--navy-3); border: 1px solid rgba(230,207,152,.35); border-radius: 4px; padding: 30px 32px; min-width: 0; }
.ip-chain__t { font-family: var(--f-serif); font-size: 24px; line-height: 1.3; margin: 0 0 20px; text-wrap: balance; }
.ip-chain ol { list-style: none; margin: 0; padding: 0; }
.ip-chain li { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.ip-chain li b { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.ip-chain li span { flex: 1; font-weight: 600; }
.ip-chain li small { font-size: 13px; color: #AEB9CC; }
.ip-stats { background: var(--soft); border-bottom: 1px solid var(--line); }
.ip-stats .ip-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px; padding-top: 36px; padding-bottom: 36px; }
.ip-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 18px; border-left: 2px solid var(--gold); }
.ip-stat strong { font-family: var(--f-serif); font-weight: 400; font-size: clamp(24px, 2.1vw, 28px); line-height: 1.1; color: var(--navy); }
.ip-stat span { font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.ip-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--line); border-radius: 4px; background: #fff; text-decoration: none; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.ip-card:hover { border-color: var(--gold); box-shadow: 0 16px 32px -20px rgba(2,36,82,.35); }
.ip-card__n { font-family: var(--f-serif); font-size: 15px; color: var(--gold-2); }
.ip-card__t { font-family: var(--f-serif); font-size: 25px; line-height: 1.25; color: var(--navy); }
.ip-card__p { font-size: 15px; line-height: 1.6; }
.ip-card__f { margin-top: auto; padding-top: 14px; border-top: 1px solid #EFE9DA; font-size: 13px; color: var(--text); }
.ip-card--navy { background: var(--navy-3); border-color: transparent; color: #D7DDE8; }
.ip-card--navy .ip-card__t { color: #fff; font-size: 24px; }
.ip-card--navy .ip-card__k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E6CF98; }
.ip-card--navy .ip-card__f { border: 0; padding: 0; color: #fff; font-weight: 700; font-size: 14px; }
.ip-why { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 1080px) { .ip-why { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } }
.ip-why h3 { margin: 12px 0; font-size: 19px; color: var(--navy); }
.ip-why h3::before { content: ""; display: block; width: 40px; height: 2px; background: var(--gold); margin-bottom: 12px; }
.ip-why p { margin: 0; font-size: 16px; line-height: 1.65; }
.ip-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); border-top: 2px solid var(--navy); margin: 0; padding: 0; list-style: none; }
.ip-steps li { padding: 26px; border-right: 1px solid var(--line); }
.ip-steps li:first-child { padding-left: 0; }
.ip-steps li:last-child { border-right: 0; }
.ip-steps b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 15px; color: var(--gold-2); margin-bottom: 8px; }
.ip-steps strong { display: block; font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.ip-steps p { margin: 0; font-size: 15px; line-height: 1.6; }
.ip-split { display: flex; flex-wrap: wrap; gap: 56px; }
.ip-split > :first-child { flex: 2 1 560px; min-width: 0; }
.ip-split > :last-child { flex: 1 1 320px; min-width: 0; align-self: flex-start; }
.ip-rows a { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; }
.ip-rows a:last-child { border-bottom: 1px solid var(--line); }
.ip-rows small { font-size: 13px; line-height: 1.5; color: var(--text); }
.ip-rows span { font-family: var(--f-serif); font-size: 22px; line-height: 1.3; color: var(--navy); }
.ip-panel { background: var(--soft); border-radius: 4px; padding: 32px; }
.ip-panel ul { list-style: none; margin: 0 0 22px; padding: 0; }
.ip-panel li { padding: 12px 0; border-top: 1px solid var(--line); }
.ip-panel li:last-child { border-bottom: 1px solid var(--line); }
.ip-panel li a { font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: none; }
.ip-panel li small { display: block; font-size: 13px; color: var(--text); margin-top: 2px; }
.ip-cta .ip-wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.ip-cta .ip-wrap > div { max-width: 680px; }

/* ---------- 5. Trang Solution ---------- */
.ip-crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: #AEB9CC; margin-bottom: 28px; }
.ip-crumbs a { color: #AEB9CC; text-decoration: none; }
.ip-crumbs [aria-current] { color: #E6CF98; }
.ip-solhero .ip-wrap { padding-top: 56px; padding-bottom: 72px; }
.ip-solhero__row { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; justify-content: space-between; }
.ip-solhero__text { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ip-solhero__text p { margin: 0; font-size: 19px; line-height: 1.65; color: #D7DDE8; max-width: 56ch; }
.ip-leadbox { flex: 0 1 320px; min-width: 0; background: var(--navy-3); border-radius: 4px; padding: 24px 26px; }
.ip-leadbox strong { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 21px; line-height: 1.3; }
.ip-leadbox small { display: block; font-size: 14px; color: #C9D3E3; margin-top: 6px; }
.ip-leadbox .ip-btn { width: 100%; justify-content: center; margin-top: 18px; height: 48px; font-size: 15px; }
.ip-numlist { list-style: none; margin: 0; padding: 0; }
.ip-numlist li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.55; }
.ip-numlist li:last-child { border-bottom: 1px solid var(--line); }
.ip-numlist b { font-family: var(--f-serif); font-weight: 400; color: var(--gold-2); font-size: 18px; width: 28px; flex-shrink: 0; }
.ip-numlist strong { color: var(--navy); }
.ip-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.ip-tile { background: #fff; border-radius: 4px; padding: 28px; }
.ip-tile h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.35; color: var(--navy); }
.ip-tile p { margin: 0; font-size: 15px; line-height: 1.6; }
.ip-flow { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.ip-flow li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; }
.ip-flow b { font-family: var(--f-serif); font-weight: 400; font-size: 22px; color: var(--gold-2); }
.ip-flow strong { color: var(--navy); }
.ip-deliv { border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
.ip-deliv ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; }
.ip-team { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 4px; padding: 24px 26px; text-decoration: none; border-top: 3px solid #D5D9E0; }
.ip-team--lead { border-top-color: var(--gold); }
.ip-team small { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--text); }
.ip-team--lead small { color: var(--gold-2); }
.ip-team strong { font-family: var(--f-serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--navy); }
.ip-team span { font-size: 14px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.ip-related { display: flex; flex-wrap: wrap; gap: 56px; }
.ip-related > div { flex: 1 1 440px; min-width: 0; }
.ip-related a { display: block; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
.ip-related a:last-child { border-bottom: 1px solid var(--line); }
.ip-related strong { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--navy); }
.ip-related small { display: block; font-size: 14px; color: var(--text); margin-top: 4px; }
.ip-note { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); }

/* ---------- 6. Máy tính bảng & điện thoại ---------- */
@media (max-width: 1080px) {
  .ip-nav, .ip-header__actions .ip-btn { display: none; }
  .ip-burger { display: grid; }
  .ip-footer__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ip-topbar .ip-wrap > span, .ip-topbar a[href^="mailto"] { display: none; }
  .ip-header > .ip-wrap { height: 68px; }
  .ip-hero__grid { padding-top: 56px; padding-bottom: 64px; gap: 40px; }
  .ip-chain { padding: 22px 20px; }
  .ip-chain li small { display: none; }
  .ip-steps li { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ip-rows a { grid-template-columns: 1fr; gap: 6px; }
  .ip-footer__main { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
  .ip-btn { width: 100%; justify-content: center; }
}

/* ---------- 7. Menu thả xuống đơn (Expertise, Insights, About) ---------- */
.ip-nav > li.ip-has-drop { position: relative; }
.ip-drop { position: absolute; top: 100%; left: -18px; min-width: 320px; margin: 0; padding: 10px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 24px 40px -24px rgba(2,36,82,.35); display: none; }
.ip-nav > li.is-open > .ip-drop { display: block; }
.ip-drop a { display: block; padding: 10px 20px; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.ip-drop a small { display: block; font-size: 13px; font-weight: 400; color: var(--text); margin-top: 2px; }
.ip-drop a:hover { background: var(--soft); }

/* ---------- 8. Menu điện thoại ---------- */
.ip-mobile { border-top: 1px solid var(--line); background: #fff; }
.ip-mobile[hidden] { display: none; }
.ip-mobile > .ip-wrap { display:block; height:auto; padding-top:12px; padding-bottom:24px; }
.ip-mobile details { border-bottom: 1px solid var(--line); }
.ip-mobile summary, .ip-mobile > .ip-wrap > a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 16px; font-weight: 600; color: var(--navy); text-decoration: none; cursor: pointer; list-style: none; }
.ip-mobile summary::-webkit-details-marker { display: none; }
.ip-mobile details a { display: block; padding: 10px 0 10px 14px; font-size: 15px; color: var(--text); text-decoration: none; }
.ip-mobile .ip-btn { margin-top: 18px; width: 100%; justify-content: center; }
@media (min-width: 1081px) { .ip-mobile { display: none !important; } }

/* ---------- 9. Ngắt dòng hợp lý (không để 1 chữ rơi xuống dòng cuối, nhãn ngắn không bị ngắt) ---------- */
.ip-h1, .ip-h2, .ip-card__t, .ip-mega__t, .ip-team strong, .ip-related strong, .ip-rows span, .ip-tile h3, .ip-why h3,
.ip-chain__t, .ip-stat strong, .ip-leadbox strong, .ip-steps strong, .ip-panel li a, .ip-eyebrow, .ip-mega__label { text-wrap: balance; }
.ip-wrap p, .ip-card__p, .ip-mega__d, .ip-numlist li span, .ip-flow li span, .ip-footer__offices div, .ip-related small,
.ip-stat span, .ip-leadbox small, .ip-deliv li, .ip-drop small { text-wrap: pretty; }
.ip-btn, .ip-link, .ip-nav > li > a, .ip-footer li a, .ip-footer__h, .ip-card__n, .ip-card__k, .ip-team small, .ip-topbar a { white-space: nowrap; }
.ip-footer__offices div { max-width: 36ch; }
@media (max-width: 720px) {
  .ip-footer__tagline { font-size: 11px; letter-spacing: .08em; }
  .ip-footer__brand img { width: 170px; }
  .ip-link { white-space: normal; }
}

.ip-nb { white-space: nowrap; }
.ip-stat strong { white-space: nowrap; }
.ip-note .ip-link { display: inline-block; }
@media (max-width: 720px) {
  .ip-crumbs [aria-current], .ip-crumbs span:nth-last-child(2) { display: none; }
  .ip-stat strong { white-space: normal; }
}

.ip-tiles--2 { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.ip-q { display: block; }
.ip-q + .ip-q { margin-top: 6px; }
.ip-card__f small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
@media (max-width: 720px) { .ip-h1 { font-size: 34px; } .ip-eyebrow { font-size: 12px; letter-spacing: .1em; } .ip-flow li span, .ip-numlist li span, .ip-related strong { text-wrap: balance; } .ip-related strong { font-size: 19px; } }

.ip-line { display: block; }
.ip-footer__offices div { max-width: none; }

/* Trang chủ: tiêu đề lớn đúng 2 dòng trên máy tính */
.ip-hero--home .ip-h1 { font-size:clamp(36px, 3.7vw, 52px); }
@media (min-width: 1081px) { .ip-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }


/* ---------- 10. V2: integration, accessible interaction and image layouts ---------- */
.ip-hero .ip-h1 { color:#fff; }
.ip-card__t { margin:0; font-weight:400; }
.ip-card--navy:hover { color:#D7DDE8; }
.ip-btn--line-light:hover { color:#fff; background:rgba(255,255,255,.08); }
.ip-sec--navy .ip-link:hover { color:#E6CF98; }
.ip-sec--navy .ip-card__t, .ip-sec--navy .ip-case__title { color:#fff; }
.ip-header a:focus-visible, .ip-header button:focus-visible, .ip-header summary:focus-visible,
main a:focus-visible, main button:focus-visible, main summary:focus-visible,
.ip-footer a:focus-visible, .ip-footer button:focus-visible {
  outline:2px solid var(--navy); outline-offset:4px;
}
.ip-hero a:focus-visible, .ip-sec--navy a:focus-visible,
.ip-footer a:focus-visible, .ip-footer button:focus-visible { outline-color:#E6CF98; }
.ip-mobile { max-height:calc(100dvh - 84px); overflow-y:auto; overscroll-behavior:contain; }
.ip-mobile summary svg { width:16px; height:16px; flex:0 0 16px; transition:transform .15s; }
.ip-mobile details[open] > summary svg { transform:rotate(180deg); }
.ip-mobile details a { min-height:48px; box-sizing:border-box; display:block; padding-top:13px; padding-bottom:13px; line-height:1.45; }
.ip-mobile > .ip-wrap > .ip-btn { justify-content:center; }
.ip-mega__all { margin-top:22px; width:fit-content; }
.ip-footer { border-top:1px solid rgba(201,211,227,.22); }
.ip-footer__bar nav { align-items:center; }
.ip-footer__cookie { appearance:none; border:0; background:transparent; color:#AEB9CC; font:inherit; padding:0; cursor:pointer; min-height:44px; }
.ip-footer__cookie:hover { color:#fff; }
.ip-footer__bar a { display:inline-flex; align-items:center; min-height:44px; }
.ip-contact-offices { color:var(--text); }
.ip-contact-offices strong { color:var(--navy); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:2px solid var(--navy); outline-offset:3px; border-color:var(--navy); box-shadow:none; }
.chip input:focus-visible + span { outline-color:var(--navy); }
.ip-sec.ip-cta { padding:56px 0; }
.ip-skip { position:fixed; top:8px; left:12px; z-index:100; padding:12px 18px; background:#fff; color:var(--navy); transform:translateY(-150%); border:2px solid var(--navy); }
.ip-skip:focus { transform:none; }
main[id="main"] { scroll-margin-top:100px; }
main[id="main"]:focus { outline:none; }
.ip-hero__image { margin:0; min-width:0; align-self:center; }
.ip-hero__image img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:38% 50%; border-radius:2px; }
.ip-hero__image figcaption { margin-top:14px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#C9D3E3; }
.ip-profile-link { display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:15px; font-weight:600; min-height:44px; text-underline-offset:5px; }
.ip-profile-link:hover { color:#E6CF98; }
.ip-profile-link svg { width:16px; height:16px; }
.ip-hero--home .ip-btns { align-items:center; gap:22px; }
.ip-grid--solutions { gap:22px; }
.ip-grid--solutions .ip-card { padding:24px; gap:12px; }
.ip-grid--solutions .ip-card__t { font-size:24px; line-height:1.25; }
.ip-grid--solutions .ip-card__p { font-size:16px; line-height:1.6; }
.ip-grid--solutions .ip-card__f { font-size:14px; font-weight:600; color:var(--navy); padding-top:12px; }
.ip-case-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; }
.ip-case-feature { background:var(--navy-3); padding:32px; display:flex; flex-direction:column; gap:18px; text-decoration:none; color:#D7DDE8; border-top:2px solid var(--gold); }
.ip-case-feature:hover { color:#D7DDE8; background:#04346F; }
.ip-case__label { font-size:12px; font-weight:700; letter-spacing:.12em; line-height:1.6; text-transform:uppercase; color:#E6CF98; }
.ip-case__title { margin:0; font-family:var(--f-serif); font-weight:400; font-size:32px; line-height:1.2; }
.ip-case-feature p { margin:0; font-size:16px; line-height:1.65; }
.ip-case__outcome { padding-top:18px; border-top:1px solid rgba(201,211,227,.25); }
.ip-case__outcome strong { display:block; color:#fff; font-size:13px; margin-bottom:6px; }
.ip-case__action { margin-top:auto; padding-top:8px; font-size:14px; font-weight:700; color:#fff; }
.ip-case-secondary { display:flex; flex-direction:column; }
.ip-case-secondary a { display:flex; flex:1; flex-direction:column; gap:12px; padding:24px 0; border-top:1px solid rgba(201,211,227,.3); text-decoration:none; color:#D7DDE8; }
.ip-case-secondary a:hover { color:#fff; }
.ip-case-secondary a:first-child { padding-top:0; border-top:0; }
.ip-case-secondary .ip-case__title { font-size:25px; }
.ip-case-secondary p { margin:0; font-size:15px; line-height:1.6; }
.ip-method-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; margin-top:38px; }
.ip-evidence { margin:0; border:1px solid var(--line); background:var(--soft); padding:26px; }
.ip-evidence figcaption { margin:0 0 22px; font-family:var(--f-serif); color:var(--navy); font-size:24px; line-height:1.25; }
.ip-evidence ol { list-style:none; margin:0; padding:0; }
.ip-evidence li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; border-top:1px solid var(--line); padding:15px 0; }
.ip-evidence li strong { display:block; color:var(--navy); font-size:15px; font-weight:600; }
.ip-evidence li small { display:block; font-size:13px; color:var(--text); line-height:1.5; margin-top:3px; }
.ip-evidence__status { max-width:115px; font-size:12px; line-height:1.45; color:var(--gold-2); border-left:2px solid var(--gold); padding-left:10px; }
.ip-evidence > p { font-size:12px; line-height:1.5; margin:10px 0 0; color:var(--text); }
.ip-method-copy h3 { font-family:var(--f-serif); font-size:27px; font-weight:400; line-height:1.25; margin:0 0 14px; color:var(--navy); }
.ip-method-copy p { font-size:17px; line-height:1.65; margin:0 0 18px; }
.ip-home-insights .ip-rows a { grid-template-columns:1fr; gap:6px; padding:20px 0; }
.ip-home-insights .ip-rows span { font-size:21px; line-height:1.3; }
.ip-home-insights .ip-rows a:first-child span { font-size:26px; line-height:1.25; }
.ip-panel__image { width:100%; display:block; aspect-ratio:16/10; height:auto; object-fit:cover; object-position:50% 50%; border-radius:2px; margin:0 0 24px; }
.ip-publication-visual { margin:0 0 24px; }
.ip-publication-visual .ip-panel__image { margin-bottom:10px; }
.ip-publication-visual figcaption { font-size:12px; line-height:1.5; color:var(--text); }
.ip-panel__title { font-family:var(--f-serif); font-size:26px; font-weight:400; line-height:1.25; color:var(--navy); margin:0 0 18px; }
.ip-cross-practice { margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:24px; align-items:center; padding:24px 28px; background:var(--soft); border-top:1px solid var(--line); }
.ip-cross-practice h2 { font-family:var(--f-serif); font-size:25px; font-weight:400; line-height:1.25; color:var(--navy); margin:0; }
.ip-cross-practice p { margin:0; font-size:16px; line-height:1.6; }
.ip-cross-practice .ip-eyebrow { font-size:11px; margin-bottom:8px; }
.ip-jump { display:flex; gap:8px 24px; flex-wrap:wrap; margin-top:30px; padding-top:20px; border-top:1px solid rgba(201,211,227,.25); }
.ip-jump a { font-size:14px; font-weight:600; color:#D7DDE8; text-decoration:none; display:inline-flex; min-height:44px; align-items:center; }
.ip-jump a:hover { color:#fff; text-decoration:underline; text-underline-offset:5px; }
#scope, #deliverables, #experience { scroll-margin-top:108px; }
.ip-team-band { padding:32px 0; background:var(--soft); border-top:1px solid var(--line); }
.ip-team-band > .ip-wrap { display:flex; align-items:baseline; gap:16px 28px; flex-wrap:wrap; }
.ip-team-band .ip-eyebrow { margin:0; font-size:11px; }
.ip-team-band__links { display:flex; gap:12px 28px; flex-wrap:wrap; align-items:baseline; }
.ip-team-band__links a { max-width:38ch; font-size:14px; line-height:1.5; font-weight:600; color:var(--navy); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px; }
.ip-team-band__links a > span:first-child { font-size:11px; font-weight:400; color:var(--text); }
.ip-brand-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center; }
.ip-brand-story figure { margin:0; min-width:0; }
.ip-brand-story img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:56% 38%; display:block; border-radius:2px; }
.ip-brand-story figcaption { font-size:12px; line-height:1.5; color:var(--text); margin-top:10px; }
@media (max-width:1080px) {
  .ip-hero__grid { gap:36px; }
  .ip-case-grid { gap:28px; }
  .ip-cross-practice { grid-template-columns:1fr 1fr; }
  .ip-cross-practice > .ip-link { grid-column:1/-1; width:fit-content; }
  .ip-footer li a { white-space:normal; }
}
@media (max-width:720px) {
  .ip-wrap { padding-left:24px; padding-right:24px; }
  .ip-sec { padding:48px 0; }
  .ip-head { margin-bottom:28px; gap:18px; }
  .ip-hero--home .ip-h1 { font-size:34px; line-height:1.12; }
  .ip-hero--home .ip-hero__grid { padding-top:40px; padding-bottom:48px; grid-template-columns:1fr; }
  .ip-hero__image { display:none; }
  .ip-hero__text { gap:20px; }
  .ip-hero__text p, .ip-solhero__text p { font-size:17px; line-height:1.6; }
  .ip-hero--home .ip-btns { gap:8px; }
  .ip-profile-link { justify-content:flex-start; }
  .ip-hero__meta { font-size:12px; line-height:1.5; }
  .ip-mobile { max-height:calc(100dvh - 68px); }
  .ip-stats .ip-wrap { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; padding-top:24px; padding-bottom:24px; }
  .ip-stat { padding-left:10px; }
  .ip-stat strong { font-size:21px; line-height:1.15; white-space:normal; }
  .ip-stat span { font-size:12px; line-height:1.5; }
  .ip-grid--solutions { grid-template-columns:1fr; gap:16px; }
  .ip-grid--solutions .ip-card { padding:22px; }
  .ip-case-grid, .ip-method-grid, .ip-brand-story { grid-template-columns:1fr; gap:28px; }
  .ip-case-feature { padding:24px; }
  .ip-case__title { font-size:28px; }
  .ip-case-secondary .ip-case__title { font-size:24px; }
  .ip-case-secondary a:first-child { padding-top:24px; border-top:1px solid rgba(201,211,227,.3); }
  .ip-steps { grid-template-columns:1fr; }
  .ip-evidence { padding:22px; }
  .ip-evidence li { grid-template-columns:minmax(0,1fr) 102px; }
  .ip-split, .ip-related { gap:32px; }
  .ip-panel { padding:24px; }
  .ip-panel__image, .ip-brand-story img { aspect-ratio:3/2; }
  .ip-cross-practice { grid-template-columns:1fr; padding:24px; gap:18px; }
  .ip-solhero .ip-wrap { padding-top:32px; padding-bottom:40px; }
  .ip-solhero__row { gap:28px; }
  .ip-leadbox { flex-basis:100%; padding:20px; }
  .ip-leadbox strong { font-size:20px; }
  .ip-jump { margin-top:22px; padding-top:12px; gap:8px 20px; }
  .ip-team-band { padding:26px 0; }
  .ip-team-band__links { flex-direction:column; gap:16px; }
  .ip-team-band__links a { min-height:44px; display:block; }
  .ip-team-band__links a > span:first-child { display:block; }
  .ip-sec.ip-cta { padding:48px 0; }
  .ip-footer__main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding-top:40px; padding-bottom:28px; }
  .ip-footer__brand, .ip-footer__main > div:last-child { grid-column:1/-1; }
  .ip-footer ul { gap:0; }
  .ip-footer li a { display:flex; align-items:center; min-height:44px; line-height:1.5; white-space:normal; }
  .ip-footer__tagline { white-space:normal; line-height:1.6; }
  .ip-footer__bar .ip-wrap { gap:10px; }
  .ip-footer__bar nav { gap:0 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .ip-card, .ip-btn, .ip-mobile summary svg { transition:none; }
}

/* ---------- 11. V3: long labels, translated text and real text spacing ---------- */
.ip-btn { min-height:52px; height:auto; padding:12px 24px; line-height:1.4; white-space:normal; text-align:center; }
.ip-header__actions .ip-btn { min-height:46px; height:auto; padding:10px 22px; }
.ip-leadbox .ip-btn { min-height:48px; height:auto; padding:10px 18px; }
.ip-btn svg, .ip-profile-link svg, .ip-topbar__profile svg { flex-shrink:0; }
.ip-footer li a, .ip-footer__h { white-space:normal; }
.ip-footer__tagline { white-space:normal; line-height:1.6; }
.ip-mega__grid > a, .ip-grid > *, .ip-cross-practice > * { min-width:0; }
.ip-publication-visual .ip-panel__image { aspect-ratio:16/10; }