/* =============================================================
   Protrans v2 · PARTNERSHIP - salespage hợp tác Trưởng phòng XNK
   Ngôn ngữ "poster band" học kỹ thuật Base.vn, chạy trên brand lock
   navy #0D1B4B + sky #0BA5FA (gradient trùng gradient logo).
   Chỉ style riêng của partnership.html. Token lấy từ tokens.css.
   ============================================================= */

/* Anchor: cuộn mượt (tôn trọng reduced-motion) + chừa chỗ cho nav fixed */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
section[id]{ scroll-margin-top:84px; }

/* Scroll-spy: anchor đang xem tô như aria-current của site */
.nav__links a.active{ color:#fff; background:rgba(255,255,255,.12); font-weight:600; }
.nav.scrolled .nav__links a.active{ color:var(--ink); background:var(--surface-2); }

/* =============================================================
   1. BAND SYSTEM - mỗi section là một dải màu poster
   Dùng kèm .surface-ink (base.css) cho band tối để ăn hệ chữ on-dark.
   ============================================================= */
.band--ice{ position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 30%, var(--accent-soft) 160%); }
.band--deep{ background:
  radial-gradient(860px 480px at 82% -6%, rgba(11,165,250,.26), transparent 62%),
  radial-gradient(700px 520px at 4% 106%, rgba(30,46,115,.85), transparent 64%),
  linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 58%, #0A1232 100%); }
.band--photo{ position:relative; }
.band--photo > .container{ position:relative; z-index:2; }
.band--photo::before{ content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; }
.band--photo::after{ content:""; position:absolute; inset:0; z-index:1; background:
  linear-gradient(100deg, rgba(13,27,75,.96) 0%, rgba(13,27,75,.88) 46%, rgba(13,27,75,.74) 100%); }
.band--photo--port::before{ background-image:url("../img/stock-port-hero.web.jpg"); }
.band--photo--night::before{ background-image:url("../img/cta-containers-night.web.jpg"); }

/* Poster head: heading to, căn giữa, kicker sky */
.phead{ text-align:center; max-width:820px; margin:0 auto clamp(40px,5vw,64px); }
.phead .kick{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-d); }
.surface-ink .phead .kick{ color:var(--accent-l); }
.phead h2{ font-size:clamp(1.9rem,3.3vw,2.85rem); line-height:1.16; letter-spacing:-.02em; text-wrap:balance; }
.phead h2 em{ font-style:normal; color:var(--accent-d); }
.surface-ink .phead h2 em{ color:var(--accent-l); text-shadow:0 6px 34px rgba(11,165,250,.5); }
.phead p{ margin-top:14px; font-size:var(--fs-lead); color:var(--text-soft); margin-inline:auto; max-width:62ch; }
.surface-ink .phead p{ color:var(--on-dark-soft); }
.phead--left{ text-align:left; margin-inline:0; }
.phead--left p{ margin-inline:0; }

/* =============================================================
   2. SEAL BULLET - icon tem tròn gradient + dòng dẫn đậm
   ============================================================= */
.seal{ display:grid; gap:18px; }
.seal li{ display:grid; grid-template-columns:30px 1fr; gap:13px; align-items:start; }
.seal li > i{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent-d), var(--accent-l)); color:#fff; font-size:16px;
  box-shadow:0 5px 12px -4px rgba(11,165,250,.6); margin-top:1px; }
.seal b{ display:block; font-weight:700; color:var(--ink); margin-bottom:3px; }
.seal .lead-sky b, .seal b.sky{ color:var(--accent-d); }
.seal span{ display:block; color:var(--text-soft); font-size:var(--fs-sm); line-height:1.65; }
.surface-ink .seal b{ color:#fff; }
.surface-ink .seal b.sky{ color:var(--accent-l); }
.surface-ink .seal span{ color:var(--on-dark-soft); }
/* biến thể trừ (mô hình cũ) */
.seal li > i.neg{ background:var(--surface-2); color:var(--text-mute); box-shadow:none; }
.surface-ink .seal li > i.neg{ background:rgba(255,255,255,.12); color:var(--on-dark-mute); }

/* =============================================================
   3. STAGE + GLOW - sân khấu cho visual sản phẩm
   ============================================================= */
.stage{ position:relative; }
.stage::before{ content:""; position:absolute; inset:8% -3%; z-index:0; border-radius:48px;
  transform:rotate(-7deg);
  background:linear-gradient(135deg, rgba(11,165,250,.30), rgba(30,46,115,.4)); }
.stage::after{ content:""; position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(11,165,250,.22), transparent 72%); }
.stage > *{ position:relative; z-index:1; }
/* hạt vuông bay trang trí (tắt khi reduced-motion) */
.stage .bit{ position:absolute; z-index:2; width:12px; height:12px; border-radius:3px;
  background:linear-gradient(135deg, var(--accent-l), var(--accent-d)); opacity:.85;
  animation:bitfloat 6s ease-in-out infinite alternate; }
