:root{ --h-navy:#1F3A5F; --h-navy2:#2C4E7A; --h-ink:#0E1621; --h-mute:#5B6573; --h-line:#E3E7ED; --h-grid:#EEF1F5; --h-cool:#F5F7FA; --h-col: 24px; }
.h-wrap{ width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.h-12{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--h-col); }


.hhero{ background:#fff; padding: 64px 0 0; }
.h-h1 .gold{ color: var(--h-navy) !important; -webkit-text-fill-color: currentColor; background:none !important; }
.h-short{ display:none; }
.h-h1{ grid-column: 1 / span 8; margin: 0; font-size: clamp(36px, 3.55vw, 54px); line-height: 1.04; letter-spacing: -.04em; font-weight: 500; color: var(--h-ink); }
html[lang="zh-Hans"] .h-h1{ font-size: clamp(30px, 3vw, 44px); letter-spacing: 0; line-height: 1.2; }
html[lang="th"] .h-h1{ font-size: clamp(30px, 2.9vw, 44px); letter-spacing: 0; line-height: 1.25; }
.h-lede{ grid-column: 9 / span 4; align-self: end; margin: 0 0 6px; font-size: 17px; line-height: 1.5; color: var(--h-mute); max-width: 34ch; }
html[lang="zh-Hans"] .h-lede, html[lang="th"] .h-lede{ font-size: 16px; }


.h-prog{ grid-column: 1 / -1; margin-top: 44px; border: 1px solid var(--h-line); border-radius: 12px; background:#fff; overflow:hidden;
  box-shadow: 0 1px 0 rgba(14,22,33,.02), 0 24px 48px -36px rgba(31,58,95,.28); }
.h-top{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--h-line); background:#fff; }
.h-tabs{ display:flex; gap: 4px; }
.h-tab{ appearance:none; border:0; background:none; font: inherit; font-size: 15px; font-weight: 500; color: var(--h-mute); padding: 15px 12px 14px; position:relative; cursor:pointer; letter-spacing:-.005em; }
.h-tab::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background: var(--h-navy); transform: scaleX(0); transform-origin:left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.h-tab:hover{ color: var(--h-ink); } .h-tab.on{ color: var(--h-ink); } .h-tab.on::after{ transform:none; }
.h-tab:focus-visible, .h-task:focus-visible, .h-route:focus-visible, .h-model:focus-visible, .h-dgo:focus-visible{ outline: 2px solid var(--h-navy); outline-offset: 2px; border-radius: 4px; }
.h-model{ font-size: 13.5px; font-weight: 500; color: var(--h-navy); text-decoration:none; white-space:nowrap; }
.h-model:hover{ text-decoration: underline; text-underline-offset: 3px; }
.h-pane{ display:none; } .h-pane.on{ display:block; animation: hfade .35s ease; }
@keyframes hfade{ from{ opacity:.0; } to{ opacity:1; } }


.h-row{ display:grid; grid-template-columns: 76px minmax(0, 300px) minmax(0,1fr); align-items:center; height: 38px; width:100%; padding:0; margin:0; border:0; background:none; font: inherit; text-align:left; color: inherit; }
.h-head{ height: 32px; background: var(--h-cool); border-bottom: 1px solid var(--h-line); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--h-mute); font-weight: 500; }
html[lang="zh-Hans"] .h-head{ letter-spacing: .1em; }
.h-head em{ font-style: normal; text-transform: none; letter-spacing: 0; color: #8A93A0; font-weight: 400; }
.h-head b{ font-weight: 500; }
.h-row > span{ padding: 0 14px; min-width:0; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.h-row > .h-id{ border-right: 1px solid var(--h-line); height:100%; display:flex; align-items:center; font-variant-numeric: tabular-nums; font-size: 12.5px; color: #6B7280; letter-spacing: .02em; }
.h-row > .h-st{ border-right: 1px solid var(--h-line); height:100%; display:flex; align-items:center; font-size: 14px; color: var(--h-ink); }
.h-head > .h-id, .h-head > .h-st{ font-size: 11.5px; color: var(--h-mute); }
.h-row > .h-tl{ position:relative; height:100%; padding:0; overflow: visible; }
.h-body{ position:relative;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), var(--h-grid) calc(100%/12 - 1px), var(--h-grid) calc(100%/12));
  background-position: calc(376px) 0; background-size: calc(100% - 376px) 100%; background-repeat: no-repeat; }
.h-body::before{ content:''; position:absolute; inset: 0 0 0 376px;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), var(--h-grid) calc(100%/12 - 1px), var(--h-grid) calc(100%/12)); pointer-events:none; }
.h-body{ background-image:none; }
.h-head > .h-tl{ display:flex; align-items:center; padding: 0 14px; }
.h-task, .h-sum{ border-bottom: 1px solid var(--h-grid); position:relative; }
.h-task{ cursor:pointer; transition: background .2s ease; }
.h-task:hover{ background: rgba(31,58,95,.035); }
.h-task.on{ background: rgba(31,58,95,.06); }
.h-task.on .h-st{ font-weight: 500; }
.h-task.on .h-id{ color: var(--h-navy); }
.h-sum .h-st{ font-weight: 600; font-size: 14px; }
.h-sum .h-id{ font-weight: 500; color: var(--h-ink); }


