/* =================================================================
   Rate — "อัปเดตเรื่องราวและอัตรา" (Figma "Rate", 1440×719 @ y=3814)
   Left: news card 688×480 · Right: navy rates card 432×480, gap 20.
   ================================================================= */
.s-rate {
  --rt-blue: var(--gsb-blue);
  --rt-navy: var(--gsb-navy);
  --rt-navy-deep: var(--gsb-navy-deep);
  --rt-muted: #A1A9B9;
  --rt-rule: #223776;
  --rt-card-pad: 36px;
  position: relative;
  background: var(--surface);
  padding: 80px 0;
  scroll-margin-top: 96px;
}
.s-rate .rt-inner {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section heading — SemiBold 36 / 1.3 */
.s-rate .rt-title {
  font-size: 36px;
  line-height: 47px; /* Figma box: 36 × 1.3 → 47 */
  font-weight: var(--fw-semibold);
  color: var(--ink);
  letter-spacing: 0;
}

.s-rate .rt-grid {
  display: grid;
  grid-template-columns: minmax(0, 688fr) minmax(0, 432fr);
  gap: 20px;
  margin-top: 32px;
}

/* ---------------- Cards ---------------- */
.s-rate .rt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 31px var(--rt-card-pad) 32px;
  border-radius: var(--r-16);
  min-width: 0;
}
.s-rate .rt-news {
  --rt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rt-dur: 560ms;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px #EDEDED;
}
/* Card hover shadow: its own layer, only opacity animates (outer shadows only). */
.s-rate .rt-news::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #E6E6E6, 0 18px 40px -24px rgba(42, 42, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rt-dur) var(--rt-ease);
}
.s-rate .rt-rates {
  background: var(--rt-navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* A soft light that follows the rates card's top edge — very subtle depth. */
.s-rate .rt-rates::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 95, 210, 0.35), rgba(56, 95, 210, 0));
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
html.static .s-rate .rt-rates::before { display: none; }

/* Card header: title left, tabs right */
.s-rate .rt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}
.s-rate .rt-news .rt-head { margin-right: -4px; } /* Figma: the tab tray overhangs the 36px padding */
.s-rate .rt-head__title {
  flex: none;
  font-size: 24px;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  white-space: nowrap;
}
.s-rate .rt-rates .rt-head__title { color: #fff; }

/* ---------------- Tabs (pill tray + sliding indicator) ---------------- */
.s-rate .rt-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-12);
  flex: none;
  isolation: isolate;
}
.s-rate .rt-tabs--light { background: var(--surface-3); }
.s-rate .rt-tabs--dark { background: var(--rt-navy-deep); }
.s-rate .rt-tab {
  position: relative;
  z-index: 1;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-8);
  font-size: 14px;
  line-height: 1;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.s-rate .rt-tabs--light .rt-tab { color: var(--ink-5); }
.s-rate .rt-tabs--dark .rt-tab { color: var(--rt-muted); }
.s-rate .rt-tab.is-active { color: #fff; }
.s-rate .rt-tab:active { transform: scale(0.97); }
.s-rate .rt-tab:focus-visible { outline-offset: 0; border-radius: var(--r-8); }
.s-rate .rt-tabs--dark .rt-tab:focus-visible { outline-color: #fff; }
.s-rate .rt-tabs__ind {
  position: absolute;
  top: 4px;
  left: 0;
  height: 32px;
  width: 0;
  border-radius: var(--r-8);
  z-index: 0;
  pointer-events: none;
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out);
}
.s-rate .rt-tabs--light .rt-tabs__ind { background: var(--gsb-pink); box-shadow: 0 6px 14px -8px rgba(237, 0, 140, 0.6); }
.s-rate .rt-tabs--dark .rt-tabs__ind { background: var(--rt-blue); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6); }
html.static .s-rate .rt-tabs__ind { box-shadow: none; }
/* Before JS positions the indicator, show the active pill statically. */
.s-rate .rt-tabs:not(.is-ready) .rt-tab.is-active { background: var(--gsb-pink); }
.s-rate .rt-tabs--dark:not(.is-ready) .rt-tab.is-active { background: var(--rt-blue); }

/* Rates tabs: the third tab is cut off by design — the tray scrolls. */
.s-rate .rt-tabs-wrap {
  position: relative;
  flex: 0 1 263px;
  min-width: 0;
  border-radius: var(--r-12);
  background: var(--rt-navy-deep);
  overflow: hidden;
}
.s-rate .rt-tabs-wrap .rt-tabs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-right: 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  transition: -webkit-mask-image var(--t-med), mask-image var(--t-med);
}
.s-rate .rt-tabs-wrap .rt-tabs::-webkit-scrollbar { display: none; }
.s-rate .rt-tabs-wrap .rt-tabs.at-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}
.s-rate .rt-tabs-wrap .rt-tabs.fits { -webkit-mask-image: none; mask-image: none; }
html.static .s-rate .rt-tabs-wrap .rt-tabs { -webkit-mask-image: none; mask-image: none; }