.stage .bit--2{ width:8px; height:8px; animation-duration:7.5s; }
.stage .bit--3{ width:16px; height:16px; opacity:.5; animation-duration:9s; }
@keyframes bitfloat{ from{ transform:translateY(-6px) rotate(8deg); } to{ transform:translateY(10px) rotate(-6deg); } }
@media (prefers-reduced-motion:reduce){ .stage .bit{ animation:none; } }

/* Viền sáng kiểu "màn hình phát sáng" */
.glowbox{ border:1px solid rgba(92,194,247,.55); border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(11,165,250,.14), 0 18px 50px -18px rgba(11,165,250,.45),
             0 30px 70px -30px rgba(6,12,38,.7); }

/* =============================================================
   4. MOCK UI KIT - khung browser + phone + ruột số liệu
   ============================================================= */
/* Khung browser */
.mkb{ background:var(--surface); border-radius:var(--r); overflow:hidden; }
.mkb__bar{ display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--surface-2); border-bottom:1px solid var(--border-soft); }
.mkb__dots{ display:flex; gap:5px; }
.mkb__dots i{ width:9px; height:9px; border-radius:50%; background:rgba(13,27,75,.16); }
.mkb__url{ display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:600;
  color:var(--text-mute); background:var(--surface); border-radius:var(--r-pill); padding:4px 14px; }
.mkb__url i{ color:var(--accent-d); }
.mkb__body{ padding:16px 18px 18px; }

/* Khung phone */
.mkp{ width:min(240px,64vw); background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); }
.mkp__notch{ height:22px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border-bottom:1px solid var(--border-soft); }
.mkp__notch::before{ content:""; width:56px; height:7px; border-radius:var(--r-pill); background:rgba(13,27,75,.16); }
.mkp__body{ padding:14px; }

