/* Currency and province pages, and the item links on the hubs (inc/mxt-today-subpages.php) */
.mxsp, .mxsp-others { font-family: Phetsarath, sans-serif; color: #15181C; line-height: 1.5; }
.mxsp *, .mxsp-others * { box-sizing: border-box; }
.mxsp { max-width: 1100px; margin: 0 auto 28px; padding: 0 10px; }
.mxsp-hero {
    display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: 22px; color: #F5F0E4;
    background: radial-gradient(120% 140% at 0% 0%, rgba(243, 201, 91, .14) 0, transparent 50%), linear-gradient(160deg, #24525F 0%, #1D4450 55%, #14323B 100%);
    box-shadow: 0 18px 40px -28px rgba(15, 43, 36, .9);
}
.mxsp-hero--fuel { flex-direction: column; align-items: stretch; background: radial-gradient(120% 140% at 0% 0%, rgba(243, 201, 91, .12) 0, transparent 50%), linear-gradient(160deg, #1F5444 0%, #173F35 55%, #0F2B24 100%); }
.mxsp-hero__flag .mxt-flag { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.mxsp-kicker { margin: 0; font-size: 13px; color: #F3C95B; font-weight: 700; }
.mxsp-big { margin: 2px 0 4px; font-size: 18px; color: #fff; }
.mxsp-big b { font: 700 40px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #F3C95B; font-variant-numeric: tabular-nums; }
.mxsp-big small { font-size: 13px; color: rgba(245, 240, 228, .7); margin-left: 6px; }
.mxsp-line { margin: 0; font-size: 14px; color: rgba(245, 240, 228, .85); }
.mxsp-line b { color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.mxsp-line .is-up { color: #6EE7A8; font-weight: 700; }
.mxsp-line .is-down { color: #FCA5A5; font-weight: 700; }
.mxsp-fuel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.mxsp-fuel__i { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(245, 240, 228, .12); }
.mxsp-fuel__i strong { font: 700 34px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.mxsp-fuel__i small { font-size: 12px; color: rgba(245, 240, 228, .7); }

.mxsp-table { width: 100%; margin: 18px 0 0; border-collapse: separate; border-spacing: 0; background: #FFFDF8; border: 1px solid #E4DCCB; border-radius: 16px; overflow: hidden; font-variant-numeric: tabular-nums; }
.mxsp-table caption { caption-side: top; text-align: left; padding: 0 4px 8px; font-size: 14px; font-weight: 700; color: #173F35; }
.mxsp-table th, .mxsp-table td { padding: 10px 14px; border: 0; border-top: 1px solid #ECE5D6; font-size: 14.5px; text-align: right; }
.mxsp-table thead th { border-top: 0; background: #F2ECDF; font-size: 12.5px; color: #5C665F; font-weight: 700; }
.mxsp-table th:first-child { text-align: left; }
.mxsp-table tbody th { font-weight: 700; color: #173F35; }
.mxsp-table td { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.mxsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mxsp-compare { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: #F2ECDF; }
.mxsp-compare h2 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #173F35; }
.mxsp-compare ul { margin: 0; padding-left: 18px; }
.mxsp-compare li { margin: 5px 0; font-size: 14.5px; }
.mxsp-note { margin: 14px 0 0; font-size: 13px; color: #5C665F; }

.mxsp-others { margin: 22px auto 0; max-width: 1100px; }
.mxsp-others--hub { margin: 22px 0 6px; padding: 0; }
.mxsp-others h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #15181C; }
.mxsp-others > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.mxsp-others a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FFFDF8; border: 1px solid #E4DCCB; text-decoration: none; color: #15181C; transition: border-color .15s, transform .15s; }
.mxsp-others a:hover { border-color: #173F35; transform: translateY(-1px); }
.mxsp-others a b { font-size: 14px; font-weight: 700; }
.mxsp-others a span { margin-left: auto; font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #5C665F; font-variant-numeric: tabular-nums; }
.mxsp-others a.is-current { background: #173F35; border-color: #173F35; }
.mxsp-others a.is-current b, .mxsp-others a.is-current span { color: #fff; }
.mxsp-others .mxt-flag { width: 20px; height: 20px; border-radius: 50%; }
.mxsp-back { display: inline-block; margin-top: 12px; font-weight: 700; color: #173F35; text-decoration: none; }
.mxt-view .mxsp-others--hub h2, .mxsp-others--hub h2 { color: inherit; }
@media (max-width: 767px) {
    .mxsp-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
    .mxsp-big b { font-size: 32px; }
    .mxsp-fuel { grid-template-columns: 1fr; }
    .mxsp-grid2 { grid-template-columns: 1fr; }
    .mxsp-table th, .mxsp-table td { padding: 9px 10px; font-size: 13.5px; }
}