/* shared-v2.css — Đợt G1 (07/10/2026). Nạp SAU shared.css, chỉ chứa phần ghi đè + khối mới.
   Trải ra trang khác: thêm 1 dòng <link rel="stylesheet" href="shared-v2.css"> ngay sau shared.css.
   Hướng: B2B xuất khẩu — nền trắng/xám xanh lạnh, xanh lá thương hiệu, xanh rừng đậm cho khối "việc mình gánh",
   vàng hổ phách (màu tem thùng) làm điểm nhấn số bước. Font giữ Inter như trang cũ. */

:root{
  --v2-ink:#15201a;
  --v2-ink-2:#3a4540;
  --v2-muted:#56615b;      /* 6.3:1 trên nền trắng */
  --v2-soft:#f1f4f2;
  --v2-line:#dbe2dd;
  --v2-green:#16723a;      /* chữ trắng trên nền này 6.0:1 */
  --v2-green-hover:#0f5c2e;
  --v2-deep:#0c3a20;
  --v2-on-deep:#e8f3ec;
  --v2-on-deep-2:#b9d6c4;  /* 8.2:1 trên --v2-deep */
  --v2-amber:#f2b33d;      /* chữ --v2-deep trên nền này 7:1 */
  --v2-radius:14px;
}

/* ---------- Đầu trang: bỏ khoảng trống 34px của thanh ngôn ngữ cũ (không trang nào còn dùng) ---------- */
nav{top:0;background:rgba(255,255,255,.92)}
.nav-links .nav-cta{background:var(--v2-green)}
.nav-links .nav-cta:hover{background:var(--v2-green-hover)}

/* ---------- Nút chính (chữ y hệt mọi chỗ: "Request a quote & samples") ---------- */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:12px;background:var(--v2-green);color:#fff!important;font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none!important;box-shadow:0 8px 22px rgba(22,114,58,.24);transition:background .2s ease,transform .2s ease}
.v2-btn:hover{background:var(--v2-green-hover);transform:translateY(-1px)}
.v2-btn:focus-visible,.v2-mbar-wa:focus-visible,.v2-proof-more:focus-visible{outline:3px solid var(--v2-amber);outline-offset:3px}
.v2-cta{margin-top:26px}
.v2-policy{margin:12px 0 0;max-width:54ch;padding-left:12px;border-left:3px solid var(--v2-amber);color:var(--v2-muted);font-size:13.5px;line-height:1.55}