/* KPI chip */
.kpis{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.kpi{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; color:var(--accent-d); background:var(--accent-soft);
  font-variant-numeric:tabular-nums; }
.kpi i{ font-size:1.15em; }

/* Bảng số trong mock: cuộn ngang trong khung, body trang không bao giờ cuộn ngang */
.mscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.mtable{ width:100%; min-width:430px; border-collapse:collapse; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.mtable td:first-child{ white-space:nowrap; }
/* Mobile: rút tuyến về mã cảng để đủ 4 cột, cột chênh lệch không bị đẩy khuất */
.mtable .narrow{ display:none; }
@media (max-width:560px){
  .mtable{ min-width:0; font-size:.7rem; }
  .mtable th, .mtable td{ padding:8px 6px; }
  .mtable .wide{ display:none; }
  .mtable .narrow{ display:inline; }
}
.mtable th{ text-align:left; padding:8px 10px; font-weight:600; color:var(--text-mute);
  background:var(--surface-2); }
.mtable th.num, .mtable td.num{ text-align:right; white-space:nowrap; }
.mtable td{ padding:9px 10px; color:var(--ink); }
.mtable tbody tr + tr{ border-top:1px solid var(--border-soft); }
.mtable td.gap{ font-weight:800; color:var(--accent-d); text-align:right; white-space:nowrap; }

/* Bar chart mini: cặp cột cũ (mute) vs mới (accent) */
.mchart{ display:flex; align-items:flex-end; gap:14px; height:110px; padding:6px 4px 0; }
.mchart__g{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:5px; height:100%; position:relative; }
.mchart__g i{ display:block; width:14px; border-radius:4px 4px 2px 2px; height:var(--h,60%); }
.mchart__g i.old{ background:var(--surface-2); border:1px solid var(--border); }
.mchart__g i.new{ background:linear-gradient(180deg, var(--accent-l), var(--accent-d)); }
.mchart__lb{ display:flex; gap:14px; padding:8px 4px 0; }
.mchart__lb small{ flex:1; text-align:center; font-size:.66rem; color:var(--text-mute); white-space:nowrap; }

/* Timeline tracking (rút từ .hwid của hero index) */
.mtrack__route{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:var(--fs-sm); color:var(--ink); }
.mtrack__route i{ color:var(--accent-d); }
.mtrack__line{ position:relative; height:3px; border-radius:3px; background:var(--surface-2); margin:18px 6px 10px; }
.mtrack__prog{ position:absolute; inset:0 34% 0 0; border-radius:3px;
  background:linear-gradient(90deg, var(--accent-d), var(--accent-l)); }
.mtrack__pip{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
  transform:translate(-50%,-50%); background:#fff; border:2px solid var(--accent); }
.mtrack__pip.done{ background:var(--accent-l); border-color:var(--accent-l); }
.mtrack__pip.now{ box-shadow:0 0 0 5px rgba(92,194,247,.28); }
.mtrack__steps{ display:flex; justify-content:space-between; font-size:.64rem; color:var(--text-mute); }
.mtrack__steps b{ color:var(--ink); font-weight:600; }
/* dải "hải đồ" */
.mmap{ position:relative; height:120px; margin-top:14px; border-radius:var(--r-sm); overflow:hidden;
  background:linear-gradient(115deg, var(--ink-2), var(--ink-3)); }
.mmap::before{ content:""; position:absolute; left:8%; right:10%; top:50%; height:0;
  border-top:2px dashed rgba(92,194,247,.55); }
.mmap i{ position:absolute; left:56%; top:50%; transform:translate(-50%,-56%); color:#fff; font-size:18px;
  text-shadow:0 2px 10px rgba(11,165,250,.8); }
.mmap small{ position:absolute; bottom:6px; right:10px; font-size:.62rem; color:rgba(255,255,255,.66); }

/* Danh sách phí trong phone */
.mfee{ display:grid; gap:0; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.mfee div{ display:flex; justify-content:space-between; gap:10px; padding:7px 2px;
  border-bottom:1px solid var(--border-soft); color:var(--text-soft); }
.mfee div b{ color:var(--ink); font-weight:600; }
.mfee div:last-child{ border-bottom:0; }
.mfee .sum{ color:var(--accent-d); font-weight:700; }
.mfee .sum b{ color:var(--accent-d); }

/* Caption dưới collage */
.surface-ink 
/* =============================================================
   5. HERO
   ============================================================= */
.phero{ min-height:auto; padding-top:clamp(108px,14vh,150px); padding-bottom:clamp(40px,5vh,64px);
  background:
    radial-gradient(860px 480px at 84% -6%, rgba(11,165,250,.24), transparent 62%),
    radial-gradient(680px 480px at 2% 108%, rgba(30,46,115,.9), transparent 64%),
    linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 58%, #0A1232 100%); }
.phero .hero__top{ align-items:center; }
.phero .hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-l); }
.phero .hero__eyebrow i{ font-size:1.3em; }
.phero .hero__title{ font-size:clamp(1.95rem,3.4vw,3rem); }
.phero .hero__sub{ margin-bottom:6px; }

/* Video slot poster + play */
.vslot{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:22px; border:1px solid rgba(92,194,247,.5); background:var(--ink-2);
  box-shadow:0 0 0 1px rgba(11,165,250,.14), 0 22px 60px -22px rgba(11,165,250,.4),
             0 30px 70px -30px rgba(6,12,38,.7);
  cursor:pointer; padding:0; }
.vslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.88; }
.vslot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, color-mix(in srgb, var(--ink) 66%, transparent) 0%, transparent 44%); }
.vslot__play{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px;
  border-radius:50%; color:#fff; font-size:30px;
  background:rgba(10,18,50,.5); border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .3s var(--ease), background-color .3s var(--ease); }
