@charset "UTF-8";
/*!
 * Castrol Gogoro Mobility — additions on top of the delivered theme.
 *
 * style.css is the designer's build and must stay byte-identical to the
 * handover so it can be regenerated from scss/. Anything the CMS needs lives
 * here and is loaded last.
 */
/* --------------------------------------------------------------------------
 * Tap-to-call / tap-to-mail without changing how the text looks.
 * Bootstrap paints every <a> blue and underlined; these blocks were plain
 * text in the original design and must stay that way.
 * -------------------------------------------------------------------------- */
.sec-contact .tel a,
.sec-contact .mail a,
.sec-contact .address a,
.releases-footing a,
.block-user a {
  color: inherit;
  text-decoration: none;
}

.sec-contact .tel a:hover,
.sec-contact .mail a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Maintenance Preview Mode Banner
 * -------------------------------------------------------------------------- */
.cgm-preview-bar {
  background: -webkit-gradient(linear, left top, right top, from(#021a0e), color-stop(50%, #06381e), to(#011208));
  background: linear-gradient(90deg, #021a0e 0%, #06381e 50%, #011208 100%);
  border-bottom: 2px solid var(--primary, #008234);
  color: #ffffff;
  padding: 8px 16px;
  font-size: 13px;
  position: relative;
  z-index: 1050;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: none;
}

.cgm-preview-bar .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cgm-preview-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  background: rgba(0, 229, 153, 0.15);
  border: 1px solid rgba(0, 229, 153, 0.4);
  color: #00e599;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 999px;
}

.cgm-preview-msg {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
}

.cgm-preview-lock-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  background: rgba(237, 28, 36, 0.15);
  border: 1px solid rgba(237, 28, 36, 0.4);
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.cgm-preview-lock-btn:hover {
  background: #ed1c24;
  color: #ffffff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Feedback line under the newsletter forms.
 * The original markup had no such element, so it carries no theme styling.
 * -------------------------------------------------------------------------- */
.form-register-message {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.form-register-message[data-state=ok] {
  color: var(--primary, #00c48c);
}

.form-register-message[data-state=error] {
  color: #e5484d;
}

.sec-banner .form-register-message,
.sec-contact.layout-center .form-register-message {
  color: #fff;
}

.sec-contact .form-register-message[data-state=error] {
  color: #ffd5d5;
}

/* Disabled state while a submission is in flight. */
.form-register .submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* --------------------------------------------------------------------------
 * Cookie preferences page: saved-confirmation line.
 * Replaces the alert() the prototype used.
 * -------------------------------------------------------------------------- */
.cookie-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(0, 196, 140, 0.12);
  border: 1px solid rgba(0, 196, 140, 0.35);
  color: #0c6b52;
  font-weight: 600;
  text-align: center;
}

.cookie-header button.accordion-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

.cookie-body[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
 * Press release list: pagination sits below the card grid.
 * -------------------------------------------------------------------------- */
.releases-pagination {
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.releases-pagination .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.releases-pagination .page-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(45, 45, 45, 0.2);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

.releases-pagination .page-item.active .page-link {
  background: var(--primary, #00c48c);
  border-color: var(--primary, #00c48c);
  color: #fff;
}

.releases-pagination .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Empty-state placeholders, shown when a section has no content yet.
 * -------------------------------------------------------------------------- */
.cgm-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 16px;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
 * Skip link for keyboard users.
 * -------------------------------------------------------------------------- */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #fff;
  color: #0a0f1a;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
 * Full-screen sections with native document scrolling.
 *
 * The design moved <main> with a CSS transform and locked the page
 * (overflow:hidden). public/js/site.js now scrolls the real document one
 * section at a time instead, so only the lock is lifted here. Every section
 * keeps the design's exact one-screen height and inner layout from
 * style.css — nothing below changes how a section looks.
 * -------------------------------------------------------------------------- */
html,
body,
body[data-parallax=true] {
  width: 100%;
  height: auto !important;
  min-height: 100%;
}

html {
  overflow-x: clip !important;
  overflow-y: auto !important;
  scroll-padding-top: 80px;
  /* Bootstrap turns on smooth scrolling for the whole document. The section
     scroller animates frame by frame itself; a second, CSS-driven smoothing
     on top of it makes every step lag and overshoot. */
  scroll-behavior: auto !important;
}

body[data-parallax=true] {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.modal-open,
body.cgm-menu-open,
body.cgm-cookie-open {
  overflow: hidden !important;
}

main,
body[data-parallax=true] main {
  width: 100%;
  height: auto !important;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-transition: none;
  transition: none;
  will-change: auto;
}

/* 100vw counts the scrollbar that native scrolling brings back. */
body[data-parallax=true] section.background {
  width: 100%;
}

html:not(.cgm-reveal-ready) .text-ani {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

/* A screen too short for the design's content (under 700px tall) would cut
   text off. Only there may a section grow past one screen; the scroller then
   scrolls through it before moving on. */
@media (min-width: 769px) and (max-height: 699.98px) {
  body[data-parallax=true] section.background {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  body[data-parallax=true] section.background > .container {
    height: auto;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  body[data-parallax=true] .sec-provide > .container > .inner {
    height: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  body[data-parallax=true] .sec-provide > .container > .inner > .block-bottom {
    min-height: 360px;
  }
  .sec-provide .slider-container {
    min-height: 360px;
  }
}

/* The same growth for a single section whose content was measured not to
   fit (site.js initSectionFit adds .cgm-grow): e.g. a two-line Vietnamese
   heading under the header on a 1440×780 laptop. */
@media (min-width: 769px) {
  body[data-parallax=true] section.background.cgm-grow {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  body[data-parallax=true] section.background.cgm-grow > .container {
    height: auto;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  html.has-preview-bar body[data-parallax=true] section.background.cgm-grow > .container {
    padding-top: calc(80px + var(--cgm-preview-h, 45px));
  }
  body[data-parallax=true] .sec-provide.cgm-grow > .container > .inner {
    height: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  body[data-parallax=true] .sec-provide.cgm-grow > .container > .inner > .block-bottom {
    min-height: 360px;
  }
  .sec-provide.cgm-grow .slider-container {
    min-height: 360px;
  }
  html.cgm-measuring .text-ani {
    -webkit-transform: none !important;
            transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}

/* Home tab backgrounds: on a wide, short screen the frame is much wider than
   the photo, so "cover" crops it. Keep the top (station logos, the Bike
   Point sign) in view and crop the ground instead. */
@media (min-width: 769px) {
  .sec-provide .bg-item img {
    -o-object-position: center top;
       object-position: center top;
  }
}
/* --------------------------------------------------------------------------
 * Header / mobile menu — the designer's own rules in style.css apply as-is.
 *
 * One gap in the delivered theme is closed here: style.css switches to the
 * mobile header at 1025px, but the markup collapses the menu at Bootstrap's
 * xl breakpoint (1200px). Between 1025px and 1199px the menu was hidden with
 * no button to open it. That range now gets the theme's own tablet header
 * (the rules below are copied from its max-width:1025px blocks), so every
 * width shows exactly one of the two designed headers.
 * -------------------------------------------------------------------------- */
header .navbar-btn {
  background: transparent;
  cursor: pointer;
}

header :is(a, button):focus-visible,
[role=tab]:focus-visible,
.cookie-container button:focus-visible {
  outline: 3px solid var(--primary, #009343);
  outline-offset: 4px;
}

@media (min-width: 1025.02px) and (max-width: 1199.98px) {
  header {
    padding: 16.5px 0;
  }
  header .navbar-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  header .logo-brand {
    max-width: 115px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
            justify-content: stretch;
  }
  header .offcanvas-header .logo-brand {
    position: static;
    margin: 0;
  }
  header .offcanvas {
    max-width: calc(100% - 70px);
  }
  header .navbar-nav .nav-item > .nav-link {
    height: auto;
    min-width: 0;
    display: block;
    font-size: 14px;
    padding: 16px 24px !important;
    width: calc(100% - 50px);
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
  header .navbar-nav .nav-item + .nav-item {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }
  header .link-gogoro {
    width: 65px;
  }
  header .group-right .btn {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin-right: 60px;
  }
}
.cgm-modal-fallback {
  background: rgba(0, 0, 0, 0.5);
}

.sec-about-intro [data-milestone-panel][hidden] {
  display: none;
}

.sec-about-intro [role=tab] {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .text-ani,
  .text-ani.active {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition: none;
    transition: none;
  }
}
/* --------------------------------------------------------------------------
 * Language switcher (header). Matches the footer pills of the design.
 * -------------------------------------------------------------------------- */
.cgm-lang-switch {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(60, 85, 105, 0.08);
  border: 1px solid rgba(60, 85, 105, 0.12);
  font-size: 13px;
  line-height: 1;
}

.cgm-lang-switch a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  color: #3c5569;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color 0.2s, color 0.2s;
  transition: background-color 0.2s, color 0.2s;
}

.cgm-lang-switch a:hover {
  color: var(--primary, #009343);
}

.cgm-lang-switch a.active {
  background: #fff;
  color: var(--primary, #009343);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.cgm-lang-switch a:focus-visible {
  outline: 3px solid var(--primary, #009343);
  outline-offset: 2px;
}

.cgm-lang-switch--header {
  margin-left: clamp(12px, 1.6vw, 24px);
}

.cgm-lang-switch--drawer {
  display: none;
}

@media (max-width: 1199.98px) {
  .cgm-lang-switch--header {
    display: none;
  }
  .cgm-lang-switch--drawer {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 20px 16px 0;
    font-size: 15px;
  }
  .cgm-lang-switch--drawer a {
    min-width: 52px;
    height: 36px;
  }
}
/* Footer language pills: the whole pill is the link. The theme's
   `body * { line-height: 1.4 }` would override the pill's 32px line-height on
   a block-level link, so the label is centred with flex instead. */
.block-laguage ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Cookie settings button: reopens the consent banner at any time, as the
 * privacy rules require withdrawing consent to be as easy as giving it.
 * -------------------------------------------------------------------------- */
.cgm-cookie-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 990;
  width: 44px;
  height: 44px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 147, 67, 0.25);
  background: #fff;
  color: var(--primary, #009343);
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
}

.cgm-cookie-fab:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.cgm-cookie-fab:focus-visible {
  outline: 3px solid var(--primary, #009343);
  outline-offset: 3px;
}

body.modal-open .cgm-cookie-fab {
  display: none;
}

/* Legal page shown in English on a translated site. */
.cgm-lang-notice {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(0, 147, 67, 0.08);
  border: 1px solid rgba(0, 147, 67, 0.25);
  color: #0c5a31;
  font-size: 15px;
  text-align: center;
}

/* --------------------------------------------------------------------------
 * Maintenance and error screens (standalone, no theme CSS loaded).
 * -------------------------------------------------------------------------- */
.cgm-status-page {
  margin: 0;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #ebf0f0;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  color: #2d2d2d;
}

.cgm-status {
  max-width: 520px;
  padding: 48px 24px;
  text-align: center;
}

.cgm-status__logo {
  width: 180px;
  margin-bottom: 32px;
}

.cgm-status__code {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  color: #009343;
  line-height: 1;
}

.cgm-status h1 {
  margin: 12px 0;
  font-size: 28px;
}

.cgm-status p {
  font-size: 16px;
  line-height: 1.6;
  color: #3c5569;
}

.cgm-status a {
  color: #009343;
}

.cgm-status__button {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #009343;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

/* Press release list filtered by a tag: the tag with a clear button. */
.cgm-active-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 147, 67, 0.1);
  color: var(--primary, #009343);
  font-size: 18px;
  vertical-align: middle;
}

.cgm-active-tag a {
  color: inherit;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
 * Updates from HTML Developer (2026-09-28)
 * -------------------------------------------------------------------------- */
header .navbar-nav .nav-item.active::before {
  border-width: 4px;
  border-color: var(--primary) !important;
}

@media (max-width: 768px) {
  .sec-partners .block-bottom {
    padding-top: 58.1395348837%;
  }
}
@media (max-width: 768px) {
  .sec-contact .address span {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .sec-about-intro .box-nav li {
    padding: 0 12px;
    font-size: 14px;
    white-space: nowrap;
  }
}
.block-right {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
 * Zalo CTA: Floating button in the bottom right corner (Slide 62 & 92)
 * -------------------------------------------------------------------------- */
.cgm-zalo-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 990;
  width: 56px;
  height: 56px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  -webkit-box-shadow: 0 4px 16px rgba(0, 136, 255, 0.4);
          box-shadow: 0 4px 16px rgba(0, 136, 255, 0.4);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-box-shadow 0.3s ease;
  -webkit-animation: cgmZaloPulse 2.5s infinite;
          animation: cgmZaloPulse 2.5s infinite;
}

.cgm-zalo-fab img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.cgm-zalo-fab:hover {
  -webkit-transform: scale(1.1) translateY(-2px);
          transform: scale(1.1) translateY(-2px);
  -webkit-box-shadow: 0 8px 24px rgba(0, 136, 255, 0.55);
          box-shadow: 0 8px 24px rgba(0, 136, 255, 0.55);
}

.cgm-zalo-fab:focus-visible {
  outline: 3px solid #0088ff;
  outline-offset: 3px;
}

@-webkit-keyframes cgmZaloPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.5);
            box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.5);
  }
  70% {
    -webkit-box-shadow: 0 0 0 14px rgba(0, 136, 255, 0);
            box-shadow: 0 0 0 14px rgba(0, 136, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 136, 255, 0);
            box-shadow: 0 0 0 0 rgba(0, 136, 255, 0);
  }
}

@keyframes cgmZaloPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.5);
            box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.5);
  }
  70% {
    -webkit-box-shadow: 0 0 0 14px rgba(0, 136, 255, 0);
            box-shadow: 0 0 0 14px rgba(0, 136, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 136, 255, 0);
            box-shadow: 0 0 0 0 rgba(0, 136, 255, 0);
  }
}
@media (max-width: 768px) {
  .cgm-zalo-fab {
    right: 16px;
    bottom: 20px;
    width: 48px;
    height: 48px;
  }
  .text-sub-sp {
    font-size: 10px;
  }
}
.text-sub-sp {
  color: #3C5569;
}

body.modal-open .cgm-zalo-fab {
  display: none;
}

.releases-footing {
  display: none;
}

.list-link li {
  min-width: 145px;
}

.block-editor ul li, .block-editor ol li {
  margin-bottom: 0 !important;
}

.btn-contact + .lang-switch {
  display: none;
}
/* --------------------------------------------------------------------------
 * Admin shortcut (only rendered for a signed-in admin)
 * -------------------------------------------------------------------------- */
.cgm-admin-shortcut {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1040;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #06381e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  line-height: 1;
}
.cgm-admin-shortcut a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.cgm-admin-shortcut a:hover,
.cgm-admin-shortcut a:focus-visible { background: #008234; color: #fff; }
.cgm-admin-shortcut i { display: none; }
@media (max-width: 767px) {
  .cgm-admin-shortcut { left: 8px; bottom: 8px; font-size: 12px; }
  .cgm-admin-shortcut a { padding: 7px 10px; }
}
@media print { .cgm-admin-shortcut { display: none; } }

/* Preview bar (maintenance mode): fixed above the fixed header, with the
 * page pushed down by exactly its height. Without this the bar covered the
 * top of the header and left a white gap above the News banner. */
html.has-preview-bar .cgm-preview-bar { position: fixed; top: 0; left: 0; right: 0; }
html.has-preview-bar body[data-parallax=false] main { padding-top: calc(80px + var(--cgm-preview-h, 45px)); }
@media (max-width: 768px) {
  html.has-preview-bar body[data-parallax=false] main { padding-top: calc(60px + var(--cgm-preview-h, 45px)); }
}
html.has-preview-bar header { top: var(--cgm-preview-h, 45px); }

/* Phones: the preview bar and the admin shortcut are hidden so the page
 * itself is fully visible; nothing is offset for them either. */
@media (max-width: 768px) {
  .cgm-preview-bar, .cgm-admin-shortcut { display: none !important; }
  html.has-preview-bar header { top: 0; }
  html.has-preview-bar body[data-parallax=false] main { padding-top: 60px; }
}

/* Network, "Swap Station network where you ride": the banner's white text sat
   on the light map and could not be read, and on a short laptop screen it ran
   into the station pin. Desktop now uses the dark text of the designer's
   mobile layout, sits a little higher and scales the heading with the screen
   height so it always ends above the pin (UAT 30/09/2026). */
@media (min-width: 769px) {
  .sec-location .container {
    color: #2D2D2D;
  }
  .sec-location .container .inner {
    padding-top: 2dvh;
  }
  .sec-location .container .font-48 {
    font-size: clamp(28px, 5.2vh, 48px);
  }
}

/* Partners banner (English): its two lines are two separate statements. The
   theme hides banner <br> on phones, so each line (a .cgm-line span) becomes
   its own block, balanced on its own. UAT 30/09/2026, slide 18. */
@media (max-width: 768px) {
  body.partner.lang-en .sec-banner .container .inner .font-48 .cgm-line {
    display: block;
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
 * "Coming soon" placeholder for announced pages that have no layout yet
 * (/maintenance, /events, /support/faq, ... and their /vi pages).
 * -------------------------------------------------------------------------- */
.cgm-soon {
  position: relative;
  padding: 72px 0 88px;
  background: linear-gradient(160deg, #f4f8f8 0%, #ebf0f0 55%, #e3efe8 100%);
}
/* The theme forces "section { overflow: initial !important }", so the
   decorative glows are clipped by their own layer instead. */
.cgm-soon__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cgm-soon__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
.cgm-soon__glow--one {
  width: 520px;
  height: 520px;
  top: -220px;
  right: -160px;
  background: radial-gradient(circle, rgba(0, 147, 67, .18) 0%, rgba(0, 147, 67, 0) 70%);
}
.cgm-soon__glow--two {
  width: 420px;
  height: 420px;
  bottom: -200px;
  left: -140px;
  background: radial-gradient(circle, rgba(240, 0, 35, .10) 0%, rgba(240, 0, 35, 0) 70%);
}
.cgm-soon__card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 48px 48px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 60px rgba(5, 28, 78, .08);
  text-align: center;
}
.cgm-soon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(0, 147, 67, .1);
  color: var(--primary, #009343);
}
.cgm-soon__eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary, #009343);
}
.cgm-soon__title {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #2d2d2d;
  text-wrap: balance;
}
.cgm-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff4d1;
  color: #7a5a00;
  font-size: 14px;
  font-weight: 600;
}
.cgm-soon__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5b400;
  animation: cgm-soon-pulse 1.6s ease-in-out infinite;
}
.cgm-soon__text {
  max-width: 520px;
  margin: 20px auto 0;
  text-wrap: balance;
  font-size: 18px;
  line-height: 1.6;
  color: #4a5a66;
}
.cgm-soon__bar {
  position: relative;
  width: 160px;
  height: 4px;
  margin: 32px auto 0;
  border-radius: 4px;
  background: #e1e8e8;
  overflow: hidden;
}
.cgm-soon__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 4px;
  background: var(--primary, #009343);
  animation: cgm-soon-slide 2.2s ease-in-out infinite;
}
.cgm-soon__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 32px;
}
.cgm-soon__actions .button {
  min-width: 180px;
  font-weight: 600;
  background-color: transparent;
}
.cgm-soon__actions .button-primary {
  background-color: var(--primary, #009343);
}
.cgm-soon__actions .button-outline-primary:hover {
  background-color: var(--primary, #009343);
  color: #fff;
}
.cgm-soon__help {
  margin: 20px 0 0;
  font-size: 14px;
  color: #6b7a85;
}
@keyframes cgm-soon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
@keyframes cgm-soon-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .cgm-soon__dot,
  .cgm-soon__bar span { animation: none; }
}
@media (max-width: 768px) {
  .cgm-soon { padding: 40px 0 56px; }
  .cgm-soon__card { padding: 40px 20px 32px; border-radius: 20px; }
  .cgm-soon__icon { width: 72px; height: 72px; margin-bottom: 20px; }
  .cgm-soon__icon svg { width: 32px; height: 32px; }
  .cgm-soon__title { font-size: 32px; }
  .cgm-soon__text { font-size: 16px; }
  .cgm-soon__actions .button { width: 100%; }
}