/* Launch rules of the UI V2 continuation pages (src/launch/v2/more.mjs, knowledge.mjs), next to the generated more.css
   and knowledge.css. */

/* Not-found page: the "Hỏi Fingo AI" box keeps its look but does nothing. The field shows its placeholder in the
   browser's placeholder colour; nothing in the box takes the pointer cursor. */
.v2 .v2-nf-field{display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#757575}
.v2 .v2-nf-ask [data-v2-inert]{cursor:default}

/* Space between the page content and the footer, as in the design: its spacer plus the top margin of its footer
   wrapper (the shared footer wrapper, taken from the home page, has none). */
.v2 .v2-nf-gap{height:calc(clamp(56px,7vw,96px) + clamp(64px,8vw,112px))}

/* Home "Hiểu trước khi ký": illustrations instead of the article images with baked-in text. */
.v2 .v2-kt-du-no{background-image:url("/assets/v2/media/more/kt-du-no.webp")}
.v2 .v2-kt-chon-the{background-image:url("/assets/v2/media/more/kt-chon-the.webp")}
.v2 .v2-kt-tiet-kiem{background-image:url("/assets/v2/media/more/kt-tiet-kiem.webp")}
.v2 .v2-kt-so-du{background-image:url("/assets/v2/media/more/kt-so-du.webp")}

/* Knowledge hub, category pages, articles (src/launch/v2/knowledge.mjs), next to the generated knowledge.css. */

/* Space between the page content and the footer: the design's spacer plus its footer wrapper's top margin. */
.v2 .v2-more-gap{height:calc(clamp(56px,7vw,96px) + clamp(64px,8vw,112px))}

/* Search boxes, sort and topic switches, feedback buttons: their look only. */
.v2 .v2-kt-field{display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#757575}
.v2 main[data-v2-kt] [data-v2-inert]{cursor:default}

/* "Xem nhiều nhất" has no traffic data: sample label next to its period. */
.v2 .v2-kt-demo{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;background:#FFF2E0;color:#8A5A00;font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap}

/* "Thêm … chuyên mục" and "Xem thêm … bài viết": the design's script toggles as <details>. */
.v2 .v2-kt-more-s,.v2 .v2-kt-rest-s{list-style:none}
.v2 .v2-kt-more-s::-webkit-details-marker,.v2 .v2-kt-rest-s::-webkit-details-marker{display:none}
.v2 .v2-kt-more-s:focus-visible,.v2 .v2-kt-rest-s:focus-visible{outline:3px solid #2B1838;outline-offset:2px;border-radius:999px}
.v2 .v2-kt-more-close{display:none}
.v2 details[open]>summary>.v2-kt-more-open{display:none}
.v2 details[open]>summary>.v2-kt-more-close{display:inline}
.v2 .v2-kt-more-d[open] .v2-kt-more-s svg{transform:rotate(180deg)}
.v2 .v2-kt-more:has(>.v2-kt-more-d[open]){flex:1 0 100%}
.v2 .v2-kt-more-d[open]{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.v2 ul:has(>.v2-kt-more>.v2-kt-more-d[open]),.v2 .v2-kt-more-list{flex-wrap:wrap!important;overflow-x:visible!important}

/* Phones: controls outside running text are at least 44 px tall (the design README's rule; its chips are drawn 40 px,
   its category pill 36 px and its byline links as plain text). */
@media (max-width:759px){
  .v2 main[data-v2-kt] nav[aria-label="Chuyên mục"] li>a,.v2 main[data-v2-kt] .v2-kt-more-s,.v2 main[data-v2-kt] nav[aria-label="Chuyên mục con"]>*{height:44px;min-height:44px}
  .v2 main[data-v2-kt] header a[href]:not(p a){display:inline-flex;align-items:center;min-height:44px}
}

/* Remaining posts of a listing: titles and dates, every legacy link kept. */
.v2 .v2-kt-rest{width:100%;display:flex;flex-direction:column;align-items:center}
.v2 .v2-kt-rest-s{display:inline-flex;align-items:center}
.v2 .v2-kt-rest-list{align-self:stretch;margin:28px 0 0;padding:0;list-style:none;columns:3 300px;column-gap:clamp(24px,4vw,48px)}
.v2 .v2-kt-rest-list li{break-inside:avoid;display:flex;align-items:center;gap:12px;border-bottom:1px solid #F1E4D7}
.v2 .v2-kt-rest-list a{flex:1 1 auto;display:flex;align-items:center;min-height:44px;padding:6px 0;color:#2B1838;font-size:15px;line-height:1.5;text-decoration:none}
.v2 .v2-kt-rest-list a:hover{color:#B4520E;text-decoration:underline;text-underline-offset:3px}
.v2 .v2-kt-rest-d{flex:none;font-size:12.5px;color:#6B5A73;font-variant-numeric:tabular-nums}

/* Article: byline, notices, the legacy body and its restored legacy components in the design's type. */
.v2 .v2-kt-writer{font-weight:600;color:#2B1838}
.v2 .v2-kt-date{text-decoration:none}
.v2 .v2-kt-initials{display:inline-flex;align-items:center;justify-content:center;background:#FFE7D3;color:#B4520E;font-size:15px;font-weight:700;line-height:1}
.v2 .v2-kt-notice{margin:0;padding:14px 16px;border-radius:16px;background:#FFF2E0;color:#8A5A00;font-size:14px;line-height:1.6}
.v2 .v2-kt-prose{min-width:0;overflow-wrap:anywhere}
.v2 .v2-kt-prose>:first-child{margin-top:0}
.v2 .v2-kt-prose p{margin:0 0 18px}
.v2 .v2-kt-prose h2{margin:40px 0 14px;font-size:clamp(24px,2.8vw,32px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#2B1838;scroll-margin-top:16px}
.v2 .v2-kt-prose h3{margin:28px 0 10px;font-size:20px;font-weight:600;line-height:1.35;color:#2B1838}
.v2 .v2-kt-prose h4{margin:22px 0 8px;font-size:17px;font-weight:600;color:#2B1838}
.v2 .v2-kt-prose ul,.v2 .v2-kt-prose ol{margin:0 0 18px;padding-left:22px}
.v2 .v2-kt-prose li{margin:6px 0}
.v2 .v2-kt-prose a{color:#B4520E;text-decoration:underline;text-underline-offset:3px}
.v2 .v2-kt-prose img{max-width:100%;height:auto;border-radius:16px}
.v2 .v2-kt-prose figure{margin:0 0 18px}
.v2 .v2-kt-prose figcaption{margin-top:6px;font-size:13px;color:#6B5A73}
.v2 .v2-kt-prose iframe,.v2 .v2-kt-prose video{max-width:100%}
.v2 .v2-kt-prose table{width:100%;margin:0 0 18px;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.v2 .v2-kt-prose th,.v2 .v2-kt-prose td{padding:10px 12px;border-bottom:1px solid #F1E4D7;text-align:left;vertical-align:top}
.v2 .v2-kt-prose th{background:#FFF8F1;color:#2B1838;font-weight:600}
.v2 .v2-kt-prose blockquote{margin:0 0 18px;padding:12px 16px;border-left:3px solid #F5821F;border-radius:0 12px 12px 0;background:#FFF8F1}
.v2 .v2-kt-prose .lc{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;padding:14px 16px;border-radius:16px;background:#FFF8F1;box-shadow:inset 0 0 0 1px #EBDCCD}
.v2 .v2-kt-prose .lc-head{font-weight:600;color:#2B1838}
.v2 .v2-kt-prose .lc-note{font-size:13px;color:#8A5A00}
.v2 .v2-kt-prose .lc-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:8px 0;border-top:1px solid #F1E4D7}
.v2 .v2-kt-prose .lc-name{font-weight:600}
.v2 .v2-kt-prose .lc-value{font-size:14px;color:#4A3A55}
.v2 .v2-kt-prose .lc-state{font-size:12.5px;color:#6B5A73}
/* Bank group hubs and provider pages (src/launch/v2/banks.mjs), next to the generated bank.css. */
/* Sample blocks: the "Dữ liệu mẫu" label sits under the heading, at its own width. */
.v2 .v2-bk-demo{align-self:flex-start;width:max-content;margin-left:0}
.v2 .v2-bk-legacy-chip{display:inline-flex;align-self:flex-start;width:max-content;padding:2px 9px;border-radius:999px;background:#F7F3FA;color:#4A3A55;font-size:12px;font-weight:700;line-height:1.5}
.v2 .v2-bk-demo-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#6B5A73}
.v2 [data-v2-bk] [data-v2-inert]{cursor:default}
.v2 .v2-bk-contact{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;padding:12px 14px;border:1px solid #EDE6F1;border-radius:12px;background:#FCFAFD}
.v2 .v2-bk-contact dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0;font-size:13.5px;line-height:1.5}
.v2 .v2-bk-contact dl>div{display:contents}
.v2 .v2-bk-contact dt{color:#6B5A73}
.v2 .v2-bk-contact dd{margin:0;color:#2B1838;overflow-wrap:anywhere}
.v2 .v2-bk-noart{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:12px;font-weight:700;color:#6B5A73}
.v2 .v2-bk-mono-sm{font-size:12px;font-weight:700;color:#2B1838}
/* Hub: bank-type chips filter the list without script; each chip targets an empty anchor before the chips. */
.v2 .v2-bk-t{display:block;height:0}
.v2 .v2-bk-chip:hover{box-shadow:inset 0 0 0 1px #2B1838}
.v2 .v2-bk-chip[data-loai="all"],.v2 main:has(#loai-state:target) .v2-bk-chip[data-loai="state"],.v2 main:has(#loai-tmcp:target) .v2-bk-chip[data-loai="tmcp"],.v2 main:has(#loai-foreign:target) .v2-bk-chip[data-loai="foreign"]{background:#2B1838;color:#fff;box-shadow:none}
.v2 .v2-bk-chip[data-loai="all"] span,.v2 main:has(#loai-state:target) .v2-bk-chip[data-loai="state"] span,.v2 main:has(#loai-tmcp:target) .v2-bk-chip[data-loai="tmcp"] span,.v2 main:has(#loai-foreign:target) .v2-bk-chip[data-loai="foreign"] span{color:#fff}
.v2 main:has(:is(#loai-state,#loai-tmcp,#loai-foreign):target) .v2-bk-chip[data-loai="all"]{background:#fff;color:#2B1838;box-shadow:inset 0 0 0 1px #E6D6C6}
.v2 main:has(:is(#loai-state,#loai-tmcp,#loai-foreign):target) .v2-bk-chip[data-loai="all"] span{color:#6B5A73}
.v2 main:has(#loai-state:target) [data-v2-bk-card]:not([data-loai="state"]),.v2 main:has(#loai-tmcp:target) [data-v2-bk-card]:not([data-loai="tmcp"]),.v2 main:has(#loai-foreign:target) [data-v2-bk-card]:not([data-loai="foreign"]){display:none}
.v2 .v2-bk-n{display:none}
.v2 .v2-bk-n[data-loai="all"],.v2 main:has(#loai-state:target) .v2-bk-n[data-loai="state"],.v2 main:has(#loai-tmcp:target) .v2-bk-n[data-loai="tmcp"],.v2 main:has(#loai-foreign:target) .v2-bk-n[data-loai="foreign"]{display:inline}
.v2 main:has(:is(#loai-state,#loai-tmcp,#loai-foreign):target) .v2-bk-n[data-loai="all"]{display:none}
/* Hub: the legacy page body below the list, in the page container. */
.v2 .v2-bk-legacy{max-width:1280px;margin:clamp(40px,5vw,64px) auto 0;padding:0 clamp(16px,4vw,48px)}
.v2 .v2-bk-legacy .v2-kt-prose{max-width:860px;font-size:16px;line-height:1.65;color:#4A3A55}
/* Provider pages: every product page behind "Xem tất cả … sản phẩm"; the institution's posts, six shown and the
   rest behind "Xem thêm". */
.v2 .v2-bk-posts{display:flex;flex-direction:column;gap:16px}
.v2 .v2-bk-sub{margin:0;font-size:14px;line-height:1.5;color:#6B5A73}
.v2 .v2-bk-h2{margin:0;font-size:clamp(24px,2.8vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:#2B1838}
.v2 .v2-bk-posts .v2-kt-rest-list{margin:0;columns:2 260px}
.v2 .v2-bk-rest{align-items:flex-start}
.v2 .v2-bk-rest .v2-kt-rest-list{margin-top:16px;align-self:stretch}
.v2 .v2-bk-more-s{min-height:44px;padding:0 20px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E6D6C6;font-size:15px;font-weight:600;color:#2B1838;cursor:pointer}
.v2 .v2-bk-more-s:hover{box-shadow:inset 0 0 0 1px #2B1838}
@media (max-width:759px){
  .v2 .v2-bk-tab,.v2 .v2-bk-chip{min-height:44px}
}

/* Article featured image: top of the text column, whole image at its own ratio, the frame look of the news design. */
.v2 .v2-kt-figure { margin: 0 0 24px; }
.v2 .v2-kt-figure-img { display: block; width: 100%; height: auto; border-radius: 24px; background: rgb(255, 231, 211); }