.h-tl i{ position:absolute; display:block; }
.h-bar{ top: 50%; height: 14px; margin-top: -7px; background: var(--h-navy); border-radius: 2px; transition: background .2s ease, box-shadow .2s ease; }
.h-task:hover .h-bar{ background: var(--h-navy2); }
.h-task.on .h-bar:not(.h-opt){ box-shadow: 0 0 0 3px rgba(31,58,95,.18); }
.h-opt{ background: repeating-linear-gradient(135deg, rgba(31,58,95,.10) 0 4px, rgba(31,58,95,.02) 4px 8px); border: 1.25px dashed rgba(31,58,95,.55); }
.h-task.on .h-opt, .h-task:hover .h-opt{ background: repeating-linear-gradient(135deg, rgba(31,58,95,.18) 0 4px, rgba(31,58,95,.04) 4px 8px); border-color: var(--h-navy); }
.h-sbar{ top: 50%; height: 6px; margin-top: -3px; background: var(--h-ink); }
.h-sbar::before, .h-sbar::after{ content:''; position:absolute; top: 0; width: 0; height: 0; border-top: 9px solid var(--h-ink); }
.h-sbar::before{ left: 0; border-right: 6px solid transparent; }
.h-sbar::after{ right: 0; border-left: 6px solid transparent; }
.h-dia{ top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--h-ink); transform: rotate(45deg); z-index: 2; }
.h-dia-s{ background: #fff; border: 2px solid var(--h-ink); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.h-task.on .h-dia{ box-shadow: 0 0 0 3px rgba(31,58,95,.18); }
.h-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:1; }
.h-links path{ fill:none; stroke: #4A5F7D; stroke-width: 1.25; shape-rendering: crispEdges; }
.h-links path.ss{ stroke-dasharray: 3 3; }
.h-links .ah{ fill: #4A5F7D; stroke:none; shape-rendering: auto; }


.h-detail{ display:grid; grid-template-columns: 76px minmax(0,300px) minmax(0,1fr) auto; align-items:center; min-height: 56px; border-top: 1px solid var(--h-line); background: var(--h-cool); }
.h-detail > *{ padding: 0 14px; }
.h-did{ font-size: 12.5px; color: var(--h-navy); font-variant-numeric: tabular-nums; font-weight: 500; }
.h-dt{ font-size: 14px; font-weight: 600; color: var(--h-ink); }
.h-dl{ font-size: 14px; line-height: 1.45; color: #3B4552; padding: 10px 14px; }
.h-dgo{ display:grid; place-items:center; width: 40px; height: 40px; margin-right: 10px; border-radius: 8px; background: var(--h-navy); color:#fff !important; text-decoration:none; font-size: 17px; padding:0; transition: background .2s ease, transform .2s ease; }
.h-dgo:hover{ background: #16304F; transform: translateX(2px); }
.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; }
.h-detail.flash .h-dl, .h-detail.flash .h-dt{ animation: hfade .3s ease; }


.h-routes{ grid-column: 1 / -1; margin-top: 36px; }
.h-routes ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); column-gap: var(--h-col); }
.h-route{ display:grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 16px 0 18px; border-top: 1.5px solid var(--h-ink); text-decoration:none; color: var(--h-ink) !important; transition: border-color .2s ease; }
.h-rn{ font-size: 11.5px; color: #6B7280; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.h-rt{ font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.h-route i{ font-style: normal; color: var(--h-navy); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.h-route:hover{ border-top-color: var(--h-navy); } .h-route:hover i{ transform: translateX(3px); }
.h-route:hover .h-rt{ color: var(--h-navy); }


.hwhy{ padding: 112px 0 120px !important; margin-top: 72px; border-top: 1px solid var(--h-line); }
.hwhy .h-wrap{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--h-col); }
.hwhy h3{ font-size: clamp(38px, 4.2vw, 64px) !important; }


@media (min-width: 1101px){
  .site-header{ display:grid !important; grid-template-columns: auto 1fr auto; align-items:center; column-gap: 28px; padding: 0 max(32px, calc((100% - 1200px)/2)) !important; height: 72px; }
  .site-header .header-top{ display: contents !important; }
  .site-header .logo-area{ grid-column: 1; grid-row: 1; }
  .site-header .header-right{ grid-column: 3; grid-row: 1; }
  .site-header .main-nav{ grid-column: 2; grid-row: 1; border: 0 !important; background: transparent !important; justify-self: center; }
  .site-header .main-nav .nav-inner{ padding: 0 !important; margin: 0 !important; max-width: none !important; width:auto !important; gap: 2px; display:flex; }
  .site-header .main-nav .nav-item:first-child{ display:none; }
  .site-header .nav-link{ padding: 25px 11px !important; font-size: 14px !important; }
  .site-header .logo-img{ width: 40px !important; height: 40px !important; }
  .site-header .logo-text{ font-size: 13px !important; line-height: 1.2 !important; }
  .site-header .lang-btn svg{ display:none !important; }
  .site-header .lang-switch{ margin-right: 2px !important; }
}
@media (min-width: 1101px) and (max-width: 1300px){
  .site-header .logo-text{ display:none !important; }
  .site-header .nav-link{ padding-left: 9px !important; padding-right: 9px !important; }
}


@media (max-width: 1100px){
  .h-h1{ grid-column: 1 / -1; }
  .h-lede{ grid-column: 1 / -1; margin-top: 14px; }
  .h-routes ul{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .h-full{ display:none; } .h-short{ display:inline; }
  .h-row, .h-detail{ grid-template-columns: 58px minmax(0, 200px) minmax(0,1fr); }
  .h-body::before{ left: 258px; }
  .h-detail{ grid-template-columns: 58px minmax(0,1fr) auto; } .h-detail .h-dt{ display:none; }
}
@media (max-width: 700px){
  .h-wrap{ width: calc(100% - 40px); }
  .hhero{ padding-top: 28px; }
  .h-h1{ font-size: 29px; line-height: 1.08; }
  .h-lede{ font-size: 15.5px; }
  .h-prog{ margin-top: 22px; border-radius: 10px; margin-left: -6px; margin-right: -6px; }
  .h-top{ padding: 0 6px; flex-wrap: wrap; row-gap: 0; }
  .h-tabs{ display:grid; grid-template-columns: max-content 1fr; column-gap: 8px; width: 100%; }
  .h-tab{ font-size: 14px; padding: 12px 8px 11px; white-space: nowrap; text-align:left; }
  .h-tab::after{ left: 8px; right: auto; width: 28px; }
  html[lang="th"] .h-tabs{ grid-template-columns: 1fr 1fr; } html[lang="th"] .h-tab{ white-space: normal; }
  .h-model{ display:none; }
  .h-row{ grid-template-columns: 0 minmax(0, 116px) minmax(0,1fr); height: 32px; }
  .h-row > .h-id{ padding:0; border:0; overflow:hidden; font-size:0; }
  .h-row > .h-st{ font-size: 12.5px; padding: 0 8px 0 10px; }
  .h-head > .h-tl{ padding: 0 8px; } .h-head em{ display:none; }
  .h-body::before{ left: 116px; }
  .h-detail{ grid-template-columns: minmax(0,1fr) auto; min-height: 0; }
  .h-detail .h-did{ display:none; }
  .h-dl{ font-size: 13px; padding: 10px 10px; }
  .h-dgo{ width: 36px; height: 36px; margin-right: 8px; }
  .h-routes{ margin-top: 18px; }
  .h-routes ul{ grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .h-route{ padding: 12px 0 13px; border-top-width: 1px; gap: 8px; }
  .h-rt{ font-size: 14.5px; }
  .site-header .logo-text{ font-size: 12.5px !important; line-height: 1.2 !important; }
  .site-header .header-top{ padding-top: 10px !important; padding-bottom: 10px !important; }
  .hwhy{ padding: 64px 0 72px !important; margin-top: 48px; }
  .hwhy .h-wrap{ grid-template-columns: 1fr; row-gap: 28px; }
}
@media (prefers-reduced-motion: reduce){ .h-pane.on, .h-detail.flash .h-dl, .h-detail.flash .h-dt{ animation:none !important; } .h-tab::after, .h-route i, .h-bar{ transition:none !important; } }


.site-footer .footer-inner, .site-footer .footer-bottom{ width: min(1200px, calc(100% - 64px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
@media (max-width: 700px){ .site-footer .footer-inner, .site-footer .footer-bottom{ width: calc(100% - 40px) !important; } }
.h-lede{ max-width: none; }
.h-head em{ color: #6B7280; }
.h-sbar{ height: 5px; margin-top: -4px; }
.h-sbar::before, .h-sbar::after{ border-top-width: 11px; }
.h-sbar::before{ border-right-width: 7px; } .h-sbar::after{ border-left-width: 7px; }
.hwhy{ margin-top: 88px; }
@media (min-width: 1101px){
  .site-header{ column-gap: 18px !important; }
  .site-header .logo-text, .site-header .nav-link, .site-header .btn-nom, .site-header .lang-btn{ white-space: nowrap !important; }
  .site-header .nav-link{ padding-left: 9px !important; padding-right: 9px !important; }
  .site-header .header-right{ flex-wrap: nowrap !important; }
}
@media (min-width: 1101px) and (max-width: 1360px){ .site-header .logo-text{ display:none !important; } }