/* Shipping-line pages (/shipping-lines and /shipping-lines/<slug>) and the "From Vietnam" block of the port pages, on top of industry.css + port.css */

/* transit table */
.ln-tbl table{width:100%}
.ln-tbl tbody th{width:26%;color:var(--navy)}
.ln-tbl td small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--mute)}
.ln-days{font:600 1.15rem/1.2 var(--f-head);color:var(--red);white-space:nowrap}
.ln-chip{display:inline-block;margin:2px 4px 2px 0;padding:3px 10px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;transition:border-color .2s,color .2s}
a.ln-chip:hover{border-color:var(--red);color:var(--red)}
.ln-chip.is-soon{font-weight:500;color:var(--mute)}

/* hub: transit by Vietnamese port */
.ln-fac{display:flex;gap:12px;align-items:center;max-width:860px;margin:0 0 26px;padding:14px 18px;border-left:4px solid var(--gold);background:var(--ivory,#FBF7EE);border-radius:0 var(--r) var(--r) 0;font-size:15.5px;line-height:1.5;color:var(--navy)}
.ln-fac .ic{flex:none;width:26px;height:26px;color:var(--gold)}
.ln-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ln-matrix__grp h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 10px;font-size:1.25rem;color:var(--navy)}
.ln-matrix__grp h3 .ic{width:18px;height:18px;color:var(--red);align-self:center}
.ln-matrix__grp h3 small{font:500 13.5px/1 var(--f-body);color:var(--mute)}
.ln-matrix__grp .ln-tbl tbody th{display:none}
.ln-matrix__grp .ln-tbl thead th:first-child{display:none}

/* line page: lanes as a sea strip */
.ln-lanes{list-style:none;margin:0 0 clamp(34px,5vw,52px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ln-lane{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ln-lane__from,.ln-lane__to{display:flex;flex-direction:column;gap:3px;font:600 1.02rem/1.25 var(--f-head);color:var(--navy)}
.ln-lane__to{text-align:right}
a.ln-lane__to:hover{color:var(--red)}
.ln-lane small{font:600 11px/1 var(--f-body);letter-spacing:.12em;color:var(--mute)}
.ln-lane__from small{color:#1F5FAF}.ln-lane__to small{color:var(--red)}
.ln-lane__sea{position:relative;display:flex;flex-direction:column;align-items:center;min-width:96px;padding:0 6px;color:var(--navy)}
.ln-lane__sea:before{content:"";position:absolute;left:-6px;right:-6px;top:13px;border-top:2px dashed var(--steel,#B8C4D2);z-index:0}
.ln-lane__sea .ic{position:relative;z-index:1;width:28px;height:28px;padding:3px;background:#fff;color:var(--gold)}
.ln-lane__sea b{font:600 1.2rem/1.1 var(--f-head);color:var(--red);white-space:nowrap}
.ln-lane__sea small{letter-spacing:0;font-weight:500}

/* line page: services table with rotations */
.ln-svc__h{margin-bottom:14px}
.ln-svc__h h3{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0 0 6px}
.ln-svc tbody th{width:12%;white-space:nowrap;color:var(--navy)}
.ln-svc td b{color:var(--navy);font-weight:600}
.ln-svc td small{font-size:12.5px;color:var(--mute)}
.ln-rot{font-size:14px;line-height:1.9}
.ln-rot span{white-space:nowrap}
.ln-rot i{font-style:normal;margin:0 5px;color:var(--mute)}
.ln-rot .is-vn{padding:1px 7px;border-radius:5px;background:#E6EFFA;color:#1F5FAF;font-weight:600}
.ln-rot .is-th{padding:1px 7px;border-radius:5px;background:#FBE9EB;color:var(--red);font-weight:600}
.ln-key{list-style:none;display:flex;gap:18px;margin:10px 2px 0;padding:0;font-size:13px;color:var(--mute)}
.ln-key li{display:flex;align-items:center;gap:7px}
.ln-key i{display:inline-block;width:12px;height:12px;border-radius:3px}
.ln-key .is-vn{background:#1F5FAF}.ln-key .is-th{background:var(--red)}

/* Thai ports called */
.ln-ports__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ln-ch{grid-template-columns:repeat(2,1fr)}
.ln-note{max-width:900px;margin-top:22px}

/* hub: line cards */
.ln-hub__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ln-card{display:flex;flex-direction:column;gap:12px;padding:22px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:var(--r);box-shadow:var(--sh);color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
a.ln-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-top-color:var(--red)}
.ln-card.is-soon{border-top-color:var(--line)}
.ln-card__top{display:flex;gap:14px;align-items:center}
.ln-card__ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--navy);color:var(--gold-l)}
.ln-card__ic .ic{width:24px;height:24px}
.ln-card h3{margin:0;font-size:1.35rem}
.ln-card__top small{font-size:13px;color:var(--mute)}
.ln-card p{margin:0;font-size:15px;line-height:1.55}
.ln-card__legs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ln-card__legs li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.ln-card__legs b{font:600 1rem/1.3 var(--f-head);color:var(--red);white-space:nowrap}
.ln-card__legs .is-none span{color:var(--mute)}
.ln-card .more{margin-top:auto;font-size:14px}

/* hub: destination ports */
.ln-dest__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ln-dest__card{display:flex;gap:12px;align-items:center;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);color:inherit;transition:transform .2s,border-color .2s}
.ln-dest__card:hover{transform:translateY(-2px);border-color:var(--red)}
.ln-dest__card>.ic{flex:none;width:18px;height:18px;margin-left:auto;color:var(--red)}
.ln-dest__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#FBF3E2;color:var(--gold)}
.ln-dest__ic .ic{width:22px;height:22px}
.ln-dest__card h3{margin:0 0 3px;font-size:1.08rem}
.ln-dest__card p{margin:0;font-size:13px;line-height:1.4;color:var(--mute)}

/* port page: "From Vietnam" block */
.pt-vn__in{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,4vw,48px);align-items:start}
.pt-vn .ln-lanes{grid-template-columns:1fr;margin:0}
.pt-vn__lines{margin-top:16px}

@media (max-width:1100px){.ln-hub__grid,.ln-ports__grid{grid-template-columns:repeat(2,1fr)}.ln-dest__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.ln-matrix,.pt-vn__in{grid-template-columns:1fr}.ln-ch{grid-template-columns:1fr}}
@media (max-width:760px){
  .ln-hub__grid,.ln-ports__grid,.ln-dest__grid{grid-template-columns:1fr}
  .ln-lanes{grid-template-columns:1fr}
  .ln-lane{padding:14px}
  .ln-lane__sea{min-width:80px}
  .ln-svc table,.ln-svc tbody,.ln-svc tr,.ln-svc td,.ln-svc tbody th{display:block;width:auto}
  .ln-svc thead{display:none}
  .ln-svc tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .ln-svc td,.ln-svc tbody th{padding:3px 0;border:0}
  .ln-tbl table,.ln-tbl tbody,.ln-tbl tr,.ln-tbl td,.ln-tbl tbody th{display:block;width:auto}
  .ln-tbl thead{display:none}
  .ln-tbl tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .ln-tbl td,.ln-tbl tbody th{padding:3px 0;border:0}
}
.pt-which__ln{margin:20px 0 0}.pt-which__ln a{font-weight:600;color:var(--red);white-space:nowrap}.pt-which__ln a .ic{width:15px;height:15px;vertical-align:-2px}
@media (min-width:761px){
  .ln-svc table{table-layout:fixed}
  .ln-svc thead th:nth-child(1){width:11%}.ln-svc thead th:nth-child(2){width:45%}.ln-svc thead th:nth-child(3){width:28%}.ln-svc thead th:nth-child(4){width:16%}
  .ln-svc tbody th{width:auto;white-space:normal}
}
.ln-rot span{white-space:nowrap}
.ln-lane--chips{grid-template-rows:auto auto}
.ln-lane__lines{grid-column:1/-1;padding-top:10px;margin-top:4px;border-top:1px solid var(--line)}
.ln-lane__lines small{font-size:12.5px;line-height:1.45;color:var(--mute);letter-spacing:0;font-weight:400}
.pt-vn__lanes{grid-template-columns:repeat(3,1fr)!important}
.pt-vn--none{padding-block:clamp(40px,5vw,56px)}
@media (max-width:1100px){.pt-vn__lanes{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:760px){.pt-vn__lanes{grid-template-columns:1fr!important}}