/* =============================================================
   Protrans v2 · PAGES - subhero, breadcrumb, service detail, industries, faq
   ============================================================= */

/* ---------- Subhero (navy, compact) ---------- */
.subhero{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden;
  padding-block:clamp(116px,13vw,160px) clamp(40px,6vw,72px); }
.subhero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 88% 10%, rgba(11,165,250,.20), transparent 60%); }
.subhero__inner{ position:relative; z-index:1; max-width:780px; }
.crumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:var(--fs-sm);
  color:var(--on-dark-mute); margin-bottom:18px; }
.crumb a{ color:var(--on-dark-soft); transition:color .2s var(--ease); }
.crumb a:hover{ color:#fff; }
.crumb i{ font-size:.85em; opacity:.6; }
.subhero h1{ color:#fff; font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:16px; }
.subhero p{ color:var(--on-dark-soft); font-size:var(--fs-lead); max-width:60ch; }

/* ---------- Service detail (zigzag split) ---------- */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); align-items:center; }
.svc-detail--rev .svc-detail__media{ order:-1; }
.svc-detail__media{ position:relative; }
.svc-detail__media img{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--bezel),var(--shadow-lg); }
.svc-detail__eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-d); margin-bottom:12px; }
.svc-detail h2{ margin-bottom:14px; }
.svc-detail__lead{ color:var(--text-soft); font-size:var(--fs-lead); margin-bottom:8px; }
.svc-detail__cta{ margin-top:26px; }
@media (max-width:900px){ .svc-detail{ grid-template-columns:1fr; gap:30px; }
  .svc-detail--rev .svc-detail__media{ order:0; } }

/* ---------- Service band (full-width image) ---------- */
.svc-band{ position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:400px;
  display:flex; align-items:flex-end; padding:clamp(28px,4vw,52px); color:#fff;
  box-shadow:var(--bezel),var(--shadow-lg); }
.svc-band__bg{ position:absolute; inset:0; z-index:0; background:var(--img) center/cover no-repeat;
  transition:transform .8s var(--ease); }
