/* UI V2 rates pages: launch-only rules next to the generated rates.css. */

/* Logo slots: the design paints a sample bank logo as the background of each slot; the launch puts the packaged bank
   logo (or the bank's initials) inside the slot instead. */
.v2 .v2-rt-logo { background-image: none !important; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.v2 .v2-rt-row-img { display: block; width: 70%; height: 70%; object-fit: contain; }
.v2 .v2-rt-tile-img { display: block; width: 72%; height: 72%; object-fit: contain; }
.v2 .v2-rt-mono { font-weight: 700; font-size: 14px; letter-spacing: .02em; line-height: 1; color: #B4520E; }
.v2 .v2-rt-mono-sm { font-size: 10px; }

/* Channel tabs: two in-page targets. The online table shows by default, the counter table while its target is active. */
.v2 .v2-rt-t { position: absolute; width: 0; height: 0; overflow: hidden; scroll-margin-top: 96px; }
.v2 .v2-rt-tab { text-decoration: none; }
.v2 .v2-rt-panel[data-ch="counter"] { display: none; }
main:has(#tai-quay:target) .v2-rt-panel[data-ch="counter"] { display: block; }
main:has(#tai-quay:target) .v2-rt-panel[data-ch="online"] { display: none; }
main:has(#tai-quay:target) .v2-rt-tab[data-ch="counter"] { background: rgb(255, 255, 255); color: rgb(43, 24, 56); box-shadow: rgb(235, 220, 205) 0px 0px 0px 1px, rgba(43, 24, 56, 0.08) 0px 2px 6px; }
main:has(#tai-quay:target) .v2-rt-tab[data-ch="online"] { background: transparent; color: rgb(107, 90, 115); box-shadow: none; }

/* Cells the legacy table does not have. */
.v2 .v2-rt-none { color: #8A7B91; }

/* Hub bank grid: the 12-month legacy rate line under the bank heading. */
.v2 .v2-rt-sub { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #6B5A73; }

/* Bank page: full legacy tables behind a disclosure under the term table. */
.v2 .v2-rt-details { margin-top: 20px; border: 1px solid rgb(225, 214, 204); border-radius: 16px; background: #FFFFFF; }
.v2 .v2-rt-summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px; color: #1F1A24; min-height: 44px; display: flex; align-items: center; }
.v2 .v2-rt-summary:focus-visible { outline: rgb(43, 24, 56) solid 3px; outline-offset: 2px; border-radius: 16px; }
/* A wide legacy table scrolls sideways, which makes it a keyboard stop: it gets the same focus ring as links. */
.v2 .v2-rt-full-list :is(.pd-rate-table, table):focus-visible { outline: rgb(43, 24, 56) solid 3px; outline-offset: 2px; }
.v2 .v2-rt-full-list { padding: 0 18px 18px; display: grid; gap: 18px; }
.v2 .v2-rt-full-list > .pd-rate-table { overflow-x: auto; }
.v2 .v2-rt-full-h { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.v2 .v2-rt-full-list > .pd-rate-table table { border-collapse: collapse; min-width: 100%; font-size: 14px; }
.v2 .v2-rt-full-list > .pd-rate-table th, .v2 .v2-rt-full-list > .pd-rate-table td { border: 1px solid rgb(225, 214, 204); padding: 6px 10px; text-align: left; white-space: nowrap; }
.v2 .v2-rt-full-list > .pd-rate-table thead th { background: rgb(250, 244, 238); font-weight: 600; }

/* Bank page calculator section: a card leading to the savings calculator. */
.v2 .v2-rt-calc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v2 .v2-rt-calc-p { margin: 0; font-size: 16px; line-height: 1.6; color: #3D3344; max-width: 640px; }

/* Source block: the legacy-data chip is neutral (the design's green chip means verified). */
.v2 .v2-rt-legacy-chip { background: rgb(241, 236, 230) !important; color: #5C4F63 !important; }
.v2 .v2-rt-legacy-chip > span { background: #8A7B91 !important; }

/* Bank page legacy article. */
.v2 .v2-rt-legacy .v2-prose { margin-top: 16px; }

/* Hub bank tiles: bank names and the 12-month line wrap instead of being cut. */
.v2 .v2-rt-tile-t, .v2 .v2-rt-tile-t > span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* The calculator card stands alone in its section (the design pairs it with a result panel in a row): no flex basis. */
.v2 .v2-rt-calc { flex: none; }
/* The design's button spans the full card width; standing alone it takes its text width, so it needs side padding. */
.v2 .v2-rt-calc > a { padding: 0 24px; text-decoration: none; }