.vslot:hover .vslot__play{ transform:translate(-50%,-50%) scale(1.08); background:rgba(11,165,250,.5); }
.vslot:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-l), 0 30px 70px -30px rgba(6,12,38,.7); }
.vslot:active .vslot__play{ transform:translate(-50%,-50%) scale(.96); }
.vslot__meta{ position:absolute; z-index:2; left:14px; bottom:12px; display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:600; color:#fff; padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(10,18,50,.5); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.vslot__meta i{ color:var(--accent-l); }
.vslot__mock{ position:absolute; z-index:2; right:12px; top:12px; font-size:.72rem; font-weight:600;
  letter-spacing:.04em; color:var(--warn); padding:5px 10px; border-radius:var(--r-pill);
  background:rgba(10,18,50,.5); border:1px dashed rgba(245,158,11,.32);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
/* slot thu gọn (clip how-to ở Platform) */

/* Link dưới video trỏ xuống section mở đầu */
.phero__readlink{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; margin-left:-12px;
  font-size:var(--fs-sm); font-weight:600; color:var(--accent-l);
  padding:8px 12px; border-radius:var(--r-pill);
  transition:color .2s var(--ease), background-color .2s var(--ease); }
.phero__readlink:hover{ color:#fff; background:rgba(255,255,255,.08); }
.phero__readlink:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(92,194,247,.5); }
.phero__readlink i{ font-size:1.25em; }

/* Trust strip dưới hero */
.tstrip{ display:flex; flex-wrap:wrap; gap:12px clamp(24px,4vw,56px); justify-content:center;
  margin-top:clamp(26px,4vh,40px); padding-top:22px; border-top:1px solid var(--on-dark-border); }
.tstrip div{ display:flex; align-items:baseline; gap:9px; font-size:var(--fs-sm); color:var(--on-dark-soft); }
.tstrip b{ font-size:1.5rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tstrip b small{ font-size:.62em; color:var(--accent-l); font-weight:700; }

/* =============================================================
   7. CÂU CHUYỆN - băng ảnh cảng + số to
   ============================================================= */
.insight{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
.insight > *{ min-width:0; }
.insight__stats{ display:grid; gap:clamp(20px,3vw,30px); }
@media (max-width:880px){ .insight{ grid-template-columns:1fr; } }

/* Số to on-dark (dùng cả cho social proof) */
.bignum{ padding-top:18px; border-top:1px solid var(--on-dark-border); }
.bignum b{ display:block; font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:800; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.bignum b small{ font-size:.5em; font-weight:700; color:var(--accent-l); }
.bignum span{ display:block; margin-top:9px; font-size:var(--fs-sm); color:var(--on-dark-soft);
  line-height:1.6; max-width:34ch; }

/* =============================================================
   8. BỨC TRANH - sơ đồ dòng tiền chú giải
   ============================================================= */
.dia{ display:grid; gap:20px; margin-bottom:clamp(32px,4vw,48px); }
.dia__panel{ position:relative; border-radius:var(--r-lg); padding:clamp(20px,3vw,30px);
  background:var(--surface); border:1px solid var(--border); }
.dia__panel--new{ border-color:rgba(92,194,247,.55);
  box-shadow:0 0 0 1px rgba(11,165,250,.12), 0 20px 55px -22px rgba(11,165,250,.4); }
.dia__head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:20px; }
.dia__label{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-mute); }
.dia__panel--new .dia__label{ color:var(--accent-d); }
.dia__tag{ margin-left:auto; font-size:var(--fs-xs); font-weight:600; padding:5px 12px;
  border-radius:var(--r-pill); }
.dia__tag--loss{ color:var(--err); background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); }
.dia__tag--gain{ color:var(--ink); background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); }
.dia__tag--gain i{ color:var(--ok); }
.dia__tag--loss i{ margin-right:4px; }
.dia__chain{ display:flex; align-items:stretch; flex-wrap:wrap; gap:8px 6px; }
.dnode{ flex:1; min-width:104px; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border-soft);
  text-align:center; }
.dnode i{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; font-size:20px; background:var(--surface); color:var(--accent-d);
  border:1px solid var(--border); }
.dnode b{ font-size:var(--fs-xs); font-weight:700; color:var(--ink); line-height:1.35; }
.dnode small{ font-size:.66rem; color:var(--text-mute); line-height:1.3; }
.dnode--you{ background:var(--ink); border-color:var(--ink); }
.dnode--you b{ color:#fff; } .dnode--you small{ color:var(--on-dark-mute); }
.dnode--you i{ background:rgba(255,255,255,.1); color:var(--accent-l); border-color:transparent; }
.dnode--pro{ background:linear-gradient(135deg, var(--accent-d), var(--accent)); border-color:var(--accent); }
.dnode--pro b{ color:#fff; } .dnode--pro small{ color:rgba(255,255,255,.8); }
.dnode--pro i{ background:rgba(255,255,255,.18); color:#fff; border-color:transparent; }
.dnode--mid{ background:transparent; border-style:dashed; }
.dnode--mid i{ color:var(--text-mute); } .dnode--mid b{ color:var(--text-mute); }
.darr{ flex:none; align-self:center; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text-mute); min-width:52px; }
.darr i{ font-size:17px; }
.darr small{ font-size:.62rem; font-weight:600; white-space:nowrap; }
.dia__panel--new .darr{ color:var(--accent-d); }
@media (max-width:680px){
  .dia__chain{ flex-direction:column; }
  .dnode{ width:100%; }
  .darr{ flex-direction:row; gap:7px; }
  .darr i{ transform:rotate(90deg); }
}

/* 2 card đối lập dưới sơ đồ */
.contrast{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); }
.contrast > *{ min-width:0; }
.contrast__card{ position:relative; overflow:hidden; background:var(--surface);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); box-shadow:var(--bezel),var(--shadow); }
.contrast__card--new::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-l)); }
.contrast__card h3{ font-size:1.15rem; margin-bottom:16px; }
@media (max-width:820px){ .contrast{ grid-template-columns:1fr; } }

