.ehero{ background:#fff; padding: 26px var(--sp-3) 26px; }
.e-head{ display:grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(24px,4vw,72px); align-items:end; }
.ehero h1{ font-size: clamp(32px, 3vw, 44px); line-height: 1.02; letter-spacing: -.03em; margin:0; }
html[lang="th"] .ehero h1, html[lang="zh-Hans"] .ehero h1{ font-size: clamp(28px,2.9vw,42px); line-height: 1.25; letter-spacing: 0; }
.ehero .d-lede{ font-size: 16.5px; max-width: 520px; }

.e-panel{ margin-top: 18px; border: 1px solid rgba(11,14,20,.12); border-radius: 14px; background:#fff; box-shadow: 0 1px 2px rgba(11,14,20,.04), 0 24px 48px -36px rgba(11,14,20,.28); overflow:hidden; }
.e-clause{ display:grid; grid-template-columns: minmax(0, 640px) minmax(0,1fr); }
.e-ctl{ padding: 16px 20px 16px; border-right: 1px solid var(--glass-line); display:flex; flex-direction:column; gap: 10px; }
.e-ph{ display:flex; align-items:center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.e-ph a{ color: var(--ink) !important; text-decoration:none; }
.e-ph a:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }
.e-n{ font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color:#fff; background: var(--ink); border-radius: 4px; padding: 2px 6px; letter-spacing: .04em; }
.e-row{ display:grid; grid-template-columns: 70px minmax(0,1fr); align-items:start; gap: 8px; position:relative; }
.e-lab{ font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color:#59606C; padding-top: 7px; }
html[lang="zh-Hans"] .e-lab{ letter-spacing: .04em; }
.e-opts{ display:flex; flex-wrap:wrap; gap: 6px; }
.e-opt{ appearance:none; font: inherit; font-size: 13px; line-height: 1.2; font-weight: 500; color: #3A404B; background:#fff; border: 1px solid rgba(11,14,20,.16); border-radius: 7px; padding: 6px 9px; cursor:pointer; transition: border-color .15s, background .15s, color .15s, transform .08s; }
.e-opt:first-letter{ text-transform: uppercase; }
.e-opt:hover{ border-color: rgba(11,14,20,.5); color: var(--ink); }
.e-opt:active{ transform: scale(.97); }
.e-opt.on{ background: var(--ink); border-color: var(--ink); color:#fff; }
.e-opt.is-na, .e-opt:disabled{ cursor: not-allowed; color: #8A909B; background: #F5F6F8; border-style: dashed; border-color: rgba(11,14,20,.18); }
.e-opt.is-na small{ display:inline; margin-left: 6px; font-size: 11px; font-weight: 400; margin-top: 2px; color:#6B7280; }
.e-row.is-off .e-opts{ opacity:.45; }
.e-note{ grid-column: 2; font-size: 12px; color:#6B7280; margin-top: -4px; }
.e-note:empty{ display:none; }

.e-doc{ margin:0; padding: 18px 26px 16px; background: #F7F8FA; display:flex; flex-direction:column; min-height: 0; }
.e-doc figcaption{ display:flex; align-items:center; justify-content:space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--glass-line); }
.e-clabel{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #59606C; border: 1px solid rgba(11,14,20,.16); border-radius: 999px; padding: 3px 9px; white-space:nowrap; background:#fff; }
.e-cwrap{ flex:1; position:relative; min-height: 170px; }
.e-ctext{ position:absolute; inset:0; font-size: 14.5px; line-height: 1.6; color: #1F232B; padding: 12px 6px 4px 2px; overflow:auto; scrollbar-width: thin; }
.e-ctext em{ font-style: normal !important; }
.e-ctext .e-blank{ color:#59606C; border-bottom: 1px dashed rgba(11,14,20,.35); }
.e-ctext .e-fill{ color: var(--ink); font-weight: 600; background: rgba(148,49,30,.07); border-bottom: 1.5px solid var(--red); padding: 0 2px; border-radius: 2px; }
.e-ctext .e-fill.flash{ animation: eflash .9s ease; }
@keyframes eflash{ 0%{ background: rgba(148,49,30,.28);} 100%{ background: rgba(148,49,30,.07);} }
.e-src{ align-self:flex-start; margin-top: 8px; font-size: 12.5px; color: #4A505C !important; text-decoration:none; }
.e-src:hover{ color: var(--ink) !important; text-decoration: underline; }

.e-prog{ border-top: 1px solid var(--glass-line); padding: 14px 20px 14px; display:grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.e-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(var(--n,6), minmax(0,1fr)); gap: 10px; }
.e-step{ appearance:none; font:inherit; width:100%; height:100%; text-align:left; cursor:pointer; background:#fff; border: 1px solid rgba(11,14,20,.12); border-radius: 9px; padding: 9px 12px 10px; display:flex; flex-direction:column; gap: 3px; min-height: 58px; transition: border-color .15s, background .15s, transform .08s; }
.e-step:hover{ border-color: rgba(11,14,20,.45); }
.e-step:active{ transform: scale(.98); }
.e-sn{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color:#6B7280; display:flex; align-items:center; gap: 6px; }
.e-sn::before{ content:''; width: 6px; height: 6px; border-radius: 1px; background: rgba(11,14,20,.22); }
.e-st{ font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.e-step.on{ border-color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }
.e-step.on .e-sn{ color: var(--red); } .e-step.on .e-sn::before{ background: var(--red); }
.e-steps.in li{ animation: ein .45s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes ein{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
.e-detail{ display:flex; gap: 24px; align-items:baseline; justify-content:space-between; font-size: 13.5px; line-height:1.5; color: #3A404B; min-height: 40px; }
.e-detail p{ margin:0; max-width: 820px; }
.e-dl{ display:flex; gap: 16px; flex: none; }
.e-dl a{ font-size: 13.5px; font-weight: 500; color: var(--ink) !important; text-decoration:none; white-space:nowrap; }
.e-dl a:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }


.e-routes ul{ list-style:none; margin: 18px 0 0; padding:0; display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 1px solid rgba(11,14,20,.14); border-bottom: 1px solid rgba(11,14,20,.14); }
.e-routes li + li{ border-left: 1px solid var(--glass-line); }
.e-route{ display:grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; column-gap: 8px; padding: 14px 16px 16px; height:100%; text-decoration:none !important; color: var(--ink) !important; transition: background .15s; }
.e-route:hover{ background: #F5F6F8; }
.e-rn{ grid-column:1; font-size: 11px; font-weight: 600; color:#6B7280; font-variant-numeric: tabular-nums; letter-spacing:.06em; }
.e-rt{ grid-column:1; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; line-height: 1.25; }
.e-rs{ grid-column:1 / span 2; font-size: 12.5px; color: #59606C; line-height: 1.4; margin-top: 4px; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }
.e-route i{ grid-column:2; grid-row: 1 / span 2; align-self:center; font-style:normal; color: #6B7280; transition: transform .25s var(--ease), color .15s; }
.e-route:hover i{ transform: translateX(4px); color: var(--red); }
.e-route:hover .e-rt{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }

@media (max-width: 1100px){
  .e-cwrap{ min-height: 0; } .e-ctext{ position:static; max-height: 300px; }
  .e-head{ grid-template-columns: 1fr; gap: 12px; }
  .e-clause{ grid-template-columns: 1fr; }
  .e-ctl{ border-right:0; border-bottom: 1px solid var(--glass-line); }
  .e-steps{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .e-routes ul{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .e-routes li:nth-child(4){ border-left:0; } .e-routes li:nth-child(n+4){ border-top: 1px solid var(--glass-line); }
  .e-detail{ flex-direction:column; gap: 8px; }
}
@media (max-width: 600px){
  .ehero{ padding-top: 24px; }
  .ehero h1{ font-size: 32px; }
  html[lang="th"] .ehero h1, html[lang="zh-Hans"] .ehero h1{ font-size: 27px; }
  .ehero .d-lede{ font-size: 15.5px; }
  .e-ctl{ padding: 16px; } .e-doc{ padding: 14px 16px; } .e-prog{ padding: 14px 16px; }
  .e-row{ grid-template-columns: 1fr; gap: 6px; } .e-lab{ padding-top: 0; } .e-note{ grid-column: 1; margin-top:0; }
  .e-opt{ font-size: 13px; padding: 7px 10px; }
  .e-cwrap{ min-height: 0; } .e-ctext{ position:static; max-height: 260px; font-size: 14px; }
  .e-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .e-dl{ flex-wrap: wrap; }
  .e-routes ul{ grid-template-columns: 1fr 1fr; }
  .e-routes li:nth-child(n){ border-left: 0; border-top: 1px solid var(--glass-line); }
  .e-routes li:nth-child(even){ border-left: 1px solid var(--glass-line); }
  .e-routes li:nth-child(-n+2){ border-top: 0; }
  .e-rs{ display:none; }
}

@media (max-width: 1100px){
  .e-wrap{ display:flex; flex-direction:column; }
  .e-head{ order:1; } .e-routes{ order:2; } .e-panel{ order:3; margin-top: 22px; }
}
@media (max-width: 600px){
  .e-routes ul{ margin-top: 20px; }
  .e-route{ padding: 12px 12px 13px; }
  .e-rt{ font-size: 14.5px; }
}