/* ---------------- Panels (cross-fade in one grid cell) ---------------- */
.s-rate .rt-panels {
  display: grid;
  flex: 1 0 auto;
}
.s-rate .rt-panel {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out), visibility 0s linear 0s;
}
.s-rate .rt-panels.is-fading .rt-panel:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.s-rate .rt-panel.is-entering { opacity: 0; transform: translateY(8px); transition: none; }

/* ---------------- News list ---------------- */
.s-rate .rt-news .rt-panels { margin: 26px 6px 13px 0; } /* list is 610 wide in Figma */
.s-rate .rt-news__list { display: flex; flex-direction: column; }
.s-rate .rt-news__item { position: relative; }
.s-rate .rt-news__item + .rt-news__item { margin-top: 24px; }
.s-rate .rt-news__item + .rt-news__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12.5px;
  height: 1px;
  background: #EEEEEE;
}
.s-rate .rt-news__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 90px;
  padding-right: 24px;
  border-radius: 10px;
  color: var(--ink);
}
.s-rate .rt-news__thumb {
  position: relative;
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
  transform: translateZ(0);
}
.s-rate .rt-news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 720ms var(--rt-ease);
}
/* No thumbnail (or it failed to load): branded tile — the GSB emblem on the pink tint.
   Drawn with a pseudo-element so the emblem is only requested when a tile actually needs it. */
.s-rate .rt-news__thumb--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(253, 38, 110, 0.18), rgba(253, 38, 110, 0) 60%),
    linear-gradient(160deg, #FFF5FB 0%, var(--gsb-pink-tint) 100%);
}
.s-rate .rt-news__thumb--empty::before {
  content: "";
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("/static/img/news/emblem.webp") center / contain no-repeat;
  box-shadow: 0 4px 12px rgba(237, 0, 140, 0.18);
  transition: transform 720ms var(--rt-ease);
}
.s-rate .rt-news__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.s-rate .rt-news__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: var(--fw-regular);
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: color 480ms var(--rt-ease);
}
.s-rate .rt-news__date {
  font-size: 10px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  color: var(--ink-5);
}
.s-rate .rt-news__go {
  position: absolute;
  right: -4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--gsb-pink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 480ms var(--rt-ease), transform 480ms var(--rt-ease);
}
.s-rate .rt-news__link { transition: transform 160ms var(--rt-ease); }
.s-rate .rt-news__link:active { transform: scale(0.985); }
.s-rate .rt-news__link:focus-visible { outline-offset: 4px; }

/* ---------------- "ดูทั้งหมด >" links (animated underline + chevron nudge) ---------------- */
.s-rate .rt-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  height: 20px;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.s-rate .rt-more--blue { color: var(--rt-blue); margin-top: auto; }
.s-rate .rt-more--white { color: #fff; }
.s-rate .rt-more__label {
  padding-bottom: 2px;
  margin-bottom: -2px;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size 320ms var(--ease-out);
}
.s-rate .rt-chev { flex: none; width: 20px; height: 20px; transition: transform var(--t-med) var(--ease-out); }
.s-rate .rt-more:active { transform: scale(0.97); }

/* ---------------- Rates table ---------------- */
.s-rate .rt-rates .rt-panels { margin-top: 35px; }
.s-rate .rt-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}
.s-rate .rt-table thead th {
  height: 30px;
  padding: 0;
  vertical-align: top;
  text-align: left;
  font-size: 14px;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--rt-muted);
  border-bottom: 1px solid var(--rt-rule);
  white-space: nowrap;
}
.s-rate .rt-table tbody tr { position: relative; }
.s-rate .rt-table tbody th,
.s-rate .rt-table tbody td {
  padding: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: var(--fw-medium);
  color: #fff;
  text-align: left;
  vertical-align: top;
  transition: color var(--t-med) var(--ease-out);
}
.s-rate .rt-table tbody tr:first-child > * { padding-top: 24px; }
.s-rate .rt-table tbody tr + tr > * { padding-top: 24px; }
.s-rate .rt-table .rt-num-col { text-align: right; white-space: nowrap; }
.s-rate .rt-table--fx .rt-num-col { width: 84px; padding-left: 12px; }
.s-rate .rt-num { font-feature-settings: "tnum" 0; }
.s-rate .rt-sub {
  margin-left: 6px;
  font-size: 13px;
  font-weight: var(--fw-regular);
  color: var(--rt-muted);
  white-space: nowrap;
}