/* =============================================================
   9. DATA - collage data hải quan trên band tối + 2 card mô hình
   ============================================================= */
.pdata-stage{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(20px,3vw,36px);
  align-items:center; margin-bottom:clamp(36px,5vw,56px); }
.pdata-stage > *{ min-width:0; }
.pdata-side{ align-self:end; margin-bottom:-8px; }
@media (max-width:880px){
  .pdata-stage{ grid-template-columns:1fr; }
  .pdata-side{ margin:0 auto; width:min(340px,100%); }
}
.pdata-note{ display:flex; gap:10px; align-items:flex-start; margin-top:14px;
  font-size:var(--fs-xs); color:var(--on-dark-soft); line-height:1.6; }
.pdata-note i{ color:var(--warn); flex:none; margin-top:1px; font-size:1.2em; }
.demo-tag{ display:inline-flex; align-items:center; margin-left:auto; font-size:.66rem; font-weight:700;
  letter-spacing:.05em; color:var(--warn); padding:3px 9px; border-radius:var(--r-pill);
  background:rgba(245,158,11,.12); border:1px dashed rgba(245,158,11,.32); }

/* 2 card mô hình cũ / Protrans */
.mdl{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,28px); }
.mdl > *{ min-width:0; }
.mdl__card{ border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); }
.mdl__card--old{ background:rgba(255,255,255,.06); border:1px solid var(--on-dark-border); }
.mdl__card--old h3{ color:var(--on-dark-soft); font-size:1.1rem; margin-bottom:16px; }
.mdl__card--new{ background:var(--surface); border:1px solid rgba(92,194,247,.55);
  box-shadow:0 0 0 1px rgba(11,165,250,.14), 0 24px 60px -24px rgba(11,165,250,.5); }
.mdl__card--new h3{ color:var(--accent-d); font-size:1.1rem; margin-bottom:16px; }
/* card sáng nằm trong band tối: trả chữ về hệ light */
.surface-ink .mdl__card--new .seal b{ color:var(--ink); }
.surface-ink .mdl__card--new .seal span{ color:var(--text-soft); }
@media (max-width:820px){ .mdl{ grid-template-columns:1fr; } }

/* Callout lợi nhuận (glass navy) */
.callout{ display:flex; gap:14px; align-items:flex-start; margin-top:clamp(24px,3.5vw,36px);
  background:rgba(255,255,255,.07); border:1px solid var(--on-dark-border); border-radius:var(--r);
  padding:18px 20px; font-size:var(--fs-sm); color:var(--on-dark-soft); line-height:1.65; }
.callout i{ flex:none; font-size:22px; color:var(--accent-l); margin-top:1px; }
.callout b{ color:#fff; font-variant-numeric:tabular-nums; }
/* callout trên nền sáng */
.callout--light{ background:var(--accent-soft); border-color:rgba(11,165,250,.25); color:var(--ink); }
.callout--light i{ color:var(--accent-d); }
.callout--light b{ color:var(--ink); }

/* =============================================================
   10. PLATFORM - collage tracking + phone phí
   ============================================================= */
.logi-stage{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,52px); align-items:center;
  margin-bottom:clamp(36px,5vw,56px); }
.logi-stage > *{ min-width:0; }
/* Cột cạnh collage chỉ còn 1 nhóm (4 bước). Nhóm "Buyer thấy gì" tách hẳn
   xuống hàng 3 cột bên dưới, đọc nhẹ hơn nhiều so với 2 khối chữ xếp chồng. */
.logi-side h3{ font-size:1.12rem; margin-bottom:18px; padding-bottom:13px;
  border-bottom:1px solid var(--border); }
.logi-side .seal{ gap:20px; }

