/**
 * T-Connect responsive overrides — mobile/tablet only (max-width: 991px).
 * Desktop layout (992px+) is unchanged; no rules apply above that breakpoint.
 */

.cookie-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@font-face {
  font-family: "Sarabun Light";
  src: url("fontface/Sarabun-Light.eot");
  src: url("fontface/Sarabun-Light.eot?#iefix") format("embedded-opentype"), url("fontface/Sarabun-Light.woff") format("woff"), url("fontface/Sarabun-Light.ttf") format("truetype"), url("fontface/Sarabun-Light.svg#Sarabun-Light") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --sarabun-li: "Sarabun Light";
  --font-sarabun-general: 0.9375vw;
}

@media (min-width: 992px) and (max-width: 1480px) {
  :root {
    --font-sarabun-general: 1.171875vw;
  }
}

@media (max-width: 991px) {
  :root {
    --font-sarabun-general: 3.90625vw;
  }
}

#onetrust-consent-sdk,
#onetrust-consent-sdk * {
  font-family: var(--sarabun-li), sans-serif !important;
}

#onetrust-consent-sdk {
  font-size: var(--font-sarabun-general);
  line-height: 1.7;
}

/* Mobile header exists in DOM but is invisible on desktop */
#tconnect-mobile-header {
  display: none;
}

/* T-Connect SMART package — nav highlight (all pages) */
.tconnect-smart-package-nav,
#leftcolumn h2 a.tconnect-smart-package-nav,
#nav-top a.tconnect-smart-package-nav,
#aSmartPackage.tconnect-smart-package-nav {
  color: #e8951c !important;
}

