/* =============================================================
   Protrans v2 · SECTIONS - hero, pillars, split, bento, steps, cta
   ============================================================= */

/* ---------- HERO (full-bleed cinematic · widget + tool dưới) ---------- */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:var(--on-dark);
  min-height:100svh; display:flex; align-items:center;
  padding:clamp(90px,10vh,116px) var(--gutter) clamp(30px,4vh,52px); }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  object-position:60% 46%; opacity:.92;
  will-change:transform; animation:kenburns 15s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){ .hero__bg{ animation:none; } }
.hero__overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(100deg, rgba(7,13,38,.94) 0%, rgba(9,18,52,.8) 32%, rgba(13,27,75,.44) 62%, rgba(13,27,75,.2) 100%),
  linear-gradient(0deg, rgba(7,12,36,.66) 0%, transparent 44%); }
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--container); margin-inline:auto;
  display:flex; flex-direction:column; gap:clamp(22px,3vh,38px); }
.hero__top{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,3.4vw,52px); align-items:center; }
.hero__copy{ max-width:640px; }
.hero__title{ font-size:clamp(1.85rem,2.9vw,2.7rem); color:#fff; letter-spacing:-.02em; line-height:1.1;
  margin-block:0 14px; text-wrap:balance; }
.hero__title em{ font-style:normal; color:var(--accent-l); text-shadow:0 6px 34px rgba(11,165,250,.5); }
.hero__sub{ font-size:var(--fs-lead); color:var(--on-dark-soft); max-width:52ch; margin-bottom:0; }
.hero__sub strong{ color:#fff; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px; }
.hero__cta .btn{ min-height:52px; padding-block:0; font-size:1rem; }

/* Widget theo dõi đơn (glass) bên phải hero */
.hero__widget{ align-self:center; }
.hwid{ padding:18px; border-radius:22px; color:#fff;
  background:rgba(10,18,50,.5); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 30px 70px -30px rgba(6,12,38,.7); }
.hwid__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.hwid__id{ font-weight:700; font-size:var(--fs-sm); }
.hwid__id small{ display:block; color:rgba(255,255,255,.6); font-weight:500; font-size:var(--fs-xs); }
.hwid__status{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; background:rgba(11,165,250,.22); color:#cdeafe; border:1px solid rgba(92,194,247,.4); }
.hwid__status .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-l); animation:hpulse 2.2s var(--ease-out) infinite; }
@keyframes hpulse{ from{ box-shadow:0 0 0 0 rgba(92,194,247,.55); } to{ box-shadow:0 0 0 8px rgba(92,194,247,0); } }
@media (prefers-reduced-motion:reduce){ .hwid__status .dot{ animation:none; } }
.hwid__route{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:1rem; }
.hwid__route i{ color:var(--accent-l); font-size:.85em; }
.hwid__route img{ border-radius:2px; }
.hwid__line{ position:relative; height:3px; border-radius:3px; background:rgba(255,255,255,.18); margin:20px 6px 12px; }
.hwid__prog{ position:absolute; inset:0 37% 0 0; border-radius:3px; background:linear-gradient(90deg,var(--accent-d),var(--accent-l)); }
.hwid__pip{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); background:#fff; border:2px solid var(--accent); }
.hwid__pip.done{ background:var(--accent-l); border-color:var(--accent-l); }
.hwid__pip.now{ box-shadow:0 0 0 5px rgba(92,194,247,.28); }
.hwid__steps{ display:flex; justify-content:space-between; font-size:.66rem; color:rgba(255,255,255,.6); }
.hwid__steps b{ color:#fff; font-weight:600; }
.hwid__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
.hwid__eta small{ display:block; color:rgba(255,255,255,.6); font-size:var(--fs-xs); }
.hwid__eta b{ font-size:1.05rem; font-variant-numeric:tabular-nums; }
.hwid__more{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--accent-l); }
@media (max-width:900px){
  .hero__top{ grid-template-columns:1fr; }
  .hero__widget{ max-width:440px; }
  .hero{ min-height:auto; }
}