.bview{ margin-top:clamp(40px,5.5vw,64px); }
.bview__h{ font-size:1.12rem; margin-bottom:20px; padding-bottom:13px; border-bottom:1px solid var(--border); }
.bview__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,24px); }
.bview__grid > *{ min-width:0; }
.bview__card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,26px); }
.bview__card > i{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  margin-bottom:14px; border-radius:50%; font-size:20px; color:#fff;
  background:linear-gradient(135deg, var(--accent-d), var(--accent-l));
  box-shadow:0 6px 15px -5px rgba(11,165,250,.6); }
.bview__card b{ display:block; font-size:1.02rem; color:var(--accent-d); margin-bottom:7px; }
.bview__card p{ color:var(--text-soft); font-size:var(--fs-sm); line-height:1.7; }
@media (max-width:820px){ .bview__grid{ grid-template-columns:1fr; } }
.logi-visual{ position:relative; padding-bottom:96px; padding-right:24px; }
.logi-visual .mkp{ position:absolute; right:0; bottom:0; z-index:3; width:206px;
  box-shadow:var(--shadow-lg); }
@media (max-width:880px){
  .logi-stage{ grid-template-columns:1fr; }
  /* mobile: xếp dọc, bỏ chồng lớp để phone không bị khung browser che */
  .logi-visual{ padding-right:0; padding-bottom:0; }
  .logi-visual .mkp{ position:static; margin:18px auto 0; display:block; width:min(230px,72vw); }
}

/* =============================================================
   11. PERSONA CÙNG THẮNG
   ============================================================= */
/* 3 cột: card - phone - card. Cột giữa PHẢI có bề rộng chốt, nếu để `auto`
   thì caption dài kéo cột giữa giãn ra và 2 card 2 bên bị bóp lệch. */
.persona{ display:grid; grid-template-columns:1fr minmax(206px,240px) 1fr; gap:clamp(20px,3vw,40px);
  align-items:center; max-width:1080px; margin:0 auto; }
.persona > *{ min-width:0; }
.pcard{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px); }
.pcard h3{ display:flex; align-items:center; gap:11px; font-size:1.08rem; margin-bottom:10px; }
.pcard h3 i{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border-radius:50%; font-size:17px; color:#fff;
  background:linear-gradient(135deg, var(--accent-d), var(--accent-l));
  box-shadow:0 6px 14px -5px rgba(11,165,250,.6); }
.pcard p{ color:var(--text-soft); font-size:var(--fs-sm); line-height:1.7; }
.persona__center{ position:relative; justify-self:center; width:100%; }
.persona__center .mkp{ width:100%; margin-inline:auto; }
.persona__cap{ max-width:62ch; margin:clamp(20px,3vw,28px) auto clamp(36px,5vw,56px); text-align:center;
  font-size:var(--fs-sm); color:var(--text-mute); line-height:1.65; }
@media (max-width:960px){
  .persona{ grid-template-columns:1fr 1fr; }
  .persona__center{ grid-column:1 / -1; order:-1; width:min(240px,100%); }
}
@media (max-width:640px){
  .persona{ grid-template-columns:1fr; }
}

/* Bảng tư duy cũ vs chiến lược (giữ dạng bảng) */
.cmp{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--bezel),var(--shadow); }
.cmp__scroll{ overflow-x:auto; }
.cmp table{ width:100%; min-width:620px; border-collapse:collapse; font-size:var(--fs-sm); }
.cmp th{ text-align:left; padding:14px 22px; font-weight:700; color:var(--ink);
  background:var(--surface-2); border-bottom:2px solid var(--border); }
.cmp td{ padding:14px 22px; vertical-align:top; line-height:1.6; }
.cmp tbody tr + tr td{ border-top:1px solid var(--border-soft); }
.cmp td:first-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
.cmp .cmp__old{ color:var(--text-mute); }
.cmp .cmp__new{ background:var(--accent-soft); color:var(--ink); font-weight:500; }
.cmp th.cmp__new{ color:var(--accent-d); }
.cmp .cmp__new i{ color:var(--accent-d); margin-right:6px; }
/* Mobile: bảng 3 cột thành thẻ xếp dọc, cột "cùng Protrans" không bị đẩy khuất khỏi màn */
@media (max-width:720px){
  .cmp__scroll{ overflow-x:visible; }
  .cmp table{ min-width:0; }
  .cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cmp tbody tr{ display:block; padding:18px 20px; }
  .cmp tbody tr + tr{ border-top:1px solid var(--border); }
  .cmp tbody tr + tr td{ border-top:0; }
  .cmp td{ display:block; padding:0; }
  .cmp td:first-child{ font-size:1.02rem; margin-bottom:12px; white-space:normal; }
  .cmp td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:4px;
    font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
  .cmp td.cmp__new{ margin-top:12px; padding:12px 14px; border-radius:var(--r-sm); }
  .cmp td.cmp__new::before{ color:var(--accent-d); }
}

