/* ============================================================================
   import-hub.css — หน้า "นำเข้าสินค้า" (ptcargo-shipping.html)
   ----------------------------------------------------------------------------
   ยึดโทเคนกลางจาก shared/css/tokens.css และกล่องสถานะกลาง .ptstate จาก components.css
   ความกว้างคอลัมน์เนื้อหาไม่กำหนดเองที่นี่ — ใช้ --pt-content-max ที่ประกาศใน appshell.css
   เพื่อให้กรอบตรงกับทุกหน้าในระบบ
   ========================================================================== */

body{
  margin:0;
  background:var(--bg,#F3F6FB);
  color:var(--ink,#1E2A44);
  font-family:var(--fb,'Prompt',sans-serif);
  line-height:1.5;
}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}

main.page{padding:16px 16px 40px}

@media (min-width:768px){
  body.ptshell main.page{
    max-width:var(--pt-content-max);
    margin-inline:auto;
    padding:8px 24px 48px;
  }
}

/* ── หัวเรื่อง ── */
.ih-head{margin:6px 2px 18px}
.ih-head h1{
  font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:23px;
  margin:0;color:var(--ink,#1E2A44);
}
.ih-sub{margin:4px 0 0;font-size:13.5px;color:var(--ink-2,#5A6782)}

/* ── ส่วนย่อย ── */
.ih-sec{margin:0 0 26px}
.ih-h{
  font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:16px;
  margin:0 2px 11px;color:var(--ink,#1E2A44);
}
.ih-note{margin:9px 2px 0;font-size:12.5px;color:var(--muted,#5F7091);line-height:1.6}

/* ── สถานะ 3 ช่วง ── */
.ih-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){ .ih-stages{grid-template-columns:1fr} }

.ih-stage{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:16px;border-radius:16px;
  background:var(--paper,#fff);border:1px solid var(--line,#E7ECF3);
  transition:border-color .15s, transform .15s;
}
.ih-stage:hover{border-color:var(--sun,#FF7A1A);transform:translateY(-1px)}
.ih-stage-ic{
  width:40px;height:40px;border-radius:12px;margin-bottom:8px;
  display:grid;place-items:center;
}
/* ไอคอนมีสีในตัว (ใส่ fill มาเอง) — ห้ามบังคับ fill:none ทับ ไม่งั้นสีหายหมด */
.ih-stage-ic svg{width:22px;height:22px;display:block}
.ih-stage-ic.ic-cn{background:#FCF1DC}
.ih-stage-ic.ic-tr{background:#FFECE0}
.ih-stage-ic.ic-th{background:#E6F6EE}
.ih-stage-n{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;font-size:26px;
  line-height:1.15;color:var(--ink,#1E2A44);
}
.ih-stage-l{font-size:12.5px;color:var(--ink-2,#5A6782)}

/* ── สองคอลัมน์ (บิล) ── */
.ih-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){ .ih-cols{grid-template-columns:1fr} }
.ih-col{
  background:var(--paper,#fff);border:1px solid var(--line,#E7ECF3);
  border-radius:16px;padding:14px;
}
.ih-col-h{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:13.5px;
}
.ih-cnt{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;font-size:12px;
  padding:2px 9px;border-radius:20px;
  background:var(--cream-2,#F4F5F7);color:var(--ink-2,#5A6782);
}

/* กล่องสถานะที่วางอยู่ในคอลัมน์ — ไม่ต้องมีกรอบซ้อนกรอบ */
.ih-col .ptstate{border:none;padding:22px 12px;margin:0;background:transparent}
.ih-col .ptstate-ic{width:46px;height:46px;border-radius:14px;margin-bottom:8px}
.ih-col .ptstate-ic svg{width:22px;height:22px}
.ih-col .ptstate-t{font-size:14px}

/* ── รายการบิล ── */
.ih-row{
  display:flex;align-items:center;gap:10px;padding:10px 4px;
  border-bottom:1px dashed var(--line,#E7ECF3);
}
.ih-row:last-child{border-bottom:none}
.ih-row-m{flex:1;min-width:0}
.ih-row-n{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:600;font-size:13px;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ih-row-s{font-size:11.5px;color:var(--muted,#5F7091)}
.ih-row-v{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;font-size:13.5px;
  flex:none;color:var(--ink,#1E2A44);
}

/* ── สถิติ ── */
.ih-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){ .ih-stats{grid-template-columns:1fr} }
.ih-stat{
  background:var(--paper,#fff);border:1px solid var(--line,#E7ECF3);
  border-radius:16px;padding:15px 16px;
}
.ih-stat-v{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;font-size:21px;
  color:var(--ink,#1E2A44);line-height:1.2;
}
.ih-stat-l{font-size:12px;color:var(--ink-2,#5A6782);margin-top:2px}

/* ── เครื่องมือ ── */
.ih-tool{
  background:var(--paper,#fff);border:1px solid var(--line,#E7ECF3);
  border-radius:16px;padding:15px;margin-bottom:12px;
}
.ih-tool-l{
  display:block;margin-bottom:8px;
  font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:13.5px;
}
.ih-tool-row{display:flex;gap:9px}
.ih-tool-row input{
  flex:1;min-width:0;min-height:44px;padding:0 13px;
  border:1.5px solid var(--line,#E7ECF3);border-radius:12px;
  font-family:var(--fn,'Space Grotesk',sans-serif);font-size:14px;
  background:var(--bg,#F3F6FB);color:var(--ink,#1E2A44);outline:none;
}
.ih-tool-row input:focus{border-color:var(--sun,#FF7A1A);background:var(--paper,#fff)}
.ih-tool-row .ptstate-btn{margin-top:0;flex:none}

/* ── ลิงก์รวม ── */
.ih-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){ .ih-links{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .ih-links{grid-template-columns:1fr} }
.ih-link{
  display:flex;flex-direction:column;gap:3px;padding:14px 15px;border-radius:14px;
  background:var(--paper,#fff);border:1px solid var(--line,#E7ECF3);
  transition:border-color .15s, transform .15s;
}
.ih-link:hover{border-color:var(--sun,#FF7A1A);transform:translateY(-1px)}
.ih-link-t{font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:14px}
.ih-link-d{font-size:12px;color:var(--ink-2,#5A6782);line-height:1.6}

/* ── ช่องรูปหัวเรื่อง + ไอคอนสีของลิงก์ ─────────────────────────────────
   ช่องรูปหัวเรื่องแอดมินตั้งได้ (.ph[data-slot]) และจะไม่กินที่เลยจนกว่าจะมีรูปจริง */
.ih-art:not(.has-img){display:none}
.ih-head{
  display:flex;align-items:center;gap:22px;
  margin:6px 2px 20px;
}
.ih-head-tx{flex:1;min-width:0}
.ih-art{
  flex:none;width:min(46%,420px);border-radius:18px;overflow:hidden;
  background:var(--color-surface-2,#FFF8F2);line-height:0;
}
.ih-art img{width:100%;height:auto;display:block}
.ih-art.has-img img{aspect-ratio:3/1;object-fit:cover}

/* จอแคบ: ภาพลงมาอยู่ใต้หัวเรื่อง ไม่เบียดข้อความ */
@media (max-width:860px){
  .ih-head{flex-direction:column;align-items:stretch;gap:14px}
  .ih-art{width:100%}
}

.ih-link{flex-direction:row;align-items:flex-start;gap:12px}
.ih-link-ic{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
}
.ih-link-ic svg{width:22px;height:22px;display:block}
.ih-link-ic.c-orange{background:#FFECE0}
.ih-link-ic.c-amber {background:#FCF1DC}
.ih-link-ic.c-clay  {background:#FBEEE2}
.ih-link-ic.c-green {background:#E6F6EE}
.ih-link-ic.c-danger{background:#FDECEA}
.ih-link-tx{display:flex;flex-direction:column;gap:3px;min-width:0}