/**
 * CSS riêng cho 2 nhóm Landing Page mới: "Trang tỉnh" (spoke) và "Trang KCN".
 * Trang Hub dùng thẳng class .tpc-* có sẵn trong theme (main.css), không
 * cần file này.
 *
 * Chủ động KHÔNG định nghĩa lại --tpc-blue-*/--tpc-red-*/... vì các biến đó
 * đã có sẵn ở :root của theme (main.css, nhúng inline toàn site) — file này
 * chỉ dùng lại (var(--tpc-...)) để 3 nhóm trang luôn cùng 1 bộ màu thương
 * hiệu, chỉ khác cách phối.
 *
 * File này cũng được nạp làm editor_style cho toàn bộ block Landing Page
 * (kể cả nhóm Hub) — vì bên trong khung soạn thảo Block Editor, main.css
 * của theme KHÔNG được nạp, nên .tpc-container (định nghĩa gốc trong
 * main.css) cần có bản dự phòng dưới đây để khung nội dung không tràn hết
 * chiều rộng màn hình khi đang chỉnh sửa.
 */

.tpc-container{max-width:1240px;margin:0 auto;padding:0 20px;box-sizing:border-box}

/* ============================================================
   NHÓM 2 — Trang tỉnh (spoke): "cẩm nang khu vực", tông xanh biên tập
   ============================================================ */
.tpc-spoke-hero{padding:44px 0 8px;background:linear-gradient(180deg,var(--tpc-blue-100) 0%,var(--tpc-surface) 82%);border-bottom:1px solid var(--tpc-line)}
.tpc-spoke-hero__in{max-width:900px}
.tpc-spoke-pin{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-heading);font-weight:800;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--tpc-blue-700);background:#fff;border:1px solid var(--tpc-blue-100);padding:7px 14px 7px 10px;border-radius:999px;box-shadow:var(--tpc-shadow-sm);margin-bottom:18px}
.tpc-spoke-pin svg{width:14px;height:14px;flex:none}
.tpc-spoke-hero h1{font-size:clamp(24px,3.6vw,36px);max-width:22ch}
.tpc-spoke-lead{font-size:16.5px;color:var(--tpc-ink-700);max-width:66ch;line-height:1.75}
.tpc-spoke-lead::first-letter{font-family:var(--ff-heading);font-size:2.6em;font-weight:800;color:var(--tpc-blue-700);float:left;line-height:.8;padding-right:8px;padding-top:4px}