/* ---------- PILLARS (premium: nền + nhấn accent + hover) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
.pillar{ position:relative; overflow:hidden; background:var(--surface); border-radius:24px; padding:30px 28px;
  box-shadow:var(--bezel),var(--shadow); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.pillar:hover{ transform:translateY(-5px); box-shadow:var(--bezel),var(--shadow-lg); }
.pillar::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-l)); }
.pillar:first-child{ background:var(--ink); }
.pillar:first-child h3, .pillar:first-child p{ color:#fff; }
.pillar:first-child h3{ font-size:1.55rem; }
.pillar:first-child p{ color:rgba(255,255,255,.76); }
.pillar__ico{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:16px; background:var(--accent-soft); color:var(--accent-d); font-size:26px; margin-bottom:6px; }
.pillar:first-child .pillar__ico{ background:rgba(11,165,250,.2); color:var(--accent-l); }
.pillar h3{ margin-block:14px 8px; }
.pillar p{ color:var(--text-soft); font-size:var(--fs-sm); }
@media (max-width:768px){ .pillars{ grid-template-columns:1fr; gap:14px; } }

/* ---------- SPLIT (text + image) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); align-items:center; }
.split--rev .split__media{ order:-1; }
.split__media img{ width:100%; aspect-ratio:5/4; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--bezel),var(--shadow-lg); }

/* Image reveal: ảnh zoom nhẹ vào khi wrapper .reveal đạt .in (wrapper lo opacity) */
.js .reveal.svc-detail__media, .js .reveal.split__media{ overflow:hidden; }
.js .reveal.svc-detail__media img, .js .reveal.split__media img{
  transform:scale(1.06); transition:transform 1s var(--ease-out); }
.js .reveal.in.svc-detail__media img, .js .reveal.in.split__media img{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal.svc-detail__media img, .js .reveal.split__media img{ transform:none; transition:none; } }
.split__list{ display:grid; gap:16px; margin-top:24px; }
.split__list li{ display:flex; gap:14px; align-items:flex-start; }
.split__list .ico{ flex:none; width:38px; height:38px; border-radius:11px;
  background:var(--accent-soft); color:var(--accent-d); display:flex; align-items:center; justify-content:center; font-size:20px; }
.split__list b{ display:block; color:var(--ink); }
.split__list span{ color:var(--text-soft); font-size:var(--fs-sm); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; }
  .split--rev .split__media{ order:0; } }