@media (max-width: 991px) {
  /* ---- Mobile header (separate from desktop #header) ---- */
  #tconnect-mobile-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10050;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }

  .tconnect-mobile-header__lang {
    background: #000;
    text-align: right;
    padding: 4px 12px;
  }

  .tconnect-mobile-header__lang img {
    width: 70px;
    height: auto;
    vertical-align: middle;
  }

  .tconnect-mobile-header__bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    min-height: 52px;
  }

  .tconnect-mobile-header__brands {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .tconnect-mobile-header__logo,
  .tconnect-mobile-header__toyota {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    line-height: 0;
  }

  .tconnect-mobile-header__logo a,
  .tconnect-mobile-header__toyota a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    line-height: 0;
  }

  .tconnect-mobile-header__logo img,
  .tconnect-mobile-header__toyota img {
    display: block;
    max-width: 140px;
    height: 40px;
    width: auto;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    float: none !important;
    vertical-align: middle;
    object-fit: contain;
  }

  .tconnect-mobile-header__toyota img {
    max-width: 96px;
    max-height: 36px;
  }

  .tconnect-mobile-nav-toggle {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
  }

  .tconnect-mobile-nav-toggle span {
    display: block;
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #2f5597;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }

  .tconnect-mobile-nav-toggle span:nth-child(1) {
    top: 14px;
  }

  .tconnect-mobile-nav-toggle span:nth-child(2) {
    top: 21px;
  }

  .tconnect-mobile-nav-toggle span:nth-child(3) {
    top: 28px;
  }

  .tconnect-mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
  }

  .tconnect-mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .tconnect-mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
  }

  #tconnect-mobile-nav {
    display: none;
    background: #2f5597;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  #tconnect-mobile-nav.is-open {
    display: block;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__list,
  #tconnect-mobile-nav .tconnect-mobile-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__group,
  #tconnect-mobile-nav .tconnect-mobile-nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__parent {
    display: flex;
    align-items: stretch;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__parent-link,
  #tconnect-mobile-nav .tconnect-mobile-nav__link {
    display: block;
    flex: 1;
    padding: 10px 16px;
    color: #fff !important;
    font-size: 24px !important;
    text-decoration: none;
    font-family: "DBHelvethaicaX-Reg", sans-serif !important;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__parent-link.tconnect-smart-package-nav {
    font-size: 24px !important;
    color: #e8951c !important;
    font-weight: bold;
    padding: 10px 16px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__group--smart-package .tconnect-mobile-nav__parent {
    position: relative;
    overflow: hidden;
  }

  #tconnect-mobile-nav .tconnect-smart-package-nav__new {
    position: absolute;
    top: 15px;
    right: 39px;
    z-index: 2;
    background: #e2231a;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 30px;
    line-height: 1.3;
    transform: rotate(45deg);
    transform-origin: center center;
    pointer-events: none;
    letter-spacing: 0.06em;
    font-family: Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__subtoggle {
    flex-shrink: 0;
    width: 48px;
    margin: 0;
    padding: 0;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__chevron {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.2s ease;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__group.is-expanded .tconnect-mobile-nav__chevron {
    transform: rotate(-135deg);
    margin-top: 2px;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__submenu {
    display: none;
    background: rgba(0, 0, 0, 0.15);
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__group.is-expanded .tconnect-mobile-nav__submenu {
    display: block;
  }

  #tconnect-mobile-nav .tconnect-mobile-nav__submenu a {
    display: block;
    padding: 10px 16px 10px 28px;
    color: #fff !important;
    font-size: 22px !important;
    text-decoration: none;
    font-family: "DBHelvethaicaX-Reg", sans-serif !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  #tconnect-mobile-nav a.fontActive,
  #tconnect-mobile-nav a.is-active {
    color: #e8951c !important;
    background: rgba(0, 0, 0, 0.12);
  }

  #tconnect-mobile-nav {
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.tconnect-mobile-nav-open {
    overflow: hidden;
  }

  /* Hide desktop header entirely on mobile */
  #headerbefore,
  #header {
    display: none !important;
  }

  /* ---- Layout ---- */
  #container2,
  #headerbefore > div,
  #footer .contact > div,
  #footer #contact,
  #footer #copyright,
  #footer #finner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #container2 {
    padding: 0 12px;
  }

  #leftcolumn {
    display: none !important;
  }

  #contentwrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }

  .menuLeftToggle {
    width: 100% !important;
  }

  /* Images & media */
  #contentwrapper img,
  #contentwrapper video,
  #contentwrapper iframe,
  #contentwrapper table {
    max-width: 100% !important;
    height: auto !important;
  }

  #hilight,
  #hilight_2,
  div[id="campaign"],
  div[id="campaign"] .set,
  div[id="newhilight"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #contentwrapper [style*="width: 800px"],
  #contentwrapper [style*="width:800px"],
  #contentwrapper [style*="width: 1020px"],
  #contentwrapper [style*="width:1020px"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #contentwrapper [style*="position: absolute"] {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
  }

  /* Footer */
  #footer .contact > div {
    padding: 16px 12px !important;
  }

  #footer .contact > div > div[style*="float: left"],
  #footer .contact > div > div[style*="float: right"] {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 20px !important;
  }

  #footer #FooterQRcode {
    text-align: center;
  }

  /* Keep 3 partner logos on a single row in mobile footer */
  #footer .contact > div > div[style*="float: right"] > div[style*="margin-top: 26px"] {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    text-align: center !important;
    flex-wrap: nowrap;
  }

  #footer .contact > div > div[style*="float: right"] > div[style*="margin-top: 26px"] > div[style*="inline-block"] {
    display: block !important;
    flex: 1 1 0;
    max-width: 33.33%;
    margin-right: 0 !important;
  }

  #footer .contact > div > div[style*="float: right"] > div[style*="margin-top: 26px"] > div[style*="inline-block"] img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 44px;
    margin: 0 auto;
  }

  #footer .contact > div > div[style*="float: right"] > div[style*="margin-top: 26px"] > div[style*="inline-block"] > a > div {
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }

  #footer-banner-containner {
    margin-left: 0 !important;
  }

  #infooter-banner,
  #footer-banner-qrcode {
    position: relative !important;
    margin: 12px auto !important;
    left: auto !important;
    top: auto !important;
  }

  /* Cookie banner — keep the accept button below the copy */
  .cookie-overlay {
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 16px 16px !important;
    font-size: 17px !important;
    line-height: 1.45;
    box-sizing: border-box;
  }

  .cookie-overlay .cookie-accept {
    position: static !important;
    display: block !important;
    float: none !important;
    width: 88px !important;
    margin: 12px 0 0 auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .cookie-overlay .cookie-dismiss {
    right: 8px !important;
    top: 4px !important;
  }

  /* Go-top button */
  #go-top {
    right: 12px !important;
    bottom: 12px !important;
  }

  /* FAQ / policy tables */
  #contentwrapper table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ContainerAns img,
  .Question img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- Index page content (T-Connect Services) ---- */
  .tconnect-page-content {
    padding: 0 4px 24px;
    overflow-x: hidden;
    word-wrap: break-word;
  }

  .tconnect-page-content #TopNavigation {
    font-size: 18px !important;
    line-height: 1.65;
  }

  .tconnect-page-content #TopNavigation a {
    display: inline;
    white-space: normal;
  }

  .tconnect-page-content > div > img,
  .tconnect-page-content img[style*="width: 800px"],
  .tconnect-page-content img[style*="width:800px"],
  .tconnect-page-content img[style*="width: 300px"],
  .tconnect-page-content img[style*="width: 280px"],
  .tconnect-page-content img[style*="width: 180px"],
  .tconnect-page-content img[style*="width: 200px"],
  .tconnect-page-content img[style*="width: 350px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .tconnect-page-content img[style*="height: 500px"],
  .tconnect-page-content img[style*="height: 1563px"],
  .tconnect-page-content img[style*="height: 185px"] {
    height: auto !important;
    max-height: none;
  }

  .tconnect-page-content > div[style*="display: flex"],
  .tconnect-page-content > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 12px;
    margin-top: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .tconnect-page-content > div[style*="display: flex"] > div,
  .tconnect-page-content > div[style*="display:flex"] > div {
    width: 100%;
    text-align: center;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .tconnect-page-content > div[style*="display: flex"] p,
  .tconnect-page-content > div[style*="display:flex"] p {
    text-align: center !important;
  }

  /* Remark / notes block stays left-aligned for readability */
  .tconnect-page-content #RemarkTConnectPolicy,
  .tconnect-page-content #RemarkTConnectPolicy > div,
  .tconnect-page-content #RemarkTConnectPolicy p {
    text-align: left !important;
  }

  .tconnect-page-content #RemarkTConnectPolicy > div {
    padding: 0 0;
    box-sizing: border-box;
  }

  .tconnect-page-content #RemarkTConnectPolicy {
    align-items: flex-start !important;
  }

  .tconnect-page-content > div[style*="display: flex"] img,
  .tconnect-page-content > div[style*="display:flex"] img {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 180px !important;
    max-height: 180px !important;
    margin: 0 auto;
  }

  .tconnect-page-content #GeoFencing img[style*="width: 300px"] {
    max-width: 100% !important;
    width: 100% !important;
    margin: 8px auto 0;
  }

  .tconnect-page-content > div[style*="float: left"] img,
  .tconnect-page-content img[style*="float: left"],
  .tconnect-page-content img[style*="float:left"] {
    float: none !important;
    display: block;
    margin: 0 auto 16px !important;
    max-width: 200px !important;
  }

  .tconnect-page-content > div[style*="height: 250px"][style*="position: relative"] {
    height: auto !important;
    min-height: 0;
    margin-top: 24px !important;
    padding-bottom: 8px;
  }

  .tconnect-page-content > div[style*="height: 250px"] > div[style*="position: absolute"] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  .tconnect-page-content > div[style*="margin-top: 30px"]:not([style*="display: flex"]):not([style*="display:flex"]) {
    clear: both;
    overflow: hidden;
    text-align: center;
    /* padding: 0 40px; */
    box-sizing: border-box;
  }

  .tconnect-page-content > div[style*="margin-top: 30px"]:not([style*="display: flex"]):not([style*="display:flex"]) p {
    text-align: center !important;
  }

  .tconnect-page-content > div[style*="height: 250px"] {
    padding: 0 40px;
    box-sizing: border-box;
  }

  .tconnect-page-content > div[style*="height: 250px"] p {
    text-align: center !important;
  }

  .tconnect-page-content p[style*="font-size: 66px"] {
    font-size: 42px !important;
    line-height: 1.1 !important;
  }

  .tconnect-page-content p[style*="font-size: 38px"] {
    font-size: 28px !important;
    line-height: 1.25 !important;
    padding-top: 0 !important;
  }

  .tconnect-page-content p[style*="font-size: 30px"] {
    font-size: 23px !important;
    line-height: 1.35 !important;
  }

  .tconnect-page-content p[style*="font-size: 26px"] {
    font-size: 22px !important;
    line-height: 1.45 !important;
  }

  .tconnect-page-content p[style*="font-size: 24px"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }

  .tconnect-page-content h2 p {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .tconnect-page-content .clearfix {
    clear: both;
  }

  /* ---- Fleet Telematics Service page ---- */
  .tconnect-page-content--fleet video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  .tconnect-page-content--fleet img {
    max-width: 100% !important;
    height: auto !important;
  }

  .tconnect-page-content--fleet img.slide {
    display: block;
    margin: 12px auto 0;
  }

  .tconnect-page-content--fleet #FleetTelematicsService,
  .tconnect-page-content--fleet [id="Benefit"] > img:first-child,
  .tconnect-page-content--fleet #Features > img:first-child {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tconnect-page-content--fleet > div[style*="background-color: #f3f6fa"],
  .tconnect-page-content--fleet #Features,
  .tconnect-page-content--fleet #Benefit,
  .tconnect-page-content--fleet #Testimonial,
  .tconnect-page-content--fleet #Start,
  .tconnect-page-content--fleet #Contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }

  .tconnect-page-content--fleet p[style*="padding-left: 15px"] {
    padding: 0 40px !important;
    text-align: center;
  }

  .tconnect-page-content--fleet #Features > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 12px;
    margin-top: 16px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .tconnect-page-content--fleet > div[style*="display: flex"] > p,
  .tconnect-page-content--fleet #Features > div[style*="display: flex"] > p {
    margin-left: 0 !important;
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
  }

  .tconnect-page-content--fleet > div[style*="display: flex"] img,
  .tconnect-page-content--fleet #Features > div[style*="display: flex"] img {
    max-width: 120px !important;
    width: auto !important;
    margin: 0 auto;
  }

  .tconnect-page-content--fleet ul {
    padding: 0 20px !important;
    margin-top: 12px !important;
    text-align: left;
  }

  .tconnect-page-content--fleet #Features table {
    width: 100% !important;
    margin: 0 auto;
  }

  .tconnect-page-content--fleet #Features table tr {
    display: block;
    margin-bottom: 8px;
  }

  .tconnect-page-content--fleet #Features table td {
    display: block;
    width: 100% !important;
    padding: 4px 0;
    text-align: left;
  }

  .tconnect-page-content--fleet #Features > div[style*="padding-left: 30px"] {
    padding: 0 40px !important;
    text-align: left;
  }

  .tconnect-page-content--fleet #application_document_download {
    margin-left: 0 !important;
    padding: 0 40px 20px;
    text-align: center;
  }

  .tconnect-page-content--fleet #application_document_download span {
    font-size: 22px !important;
    letter-spacing: 0 !important;
  }

  .tconnect-page-content--fleet #Contact img[style*="width: 200px"] {
    display: block;
    margin: 0 auto;
    max-width: 160px !important;
  }

  .tconnect-page-content--fleet > div[style*="margin-top: 30px"] {
    padding: 0;
  }

  /* FAQ & Contact pages */
  #contentwrapper div[style*="margin-left: 30px"] {
    margin-left: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* FAQ: align Q icon and question on one row */
  .Qitem .ContainerQ {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    width: 100% !important;
    box-sizing: border-box;
    align-items: baseline;
  }

  .Qitem .Q {
    float: none !important;
    flex: 0 0 30px;
    margin-right: 0 !important;
  }

  .Qitem .Question {
    float: none !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    color: rgb(27, 93, 165);
  }

  .Qitem .Question p {
    margin-top: 0 !important;
    font-size: 20px !important;
    line-height: 1.4;
    word-break: break-word;
  }

  .Qitem .Q p {
    font-size: 20px !important;
    line-height: 30px;
    margin: 0;
  }

  /* Smart Package page */
  .tconnect-page-content--smart {
    padding: 0 8px 24px;
  }

  .tconnect-page-content--smart h2 p {
    font-size: 24px !important;
    line-height: 1.3;
  }

  .tconnect-page-content--smart .smart-top-nav {
    gap: 6px;
    margin-bottom: 16px;
    font-size: 17px;
  }

  .tconnect-page-content--smart .smart-top-nav a {
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.35;
  }

  .tconnect-page-content--smart .smart-hero {
    margin: 0 0 24px;
    padding: 0;
  }

  .tconnect-page-content--smart .smart-hero__visual {
    position: static;
    transform: none;
    width: 100%;
    max-width: 280px;
    margin: 20px auto 0;
    opacity: 0.85;
  }

  .tconnect-page-content--smart .smart-hero__title {
    font-size: 30px;
  }

  .tconnect-page-content--smart .smart-hero__subtitle {
    font-size: 22px;
  }

  .tconnect-page-content--smart .smart-intro {
    margin-bottom: 28px;
  }

  .tconnect-page-content--smart .smart-packages {
    margin-bottom: 32px;
  }

  .tconnect-page-content--smart .smart-packages__description {
    font-size: 19px;
    margin-bottom: 16px;
  }

  .tconnect-page-content--smart .smart-packages__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .tconnect-page-content--smart .smart-package-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    gap: 8px;
    padding: 16px 14px 14px;
  }

  .tconnect-page-content--smart .smart-package-card__name {
    font-size: 24px;
  }

  .tconnect-page-content--smart .smart-package-card__badge {
    min-height: 0;
  }

  .tconnect-page-content--smart .smart-package-card__price {
    min-height: 0;
    font-size: 22px;
  }

  .tconnect-page-content--smart .smart-package-card__price-note {
    font-size: 17px;
  }

  .tconnect-page-content--smart .smart-package-card__desc {
    min-height: 0;
    font-size: 19px;
  }

  .tconnect-page-content--smart .smart-package-card__list li {
    font-size: 18px;
  }

  .tconnect-page-content--smart .smart-table-scroll-hint {
    display: block;
  }

  .tconnect-page-content--smart .smart-table-section {
    margin-left: 0;
    margin-right: 0;
    padding: 24px 0;
  }

  .tconnect-page-content--smart .smart-table-wrap {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tconnect-page-content--smart .smart-table {
    display: table !important;
    width: 100% !important;
    min-width: 680px !important;
    max-width: none !important;
    table-layout: fixed;
    overflow-x: visible;
  }

  .tconnect-page-content--smart .smart-table thead th:not(.smart-table__col-feature) {
    padding: 10px 6px;
  }

  .tconnect-page-content--smart .smart-table th,
  .tconnect-page-content--smart .smart-table td {
    padding: 8px 6px;
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
  }

  .tconnect-page-content--smart .smart-table__plan-name {
    font-size: 15px;
    line-height: 1.2;
  }

  .tconnect-page-content--smart .smart-table .smart-table__label-th {
    font-size: 17px;
  }

  .tconnect-page-content--smart .smart-table .smart-table__label-en {
    font-size: 13px;
  }

  .tconnect-page-content--smart .smart-table__section .smart-table__label-th {
    font-size: 19px;
  }

  .tconnect-page-content--smart .smart-table__section .smart-table__label-en {
    font-size: 14px;
  }

  .tconnect-page-content--smart .smart-table__plan-note-row th {
    font-size: 13px;
    padding: 6px 4px;
    line-height: 1.3;
  }

  .tconnect-page-content--smart .smart-table__box-head {
    padding: 6px 8px;
  }

  .tconnect-page-content--smart .smart-table__corner-top {
    font-size: 13px;
    top: 6px;
    right: 6px;
  }

  .tconnect-page-content--smart .smart-table__corner-label {
    font-size: 15px;
    margin-top: 0;
    bottom: 6px;
    left: 6px;
  }

  .tconnect-page-content--smart .smart-table__row td.smart-table__feature {
    font-size: 15px;
    padding: 8px 10px;
    line-height: 1.35;
  }

  .tconnect-page-content--smart .smart-table__row td:not(.smart-table__feature) {
    padding: 6px 4px;
  }

  .tconnect-page-content--smart .smart-table__section th {
    font-size: 18px;
    padding: 8px 10px;
  }

  .tconnect-page-content--smart .smart-table__subsection th {
    font-size: 15px;
    padding: 8px 10px;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__icon-img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
  }

  .tconnect-page-content--smart .smart-features__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tconnect-page-content--smart .smart-services-overview {
    padding: 20px 16px 16px;
    margin-bottom: 24px;
  }

  .tconnect-page-content--smart .smart-services-overview__columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tconnect-page-content--smart .smart-services-category {
    padding: 0;
  }

  .tconnect-page-content--smart .smart-services-category--safety {
    border-right: none;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8eef5;
  }

  .tconnect-page-content--smart .smart-services-category__header {
    min-height: auto;
    margin-bottom: 16px;
  }

  .tconnect-page-content--smart .smart-services-category__icon-wrap {
    width: 60px;
    height: 60px;
  }

  .tconnect-page-content--smart .smart-services-category__icon {
    width: 36px;
    height: 36px;
  }

  .tconnect-page-content--smart .smart-services-category__title {
    font-size: 19px;
  }

  .tconnect-page-content--smart .smart-services-category__tagline,
  .tconnect-page-content--smart .smart-services-category__list li {
    font-size: 17px;
  }

  .tconnect-page-content--smart .smart-features__intro {
    font-size: 19px;
    margin-bottom: 16px;
  }

  .tconnect-page-content--smart .smart-feature-item {
    padding: 16px;
    gap: 12px;
  }

  #contentwrapper.tconnect-page-content--smart .smart-feature-item img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
  }

  .tconnect-page-content--smart .smart-feature-item__title {
    font-size: 20px;
  }

  .tconnect-page-content--smart .smart-feature-item__desc {
    font-size: 18px;
  }

  .tconnect-page-content--smart .smart-feature-item--always {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }

  #contentwrapper.tconnect-page-content--smart .smart-feature-item--always img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    margin: 0 auto;
  }

  .tconnect-page-content--smart .smart-feature-item--always .smart-feature-item__title {
    font-size: 30px;
  }

  .tconnect-page-content--smart .smart-feature-item--always .smart-feature-item__subtitle {
    font-size: 20px;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__logo {
    display: inline-block !important;
    width: auto !important;
    max-width: 48px !important;
    height: 24px !important;
    object-fit: contain;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__feature-media {
    text-align: center;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partners-img--deal,
  #contentwrapper.tconnect-page-content--smart .smart-table__partners-img--monthly {
    max-width: 100%;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logos {
    gap: 10px 16px;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo {
    width: auto !important;
    max-width: 120px !important;
    height: 32px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--central {
    height: 18px !important;
    max-width: 150px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--ptt {
    height: 32px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--holiday {
    height: 40px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--togeta,
  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--amazon {
    height: 44px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--inthanin {
    height: 28px !important;
    max-width: 140px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__partner-logo--mcdonalds {
    height: 36px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__feature--logos {
    white-space: normal;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__logos .smart-table__logo {
    flex: 0 0 auto;
    max-width: 44px !important;
    height: 22px !important;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__preview-link {
    max-width: 100%;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__preview {
    display: block !important;
    width: auto !important;
    height: 48px !important;
    max-width: 100% !important;
    object-fit: contain;
  }

  #contentwrapper.tconnect-page-content--smart .smart-table__logo--ptt {
    max-width: 64px !important;
    height: 28px !important;
  }

  .tconnect-page-content--smart .smart-steps__block {
    padding: 18px 14px 20px;
  }

  .tconnect-page-content--smart .smart-steps__title {
    font-size: 23px;
  }

  .tconnect-page-content--smart .smart-steps__lead,
  .tconnect-page-content--smart .smart-steps__alert,
  .tconnect-page-content--smart .smart-steps__method-label {
    font-size: 19px;
  }

  .tconnect-page-content--smart .smart-steps__method-badge {
    font-size: 17px;
  }

  #contentwrapper.tconnect-page-content--smart .smart-steps__list,
  #contentwrapper.tconnect-page-content--smart .smart-steps__list--subscribe {
    display: flex;
    gap: 16px;
    margin: 0 -14px;
    padding: 4px 14px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  #contentwrapper.tconnect-page-content--smart .smart-steps__item {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  #contentwrapper.tconnect-page-content--smart .smart-steps__item--wide {
    flex-basis: 170%;
  }

  .tconnect-page-content--smart .smart-steps__shots {
    gap: 16px;
  }

  .tconnect-page-content--smart .smart-steps__shot > img:first-child {
    border-width: 4px;
    border-radius: 18px;
  }

  .tconnect-page-content--smart .smart-steps__caption {
    gap: 8px;
    margin-top: 12px;
    font-size: 18px;
  }

  .tconnect-page-content--smart .smart-steps__num {
    width: 26px;
    height: 26px;
    font-size: 17px;
  }

  .tconnect-page-content--smart .smart-note {
    margin-top: 24px;
    padding: 18px 16px;
  }

  .tconnect-page-content--smart .smart-note__title {
    font-size: 22px;
  }

  .tconnect-page-content--smart .smart-intro p,
  .tconnect-page-content--smart .smart-note p {
    font-size: 20px;
  }

  .tconnect-page-content--smart .smart-features__sub {
    font-size: 19px;
    margin-bottom: 18px;
  }

  .tconnect-page-content--smart .smart-packages__heading,
  .tconnect-page-content--smart .smart-table-section__heading,
  .tconnect-page-content--smart .smart-features__heading {
    font-size: 28px;
  }

  .tconnect-page-content--smart .smart-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 24px;
  }

  .tconnect-page-content--smart .smart-cta__btn {
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;
    padding: 14px 16px;
    text-align: center;
  }
}