/* Launch composition additions to site.css (Task169 design system): migrated bodies, data-state labels, media
   slots and the launch replacements of design blocks that need script or unsupported data. */

/* Migrated bodies */
.launch-notice { margin: 0; padding: 12px 16px; border-radius: 14px; background: #FFF7EE; border: 1.5px solid #F2C9A0; color: #6B3A0E; font-size: 14px; line-height: 1.55; }
.launch-notice + .launch-notice { margin-top: 8px; }
.art-top .launch-notice { margin-top: 12px; }
.launch-prose { margin: 0 auto 0 0; min-width: 0; }
.launch-prose img { max-width: 100%; height: auto; border-radius: 12px; background: var(--accent); color: var(--muted); font-size: 14px; }
.launch-prose figure { margin: 24px 0; }
.launch-prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.launch-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.launch-prose th, .launch-prose td { padding: 8px 10px; border: 1px solid #E7DFD6; vertical-align: top; text-align: left; }
.launch-prose th { background: #FBF6F0; font-weight: 600; }
.launch-prose blockquote { margin: 20px 0; padding: 12px 18px; border-left: 4px solid var(--orange); background: #FFF9F3; }
.launch-prose pre { overflow-x: auto; padding: 12px; border-radius: 10px; background: #F6F1EC; font-size: 14px; }
.launch-prose h2[id] { scroll-margin-top: 140px; }
.launch-prose h4, .launch-prose h5, .launch-prose h6 { margin-top: 22px; font-weight: 600; color: var(--ink); }
.launch-prose .aligncenter, .launch-prose .has-text-align-center { text-align: center; margin-left: auto; margin-right: auto; }
.launch-prose .has-text-align-right, .launch-prose .alignright { text-align: right; }
.launch-prose a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
.legacy-media-unavailable { display: inline-block; padding: 10px 12px; border: 1px dashed #D9CFC5; border-radius: 10px; color: var(--muted); font-size: 14px; }
.legacy-component-blocked[hidden] { display: none; }
.launch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.launch-list li { padding: 10px 0; border-bottom: 1px solid #EEE6DE; line-height: 1.5; }
.launch-list a { font-weight: 500; color: var(--ink); }
.pd-no-toc { grid-template-columns: minmax(0, 1fr) !important; }
.pd-no-toc > .launch-prose, .pd-no-toc > article { max-width: 820px; }

/* Data-state labels */
.fin-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: normal; }
.fin-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fin-chip-verified-current { background: var(--ok-bg); color: var(--ok); }
.fin-chip-legacy-unverified { background: #FFF1DC; color: #8A4B08; }
.fin-chip-unknown, .fin-chip-conflict { background: var(--lav-2); color: var(--ink-2); }
.fin-chip-conflict { box-shadow: inset 0 0 0 1.5px #C9B8D8; }
.fin-chip-withheld-unsafe { background: var(--bad-bg); color: var(--bad); }
.pd-legacy-tag, .pd-tag { display: inline-block; width: fit-content; padding: 1px 8px; border-radius: 999px; background: #FFF1DC; color: #8A4B08; font-size: 11.5px; font-weight: 600; }
.pd-tag-ok { background: var(--ok-bg); color: var(--ok); }
[data-fin-state="CONFLICT"] > .crv-row-k .pd-legacy-tag, [data-fin-state="UNKNOWN"] > .crv-row-k .pd-legacy-tag { background: var(--lav-2); color: var(--ink-2); }

/* Media slots: exact art is layered over an issuer placeholder at the slot's design size. An image that fails to
   load (gateway unavailable) is painted by its ::after with the same placeholder (exact packaged logo or issuer
   text), so the slot keeps its geometry and never shows a broken-image icon. */
.ms { position: relative; overflow: hidden; }
.ms-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; }
.ms-ph-logo { width: auto; height: auto; max-width: min(96px, 70%); max-height: 44px; object-fit: contain; }
.ms-ph-text { max-width: 100%; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; text-align: center; color: var(--orange-text-on-peach); overflow-wrap: anywhere; }
.ac-ph { align-items: flex-end; justify-content: flex-start; padding: 14px; background: linear-gradient(160deg, var(--peach) 0, var(--accent) 100%); }
.ms-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; padding: 14px; object-fit: contain; transform: none; filter: none; color: transparent; font-size: 0; }
.ms-img::after { content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--ms-bg, var(--peach)) center / auto 30% no-repeat; font: 600 15px/1.2 var(--font); letter-spacing: .02em; text-align: center; color: var(--orange-text-on-peach); }
.ms-img[data-ph-logo]::after { content: ""; background-size: min(96px, 62%) auto; }
.ms-img[data-ph-logo="acb"]::after { background-image: url(/assets/media/bank/acb.png); }
.ms-img[data-ph-logo="agribank"]::after { background-image: url(/assets/media/bank/agribank.png); }
.ms-img[data-ph-logo="bidv"]::after { background-image: url(/assets/media/bank/bidv.png); }
.ms-img[data-ph-logo="eximbank"]::after { background-image: url(/assets/media/bank/eximbank.png); }
.ms-img[data-ph-logo="hdbank"]::after { background-image: url(/assets/media/bank/hdbank.png); }
.ms-img[data-ph-logo="hsbc"]::after { background-image: url(/assets/media/bank/hsbc.png); }
.ms-img[data-ph-logo="mbbank"]::after { background-image: url(/assets/media/bank/mbbank.png); }
.ms-img[data-ph-logo="msb"]::after { background-image: url(/assets/media/bank/msb.png); }
.ms-img[data-ph-logo="ocb"]::after { background-image: url(/assets/media/bank/ocb.png); }
.ms-img[data-ph-logo="pvcombank"]::after { background-image: url(/assets/media/bank/pvcombank.png); }
.ms-img[data-ph-logo="sacombank"]::after { background-image: url(/assets/media/bank/sacombank.png); }
.ms-img[data-ph-logo="seabank"]::after { background-image: url(/assets/media/bank/seabank.png); }
.ms-img[data-ph-logo="shb"]::after { background-image: url(/assets/media/bank/shb.png); }
.ms-img[data-ph-logo="techcombank"]::after { background-image: url(/assets/media/bank/techcombank.png); }
.ms-img[data-ph-logo="tnex"]::after { background-image: url(/assets/media/bank/tnex.png); }
.ms-img[data-ph-logo="tpb"]::after { background-image: url(/assets/media/bank/tpb.png); }
.ms-img[data-ph-logo="vib"]::after { background-image: url(/assets/media/bank/vib.png); }
.ms-img[data-ph-logo="vietcombank"]::after { background-image: url(/assets/media/bank/vietcombank.png); }
.ms-img[data-ph-logo="vietinbank"]::after { background-image: url(/assets/media/bank/vietinbank.png); }
.ms-img[data-ph-logo="vpbank"]::after { background-image: url(/assets/media/bank/vpbank.png); }
.ms-img-cover { padding: 0; object-fit: cover; }
.ms-img-cover::after { align-items: flex-end; justify-content: flex-start; padding: 14px; background: linear-gradient(160deg, var(--peach) 0, var(--accent) 100%); font-size: 13px; color: var(--orange-text); }
.prod-card, .crv-card-img, .rv-img, .ccmp-himg, .pd-alt-img, .pv-card-img { padding: 12px 18%; transform: rotate(-8deg); }
.crv-card-img { filter: drop-shadow(0 16px 20px rgba(43, 24, 56, .3)); }
.prod-logo-img, .pd-logo-img, .pd-iss-img { padding: 24% 18%; }
.pd-aside-img { padding: 6px; }
.prod-media-logo { --ms-bg: var(--lav-2); }
.pd-rate-grid .iss-logo { --ms-bg: var(--cream); }
.crv-aside-media .ms-ph-logo { max-height: 28px; }
.crv-aside-media .ms-ph-text { font-size: 11px; }
.ccmp-hmedia .ms-ph-logo { max-height: 36px; }
.pd-art-hero { position: relative; padding: 0; }
.pd-art-hero .ms-ph { align-items: flex-end; justify-content: flex-start; padding: 20px 24px; }

/* Header search look (no input on launch pages) */
.hdr-search-ph { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hdr-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }

/* Home */
.pd-ai-box { display: block; color: var(--ink); text-decoration: none; }
.pd-ai-box:hover { box-shadow: 0 0 0 2px #2B1838, 0 18px 40px -22px rgba(43, 24, 56, .55); }
.pd-ai-box .ai-send { display: inline-flex; align-items: center; justify-content: center; }
.pd-ai-input { display: flex; align-items: center; color: var(--muted); font-size: 17px; }
.pd-ai-chip { display: inline-flex; align-items: center; text-decoration: none; }
.pd-hero-cards { min-height: 420px; }
.pd-hc { display: flex; flex-direction: column; justify-content: space-between; width: 210px; height: 330px; padding: 22px 20px; border-radius: 20px; background: linear-gradient(160deg, #3A2350 0, #2B1838 100%); box-shadow: 0 24px 40px -12px rgba(43, 24, 56, .45); filter: none; }
.pd-hc-2 { background: linear-gradient(160deg, #FFFFFF 0, #FFE7D3 100%); }
.pd-hc-3 { background: linear-gradient(160deg, #FFB46B 0, #F5821F 100%); box-shadow: 0 24px 40px -12px rgba(120, 52, 6, .45), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.pd-hc-chip { width: 44px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #F7D58B, #D9A443); }
.pd-hc-mark { align-self: flex-end; font-size: 22px; font-weight: 700; font-style: italic; letter-spacing: -.02em; color: rgba(255, 248, 241, .9); }
.pd-hc-2 .pd-hc-mark { color: var(--orange); }
.pd-hc-3 .pd-hc-mark { color: var(--ink); }
.pd-tile-cards .pd-hc { width: 82px; height: 128px; padding: 10px 9px; border-radius: 10px; box-shadow: 0 10px 18px -8px rgba(43, 24, 56, .4); }
.pd-tile-cards .pd-hc-chip { width: 18px; height: 14px; border-radius: 4px; }
.pd-tile-cards .pd-hc-mark { font-size: 11px; }
.pd-rate-v { font-size: clamp(26px, 2.6vw, 34px); }
.pd-bank-strip .press-track { align-items: center; }
.pd-bank-loop { display: flex; }
.pd-bank-logo img { height: 26px; filter: none; opacity: 1; }
.pd-banks .press-head { margin-bottom: 4px; }
.prod-state { font-size: 13px; color: var(--muted); }
.prod-side .prod-second { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; }
.prod-side .prod-second:hover { background: var(--ink); color: var(--cream); }
.prod-note { font-size: 13px; color: var(--muted); text-align: center; }
.metric-s { font-size: 12px; font-weight: 600; color: var(--muted); }
.metric[data-fin-state="VERIFIED_CURRENT"] .metric-s { color: var(--ok); }
.metric[data-fin-state="LEGACY_UNVERIFIED"] .metric-s { color: #8A4B08; }
.pd-prod .metric-v { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; }
.pd-sv .sv-banks { gap: 8px; }
.pd-sv-bank { grid-template-columns: 72px minmax(0, 1fr) auto; text-decoration: none; color: var(--ink); }
.pd-sv-logo { display: flex; align-items: center; justify-content: center; height: 32px; }
.pd-sv-logo img { max-width: 64px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.pd-sv-logo span { font-size: 13px; font-weight: 600; color: var(--orange-text-on-peach); }
.pd-sv-bank .sv-bank-int { color: var(--orange-text); font-weight: 600; }
.pd-sv-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pd-how-btn { text-decoration: none; color: inherit; }

/* Hubs */
.pd-cat-issuers { align-items: center; }
.pd-cat-logos { display: flex; flex: none; flex-direction: column; gap: 6px; width: 88px; }
.pd-cat-logo { display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 8px; border-radius: 8px; background: #fff; }
.pd-cat-logo img { max-width: 64px; max-height: 18px; width: auto; height: auto; object-fit: contain; }
.pd-cat-text { font-size: 11px; font-weight: 600; color: var(--orange-text-on-peach); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-subhead { margin: 18px 0 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.pd-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.pd-index-group { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); }
.pd-index-head { display: flex; align-items: center; gap: 10px; }
.pd-index-head b { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.pd-index-logo { display: flex; align-items: center; width: 64px; height: 28px; }
.pd-index-logo img { max-width: 64px; max-height: 24px; width: auto; height: auto; object-fit: contain; }
.pd-index-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pd-index-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pd-index-list a { color: var(--ink); }
.pd-index-ok { font-size: 12px; font-weight: 600; color: var(--ok); }
.pd-rate-grid .iss-logo { width: 72px; height: 40px; border-radius: 10px; background: var(--cream); }
.pd-more-list { margin-top: 16px; }

/* Provider page (Ngan hang VPBank design) */
.pv-top { padding-top: 20px; }
.pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: #fff; box-shadow: var(--sh-float); }
.pv-logo { display: flex; flex: none; align-items: center; justify-content: center; width: 160px; height: 96px; padding: 14px; border-radius: 20px; background: var(--cream); }
.pv-logo img { max-width: 132px; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.pv-id { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pv-id h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.pv-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pv-nav { margin-top: 24px; }
.pv-body { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); padding-top: 32px; padding-bottom: 64px; }
.pv-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 140px; }
.pv-sec h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.pv-sec > p { max-width: 820px; line-height: 1.6; color: var(--body); }
.pv-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.pv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pv-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--sh-card); color: var(--ink); transition: box-shadow .15s ease; }
.pv-card:hover { box-shadow: var(--sh-float); }
.pv-card-media { display: flex; flex: none; align-items: center; justify-content: center; width: 72px; height: 60px; border-radius: 12px; background: var(--peach); }
.pv-card-media .ms-ph-logo { max-height: 22px; }
.pv-card-media .ms-ph-text { font-size: 11px; }
.pv-card-media .ms-img::after { background-size: 70% auto; font-size: 11px; }
.pv-card-img { padding: 6px 10px; }
.pv-card-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pv-card-text b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.pv-card-line { font-size: 13px; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-card-state { font-size: 12px; font-weight: 600; color: #8A4B08; }
.pv-card[data-fin-state="VERIFIED_CURRENT"] .pv-card-state { color: var(--ok); }
.pv-rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: var(--sh-card); color: var(--ink); text-decoration: none; }
.pv-rate > span:first-child { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1000px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } }

/* Provider directory (Ngan hang design) */
.bk-hero { gap: 14px; }
.bk-hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.bk-search { display: flex; align-items: center; gap: 10px; width: min(100%, 480px); height: 52px; margin-top: 6px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 15px; }
.bk-body { padding-top: 28px; padding-bottom: 64px; }
.bk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bk-chips .chip-lg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.bk-chips .chip-lg[aria-current="page"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.bk-chip-n { font-size: 12px; opacity: .75; }
.bk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bk-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease; }
.bk-card:hover { box-shadow: var(--sh-float); }
.bk-top { display: flex; align-items: center; gap: 12px; }
.bk-logo { display: flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 44px; border-radius: 10px; background: var(--cream); }
.bk-logo img { max-width: 56px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.bk-logo-text { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.bk-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-name b { font-size: 16px; font-weight: 600; }
.bk-name .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 9px 12px; border-radius: 12px; background: var(--cream); font-size: 13px; color: var(--muted); }
.bk-row b { color: var(--ink); font-weight: 600; }
.bk-legacy { margin-top: 40px; }
@media (max-width: 1100px) { .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } }

/* Knowledge */
.pd-search-box { color: var(--muted); }
.pd-search-ph { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kt-cats .chip-lg { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.kt-cats .chip-lg[aria-current="page"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pd-subcats { margin-top: 10px; }
.pd-subcats .chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: 13px; text-decoration: none; }
.pd-kt-more { margin-top: clamp(32px, 4vw, 48px); padding-bottom: 56px; }
.pd-kt-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 32px; }
.pd-kt-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-3); font-size: 14.5px; line-height: 1.45; }
.pd-kt-list a { color: var(--ink); }
.pd-kt-list .muted { flex: none; }

/* Editorial guidelines (Nguyen tac bien tap design) */
.eg-hero { gap: 14px; }
.eg-hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.eg-byline { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.eg-byline > span:last-child { display: flex; flex-direction: column; }
.eg-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px clamp(32px, 4vw, 56px); align-items: start; padding-top: 32px; padding-bottom: 64px; }
.eg-toc { position: sticky; top: 92px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); }
.eg-body { max-width: 820px; }
.eg-body .team-block { margin-top: 40px; }
@media (max-width: 900px) { .eg-layout { grid-template-columns: minmax(0, 1fr); } .eg-toc { display: none; } }

/* Tools (Cong cu design) */
.tl-top { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.tl-top h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.tl-body { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 40px); padding-top: 28px; padding-bottom: 64px; }
.tl-group h2 { margin-bottom: 14px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.015em; }
.tl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tl-card { display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease; }
.tl-card.is-hl { background: var(--peach); }
.tl-card:hover { box-shadow: var(--sh-float); }
.tl-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.tl-card:not(.is-hl) .tl-icon { background: var(--accent); box-shadow: none; }
.tl-card b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.tl-desc { flex: 1; font-size: 14px; line-height: 1.5; color: var(--body); }
.tl-more { font-size: 14px; font-weight: 600; }
.tl-off { display: flex; align-items: flex-start; gap: 14px; max-width: 820px; padding: 18px 20px; border-radius: 20px; background: var(--peach); }
.tl-off > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.launch-tool .art-layout { padding-top: 28px; }
@media (max-width: 1100px) { .tl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tl-grid { grid-template-columns: minmax(0, 1fr); } .tl-card { min-height: 0; } }

/* Careers */
.pd-career-body { margin-top: 28px; max-width: 820px; }

/* Product detail (Task176 structure) */
.pd .crv-hero-main { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pd-state-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; font-weight: 700; }
.pd-state-mark.is-verified-current { background: var(--ok-bg); color: var(--ok); }
.pd-state-mark.is-legacy-unverified { background: #FFF1DC; color: #8A4B08; }
.pd-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-left: auto; }
.pd-legend-i { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.pd-notice { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body); }
.pd-notice[data-fin-state="CONFLICT"] { padding-left: 10px; border-left: 3px solid #C9B8D8; }
.crv-keynum[data-fin-state="LEGACY_UNVERIFIED"] { box-shadow: inset 0 0 0 1.5px #F2C9A0; }
.crv-keynum[data-fin-state="LEGACY_UNVERIFIED"] .crv-keynum-s { color: #8A4B08; font-weight: 600; }
.crv-keynum[data-fin-state="VERIFIED_CURRENT"] .crv-keynum-s { color: var(--ok); font-weight: 600; }
.crv-keynum[data-fin-state="VERIFIED_CURRENT"] .crv-keynum-v { font-size: 17px; line-height: 1.3; }
.crv-keynum-v { overflow-wrap: anywhere; }
.crv-keynum-v.is-empty { font-size: 15px; font-weight: 500; color: var(--muted); }
.pd-row .crv-row-k { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pd-row .crv-row-v { display: flex; flex-direction: column; gap: 4px; }
.pd-line + .pd-line { margin-top: 2px; }
.pd-note { font-size: 13px; font-weight: 400; color: var(--muted); }
.pd-src { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.pd-legacy-row.is-rich { grid-template-columns: minmax(0, 1fr); }
.pd-legacy-html { font-weight: 400; color: var(--body); }
.pd-legacy-html > :first-child { margin-top: 0; }
.pd-legacy-html > :last-child { margin-bottom: 0; }
.pd-legacy-html table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 14px; }
.pd-legacy-html th, .pd-legacy-html td { padding: 6px 8px; border: 1px solid #E7DFD6; text-align: left; vertical-align: top; }
.pd-fee-table { border-top: 4px solid var(--orange); }
.pd-fee-table .crv-row:nth-child(even) { background: var(--input-bg); }
.pd-rate-table { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--sh-card); }
.pd-rate-table h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.pd-legacy-source { margin: 0; font-size: 14px; color: var(--muted); }
.card-sources { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.card-source { line-height: 1.5; }
.card-source > span { display: block; }
.card-source-name { font-weight: 500; color: var(--ink); }
.card-source-url { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; word-break: break-word; }
.card-source-date { font-size: 13px; color: var(--muted); }
.crv-aside-row { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.crv-aside-row span { color: var(--muted); }
.crv-aside-row b { font-weight: 600; overflow-wrap: anywhere; }
.pd-alt { color: var(--ink); text-decoration: none; }
.pd-alt .crv-alt-row { flex-direction: column; gap: 2px; }
.pd-alt .crv-alt-row b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-alts-note { margin: -8px 0 16px; }
@media (max-width: 639px) {
  .pd-legacy-row, .pd-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pd-legend { margin-left: 0; }
}

/* Restored legacy components inside articles */
.lc { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; padding: 14px 16px; border-radius: 16px; background: #FFFAF4; box-shadow: inset 0 0 0 1.5px #F2C9A0; }
.lc-head { font-weight: 600; color: var(--ink); }
.lc-note { font-size: 13px; color: #8A4B08; }
.lc-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid #F1DFCF; }
.lc-name { font-weight: 600; }
.lc-value { font-size: 14px; color: var(--body); }
.lc-state { font-size: 12.5px; color: var(--muted); }

/* Comparison (Task174 structure, four verified cards) */
.pd-compare { padding-bottom: 56px; }
.pd-ccmp-bank { font-size: 13px; color: var(--muted); }
.pd-ccmp-date { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.pd-compare .ccmp-v { display: block; }
.pd-compare .ccmp-v + .ccmp-v { margin-top: 6px; }
.pd-ccmp-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ccmp[data-ccmp-n="4"] .ccmp-table { overflow-x: auto; }
.ccmp[data-ccmp-n="4"] .ccmp-grid { grid-template-columns: 200px repeat(4, minmax(170px, 1fr)); min-width: 880px; }
@media (max-width: 639px) {
  .ccmp[data-ccmp-n="4"] .ccmp-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); min-width: 600px; }
}

/* Whole-card links of the design keep their text undecorated. */
.rv-card, a.tool, a.iss-tile, a.basic, a.article-card, .bk-card, .pv-card, .tl-card, a.suggest, a.crv-alt, .hub-ai-go, a.sv-tool, .pd-sv-bank, .pd-ai-box, .pd-how-btn, a.tile-chip, a.press-logo, .pd-cat-link, .cat-more, .chip-lg { text-decoration: none; }
.pd-cat-link { color: inherit; }

/* Loan, savings and rate product cards: the compact logo row of the loan list design (Vay tieu dung). */
.pd-prod.is-compact .prod-main { grid-template-columns: 72px minmax(0, 1fr) 220px; gap: 18px 24px; padding: 20px 24px; }
.pd-prod.is-compact .prod-media { width: 72px; height: 72px; min-height: 0; padding: 0; border-radius: 14px; }
.pd-prod.is-compact .prod-media .ms-ph-logo { max-width: 56px; max-height: 32px; }
.pd-prod.is-compact .prod-media .ms-ph-text { font-size: 11px; }
.pd-prod.is-compact .prod-media .ms-img::after { background-size: 72% auto; font-size: 11px; }
.pd-prod.is-compact .prod-logo-img { padding: 10px; }
.pd-prod.is-compact .prod-headline { gap: 8px; }
.pd-prod.is-compact .prod-title h3 { font-size: 20px; }
.pd-prod.is-compact .prod-body { gap: 12px; }
@media (max-width: 1099px) { .pd-prod.is-compact .prod-main { grid-template-columns: 72px minmax(0, 1fr); padding: 20px; } }
.prod-headline .fin-chip { align-self: flex-start; }
.prod-title h3 a { color: inherit; text-decoration: none; }
.prod-title h3 a:hover { color: var(--orange-text); }
@media (max-width: 639px) {
  .pd-compare .ccmp-hmedia { width: 100%; height: 72px; border-radius: 12px; background: var(--peach); }
  .pd-ai-input { font-size: 15px; }
}

/* Data-state box and notices of the product hero (in the design positions of the score box and quick verdict). */
.pd-statebox { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 20px 24px; border-radius: 24px; background: #fff; box-shadow: var(--sh-card); }
.pd-statebox-main { display: flex; align-items: center; gap: 16px; }
.pd-statebox-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pd-statebox-text b { font-size: 16px; font-weight: 600; }
.pd-statebox-user { font-size: 13px; color: var(--muted); }
.pd-statebox-text a { display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; font-weight: 500; }
.pd-notices { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; border-radius: 24px; background: var(--lav-2); }
.pd-notices-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }

/* Calculators (/cong-cu/*): input card and result card side by side, chart, detail table (Fingo Tinh lai designs). */
.calc-page .tl-top { padding-bottom: 8px; }
.calc { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.calc-form, .calc-result, .calc-detail { padding: clamp(18px, 2.4vw, 26px); border-radius: 24px; background: #fff; box-shadow: var(--sh-float); }
.calc-form { display: flex; flex-direction: column; gap: 18px; }
.calc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.calc-input { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--input-line); background: var(--input-bg); }
.calc-input:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.calc-input input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 500; color: var(--ink); }
.calc-input input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.calc-input input[aria-invalid="true"] { color: var(--bad); }
.calc-input:has(input[aria-invalid="true"]) { border-color: var(--bad); }
.calc-unit { flex: none; font-size: 14px; color: var(--muted); }
.calc-hint { font-size: 13px; color: var(--muted); }
.calc-err { font-size: 13px; font-weight: 500; color: var(--bad); }
.calc-seg-field { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.calc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; width: fit-content; padding: 4px; border-radius: 999px; background: var(--accent); }
.calc-seg-opt { position: relative; }
.calc-seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-seg-opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); }
.calc-seg-opt input:checked + span { background: var(--ink); color: var(--cream); }
.calc-seg-opt input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.calc-chip:hover { border-color: var(--ink); }
.calc-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc-method { position: relative; display: flex; gap: 10px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; }
.calc-method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-method:has(input:checked) { border-color: var(--ink); background: var(--accent); box-shadow: 0 0 0 1px var(--ink); }
.calc-method:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.calc-method-text { display: flex; flex-direction: column; gap: 4px; }
.calc-method-text b { font-size: 15px; font-weight: 600; }
.calc-method-text span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.calc-reset { align-self: flex-start; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.calc-result { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(170deg, var(--accent) 0, #fff 60%); }
.calc-result-k { font-size: 14px; color: var(--muted); }
.calc-big { font-size: clamp(32px, 4vw, 46px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
[data-calc="savings"] .calc-result[data-state="ready"] .calc-big { color: var(--ok); }
.calc-sub { font-size: 14px; color: var(--muted); }
.calc-bar { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--line-3); }
.calc-bar-a { flex: 0 1 0; background: var(--ink); transition: flex-grow .2s ease; }
.calc-bar-b { flex: 0 1 0; background: var(--ok); transition: flex-grow .2s ease; }
[data-calc="loan"] .calc-bar-b, [data-calc="home"] .calc-bar-b { background: var(--orange); }
.calc-rows { display: flex; flex-direction: column; gap: 6px; }
.calc-rows-sub { padding-top: 6px; border-top: 1px solid var(--line-3); }
.calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.calc-row b { font-weight: 600; text-align: right; }
.calc-key-a > span::before, .calc-key-b > span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--ink); }
.calc-key-b > span::before { background: var(--ok); }
[data-calc="loan"] .calc-key-b > span::before, [data-calc="home"] .calc-key-b > span::before { background: var(--orange); }
.calc-row-total { padding-top: 8px; border-top: 1px solid var(--line-3); font-weight: 600; }
.calc-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--sh-card); font-size: 14px; line-height: 1.5; color: var(--body); }
.calc-convention { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.calc-disclaimer { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.calc-detail { display: flex; flex-direction: column; gap: 16px; }
.calc-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.calc-detail-head h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 600; }
.calc-chart { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-bottom: 22px; }
.calc-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.calc-col-stack { display: flex; flex-direction: column; min-height: 2px; overflow: hidden; border-radius: 6px 6px 2px 2px; }
.calc-col-a { flex: 0 1 0; background: var(--ink); }
.calc-col-b { flex: 0 1 0; background: var(--ok); }
[data-calc="loan"] .calc-col-b, [data-calc="home"] .calc-col-b { background: var(--orange); }
.calc-col-label { position: absolute; left: 0; right: 0; bottom: -20px; font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
.calc-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line-3); }
.calc-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line-3); white-space: nowrap; }
.calc-table th:first-child { text-align: left; }
.calc-table thead th { font-size: 13px; font-weight: 500; color: var(--muted); background: var(--input-bg); }
.calc-table tbody th { font-weight: 500; }
.calc-more { align-self: flex-start; }
.calc-guide, .calc-faq { margin-top: clamp(32px, 4vw, 48px); max-width: 820px; }
.calc-guide h2, .calc-faq h2 { margin-bottom: 14px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.calc-footnote { margin: 24px 0 64px; }
@media (max-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .calc-pair, .calc-methods { grid-template-columns: minmax(0, 1fr); }
  .calc-chart { gap: 2px; height: 160px; }
  .calc-col-label { font-size: 9px; }
  .calc-table th, .calc-table td { padding: 8px 10px; }
}