.tpc-spoke-stats{margin:26px 0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px}
.tpc-spoke-stat{background:#fff;border:1px solid var(--tpc-line);border-radius:16px;padding:16px;box-shadow:var(--tpc-shadow-sm)}
.tpc-spoke-stat svg{width:20px;height:20px;color:var(--tpc-blue-600);margin-bottom:8px;flex:none}
.tpc-spoke-stat strong{display:block;font-family:var(--ff-heading);font-size:17px;color:var(--tpc-ink-900);line-height:1.25}
.tpc-spoke-stat span{font-size:11.5px;color:var(--tpc-ink-500)}
@media (max-width:600px){.tpc-spoke-stats{grid-template-columns:1fr 1fr}}

.tpc-spoke-services{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin:22px 0 36px}
@media (max-width:760px){.tpc-spoke-services{grid-template-columns:1fr}}
.tpc-spoke-card{border:1px solid var(--tpc-line);border-radius:18px;padding:22px;background:var(--tpc-surface-alt);transition:transform .25s var(--tpc-ease),box-shadow .25s var(--tpc-ease),background .25s}
.tpc-spoke-card:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--tpc-shadow-md)}
.tpc-spoke-card__ic{width:42px;height:42px;border-radius:12px;background:var(--tpc-blue-600);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tpc-spoke-card__ic svg{width:22px;height:22px}
.tpc-spoke-card h3{font-family:var(--ff-heading);font-size:15.5px;margin:0 0 6px}
.tpc-spoke-card p{font-size:13.5px;color:var(--tpc-ink-500);margin:0 0 12px;line-height:1.6}
.tpc-spoke-card a{font-size:12.5px;font-weight:700;color:var(--tpc-blue-700);display:inline-flex;align-items:center;gap:5px}
.tpc-spoke-card a:hover{text-decoration:underline}

.tpc-spoke-quote{border-left:4px solid var(--tpc-blue-600);padding:4px 0 4px 22px;margin:36px 0}
.tpc-spoke-quote p{font-family:var(--ff-heading);font-weight:700;font-size:clamp(18px,2.4vw,22px);color:var(--tpc-ink-900);margin:0;line-height:1.42}
.tpc-spoke-quote cite{display:block;margin-top:10px;font-family:var(--ff-body);font-weight:500;font-style:normal;font-size:13.5px;color:var(--tpc-ink-500)}

/* Bảng giá / bảng tính riêng cho trang tỉnh dùng tông xanh (thay vì đỏ của Hub) */
.tpc-theme-blue .tpc-price-table thead tr,
.tpc-theme-blue .tpc-price-table th{background:var(--tpc-blue-900);color:#fff}
.tpc-theme-blue .tpc-price-tag{color:var(--tpc-blue-700)}
.tpc-theme-blue .tpc-eyebrow{color:var(--tpc-blue-600)}
.tpc-theme-blue .tpc-eyebrow::before{background:var(--tpc-blue-600)}

/* ============================================================
   NHÓM 3 — Trang KCN: "bảng dữ kiện nhanh", tông vàng-mực, dạng directory
   ============================================================ */
.tpc-kcn-top{background:var(--tpc-ink-900);padding:20px 0;color:#fff}
.tpc-kcn-top__in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tpc-kcn-top__id{display:flex;align-items:center;gap:12px}
.tpc-kcn-top__mark{width:40px;height:40px;border-radius:10px;background:var(--tpc-amber-500);display:flex;align-items:center;justify-content:center;font-family:var(--ff-heading);font-weight:900;color:var(--tpc-ink-900);font-size:14px;flex:none}
.tpc-kcn-top__id h2{color:#fff;font-size:16px;margin:0}
.tpc-kcn-top__id small{color:rgba(255,255,255,.6);font-size:12px}
.tpc-kcn-top__chip{font-size:11.5px;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;white-space:nowrap}

.tpc-kcn-hero{padding:30px 0 6px}
.tpc-kcn-hero h1{font-size:clamp(21px,2.8vw,28px);max-width:28ch;margin-bottom:10px}
.tpc-kcn-hero p{color:var(--tpc-ink-500);font-size:14.5px;max-width:72ch;line-height:1.7}

/* Mỗi khối (facts / cta / calculator) là 1 block độc lập, xếp dọc theo
   đúng thứ tự admin sắp trong Block Editor — đơn giản, chắc chắn responsive
   ở mọi độ rộng, không phụ thuộc block nào phải luôn đứng cạnh block nào. */
.tpc-kcn-facts-wrap,.tpc-kcn-cta-wrap{padding:10px 0}

.tpc-kcn-fact{background:#fff;border:1px solid var(--tpc-line);border-radius:16px;overflow:hidden;max-width:640px}
.tpc-kcn-fact__head{background:var(--tpc-amber-100,#fff2df);color:var(--tpc-amber-600,#c47a00);font-family:var(--ff-heading);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:12px 18px}
.tpc-kcn-fact dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.tpc-kcn-fact dt{padding:13px 18px;font-size:13px;color:var(--tpc-ink-500);border-top:1px solid var(--tpc-line);white-space:nowrap}
.tpc-kcn-fact dd{padding:13px 18px;font-size:13.5px;font-weight:600;color:var(--tpc-ink-900);border-top:1px solid var(--tpc-line);margin:0;text-align:right}
.tpc-kcn-fact dt:first-of-type,.tpc-kcn-fact dd:first-of-type{border-top:none}

.tpc-kcn-cta{background:var(--tpc-amber-500);border-radius:16px;padding:20px 24px;color:var(--tpc-ink-900);max-width:640px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tpc-kcn-cta__body{flex:1;min-width:180px}
.tpc-kcn-cta strong{display:block;font-family:var(--ff-heading);font-size:14.5px;margin-bottom:4px}
.tpc-kcn-cta span{font-size:12.5px}
.tpc-kcn-cta a{display:inline-flex;align-items:center;gap:6px;background:var(--tpc-ink-900);color:#fff;font-weight:800;font-size:13px;padding:10px 18px;border-radius:999px;white-space:nowrap;transition:transform .2s}
.tpc-kcn-cta a:hover{transform:translateY(-2px)}

.tpc-kcn-nearby{padding:0 0 40px}
.tpc-kcn-nearby h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tpc-ink-500);font-weight:700;margin-bottom:12px;font-family:var(--ff-heading)}
.tpc-kcn-nearby__row{display:flex;flex-wrap:wrap;gap:8px}
.tpc-kcn-nearby__row a{font-size:12.5px;font-weight:600;background:var(--tpc-surface-alt);border:1px solid var(--tpc-line);padding:8px 14px;border-radius:999px;transition:background .2s,transform .2s}
.tpc-kcn-nearby__row a:hover{background:var(--tpc-amber-100,#fff2df);transform:translateY(-2px)}

/* Bảng giá / eyebrow riêng cho trang KCN dùng tông vàng */
.tpc-theme-amber .tpc-eyebrow{color:var(--tpc-amber-600,#c47a00)}
.tpc-theme-amber .tpc-eyebrow::before{background:var(--tpc-amber-500)}
.tpc-theme-amber .tpc-price-tag{color:var(--tpc-amber-600,#c47a00)}