/* ---------- BENTO (services) ---------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(186px,auto); gap:16px; }
.cell{ position:relative; border-radius:var(--r); overflow:hidden; padding:24px;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:186px;
  background:var(--surface); box-shadow:var(--bezel),var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.cell:hover{ transform:translateY(-4px); box-shadow:var(--bezel),var(--shadow-lg); }
.cell__ico{ font-size:28px; color:var(--accent-d); margin-bottom:auto; }
.cell h3{ margin-bottom:6px; }
.cell p{ color:var(--text-soft); font-size:var(--fs-sm); }
.cell--lg{ grid-column:span 2; grid-row:span 2; }
.cell--air{ grid-column:span 2; }
.cell--road{ grid-column:span 2; }
.cell--ins{ grid-column:span 2; }
/* image cells - ảnh đặt thẳng làm nền cell (fix bug ô trắng) */
.cell--img{ color:#fff; background:var(--img) center/cover no-repeat, var(--ink); }
.cell--img::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(13,27,75,.10) 0%, rgba(13,27,75,.55) 55%, rgba(13,27,75,.88) 100%); }
.cell--img > *{ position:relative; z-index:1; }
.cell--img .cell__ico{ color:#fff; }
.cell--img h3{ color:#fff; }
.cell--img p{ color:rgba(255,255,255,.85); }
/* navy accent cell for diversity */
.cell--ink{ background:var(--ink); color:#fff; }
.cell--ink .cell__ico{ color:var(--accent-l); }
.cell--ink p{ color:var(--on-dark-soft); }
@media (max-width:900px){
  .bento{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .cell{ grid-column:auto !important; grid-row:auto !important; min-height:160px; }
}

/* ---------- STEPS (card stepper, premium) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); position:relative; }
.step{ position:relative; background:var(--surface); border-radius:var(--r-lg);
  padding:34px 28px 30px; box-shadow:var(--bezel),var(--shadow); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.step::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-l)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease); }
.step:hover{ transform:translateY(-5px); box-shadow:var(--bezel),var(--shadow-lg); }
.step:hover::before{ transform:scaleX(1); }
.step__n{ position:absolute; top:10px; right:22px; z-index:0; font-size:4.4rem; font-weight:800;
  line-height:1; color:var(--surface-2); letter-spacing:-.04em; }
.step__ring{ position:relative; z-index:1; width:60px; height:60px; border-radius:18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-d)); box-shadow:var(--shadow-accent);
  display:flex; align-items:center; justify-content:center; font-size:27px; color:#fff; margin-bottom:22px; }
.step h3{ position:relative; z-index:1; margin-bottom:8px; }
.step p{ position:relative; z-index:1; color:var(--text-soft); font-size:var(--fs-sm); }
@media (max-width:768px){ .steps{ grid-template-columns:1fr; gap:16px; } }

/* ---------- CAPABILITY BAND (navy) ---------- */
.capband{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); position:relative; }
.cap{ position:relative; }
.cap__ico{ font-size:30px; color:var(--accent-l); margin-bottom:14px; }
.cap b{ display:block; color:#fff; font-size:1.1rem; font-weight:700; letter-spacing:-.01em; }
.cap span{ color:var(--on-dark-soft); font-size:var(--fs-sm); }
@media (max-width:768px){ .capband{ grid-template-columns:1fr 1fr; gap:28px; } }

/* ---------- CTA band (navy) ---------- */
.cta{ text-align:center; }
.cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 70% at 50% 0%, rgba(11,165,250,.18), transparent 60%); }
.cta__inner{ position:relative; max-width:720px; margin-inline:auto; }
.cta h2{ color:#fff; margin-bottom:18px; }
.cta p{ color:var(--on-dark-soft); font-size:var(--fs-lead); margin-bottom:28px; }
.cta .hero__cta{ justify-content:center; }

/* ---------- TRUST STRIP (đối tác hãng tàu + hội viên) ---------- */
.trust{ padding-block:clamp(30px,4vw,46px); background:var(--surface); border-bottom:1px solid var(--border); }
.trust__head{ text-align:center; font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-mute); margin-bottom:22px; }
.trust__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(18px,4vw,48px); }
.trust__logo{ font-weight:800; font-size:1.1rem; letter-spacing:.01em; color:var(--text-mute);
  opacity:.85; transition:opacity .25s var(--ease), color .25s var(--ease); }
.trust__logo:hover{ opacity:1; color:var(--ink); }
.trust__badges{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.trust__badge{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600;
  color:var(--text-soft); padding:8px 16px; border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface); }
.trust__badge i{ color:var(--accent-d); font-size:1.1em; }

/* nội dung cell luôn nằm trên spotlight */
.cell > *{ position:relative; z-index:1; }

/* ---------- PRICING (Minh bạch giá) ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.price-card{ position:relative; background:var(--surface); border:0; border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--bezel),var(--shadow); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.price-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-l)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease); }
.price-card:hover{ transform:translateY(-5px); box-shadow:var(--bezel),var(--shadow-lg); }
.price-card:hover::before{ transform:scaleX(1); }
.price-card__ico{ display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px;
  border-radius:14px; background:linear-gradient(135deg, var(--accent-soft), rgba(11,165,250,.03));
  box-shadow:inset 0 0 0 1px rgba(11,165,250,.18); color:var(--accent-d); font-size:24px; margin-bottom:16px; }
.price-card h3{ font-size:1.12rem; margin-bottom:8px; }
.price-card p{ color:var(--text-soft); font-size:var(--fs-sm); line-height:1.6; }
.price-note{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:24px; padding:20px 26px;
  background:linear-gradient(120deg, var(--accent-soft), rgba(11,165,250,.04));
  border:1px solid rgba(11,165,250,.28); border-radius:var(--r-lg);
  color:var(--accent-d); font-weight:700; font-size:var(--fs-body); box-shadow:var(--bezel); }
.price-note i{ font-size:1.5em; flex:none; }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .price-grid{ grid-template-columns:1fr; } }

/* ---------- SERVICES v2: 3 ô ảnh hover-reveal + 3 ô phụ ---------- */
.svc-top{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
.svc-hero{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:360px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:#fff;
  box-shadow:var(--bezel),var(--shadow-lg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.svc-hero:hover{ transform:translateY(-5px); box-shadow:var(--bezel),var(--shadow-lg),0 30px 60px -28px rgba(13,27,75,.5); }
.svc-hero__bg{ position:absolute; inset:0; z-index:0; background:var(--img) center/cover no-repeat;
  transition:transform .8s var(--ease); }
.svc-hero:hover .svc-hero__bg{ transform:scale(1.07); }
.svc-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(13,27,75,0) 0%, rgba(13,27,75,.08) 42%, rgba(13,27,75,.62) 68%, rgba(13,27,75,.96) 100%); }
.svc-hero h3, .svc-hero__desc, .svc-hero__more{ position:relative; z-index:2; }
.svc-hero__ico{ position:absolute; top:24px; left:26px; z-index:2; width:52px; height:52px; border-radius:15px;
  background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff;
  border:1px solid rgba(255,255,255,.25); }
.svc-hero h3{ color:#fff; font-size:1.45rem; margin-bottom:8px; }
.svc-hero__desc{ color:rgba(255,255,255,.86); font-size:var(--fs-sm); line-height:1.55; }
.svc-hero__more{ max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease); }
.svc-hero:hover .svc-hero__more, .svc-hero:focus-within .svc-hero__more{ max-height:220px; opacity:1; margin-top:16px; }
.svc-hero__more ul{ display:grid; gap:9px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); }
.svc-hero__more li{ display:flex; gap:9px; align-items:center; font-size:var(--fs-sm); color:#fff; }
.svc-hero__more li i{ color:var(--accent-l); font-size:1.1em; }

.svc-bot{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc-min{ display:block; color:inherit; text-decoration:none;
  background:var(--surface); border:0; border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--bezel),var(--shadow); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.svc-min:hover{ transform:translateY(-4px); box-shadow:var(--bezel),var(--shadow-lg); }
.svc-min:hover h3{ color:var(--accent-d); }
.svc-min__ico{ width:50px; height:50px; border-radius:14px; background:var(--accent-soft); color:var(--accent-d);
  display:inline-flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.svc-min h3{ font-size:1.12rem; margin-bottom:6px; transition:color .2s var(--ease); }
.svc-min p{ color:var(--text-soft); font-size:var(--fs-sm); line-height:1.6; }
@media (max-width:900px){
  .svc-top, .svc-bot{ grid-template-columns:1fr; }
  /* mobile mở sẵn checklist -> nội dung cao; card cao hơn để chữ (căn đáy, trên nền tối) không sát icon */
  .svc-hero{ min-height:380px; }
  .svc-hero__more{ max-height:none; opacity:1; margin-top:16px; }
  /* mobile không hover -> khối chữ cao che nửa ảnh; tối toàn card hơn để chữ luôn đọc rõ, ảnh vẫn nhận ra */
  .svc-hero::after{ background:linear-gradient(180deg, rgba(13,27,75,.36) 0%, rgba(13,27,75,.54) 34%, rgba(13,27,75,.86) 62%, rgba(13,27,75,.98) 100%); }
}

/* ---------- Portal features (zigzag, ảnh thật) ---------- */
.pf-item{ margin-top:clamp(44px,6vw,84px); }
.pf-title{ font-size:clamp(1.35rem,2vw,1.7rem); margin-bottom:12px; letter-spacing:-.015em; }
.pf-shot img{ display:block; width:100%; height:auto; border-radius:var(--r-lg);
  box-shadow:var(--bezel), 0 40px 80px -34px rgba(13,27,75,.42), 0 8px 24px -12px rgba(13,27,75,.2);
  background:var(--surface); }