.svc-band:hover .svc-band__bg{ transform:scale(1.05); }
.svc-band::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(13,27,75,.92) 0%, rgba(13,27,75,.7) 45%, rgba(13,27,75,.25) 100%); }
.svc-band__inner{ position:relative; z-index:2; max-width:580px; }
.svc-band .svc-detail__eyebrow{ color:var(--accent-l); }
.svc-band h2{ color:#fff; margin-bottom:14px; }
.svc-band__lead{ color:rgba(255,255,255,.85); font-size:var(--fs-lead); margin-bottom:8px; }
.svc-band .split__list b{ color:#fff; }
.svc-band .split__list span{ color:rgba(255,255,255,.8); }
.svc-band .split__list .ico{ background:rgba(255,255,255,.16); color:#fff; }

/* ---------- Industries grid ---------- */
.industries{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ind-tile{ display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:var(--r);
  background:var(--surface); box-shadow:var(--bezel),var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ind-tile:hover{ transform:translateY(-3px); box-shadow:var(--bezel),var(--shadow); }
.ind-tile i{ font-size:30px; color:var(--accent-d); }
.ind-tile b{ font-size:1rem; color:var(--ink); font-weight:700; }
@media (max-width:900px){ .industries{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .industries{ grid-template-columns:1fr 1fr; } }

/* ---------- FAQ (2 cột) ---------- */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.faq__item{ padding-bottom:20px; border-bottom:1px solid var(--border); }
.faq__item h3{ font-size:1.05rem; margin-bottom:8px; display:flex; gap:10px; align-items:flex-start; }
.faq__item h3 i{ color:var(--accent-d); font-size:1.1em; margin-top:2px; flex:none; }
.faq__item p{ color:var(--text-soft); font-size:var(--fs-sm); line-height:1.65; padding-left:28px; }
@media (max-width:768px){ .faq{ grid-template-columns:1fr; gap:18px; } }

/* ---------- Popular routes (navy) ---------- */
@keyframes rtfade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.routes__tabs{ display:flex; flex-wrap:wrap; gap:0; justify-content:center;
  border-bottom:1px solid var(--on-dark-border); margin-bottom:28px; position:relative; }
.routes__tabs.has-ind .routes__tab[aria-selected="true"]::after{ display:none; }
.routes__tab{ background:transparent; border:0; color:var(--on-dark-soft); font-weight:600;
  font-size:var(--fs-body); padding:14px 22px; cursor:pointer; position:relative;
  transition:color .2s var(--ease); }
.routes__tab:hover{ color:#fff; }
.routes__tab[aria-selected="true"]{ color:#fff; }
.routes__tab[aria-selected="true"]::after{ content:""; position:absolute; left:16px; right:16px; bottom:-1px;
  height:2px; background:var(--accent); border-radius:2px; }
.routes__panel{ display:none; }
.routes__panel.active{ display:grid; grid-template-columns:1fr 1fr; gap:14px; animation:rtfade .35s var(--ease-out); }
.route-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r);
  background:rgba(255,255,255,.06); border:1px solid var(--on-dark-border); color:#fff;
  transition:background-color .25s var(--ease), transform .25s var(--ease); }
.route-card:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.route-card__mode{ font-size:.68rem; font-weight:700; padding:4px 8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); color:#fff; flex:none; letter-spacing:.03em; }
.route-card__loc{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); white-space:nowrap; }
.route-card__loc img{ width:22px; height:auto; border-radius:3px; display:block; }
.route-card__arrow{ color:var(--on-dark-mute); flex:none; }
.route-card__go{ margin-left:auto; flex:none; width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; }
.routes__cta{ text-align:center; margin-top:30px; }
@media (max-width:768px){
  .routes__panel.active{ grid-template-columns:1fr; }
  .route-card{ flex-wrap:wrap; }
  .route-card__loc{ font-size:var(--fs-xs); }
}

/* grid 4 cột tiện dụng (loại hình dịch vụ) */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

/* ---------- Spec cards (loại container FCL) ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin-inline:auto; }
.spec-card{ position:relative; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--bezel),var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.spec-card:hover{ transform:translateY(-5px); box-shadow:var(--bezel),var(--shadow-lg); }
.spec-card--featured{ box-shadow:0 0 0 2px var(--accent), var(--shadow-lg); }
.spec-card__badge{ position:absolute; top:14px; right:14px; font-size:.66rem; font-weight:700;
  background:var(--accent); color:#fff; padding:4px 11px; border-radius:var(--r-pill); }
.spec-card__head{ padding:30px 24px 22px; text-align:center; }
.spec-card__ico{ font-size:48px; color:var(--accent-d); margin-bottom:12px; display:block; }
.spec-card__title{ font-size:1.2rem; font-weight:700; color:var(--ink); }
.spec-card__sub{ color:var(--text-mute); font-size:.85rem; margin-top:2px; }
.spec-card__rows{ padding:2px 24px; border-top:1px solid var(--border); }
.spec-row{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--border-soft); font-size:var(--fs-sm); }
.spec-row:last-child{ border-bottom:0; }
.spec-row span{ color:var(--text-soft); }
.spec-row b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.spec-card__cta{ padding:20px 24px 24px; margin-top:auto; }
.spec-card__cta .btn{ width:100%; justify-content:center; }
.spec-note{ text-align:center; margin-top:26px; color:var(--text-soft); font-size:var(--fs-sm); }
.spec-note a{ color:var(--accent-d); font-weight:600; }
@media (max-width:900px){ .spec-grid{ grid-template-columns:1fr; max-width:420px; } }

/* ---------- Steps v2 (tab + khung ảnh portal) ---------- */
.steps2__wrap{ display:grid; grid-template-columns:0.92fr 1.4fr; gap:clamp(28px,4vw,52px); align-items:center; }
.steps2__tabs{ display:grid; gap:12px; }
.steps2__tab{ display:flex; gap:16px; align-items:flex-start; text-align:left; width:100%; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.steps2__tab:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.steps2__tab.active{ border-color:transparent; box-shadow:0 0 0 2px var(--accent), var(--shadow); }
.steps2__ring{ flex:none; width:48px; height:48px; border-radius:14px; background:var(--accent-soft);
  color:var(--accent-d); display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:background-color .3s var(--ease), color .3s var(--ease); }
.steps2__tab.active .steps2__ring{ background:linear-gradient(135deg,var(--accent),var(--accent-d)); color:#fff; box-shadow:var(--shadow-accent); }
.steps2__txt{ display:block; }
.steps2__lbl{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; color:var(--accent-d); }
.steps2__txt b{ display:block; color:var(--ink); font-size:1.08rem; margin:2px 0 4px; }
.steps2__txt small{ color:var(--text-soft); font-size:var(--fs-sm); line-height:1.55; }
.steps2__view{ border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--bezel),var(--shadow-lg); }
.steps2__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--surface-2);
  border-bottom:1px solid var(--border); }
.steps2__dot{ width:11px; height:11px; border-radius:50%; background:var(--border); }
.steps2__dot:nth-child(1){ background:#FF5F57; } .steps2__dot:nth-child(2){ background:#FEBC2E; } .steps2__dot:nth-child(3){ background:#28C840; }
.steps2__url{ margin-left:8px; font-size:var(--fs-xs); color:var(--text-mute); background:var(--surface);
  padding:5px 14px; border-radius:var(--r-pill); border:1px solid var(--border); }
.steps2__shot{ position:relative; background:var(--surface-2); min-height:360px; }
.steps2__pane{ display:none; padding:clamp(16px,2vw,22px); }
.steps2__pane.active{ display:block; animation:rtfade .35s var(--ease-out); }
@media (max-width:900px){ .steps2__wrap{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Step mockups (on-brand, không số bịa) ---------- */
.mk{ font-size:var(--fs-sm); }
.mk__hd{ margin-bottom:16px; }
.mk__hd b{ display:block; color:var(--ink); font-size:1.02rem; font-weight:700; }
.mk__hd span{ color:var(--text-mute); font-size:var(--fs-xs); }
/* form */
.mk__seg{ display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:4px; margin-bottom:14px; }
.mk__segbtn{ flex:1; text-align:center; padding:8px 6px; border-radius:8px; font-size:var(--fs-xs);
  font-weight:600; color:var(--text-soft); }
.mk__segbtn.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-xs); }
.mk__grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.mk__field label{ display:block; font-size:var(--fs-xs); color:var(--text-soft); margin-bottom:5px; }
.mk__input{ background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; color:var(--ink); font-weight:500; font-size:var(--fs-xs); }
.mk__chks{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; font-size:var(--fs-xs); color:var(--text-soft); }
.mk__chk{ display:inline-flex; align-items:center; gap:8px; }
.mk__box{ width:16px; height:16px; border-radius:5px; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
.mk__box.on{ background:var(--accent); border-color:var(--accent); }
.mk__actions{ display:flex; gap:10px; }
.mk__btn{ padding:10px 18px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600;
  background:var(--ink); color:#fff; }
.mk__btn.ghost{ background:transparent; color:var(--text-soft); border:1px solid var(--border); }
/* rate compare */
.mk-rate{ display:grid; gap:10px; }
.mk-rate__card{ display:grid; grid-template-columns:1fr auto auto; gap:10px 14px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.mk-rate__card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.mk-rate__route{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-soft); flex-wrap:wrap; }
.mk-rate__route img{ width:20px; height:auto; border-radius:3px; }
.mk-rate__route i{ color:var(--text-mute); }
.mk-rate__mid{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mk-rate__carrier{ font-weight:800; color:var(--ink); letter-spacing:.02em; }
.mk-tag{ font-size:.62rem; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); }
.mk-tag.ok{ background:rgba(16,185,129,.12); color:var(--ok); }
.mk-tag.blue{ background:var(--accent-soft); color:var(--accent-d); }
.mk-tag.gray{ background:var(--surface-2); color:var(--text-soft); }
.mk-rate__transit{ font-size:var(--fs-xs); color:var(--text-mute); }
.mk-rate__price{ font-size:var(--fs-xs); color:var(--accent-d); font-weight:600; }
.mk-rate__select{ justify-self:end; padding:8px 18px; border-radius:8px; background:var(--accent); color:#fff; font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em; }
@media (max-width:768px){ .mk-rate__select{ min-height:44px; display:inline-flex; align-items:center; } }
/* tracking */
.mk-track__line{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; margin:8px 0 18px; }
.mk-track__line::before{ content:""; position:absolute; top:13px; left:6%; right:6%; height:2px; background:var(--border); }
.mk-track__line .fill{ position:absolute; top:13px; left:6%; width:52%; height:2px; background:var(--accent); }
.mk-track__pt{ position:relative; z-index:1; text-align:center; width:20%; }
.mk-track__dot{ width:26px; height:26px; border-radius:50%; background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin:0 auto 8px; color:var(--text-mute); font-size:13px; }
.mk-track__pt.done .mk-track__dot{ background:var(--accent); border-color:var(--accent); color:#fff; }
.mk-track__pt.now .mk-track__dot{ background:#fff; border-color:var(--accent); color:var(--accent-d); box-shadow:0 0 0 4px var(--accent-soft); }
.mk-track__pt span{ font-size:.62rem; color:var(--text-soft); }
.mk-track__row{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); margin-bottom:8px; }
.mk-track__row i{ color:var(--accent-d); font-size:18px; }
.mk-track__row b{ color:var(--ink); font-size:var(--fs-xs); display:block; }
.mk-track__row span{ color:var(--text-mute); font-size:.66rem; }
.mk-track__row .eta{ margin-left:auto; font-size:var(--fs-xs); color:var(--text-soft); font-variant-numeric:tabular-nums; }
@media (max-width:560px){
  .mk__grid2{ grid-template-columns:1fr; }
  .mk-rate__card{ grid-template-columns:1fr; }
  .mk-rate__select{ justify-self:stretch; text-align:center; }
  .mk-track__pt span{ display:none; }
}

/* nhãn minh họa cho khung mockup steps2 */
.steps2__demo{ margin-left:auto; font-size:.66rem; font-weight:600; color:#9a6a12;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.32);
  border-radius:var(--r-pill); padding:4px 11px; white-space:nowrap; }
@media (max-width:560px){ .steps2__demo{ display:none; } }

/* ---------- Compare: giá mồi vs giá cuối ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.compare__col{ position:relative; border-radius:var(--r-lg); padding:clamp(26px,3vw,34px); overflow:hidden; }
.compare__col--bad{ background:var(--surface); box-shadow:var(--bezel),var(--shadow); }
.compare__col--good{ background:var(--ink); color:#fff; box-shadow:var(--bezel),var(--shadow-lg); }
.compare__col--good::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 90% 4%, rgba(11,165,250,.22), transparent 60%); }
.compare__tag{ position:relative; display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs);
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-pill); margin-bottom:14px; }
.compare__col--bad .compare__tag{ background:var(--surface-2); color:var(--text-soft); }
.compare__col--good .compare__tag{ background:rgba(255,255,255,.12); color:var(--accent-l); }
.compare__col h3{ position:relative; font-size:1.3rem; }
.compare__col--good h3{ color:#fff; }
.compare__list{ position:relative; display:grid; gap:13px; margin-top:18px; }
.compare__item{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-sm); }
.compare__item i{ flex:none; font-size:18px; margin-top:1px; }
.compare__col--bad .compare__item{ color:var(--text-soft); }
.compare__col--bad .compare__item i{ color:var(--text-mute); }
.compare__col--good .compare__item{ color:rgba(255,255,255,.86); }
.compare__col--good .compare__item i{ color:var(--accent-l); }
@media (max-width:768px){ .compare{ grid-template-columns:1fr; } }

/* ---------- Glossary: từ điển phụ phí ---------- */
.glossary{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gloss{ display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--bezel),var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.gloss:hover{ transform:translateY(-3px); box-shadow:var(--bezel),var(--shadow); }
.gloss__abbr{ flex:none; font-weight:800; font-size:.78rem; color:var(--accent-d);
  background:var(--accent-soft); border-radius:var(--r-sm); padding:9px 10px; min-width:70px; text-align:center; }
.gloss b{ display:block; color:var(--ink); font-size:var(--fs-sm); }
.gloss p{ color:var(--text-soft); font-size:var(--fs-xs); margin-top:3px; line-height:1.55; }
@media (max-width:768px){ .glossary{ grid-template-columns:1fr; } }

/* ---------- Quote form (Báo giá công khai) ---------- */
.qform-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(24px,4vw,48px); align-items:start; }
@media (max-width:900px){ .qform-grid{ grid-template-columns:1fr; } }
.qcard{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(24px,3.5vw,40px);
  box-shadow:var(--bezel),var(--shadow); }
.qform{ display:grid; gap:18px; position:relative; }
.qrow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .qrow{ grid-template-columns:1fr; } }
.qfield{ display:flex; flex-direction:column; gap:7px; }
.qfield label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.qfield label .req{ color:var(--accent-d); }
.qfield label .qfield__hint{ font-weight:400; color:var(--text-soft); font-size:.86em; }
.qfield input,.qfield select,.qfield textarea{ font:inherit; font-size:var(--fs-sm); color:var(--ink);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.qfield input:focus,.qfield select:focus,.qfield textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.qfield textarea{ resize:vertical; min-height:92px; }
.qhp{ position:absolute; left:-9999px; top:0; width:1px; height:1px; opacity:0; }
.qnote{ font-size:var(--fs-xs); color:var(--text-soft); margin-top:6px; display:flex; gap:8px; align-items:flex-start; }
.qnote i{ color:var(--accent-d); font-size:1.1em; flex:none; margin-top:1px; }
.qnote a{ color:var(--accent-d); text-decoration:underline; text-underline-offset:2px; }
.qnote a:hover{ color:var(--ink); }

/* ---------- Legal / long-form prose (privacy) ---------- */
.legal{ max-width:68ch; }
.legal h2{ font-size:1.35rem; line-height:1.3; margin-top:2.2em; margin-bottom:.5em; }
.legal h2:first-of-type{ margin-top:0; }
.legal p{ margin-bottom:1em; line-height:1.75; color:var(--text-soft); }
.legal ul{ margin:0 0 1em; padding-left:1.25em; display:grid; gap:6px; color:var(--text-soft); line-height:1.7; }
.legal__contact{ list-style:none; padding:16px 18px; margin-top:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.legal__contact b{ color:var(--ink); }
.legal__contact a{ color:var(--accent-d); text-decoration:underline; text-underline-offset:2px; }
.legal__contact a:hover{ color:var(--ink); }

/* ---------- Sample price table (bang-gia, minh họa) ---------- */
.ptable{ max-width:760px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--bezel), var(--shadow); }
.ptable__head{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:18px 22px; background:var(--ink); color:#fff; }
.ptable__route-label{ font-weight:700; }
.ptable__tag{ margin-left:auto; font-size:.82rem; background:rgba(255,255,255,.14);
  padding:4px 10px; border-radius:var(--r-pill); }
.ptable__scroll{ overflow-x:auto; }
.ptable__table{ width:100%; border-collapse:collapse; font-size:.95rem;
  min-width:520px; font-variant-numeric:tabular-nums; }
.ptable__table th{ text-align:left; padding:12px 22px; font-weight:600;
  color:var(--text-soft); background:var(--surface-2); }
.ptable__table td{ padding:12px 22px; }
.ptable__table tbody tr{ border-top:1px solid var(--border); }
.ptable__desc{ color:var(--text-soft); }
.ptable__num{ text-align:right; white-space:nowrap; }
.ptable__opt{ font-size:.8rem; color:var(--text-soft); }
.ptable__table tfoot tr{ border-top:2px solid var(--ink); background:var(--surface-2); }
.ptable__table tfoot td{ padding:14px 22px; font-weight:800; }
@media (max-width:560px){
  .ptable__head{ padding:14px 16px; }
  .ptable__table th, .ptable__table td{ padding:10px 14px; }
}
.qmsg{ display:none; padding:16px 18px; border-radius:var(--r); font-size:var(--fs-sm); }
.qmsg.show{ display:block; }
.qmsg--ok{ background:var(--accent-soft); color:var(--accent-d); }
.qmsg--err{ background:#fdecec; color:#b3261e; }
.qaside{ display:grid; gap:16px; align-content:start; position:sticky; top:96px; }
@media (max-width:900px){ .qaside{ position:static; } }
.qaside__card{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--bezel),var(--shadow-lg); }
.qaside__card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 100% 0%, rgba(11,165,250,.25), transparent 60%); }
.qaside__card h3{ position:relative; color:#fff; font-size:1.15rem; margin-bottom:16px; }
.qaside__list{ position:relative; display:grid; gap:13px; }
.qaside__list li{ display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-sm);
  color:rgba(255,255,255,.86); list-style:none; }
.qaside__list i{ color:var(--accent-l); font-size:18px; flex:none; margin-top:1px; }
.qcontact{ background:var(--surface); border-radius:var(--r-lg); padding:22px 26px; box-shadow:var(--bezel),var(--shadow-sm); }
.qcontact h3{ font-size:1.05rem; margin-bottom:8px; }
.qcontact a{ display:flex; gap:13px; align-items:center; padding:12px 0; color:var(--text-soft);
  font-size:var(--fs-sm); border-bottom:1px solid var(--border); transition:color .2s var(--ease); }
.qcontact a:last-child{ border-bottom:0; }
.qcontact a:hover{ color:var(--accent-d); }
.qcontact a i{ width:40px; height:40px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-d);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.qcontact a b{ color:var(--ink); display:block; font-weight:600; }