/* ==========================================================================
   Discovery Petro — phần bổ sung riêng trên nền hệ giao diện + motion dùng chung
   (/assets/css/site.css + group-chrome.css của Discovery Siltron / Group / Airways).
   Chỉ khai báo các khối Petro có mà Siltron không có; màu, chữ, khoảng cách, motion
   đều lấy từ token chung (--gold, --navy, --ease, --line…).
   ========================================================================== */

/* Hero: hàng 4 lĩnh vực dùng khung "hero-stats" — số thứ tự thay cho số liệu */
.petro .hero-pillars b { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.petro .hero-pillars p { font-size: 13.5px; color: rgba(255, 255, 255, .82); }

/* Giới thiệu: khối sứ mệnh & giá trị nằm dưới lưới giới thiệu */
.petro .values { margin-top: clamp(64px, 8vw, 120px); }

/* Lĩnh vực: danh sách gạch đầu dòng trong thẻ navy */
.prod-list { list-style: none; margin: 14px 0 0; padding: 14px 0 0; display: grid; gap: 8px; border-top: 1px solid rgba(224, 198, 141, .18); }
.prod-list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: rgba(233, 236, 239, .72); }
.prod-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--gold-lt); }
.prod.is-strategic { border-color: rgba(224, 198, 141, .75); box-shadow: 0 24px 50px rgba(10, 20, 32, .22), 0 0 30px rgba(224, 198, 141, .16); }
.prod.is-strategic .prod-tag { background: var(--gold-grad); color: var(--navy); }

/* Band nhà máy lọc dầu: đoạn dẫn + nút */
.band-lead { max-width: 58ch; margin: 18px 0 26px; font-size: clamp(15px, 1.15vw, 17px); color: rgba(255, 255, 255, .78); }

/* Chuỗi cung ứng: 6 mắt xích mũi tên (Siltron dùng 4) */
.chain.chain-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.chain.chain-6 li { min-height: 132px; padding-right: 34px; }
.chain.chain-6 li + li { padding-left: 38px; }
.chain.chain-6 b { font-size: 15.5px; }
.petro .market .sec-bg img { object-fit: contain; object-position: 85% 50%; opacity: .4; }

/* Năng lực vận hành: dùng lưới + danh sách của khối "lợi thế cạnh tranh" */
.ops { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(224, 198, 141, .2); }
.ops blockquote { margin: 28px 0 0; padding-left: 22px; border-left: 2px solid var(--gold-soft); font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--f-title); color: rgba(255, 255, 255, .86); }
.ops blockquote b { color: var(--gold-lt); font-weight: 600; }

/* Tại sao chọn: lưới ảnh 4 ô (1 ô lớn + 2 ô nhỏ + 1 ô ngang) */
.app-grid .is-span2 { grid-column: span 2; }