/* =============================================================
   12. SOCIAL PROOF - số + logo ngành + quote (MOCK chờ data thật)
   ============================================================= */
.proofnums{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
  max-width:980px; margin:0 auto clamp(40px,5vw,60px); }
/* bignum bản nền sáng */
.band--ice .bignum, .proofnums--light .bignum{ border-top-color:var(--border); }
.proofnums--light .bignum b{ color:var(--ink); }
.proofnums--light .bignum span{ color:var(--text-soft); }
/* từ khóa tô đậm trong dòng chú thích số */
.bignum span strong{ font-weight:700; color:#fff; }
.proofnums--light .bignum span strong{ color:var(--ink); }
@media (max-width:720px){ .proofnums{ grid-template-columns:1fr; gap:18px; } }

.brands{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px clamp(12px,2vw,18px);
  margin-bottom:clamp(36px,5vw,52px); }
.brand{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 10px;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border);
  font-size:var(--fs-sm); font-weight:600; color:var(--text-soft); }
.brand i{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:var(--surface-2); color:var(--text-mute); font-size:16px; }

/* =============================================================
   13. FORM ĐĂNG KÝ
   ============================================================= */
.qform-wrap .qcard{ border:1px solid rgba(11,165,250,.22); }
/* Trang chỉ còn 1 form đăng ký hợp tác, không còn tab bar lẫn nhãn đầu thẻ.
   Nút gửi rộng bằng nội dung và căn giữa thẻ, không kéo full width như bao-gia
   (chỉ áp trong landing này để không đụng form bao-gia dùng chung .qform). */
#formHopTac .qform__submit{ justify-self:center; margin-top:6px; padding-inline:clamp(28px,4vw,44px); }
@media (max-width:480px){ #formHopTac .qform__submit{ justify-self:stretch; padding-inline:20px; } }

/* =============================================================
   14. FAQ
   ============================================================= */
.pfaq{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.pfaq details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-xs); }
.pfaq details[open]{ box-shadow:var(--bezel),var(--shadow); border-color:rgba(11,165,250,.35); }
.pfaq summary{ display:flex; align-items:center; gap:13px; cursor:pointer; list-style:none;
  padding:16px 22px; font-weight:600; color:var(--ink); border-radius:var(--r);
  transition:color .2s var(--ease); }
.pfaq summary::-webkit-details-marker{ display:none; }
.pfaq summary:hover{ color:var(--accent-d); }
.pfaq summary:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent); }
.pfaq summary .qico{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:50%; font-size:15px; color:#fff;
  background:linear-gradient(135deg, var(--accent-d), var(--accent-l)); }
.pfaq summary .caret{ flex:none; margin-left:auto; font-size:20px; color:var(--accent-d);
  transition:transform .3s var(--ease); }
.pfaq details[open] summary .caret{ transform:rotate(180deg); }
.pfaq__body{ padding:0 22px 20px 65px; color:var(--text-soft); font-size:var(--fs-sm); line-height:1.75; }
.pfaq__body p + p{ margin-top:10px; }
@media (max-width:560px){ .pfaq__body{ padding-left:22px; } }

/* =============================================================
   15. ROI placeholder + CTA cuối
   ============================================================= */
/* Bảng dự toán: form kính tối bên trái, card kết quả sáng phát sáng bên phải
   (cùng ngôn ngữ "màn hình sản phẩm" với .mkb/.glowbox). */
.roi{ display:grid; grid-template-columns:1fr .92fr; gap:clamp(20px,3vw,34px);
  max-width:1060px; margin-inline:auto; align-items:start; }
.roi > *{ min-width:0; }

.roi__form{ display:grid; gap:clamp(24px,3.2vw,32px); padding:clamp(22px,3vw,32px);
  background:rgba(255,255,255,.06); border:1px solid var(--on-dark-border); border-radius:var(--r-lg); }