/* ---------- Ảnh thật cạnh nút ---------- */
.v2-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;max-width:560px}
.v2-proof figure{position:relative;margin:0;overflow:hidden;border-radius:12px;background:var(--v2-soft);aspect-ratio:4/3}
.v2-proof img{width:100%;height:100%;object-fit:cover}
.v2-proof figcaption{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:4px 7px;border-radius:6px;background:rgba(12,58,32,.88);color:#fff;font-size:11px;font-weight:650;line-height:1.3}
.v2-proof-more{grid-column:1/-1;justify-self:start;color:var(--v2-green)!important;font-size:13.5px;font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* ---------- Màn đầu trang chủ ---------- */
.hero{min-height:0;padding:112px 0 56px;background:linear-gradient(180deg,var(--v2-soft) 0,#fff 78%)}
.hero-inner{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:52px;align-items:start}
.hero-content{display:flex;flex-direction:column}
.hero h1{font-size:clamp(40px,4.6vw,62px);line-height:1.02;letter-spacing:-.035em;margin:0 0 16px;color:var(--v2-ink)}
.hero-sub{margin:0;max-width:60ch;color:var(--v2-ink-2);font-size:clamp(17px,1.45vw,20px);line-height:1.5}
.hero .lang-switch{order:9;margin:22px 0 0;font-size:13px;padding:9px 12px}
.hero .trust-badges{margin-top:18px}
.hero .hero-btns{margin-top:12px}
.hero-btns .btn-primary,.hero-btns .btn-secondary{min-height:42px;padding:10px 16px;border:1px solid var(--v2-line);border-radius:10px;background:#fff;color:var(--v2-ink)!important;font-size:14px;font-weight:620}
.hero-visual-stack{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;min-height:0}
.hero-main-img{grid-column:1/-1;aspect-ratio:16/12;border-radius:20px}
.hero-proof-img{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:2;width:auto;margin:0;border-radius:14px}
.hero-proof-label{position:absolute;left:8px;bottom:8px;right:8px;width:auto;margin:0;padding:6px 9px;border-radius:8px;font-size:12px;line-height:1.35}
.hero-float-badge,.hero-moq-pill{position:static;grid-column:2;grid-row:2;width:auto;margin:0;border-radius:14px;background:#fff;padding:12px 14px}
.hero-float-badge{align-self:start;display:flex;flex-direction:column;gap:2px;font-weight:600}
.hero-float-badge strong{font-size:24px;letter-spacing:-.02em}
.hero-moq-pill{align-self:end;display:flex;align-items:baseline;gap:8px}
.hero-moq-pill strong{font-size:22px;letter-spacing:-.02em}
.hero-stat-strip{margin-top:40px;background:#fff;border-color:var(--v2-line)}
.hero-stat{background:var(--v2-soft)}
.hero-stat span{color:var(--v2-muted)}

/* ---------- Màn đầu trang FBA ---------- */
#pg{padding-top:82px}
#pg section.v2-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:48px;align-items:start}
.v2-hero-text{display:flex;flex-direction:column;min-width:0}
.v2-hero-text .lang-switch{order:9;margin:22px 0 0;font-size:13px;padding:9px 12px}
#pg .v2-hero .lead{margin-bottom:0}
#pg .v2-hero .kv{margin-top:26px}
.v2-hero-side{grid-template-columns:1fr 1fr;margin-top:44px;max-width:none}
.v2-hero-side figure{aspect-ratio:1/1}
.v2-hero-side figure:first-child{grid-column:1/-1;aspect-ratio:4/3}

/* ---------- Khối "How a first order works" ---------- */
.v2-steps{background:var(--v2-deep);color:var(--v2-on-deep);padding:76px 0}
.v2-steps .section-label{color:var(--v2-amber)}
.v2-steps h2,.v2-steps .section-title{color:#fff;margin:0}
.v2-steps-list{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin:34px 0 0;padding:0;list-style:none;counter-reset:v2s}
.v2-steps-list li,#pg .v2-steps-list li{position:relative;margin:0;padding-top:58px;counter-increment:v2s}
.v2-steps-list li::before{content:counter(v2s,decimal-leading-zero);position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--v2-amber);color:var(--v2-deep);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.v2-steps-list li::after{content:"";position:absolute;top:21px;left:52px;right:-12px;border-top:2px dashed rgba(242,179,61,.45)}
.v2-steps-list li:last-child::after{display:none}
.v2-steps-list b{display:block;margin-bottom:8px;color:#fff;font-size:17px;line-height:1.3}
.v2-steps-list span{display:block;color:var(--v2-on-deep-2);font-size:14.5px;line-height:1.6}
.v2-steps-cta{margin-top:38px}
.v2-steps .v2-btn,.v2-end .v2-btn,#pg .cta a.v2-btn{background:var(--v2-amber);color:var(--v2-deep)!important;box-shadow:none}
.v2-steps .v2-btn:hover,.v2-end .v2-btn:hover,#pg .cta a.v2-btn:hover{background:#ffc75a}
/* trang FBA có khối <style> riêng nạp SAU file này → chỗ nào trùng độ ưu tiên thì thêm main# để thắng */
/* trong trang bài viết FBA: khối nằm gọn trong cột, bo góc */
#pg section.v2-steps{margin:24px 0;padding:44px 36px;border-top:0;border-radius:20px}
#pg section.v2-steps + section{border-top:0}
#pg .v2-steps h2{max-width:none}
#pg .v2-steps-list{max-width:none;padding-left:0;line-height:1.6}

/* ---------- Lời mời cuối trang ---------- */
.v2-end{padding:64px 0;background:var(--v2-deep);color:#fff}
.v2-end h2{max-width:26ch;margin:0 0 24px;color:#fff;font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.02em}
.v2-end-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.v2-moq{margin:0!important;color:#fff;font-size:15px;font-weight:650}
.v2-end .v2-policy,#pg .cta .v2-policy{margin:18px 0 0;color:var(--v2-on-deep-2)}
main#pg .cta{background:var(--v2-deep);text-align:left;padding:40px 36px;border-radius:20px}
main#pg .cta h2{margin:0}
main#pg .cta p{margin:10px 0 22px}
#pg .cta a.v2-btn{padding:14px 26px;border-radius:12px;font-weight:700}
#pg .cta > a:not(.v2-btn){display:inline-block;margin-top:18px;padding:0;background:none;color:#fff;border-radius:0;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Tương phản (chuẩn ≥ 4.5:1) ---------- */
footer a{color:rgba(255,255,255,.84)}
footer a:hover{color:#fff}
.footer-bottom{color:rgba(255,255,255,.7)}
.footer-bottom a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.proof-section .section-label{color:#7fd0a0}
.proof-section .cert-card{background:#1b201d;border-color:rgba(255,255,255,.12)}
.proof-section .cert-card h4{color:#fff}
.proof-section .cert-card p,.proof-section .cert-card strong{color:rgba(255,255,255,.8)}
.related-section p[style]{opacity:1!important;color:var(--v2-ink-2)}
.wa-float a{background:var(--v2-green)}

/* ---------- Thanh nút dính đáy (chỉ điện thoại) ---------- */
.v2-mbar{display:none}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero-visual-stack{grid-template-columns:1.35fr 1fr}
  .hero-main-img{aspect-ratio:16/10}
  #pg section.v2-hero{grid-template-columns:1fr;gap:0}
  .v2-hero-side{grid-template-columns:repeat(3,1fr);margin-top:22px}
  .v2-hero-side figure,.v2-hero-side figure:first-child{grid-column:auto;aspect-ratio:1/1}
  .v2-steps-list{grid-template-columns:1fr;gap:0}
  .v2-steps-list li{padding:0 0 26px 60px}
  .v2-steps-list li:last-child{padding-bottom:0}
  .v2-steps-list li::after{top:46px;bottom:4px;left:20px;right:auto;border-top:0;border-left:2px dashed rgba(242,179,61,.45)}
  .v2-steps-list b{padding-top:9px}
}

@media (max-width:640px){
  .hero{padding:88px 0 40px}
  #pg{padding-top:64px}
  .hero h1{font-size:36px}
  .hero-sub{font-size:17px}
  .v2-cta{margin-top:20px}
  .v2-cta .v2-btn,.v2-steps-cta .v2-btn{width:100%}
  .v2-proof{gap:8px;margin-top:18px}
  .v2-proof figcaption{left:4px;bottom:4px;max-width:calc(100% - 8px);padding:3px 5px;font-size:10.5px}
  .hero-visual-stack{grid-template-columns:1fr 1fr}
  .hero-proof-img{grid-column:1/-1}
  .hero-float-badge,.hero-moq-pill{grid-row:3;align-self:stretch;justify-content:center}
  .hero-float-badge{grid-column:1}
  .hero-moq-pill{grid-column:2;align-items:center}
  .hero-stat-strip{grid-template-columns:repeat(2,1fr);padding:10px;gap:10px}
  .hero-stat{padding:12px}
  .hero-stat strong{font-size:24px}
  .v2-steps{padding:52px 0}
  #pg section.v2-steps{margin:16px 0;padding:32px 20px;border-radius:16px}
  .v2-end{padding:48px 0}
  main#pg .cta{padding:30px 20px}
  .v2-end-row .v2-btn{width:100%}
  .v2-mbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--v2-line);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
  .v2-mbar .v2-btn{flex:1;min-height:48px;padding:10px 12px;font-size:15px;box-shadow:none}
  .v2-mbar-wa{display:inline-flex;flex:0 0 auto;align-items:center;min-height:48px;padding:0 16px;border:1.5px solid var(--v2-green);border-radius:12px;background:#fff;color:var(--v2-green)!important;font-size:15px;font-weight:700}
  .wa-float{display:none}
  body{padding-bottom:76px}
}
.v2-hero-side figure:nth-child(2) img{object-position:50% 100%}

/* Thanh đáy: chỉ hiện khi đã cuộn qua nút chính màn đầu (lớp v2-an do đoạn mã cuối trang gắn) */
@media (max-width:640px){.v2-mbar{transition:transform .25s ease,visibility .25s}.v2-mbar.v2-an{transform:translateY(110%);visibility:hidden}}
@media (prefers-reduced-motion:reduce){.v2-mbar{transition:none}}

/* ---------- Đợt 2 việc 8: khối "Buyer guides" trang chủ (8 thẻ link) ---------- */
.v2-guides{padding:72px 0;background:var(--v2-soft)}
.v2-guides .section-title{margin:0}
.v2-guides-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.v2-guides-grid a{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;background:#fff;border:1px solid var(--v2-line);border-radius:var(--v2-radius);color:var(--v2-ink);text-decoration:none;transition:border-color .2s,transform .2s}
.v2-guides-grid a:hover{border-color:var(--v2-green);transform:translateY(-2px)}
.v2-guides-grid a:focus-visible{outline:3px solid var(--v2-amber);outline-offset:2px}
.v2-guides-grid b{color:var(--v2-green);font-size:16px;line-height:1.3}
.v2-guides-grid span{color:var(--v2-ink-2);font-size:14px;line-height:1.55}
@media (max-width:980px){.v2-guides-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.v2-guides{padding:48px 0}.v2-guides-grid{grid-template-columns:1fr;gap:10px}}

/* ---------- Đợt 2 việc 9: khối "The short answer" ngay dưới H1 ở 7 trang hướng dẫn (chữ là câu sẵn có của trang) ---------- */
.v2-short{border-left-color:var(--v2-green)!important}
#pg .v2-short h3,.v2-short h3.v2-short-label{margin:0 0 8px;font-size:12.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--v2-green)}

/* ---------- Gói sửa nhỏ việc 1 (07/10): bảng trên điện thoại ----------
   Bảng trong trang đặt min-width 520–600px nên ở 390px bị cắt cạnh phải, phải vuốt ngang mới đọc hết (vd trang Đức Großhandel).
   Bảng ≤ 3 cột: bỏ min-width và trả về display:table (shared.css đổi bảng thành block ở màn hẹp → hàng không giãn hết khung) để vừa khung, chữ tự xuống dòng (gỡ nowrap của tiêu đề/cột đầu, lề ô hẹp lại, ngắt âm tiết theo lang của trang — từ ghép tiếng Đức cần cái này mới vừa).
   Bảng ≥ 4 cột giữ nguyên kiểu cũ (vuốt ngang trong khung bảng) — ép 4–6 cột vào 346px thì chữ vụn hơn. Không đổi chữ. */
@media (max-width:640px){
  body .tbl-wrap table:not(:has(tr>:nth-child(4))),body #pg table:not(:has(tr>:nth-child(4))),body #spec table:not(:has(tr>:nth-child(4))){display:table;min-width:0}
  body .tbl-wrap table:not(:has(tr>:nth-child(4))) :is(td,th),body #pg table:not(:has(tr>:nth-child(4))) :is(td,th),body #spec table:not(:has(tr>:nth-child(4))) :is(td,th){padding-left:6px;padding-right:6px;white-space:normal;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ---------- Gói sửa nhỏ việc 2 (07/10): khối "Direct Connections" trang contact ----------
   .cinfo-item không có dòng CSS nào (cả shared.css lẫn trang) → biểu tượng là div khối, đứng một dòng riêng.
   Nắn: biểu tượng bên trái, nhãn + nội dung bên phải. Áp mọi khổ màn (máy tính cũng bị y vậy). */
.cinfo-item{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px}
.cinfo-icon{flex:0 0 28px;font-size:20px;line-height:1.4;text-align:center}
.cinfo-text{min-width:0;line-height:1.5;overflow-wrap:anywhere}
.cinfo-text strong{display:block}

/* ---------- Việc tồn 08/10: hàng nút "Quick Connect" trang contact ----------
   .quick-channels / .channel-btn không có dòng CSS nào → 4 link dính liền một dòng, trông như chữ thường.
   Nắn: mỗi kênh một nút viền, xếp dọc, vùng bấm ≥ 44px cho điện thoại; số WhatsApp/email dài thì tự xuống dòng. */
.quick-channels{display:flex;flex-direction:column;gap:10px;margin:8px 0 0}
.channel-btn{display:flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--v2-line);border-radius:10px;background:#fff;color:var(--v2-ink)!important;font-weight:600;line-height:1.35;text-decoration:none!important;overflow-wrap:anywhere;transition:border-color .2s ease,background .2s ease}
.channel-btn:hover{border-color:var(--v2-green);background:var(--v2-soft)}
.channel-btn:focus-visible{outline:3px solid var(--v2-amber);outline-offset:2px}
.channel-wa{border-color:var(--v2-green)}