/* Chất lượng & an toàn */
.petro .quality .charge { margin-top: 0; }
.safety { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 90px); align-items: center; margin-top: clamp(56px, 7vw, 100px); }
.safety-visual { margin: 0; }
.safety-visual .frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(224, 198, 141, .55); box-shadow: var(--shadow); }
.safety-visual img { width: 100%; height: 112%; object-fit: cover; }
.safety-copy .lead { margin-top: 18px; }
.safety-keys { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.safety-keys li { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.safety-keys b { font: 600 12.5px/1.2 var(--f-title); color: var(--ink); letter-spacing: .02em; }

/* Đối tác & chứng nhận (nội dung đang cập nhật) */
.logo-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.logo-row li { display: grid; place-items: center; height: 88px; padding: 0 10px; border: 1px dashed rgba(157, 123, 63, .45); text-align: center; font: 600 10.5px/1.4 var(--f-title); letter-spacing: .12em; text-transform: uppercase; color: rgba(91, 92, 87, .7); }
.cert-row { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cert-row li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; padding: 22px 24px; background: linear-gradient(150deg, #15263d 0%, #0b1625 55%, #070e18 100%); border: 1px solid rgba(224, 198, 141, .3); }
.cert-row .ring { grid-row: span 2; width: 46px; height: 46px; font-size: 17px; }
.cert-row b { font: 600 15px/1.3 var(--f-title); color: var(--gold-lt); }
.cert-row em { font-style: normal; font-size: 12.5px; color: rgba(233, 236, 239, .6); }

/* Tin tức: 3 thẻ navy cùng kiểu "khám phá" */
.explore-grid.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-grid .explore-card h3 { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.35; }

/* Liên hệ: bản đồ dưới thẻ liên hệ */
.cx-map { margin-top: 22px; border: 1px solid rgba(224, 198, 141, .45); }
.cx-map iframe { display: block; width: 100%; height: 340px; border: 0; filter: saturate(.85); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .chain.chain-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .chain.chain-6 li:nth-child(4) { margin-left: 0; }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .safety, .cert-row { grid-template-columns: 1fr; }
  .explore-grid.news-grid { grid-template-columns: 1fr 1fr; }
  .app-grid .is-span2 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .chain.chain-6 { grid-template-columns: 1fr; }
  .chain.chain-6 li { margin-left: 0; }
  .logo-row { grid-template-columns: 1fr 1fr; }
  .explore-grid.news-grid { grid-template-columns: 1fr; }
  .cx-map iframe { height: 260px; }
  .app-grid .is-span2 { grid-column: auto; }
}

/* ---------- Splash intro Petro (petro/assets/js/splash.js) ----------
   Nền: navy + ánh bình minh hổ phách ở chân trời, vạch mức như thước đo bồn chứa
   (thay lưới mạch điện của Siltron). Mỗi dải chỉ hiện đúng lát của nền toàn màn hình. */
.petro .spx-strips i {
  background:
    radial-gradient(ellipse 75% 55% at 50% 100%, rgba(240, 150, 40, .2), rgba(240, 150, 40, .06) 45%, transparent 72%) 0 calc(var(--i) * var(--sh, 14.2857vh) * -1) / 100% calc(var(--sh, 14.2857vh) * 7) no-repeat,
    linear-gradient(rgba(224, 198, 141, .05) 1px, transparent 1px) 0 calc(var(--i) * var(--sh, 14.2857vh) * -1) / 100% var(--t, 80px),
    #0b1625;
}
/* đường chân trời nhà máy lọc dầu: nét vàng tự vẽ, đèn tín hiệu nhấp nháy, đuốc khí lập loè.
   Không dùng filter (drop-shadow) trên phần tử chuyển động liên tục — quầng sáng làm bằng viền mờ. */
.petro .spx-traces path { stroke: rgba(224, 198, 141, .5); stroke-width: 1.1; stroke-linejoin: round; animation-duration: .8s; }
.petro .spx-traces path.hz { stroke: rgba(240, 212, 146, .7); stroke-width: 1.3; animation-duration: 1s; }
.petro .spx-traces circle.lt { fill: #ff7a3c; stroke: rgba(255, 122, 60, .35); stroke-width: 3; filter: none; animation: fadeIn .2s ease both, ltBlink 1.1s steps(1) infinite; }
.petro .spx-traces path.flame { fill: #f0a640; stroke: rgba(255, 190, 90, .4); stroke-width: 3; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 100%; animation: flameIn .35s ease-out both, flicker .16s ease-in-out infinite alternate; }
@keyframes ltBlink { 50% { opacity: .15; } }
@keyframes flameIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes flicker { from { transform: scale(.92, 1.06) skewX(-4deg); } to { transform: scale(1.06, .9) skewX(4deg); } }

/* chữ DISCOVERY: rót đầy lần lượt từng chữ cái (khuôn chữ viền mờ → chất lỏng vàng dâng, vạch mặt chất lỏng sáng) */
.petro .spx-copy .splash-word b { animation: none; }
.petro .spx-copy .splash-word b i { font-style: normal; color: transparent; -webkit-text-stroke: .6px rgba(224, 198, 141, .55);
  background: linear-gradient(to top, #b8862a 0%, #f4d98d 47%, #fff6dc 49.4%, rgba(255, 255, 255, .04) 50%) 0 0 / 100% 200% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: fadeIn .3s ease calc(1.7s + var(--n) * .04s) both, txFill .55s var(--ease-io) calc(2.05s + var(--n) * .075s) both; }
.petro .spx-copy .splash-word span { color: rgba(255, 255, 255, .9); animation-delay: 2.85s; }
.petro .spx-copy .splash-tag { color: rgba(240, 212, 146, .72); animation-delay: 3.05s; }
@keyframes txFill { from { background-position: 0 0; } to { background-position: 0 100%; } }

/* các lớp của splash: .spx-rise (khung cắt, cao hơn màn hình đúng vùng sóng) › .spx-stage (nội dung)
   và .spx-oil (mặt sóng + lớp dầu nằm ngay dưới). Lúc ra splash.js chỉ animate transform các lớp này. */
.petro .spx-rise { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--oc, 32px)); overflow: hidden; }
.petro .spx-stage { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--oc, 32px)); }
.petro .spx-oil { position: absolute; left: 0; top: 100%; width: 100%; height: var(--ob, 102px); overflow: hidden; visibility: hidden; pointer-events: none; }
.petro .spx-oil svg { display: block; max-width: none; flex: none; }
.petro .spx-oil path { stroke-linejoin: round; }
.petro .spx-oil .o-glow { fill: none; stroke: rgba(240, 166, 64, .3); stroke-width: 10; }
.petro .spx-oil .o-line { fill: none; stroke: #f4d98d; stroke-width: 2; }
.petro .splash.is-out { background: transparent; }
.petro .splash.is-out .spx-oil { visibility: visible; }
.petro .splash.is-out :is(.spx-rise, .spx-stage, .spx-oil, .spx-oil svg) { will-change: transform; }
.petro .splash.is-out .spx-stage * { animation-play-state: paused !important; }
/* 7 dải đứng yên khi ra (không tách như Siltron); nội dung giữ nguyên độ mờ */
.petro .splash.is-out .spx-strips i { transform: none; transition: none; }
.petro .splash.is-out .spx-strips i::after { opacity: 0; }
.petro .splash.is-out :is(.spx-cv, .spx-traces, .spx-copy) { opacity: 1; transition: none; }

/* ==========================================================================
   Họa tiết trang trí Petro: giọt dầu, thước mức, van, mặt cắt ống, chân trời
   nhà máy lọc dầu, sóng dầu, tuyến hàng hải, đuốc khí. Nét mảnh vàng, tự vẽ khi
   vào khung nhìn (petro.js gắn .is-in cho [data-dc]); chuyển động liên tục chỉ
   dùng transform / opacity / stroke-dashoffset trên phần tử nhỏ.
   ========================================================================== */
/* icon nét dùng chung (sprite #ic-*): tự vẽ nét khi .is-in */
.pi { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-draw, var(--ease)); }
.is-in .pi, .is-in.pi, .pi.is-in { stroke-dashoffset: 0; }
html:not(.js) .pi { stroke-dashoffset: 0; }

/* logo header: rê chuột → giọt dầu nhỏ xuống từ biểu tượng */
.petro .hd-logo::after { content: ""; position: absolute; left: 10.6%; top: 78%; width: 6px; height: 8px; opacity: 0; pointer-events: none;
  background: #e0c68d; border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; clip-path: polygon(50% 0, 100% 62%, 100% 100%, 0 100%, 0 62%); }
.petro .hd-logo:hover::after { animation: logoDrip 1.1s cubic-bezier(.55, 0, .85, .4) both; }
@keyframes logoDrip { 0% { opacity: 0; transform: translateY(-6px) scale(.4); } 25% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(18px) scale(.8, 1.25); } }

/* nhãn mục: giọt dầu nhỏ ở đầu vạch thay cho vạch trơn */
.petro .eyebrow::before { width: 42px; height: 11px; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 11'%3E%3Cpath d='M4 0c2.4 3.1 4 5.2 4 7a4 4 0 0 1-8 0c0-1.8 1.6-3.9 4-7z' fill='%23c9a65e'/%3E%3C/svg%3E") 0 50% / 8px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 13px 50% / 29px 1px no-repeat; }

/* huy hiệu tròn (giới thiệu + footer): thêm 2 vòng mặt cắt ống quay chậm */
.petro .wafer-badge::after { content: ""; position: absolute; inset: -15px; border-radius: 50%; border: 1px solid rgba(224, 198, 141, .38);
  outline: 1px dashed rgba(224, 198, 141, .3); outline-offset: 6px; animation: spin 48s linear infinite reverse; pointer-events: none; }

/* thước mức ngăn mục: vạch chia + mức dầu chạy từ trái sang khi cuộn tới */
.gauge-rule { position: relative; height: 22px; margin-top: clamp(56px, 7vw, 100px); margin-bottom: calc(-1 * clamp(20px, 3vw, 40px)); }
.gauge-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 12px;
  background: repeating-linear-gradient(90deg, rgba(157, 123, 63, .45) 0 1px, transparent 1px 24px), linear-gradient(rgba(157, 123, 63, .35), rgba(157, 123, 63, .35)) 0 0 / 100% 1px no-repeat; }
.gauge-rule i { position: absolute; left: 0; right: 0; top: 9px; height: 3px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); }
.gauge-rule i::after { content: ""; position: absolute; right: -4px; top: -9px; width: 8px; height: 11px; transform: scaleX(.001);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 11'%3E%3Cpath d='M4 0c2.4 3.1 4 5.2 4 7a4 4 0 0 1-8 0c0-1.8 1.6-3.9 4-7z' fill='%23c9a65e'/%3E%3C/svg%3E") center / contain no-repeat; }
.gauge-rule.is-in i { transform: scaleX(1); }
.gauge-rule.is-in i::after { transform: none; }

/* hero + footer: đường chân trời nhà máy lọc dầu nét vàng (tự vẽ, đuốc lập loè, đèn tín hiệu nhấp nháy) */
.pt-sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 14vw, 160px); pointer-events: none; overflow: visible; }
.pt-sky path { fill: none; stroke: rgba(224, 198, 141, .55); stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-draw, var(--ease)); }
.pt-sky.is-in path { stroke-dashoffset: 0; }
.pt-sky .lt { fill: #ff7a3c; stroke: rgba(255, 122, 60, .3); stroke-width: 3; opacity: 0; transition: opacity .4s 1.6s; }
.pt-sky.is-in .lt { opacity: 1; animation: ltBlink 1.2s steps(1) infinite; animation-delay: var(--d, 0s); }
.pt-sky path.fl { fill: #f0a640; stroke: rgba(255, 190, 90, .4); stroke-width: 3; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .5s 1.8s; }
.pt-sky.is-in path.fl { opacity: 1; animation: flicker .16s ease-in-out infinite alternate; }
.petro .hero-pillars { position: relative; }
.hero-sky { left: auto; right: 0; bottom: 100%; width: min(540px, 46%); height: auto; aspect-ratio: 540 / 110; opacity: .85; }
@media (max-width: 960px) { .hero-sky { width: 70%; } }
.ft-sky { z-index: 0; opacity: .32; height: clamp(70px, 10vw, 130px); }

/* sứ mệnh & giá trị: biểu tượng nét trong vòng tròn thay số thứ tự */
.petro .ring.ring-ico .pi { width: 34px; height: 34px; color: var(--gold-lt); stroke-width: 1.3; }
.sol-grid article:hover .ring-ico .pi { animation: icoRedraw 1s var(--ease) both; }
@keyframes icoRedraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* tầm nhìn: ống đo mức bên trái câu trích, dầu dâng theo tiến độ cuộn (--vg do petro.js đặt) */
.petro .about-visual figcaption { border-left: 0; padding-left: 58px; }
.vision-gauge { position: absolute; left: 22px; top: 22px; bottom: 22px; width: 12px; border: 1px solid var(--gold-soft); border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(157, 123, 63, .35) 9px 10px); }
.vision-gauge b { position: absolute; left: 2px; right: 2px; bottom: 2px; top: 2px; border-radius: 4px; background: linear-gradient(0deg, #9a6c1a, #e0c68d 85%, #fff3cf);
  transform: scaleY(var(--vg, 0)); transform-origin: bottom; }

/* lĩnh vực: icon nét cạnh tiêu đề thẻ, vẽ lại khi rê chuột */
.petro .pd-logo { display: block; flex: none; align-self: flex-start; width: 22px; height: 34px; margin: 44px 0 0 auto; fill: url(#mkGold); opacity: .9; filter: drop-shadow(0 0 6px rgba(240, 212, 146, .25)); transition: transform .6s var(--ease), opacity .4s, filter .4s; }
.prod:hover .pd-logo { opacity: 1; transform: translateY(-3px); filter: drop-shadow(0 0 10px rgba(240, 212, 146, .55)); }

/* chuỗi cung ứng: một đường ống chạy suốt dưới 6 mắt xích, dòng dầu chảy theo tiến độ cuộn, van tại mỗi mắt xích */
.chain-pipe { position: relative; height: 10px; margin: -22px 11px clamp(46px, 5vw, 70px); border-radius: 5px; border: 1px solid rgba(224, 198, 141, .45); background: rgba(224, 198, 141, .06); }
.chain-pipe .cp-fill { position: absolute; inset: 2px; border-radius: 3px; overflow: hidden; background: linear-gradient(90deg, #9a6c1a, #e0c68d); transform: scaleX(var(--p, 0)); transform-origin: left; }
.chain-pipe .cp-fill::after { content: ""; position: absolute; inset: 0 -40%; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 246, 220, .55) 40px 52px, transparent 52px 90px); animation: cpFlow 1.6s linear infinite; }
@keyframes cpFlow { to { transform: translateX(90px); } }
.chain-pipe b { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #0d1a2b; border: 1px solid rgba(224, 198, 141, .55); transition: background .4s, border-color .4s, box-shadow .4s; }
.chain-pipe b::before, .chain-pipe b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; margin: 0 0 0 -5px; background: rgba(224, 198, 141, .8); }
.chain-pipe b::after { transform: rotate(90deg); }
.chain-pipe b.is-on { background: #c9962f; border-color: #f4d98d; box-shadow: 0 0 0 4px rgba(224, 198, 141, .15); }
.chain-pipe b.is-on::before, .chain-pipe b.is-on::after { background: #0d1a2b; }
.chain li .ch-ico { transition: opacity .4s, transform .6s var(--ease), stroke .4s; }
.chain li.is-flow .ch-ico { opacity: 1; stroke: #f4d98d; }
.chain li.is-flow i { filter: brightness(1.25); }

/* năng lực vận hành: bồn chứa dầu mini — dầu dâng tới mức khi hiện (--ty mỗi bồn), mặt dầu gợn sóng nhẹ */
.edge-list .tank-wrap { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.tank { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tank .tk-body { fill: rgba(224, 198, 141, .05); stroke: rgba(224, 198, 141, .75); stroke-width: 1.2; }
.tank .tk-band { stroke: rgba(224, 198, 141, .35); stroke-width: 1; }
.tank .tk-tick, .tank .tk-vent { fill: none; stroke: rgba(224, 198, 141, .5); stroke-width: 1; stroke-linecap: round; }
.tank .tk-base { stroke: rgba(224, 198, 141, .6); stroke-width: 1.2; stroke-linecap: round; }
.tank .tk-oil { transform: translateY(64px); transition: transform 1.8s var(--ease) .2s; }
.tank-wrap.is-in .tk-oil { transform: translateY(var(--ty)); }
.tank .tk-wave { fill: url(#mkGold); opacity: .85; animation: tkWave 2.4s linear infinite; }
@keyframes tkWave { to { transform: translateX(28px); } }
.edge-list .tank-wrap em { position: relative; top: 9px; font: 700 13px/1 var(--f-title); font-style: normal; letter-spacing: .04em; color: #0b1625; }
.edge-list li:hover .tk-body { stroke: #f4d98d; }

/* vì sao chọn: lớp vạch ngang + góc ngắm như kính quan sát trên ảnh */
.petro .app-grid figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(10, 20, 32, .16) 3px 4px); }
.petro .app-grid figure::before { content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none; opacity: .75; transition: inset .5s var(--ease), opacity .4s;
  background: linear-gradient(#e0c68d, #e0c68d) 0 0 / 16px 1px, linear-gradient(#e0c68d, #e0c68d) 0 0 / 1px 16px,
    linear-gradient(#e0c68d, #e0c68d) 100% 0 / 16px 1px, linear-gradient(#e0c68d, #e0c68d) 100% 0 / 1px 16px,
    linear-gradient(#e0c68d, #e0c68d) 0 100% / 16px 1px, linear-gradient(#e0c68d, #e0c68d) 0 100% / 1px 16px,
    linear-gradient(#e0c68d, #e0c68d) 100% 100% / 16px 1px, linear-gradient(#e0c68d, #e0c68d) 100% 100% / 1px 16px; background-repeat: no-repeat; }
.petro .app-grid figure:hover::before { inset: 22px; opacity: 1; }
.petro .app-grid figcaption { z-index: 3; }

/* chất lượng: khiên + giọt dầu, 3 bước nối bằng ống có van — dầu chảy lần lượt qua từng đoạn */
.petro .charge { position: relative; }
.charge-shield { position: absolute; right: clamp(18px, 2.4vw, 32px); top: 22px; width: 40px; height: 40px; color: var(--gold); opacity: .8; }
.petro .charge-arr svg { width: 120px; height: 20px; filter: none; stroke: none; overflow: visible; }
.charge-arr .pp { stroke: rgba(157, 123, 63, .3); stroke-width: 6; stroke-linecap: round; }
.charge-arr .pf { stroke: #c9962f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.charge-arr circle { fill: #fff; stroke: var(--gold-soft); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.charge-arr .vx { stroke: var(--gold-soft); stroke-width: 1.2; transition: stroke .4s; }
.charge.is-in .cp-1 .pf { transition-delay: .5s; } .charge.is-in .cp-2 .pf { transition-delay: 1.4s; }
.charge.is-in .charge-arr .pf { stroke-dashoffset: 0; }
.charge.is-in .cp-1 circle { transition-delay: 1s; } .charge.is-in .cp-2 circle { transition-delay: 1.9s; }
.charge.is-in .charge-arr circle { fill: #c9962f; stroke: #c9962f; }
.charge.is-in .cp-1 .vx { transition-delay: 1s; } .charge.is-in .cp-2 .vx { transition-delay: 1.9s; }
.charge.is-in .charge-arr .vx { stroke: #fff; }
.petro .charge li i { transition: box-shadow .5s, background .5s; }
.charge.is-in li:nth-child(1) i { box-shadow: 0 0 0 4px rgba(224, 198, 141, .35); transition-delay: .2s; }
.charge.is-in li:nth-child(3) i { box-shadow: 0 0 0 4px rgba(224, 198, 141, .35); transition-delay: 1.1s; }
.charge.is-in li:nth-child(5) i { box-shadow: 0 0 0 4px rgba(224, 198, 141, .35); transition-delay: 2s; }

/* đối tác: ô logo hình mặt cắt ống tròn (3 vòng đồng tâm) */
.logo-pipes li { justify-self: center; width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; padding: 0 22px; border-radius: 50%; border: 1px solid rgba(157, 123, 63, .5); background: #fff;
  box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 10px rgba(157, 123, 63, .25), 0 0 0 7px var(--ivory, #f7f4ec), 0 0 0 8px rgba(157, 123, 63, .18); transition: transform .5s var(--ease), border-color .4s; }
.logo-pipes li:hover { transform: rotate(-6deg) scale(1.03); border-color: var(--gold); }

/* liên hệ: dải tuyến hàng hải phía trên bản đồ (nguồn cung quốc tế → kho cảng → văn phòng) */
.cx-route { position: relative; height: 120px; overflow: hidden; background: linear-gradient(150deg, #15263d 0%, #0b1625 60%, #070e18 100%); border-bottom: 1px solid rgba(224, 198, 141, .35); }
.cx-route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-route .sr { fill: none; stroke: rgba(224, 198, 141, .45); stroke-width: 1.2; stroke-dasharray: 5 7; animation: srMove 2.4s linear infinite; }
.cx-route .lr { fill: none; stroke: #e0c68d; stroke-width: 1.6; }
@keyframes srMove { to { stroke-dashoffset: -24; } }
.cx-route .ship { fill: #f4d98d; }
.cx-route .port { fill: #0b1625; stroke: #e0c68d; stroke-width: 1.6; }
.cx-route .hq { fill: #ff7a3c; }
.cx-route .hq-ring { fill: none; stroke: #ff7a3c; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: hqPing 1.8s ease-out infinite; }
@keyframes hqPing { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }
.cx-route span { position: absolute; font: 600 10px/1 var(--f-title); letter-spacing: .14em; text-transform: uppercase; color: rgba(224, 198, 141, .8); }
.cx-route .cr-l1 { left: 16px; top: 12px; } .cx-route .cr-l2 { left: 63.3%; bottom: 12px; transform: translateX(-50%); } .cx-route .cr-l3 { left: 84.2%; top: 12px; transform: translateX(-50%); }

/* footer: 3 lớp sóng dầu mảnh trôi ngang dưới chữ chìm */
.ft-waves { position: absolute; left: 0; bottom: clamp(18px, 3vw, 46px); z-index: 0; width: 200%; height: 90px; fill: none; stroke: rgba(224, 198, 141, .22); stroke-width: 1; pointer-events: none; animation: ftWave 18s linear infinite; }
.ft-waves path:nth-child(2) { stroke: rgba(224, 198, 141, .14); } .ft-waves path:nth-child(3) { stroke: rgba(224, 198, 141, .08); }
@keyframes ftWave { to { transform: translateX(-50%); } }

@media (max-width: 1180px) { .chain-pipe { display: none; } }
@media (max-width: 960px) { .petro .charge-arr svg { width: 60px; transform: rotate(90deg); } .charge-shield { width: 32px; height: 32px; } }
@media (max-width: 640px) {
  .cx-route { height: 96px; } .cx-route .cr-l2 { display: none; }
  .petro .about-visual figcaption { padding-left: 50px; } .vision-gauge { left: 18px; }
  .logo-pipes li { max-width: 132px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.ds-motion-forced) :is(.ft-waves, .chain-pipe .cp-fill::after, .cx-route .sr, .cx-route .hq-ring, .petro .wafer-badge::after) { animation: none; }
}

/* huy hiệu tròn Petro (thay "wafer" của Siltron): mặt bích ống dẫn — vòng 8 bu-lông, giữa là giọt dầu
   có mức dầu dâng lên khi hiện, logo nằm trong giọt; vòng chữ ngoài vẫn quay chậm */
.petro .petro-badge::before { content: none; }
.wb-flange { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wb-flange .fr { fill: none; stroke: rgba(224, 198, 141, .55); stroke-width: .8; }
.wb-flange .fr-in { stroke: rgba(224, 198, 141, .3); stroke-dasharray: 1.5 2.5; }
.wb-flange .fb { fill: #0d1a2b; stroke: #e0c68d; stroke-width: .8; }
.wb-flange .oil { fill: rgba(201, 150, 47, .32); transform: translateY(56px); transition: transform 1.8s var(--ease) .3s; }
.wb-flange .oil-top { fill: none; stroke: #f4d98d; stroke-width: .9; transform: translateY(84px); transition: transform 1.8s var(--ease) .3s; }
.petro-badge.is-in .oil { transform: translateY(14px); }
.petro-badge.is-in .oil-top { transform: translateY(42px); }
.wb-flange .fd { fill: none; stroke: #e0c68d; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.petro-badge.is-in .fd { stroke-dashoffset: 0; }
.petro .petro-badge .wb-core { inset: 0; border: 0; background: none; z-index: 1; }
.petro .petro-badge .wb-core svg { width: 15%; filter: none; transform: translateY(8%); }

/* header: tách logo khỏi mục "Trang chủ" (menu ngang ≥ 1321px) */
@media (min-width: 1321px) { .petro .hd-logo { margin-right: 44px; } }
@media (min-width: 1321px) and (max-width: 1500px) { .petro .hd-nav { gap: 24px; } }

/* ==========================================================================
   Banner — 3 phương án nền tối giản (assets/js/hero-fx.js, ?hero=1|2|3)
   --sx / --sy: vị trí mặt trời trong ảnh banner (theo khung hero)
   ========================================================================== */
.hero { --sx: 60.5%; --sy: 56%; }
.hfx { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.fx-on .hfx { opacity: 1; }

/* 1 · Nắng trên biển */
.hfx-sun .sun-glow { position: absolute; left: var(--sx); top: var(--sy); width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 120, .5), rgba(255, 150, 60, .16) 36%, transparent 66%); animation: sunBreath 5s ease-in-out infinite alternate; }
.hfx-sun .sun-glint { position: absolute; left: var(--sx); top: calc(var(--sy) + 7%); width: 22vmax; height: 10vh; margin-left: -11vmax;
  background: repeating-linear-gradient(0deg, rgba(255, 226, 160, .85) 0 1.5px, transparent 1.5px 7px);
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 30%, #000, transparent 70%); mask: radial-gradient(ellipse 50% 50% at 50% 30%, #000, transparent 70%);
  animation: sunGlint 2.8s ease-in-out infinite alternate; }
@keyframes sunBreath { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }
@keyframes sunGlint { from { opacity: .35; transform: scaleX(.9); } to { opacity: .85; transform: scaleX(1.08); } }

/* 2 · Dòng dầu: đường ống liền nét + luồng sáng chạy qua */
.hfx-pipe i { position: absolute; left: 0; right: 0; bottom: calc(clamp(16px, 4vh, 56px) + 150px); height: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(224, 198, 141, 0), rgba(224, 198, 141, .55) 12%, rgba(224, 198, 141, .55) 88%, rgba(224, 198, 141, 0)); }
.hfx-pipe i::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, #fff3cf 70%, transparent); transform: translateX(-100%); animation: pipeRun 4.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes pipeRun { to { transform: translateX(560%); } }

/* 3 · Gợn giọt dầu: 3 vòng elip lan ra trên mặt biển dưới mặt trời */
.hfx-ripple i { position: absolute; left: var(--sx); top: calc(var(--sy) + 9%); width: 30vmax; height: 4.2vmax; margin: -2.1vmax 0 0 -15vmax; border-radius: 50%;
  border: 1.5px solid #f4d98d; box-shadow: 0 0 10px rgba(244, 217, 141, .45), inset 0 0 8px rgba(244, 217, 141, .3); opacity: 0; transform: scale(.08); animation: ripple 4.5s cubic-bezier(.25, .6, .35, 1) infinite; }
.hfx-ripple i:nth-child(2) { animation-delay: -1.5s; } .hfx-ripple i:nth-child(3) { animation-delay: -3s; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.08); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

@media (max-width: 960px) { .hero { --sx: 52%; --sy: 52%; } .hfx-pipe i { bottom: calc(clamp(16px, 4vh, 56px) + 190px); } }
@media (prefers-reduced-motion: reduce) { html:not(.ds-motion-forced) .hfx * , html:not(.ds-motion-forced) .hfx *::after { animation: none; } }

/* Logo Discovery Petro lấp khoảng trống cột trái phần "Năng lực vận hành" — căn giữa phần còn lại của cột */
.ops > div:first-child { align-self: stretch; display: flex; flex-direction: column; }
.ops-logo { position: relative; margin: auto 0; padding: 40px 0 0 22px; }
.ops-logo::before { content: ""; position: absolute; left: -6%; top: 50%; width: 70%; aspect-ratio: 2 / 1; transform: translateY(-38%); border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 186, 104, .13), transparent); pointer-events: none; }
.ops-logo img { position: relative; display: block; width: min(400px, 82%); height: auto; }
.ops-logo::after { content: ""; display: block; width: min(400px, 82%); height: 1px; margin-top: 28px; background: linear-gradient(90deg, rgba(224, 198, 141, .55), rgba(224, 198, 141, 0)); }
@media (max-width: 960px) { .ops-logo { display: none; } }