.roi__field{ border:0; padding:0; margin:0; min-width:0; }
.roi__lb{ display:block; padding:0; margin-bottom:14px; font-size:var(--fs-sm); font-weight:700; color:#fff; }
.roi__qty{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.roi__qty b{ font-size:clamp(2rem,4vw,2.6rem); font-weight:800; line-height:1; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.roi__qty small{ font-size:var(--fs-sm); font-weight:600; color:var(--on-dark-soft); }
.roi__scale{ display:flex; justify-content:space-between; margin-top:9px;
  font-size:var(--fs-xs); color:var(--on-dark-mute); font-variant-numeric:tabular-nums; }

/* Thanh kéo: phần đã chọn tô sky qua biến --fill do JS đặt */
.roi__range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--r-pill);
  cursor:pointer; background:linear-gradient(90deg,
    var(--accent-l) 0 var(--fill,13%), rgba(255,255,255,.16) var(--fill,13%) 100%); }
.roi__range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:5px solid var(--accent); box-shadow:0 5px 14px -4px rgba(6,12,38,.75);
  transition:transform .16s ease; }
.roi__range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%;
  background:#fff; border:5px solid var(--accent); box-shadow:0 5px 14px -4px rgba(6,12,38,.75); }
.roi__range:hover::-webkit-slider-thumb{ transform:scale(1.12); }
.roi__range:active::-webkit-slider-thumb{ transform:scale(.94); }
.roi__range:focus-visible{ outline:2px solid var(--accent-l); outline-offset:5px; }
@media (prefers-reduced-motion:reduce){ .roi__range::-webkit-slider-thumb{ transition:none; } }

/* Chip radio: input ẩn, label là vùng bấm nên vẫn đi được bằng bàn phím */
.chipr{ position:relative; display:flex; flex-wrap:wrap; gap:9px; }
.chipr input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.chipr label{ display:inline-flex; align-items:center; padding:9px 16px; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; color:var(--on-dark-soft); cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--on-dark-border);
  transition:color .16s ease, background-color .16s ease, border-color .16s ease; }
.chipr label:hover{ color:#fff; border-color:rgba(255,255,255,.42); }
.chipr label:active{ transform:translateY(1px); }
.chipr input:checked + label{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--accent-d), var(--accent-l));
  box-shadow:0 7px 18px -7px rgba(11,165,250,.8); }
.chipr input:focus-visible + label{ outline:2px solid var(--accent-l); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .chipr label{ transition:none; } }

/* Card kết quả */
.roi__out{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px);
  border:1px solid rgba(92,194,247,.55);
  box-shadow:0 0 0 1px rgba(11,165,250,.14), 0 24px 60px -24px rgba(11,165,250,.5); }
.roi__badge{ display:inline-flex; align-items:center; gap:7px; margin-bottom:18px; padding:4px 11px;
  border-radius:var(--r-pill); font-size:.66rem; font-weight:700; letter-spacing:.05em;
  color:var(--warn); background:rgba(245,158,11,.12); border:1px dashed rgba(245,158,11,.32); }
.roi__cap{ font-size:var(--fs-sm); color:var(--text-soft); }
.roi__big{ margin-top:7px; font-size:clamp(1.75rem,3.4vw,2.45rem); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.roi__vnd{ margin-top:7px; font-size:var(--fs-sm); font-weight:700; color:var(--accent-d); }
.roi__sub{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; padding-top:20px;
  border-top:1px solid var(--border); }
.roi__sub > *{ min-width:0; }
.roi__sub b{ display:block; font-size:1.22rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.roi__sub span{ display:block; margin-top:5px; font-size:var(--fs-xs); color:var(--text-mute); line-height:1.55; }
.roi__note{ display:flex; gap:9px; margin-top:20px; font-size:var(--fs-xs); color:var(--text-mute); line-height:1.6; }
.roi__note i{ flex:none; margin-top:1px; font-size:1.15em; color:var(--warn); }
.roi__cta{ width:100%; justify-content:center; margin-top:18px; }
/* card sáng nằm trong band tối: `.surface-ink p` mạnh hơn class đơn nên phải trả chữ về hệ light */
.surface-ink .roi__out .roi__cap{ color:var(--text-soft); }
.surface-ink .roi__out .roi__big{ color:var(--ink); }
.surface-ink .roi__out .roi__vnd{ color:var(--accent-d); }
.surface-ink .roi__out .roi__note{ color:var(--text-mute); }
@media (max-width:880px){ .roi{ grid-template-columns:1fr; } }
@media (max-width:400px){ .roi__sub{ grid-template-columns:1fr; } }
.cta-hotline{ margin-top:18px; font-size:var(--fs-sm); color:var(--on-dark-soft); }
.cta-hotline a{ color:#fff; font-weight:700; }
.cta-hotline a:hover{ color:var(--accent-l); }