/* ---------------- Rates footer ---------------- */
.s-rate .rt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 13px;
  min-height: 20px;
}
.s-rate .rt-asof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--fw-bold);
  color: #fff;
  white-space: nowrap;
}
.s-rate .rt-asof__dot {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gsb-green);
}
.s-rate .rt-asof__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gsb-green);
  animation: rt-ping 2.4s var(--ease-out) infinite;
}
@keyframes rt-ping {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

/* ---------------- Hover (pointer devices only) ---------------- */
@media (hover: hover) and (pointer: fine) {
  .s-rate .rt-news:hover::after { opacity: 1; }
  .s-rate .rt-news__link:hover .rt-news__thumb img { transform: scale(1.03); will-change: transform; }
  .s-rate .rt-news__link:hover .rt-news__thumb--empty::before { transform: scale(1.03) rotate(-2deg); }
  .s-rate .rt-news__link:hover .rt-news__title { color: var(--gsb-pink); }
  .s-rate .rt-news__link:hover .rt-news__go { opacity: 1; transform: none; }
}
@media (hover: hover) {
  .s-rate .rt-rates:hover::before { opacity: 1; }
  .s-rate .rt-tabs--light .rt-tab:not(.is-active):hover { color: var(--ink-2); }
  .s-rate .rt-tabs--dark .rt-tab:not(.is-active):hover { color: #fff; }
  .s-rate .rt-more:hover .rt-more__label { background-size: 100% 1px; background-position: 0 100%; }
  .s-rate .rt-more:hover .rt-chev { transform: translateX(3px); }
  .s-rate .rt-table tbody tr:hover > * { color: #fff; }
  .s-rate .rt-table tbody tr:hover .rt-num { color: #FFD6EE; }
}
.s-rate .rt-num { transition: color var(--t-med) var(--ease-out); }
/* Figures slide in with their final value (set by rate.js on first view / first tab open). */
.s-rate .rt-num.is-num-in {
  display: inline-block;
  animation: rt-num-in 420ms var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 45ms + 120ms);
}
@keyframes rt-num-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
  .s-rate .rt-card { --rt-card-pad: 32px; }
  .s-rate .rt-news__link { gap: 20px; }
  .s-rate .rt-br { display: none; }
}

@media (max-width: 1100px) and (min-width: 1024px) {
  .s-rate .rt-rates .rt-head { gap: 16px; }
}

/* Tablet: stack the cards */
@media (max-width: 1023px) {
  .s-rate { padding: 64px 0; }
  .s-rate .rt-title { font-size: 32px; }
  .s-rate .rt-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .s-rate .rt-card { min-height: 0; }
  .s-rate .rt-tabs-wrap { flex: 0 1 auto; }
  .s-rate .rt-rates .rt-panels { min-height: 0; }
  .s-rate .rt-foot { margin-top: 32px; }
  .s-rate .rt-news .rt-panels { margin-bottom: 24px; }
}

/* Phone: compact news, stacked headers, scrollable tab trays */
@media (max-width: 767px) {
  .s-rate { padding: 48px 0 56px; }
  .s-rate .rt-title { font-size: 26px; }
  .s-rate .rt-grid { margin-top: 20px; }
  .s-rate .rt-card { --rt-card-pad: 20px; padding: 20px var(--rt-card-pad) 22px; }
  .s-rate .rt-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .s-rate .rt-news .rt-head { margin-right: 0; }
  .s-rate .rt-head__title { font-size: 20px; }
  .s-rate .rt-tabs--light { align-self: stretch; }
  .s-rate .rt-tabs--light .rt-tab { flex: 1 1 0; }
  .s-rate .rt-tab { height: 36px; }
  .s-rate .rt-tabs__ind { height: 36px; }
  .s-rate .rt-tabs-wrap { flex: none; align-self: stretch; }

  .s-rate .rt-news .rt-panels { margin: 18px 0 14px; }
  .s-rate .rt-news__item + .rt-news__item { margin-top: 24px; }
  .s-rate .rt-news__link { gap: 14px; min-height: 72px; padding-right: 0; align-items: flex-start; }
  .s-rate .rt-news__thumb { width: 72px; height: 72px; border-radius: 8px; }
  .s-rate .rt-news__body { gap: 6px; padding-top: 2px; }
  .s-rate .rt-news__title { font-size: 14px; line-height: 1.4; -webkit-line-clamp: 3; line-clamp: 3; }
  .s-rate .rt-news__date { font-size: 11px; }
  .s-rate .rt-news__go { display: none; }
  .s-rate .rt-more { height: 44px; align-self: flex-end; margin-bottom: -12px; }

  .s-rate .rt-rates .rt-panels { margin-top: 22px; }
  .s-rate .rt-table tbody th,
  .s-rate .rt-table tbody td { font-size: 18px; }
  .s-rate .rt-table tbody tr > * { padding-top: 18px !important; }
  .s-rate .rt-table--fx .rt-num-col { width: 76px; }
  .s-rate .rt-sub { display: block; margin: 2px 0 0; font-size: 12px; }
  .s-rate .rt-foot { margin-top: 22px; }
  .s-rate .rt-foot .rt-more { margin-bottom: -12px; margin-top: -12px; }
}

@media (max-width: 479px) {
  .s-rate .rt-title { font-size: 24px; }
  .s-rate .rt-tabs--light .rt-tab { padding: 0 8px; font-size: 13px; }
  .s-rate .rt-table--fx .rt-num-col { width: 68px; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-rate .rt-news__link:active,
  .s-rate .rt-news__link:hover .rt-news__thumb img,
  .s-rate .rt-news__link:hover .rt-news__thumb--empty::before { transform: none; }
}