/* ==========================================================================
   fx.css — Bộ hiệu ứng bản PC (chỉ áp dụng khi fx.js gắn class, >=769px, trang chủ)
   Tất cả class ẩn ban đầu (opacity:0…) CHỈ được fx.js thêm vào -> nếu JS không chạy,
   không có class -> nội dung hiển thị bình thường (an toàn, không bao giờ mất chữ).
   ========================================================================== */
@media (min-width:769px){

  /* 1) SCROLL REVEAL — fade + rise khi vào viewport (stagger theo thứ tự trong section) */
  .fx-rv{ opacity:0; transform:translateY(64px);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform; }
  .fx-rv.fx-in{ opacity:1; transform:none; }
  /* biến thể cho ảnh: lộ dần + phóng nhẹ */
  .fx-rv-img{ opacity:0; transform:scale(1.06);
    transition:opacity 1s ease, transform 1.2s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
  .fx-rv-img.fx-in{ opacity:1; transform:none; }

  /* 1b) HERO TYPEWRITER — ký tự lộ dần + con trỏ nhấp nháy màu kem */
  .s-hero .hero-copy .fx-ty-ch{ opacity:0; }
  .s-hero .hero-copy .fx-ty-ch.on{ opacity:1; }
  .s-hero .hero-copy .fx-cur{ display:inline-block; width:3px; height:.92em; vertical-align:-.08em;
    margin-left:3px; background:#fdf6c2; animation:fxBlink .9s steps(1,end) infinite; }
  .s-hero .hero-copy .fx-cur-end{ animation:fxBlink .75s steps(1,end) infinite; }
  @keyframes fxBlink{ 50%{ opacity:0; } }

  /* 2) HERO KEN BURNS — ảnh hero thật nằm ở lớp .hs-slide (slider) phủ lên section,
     nên phải zoom chính .hs-slide (transform:scale, GPU, giữ tỉ lệ). Section clip overflow. */
  .s-hero.fx-kenbg{ overflow:hidden; }
  .s-hero.fx-kenbg .hs-slide{ animation:fxKen 12s ease-in-out infinite alternate; transform-origin:60% 55%; will-change:transform; }
  @keyframes fxKen{ from{ transform:scale(1); } to{ transform:scale(1.12); } }

  /* 3) HEADER on scroll — nền kính mờ khi rời hero + ẩn/hiện theo hướng cuộn */
  .rmhd{ transition:transform .45s cubic-bezier(.22,.61,.36,1), background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease; }
  .rmhd.fx-hd-solid{ background-color:rgba(1,22,10,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 6px 24px rgba(0,0,0,.28); }
  .rmhd.fx-hd-hidden{ transform:translateY(-110%); }

  /* 4) NAV link — gạch chân vàng mọc từ giữa khi hover */
  .rmhd a.mi, .rmhd nav a{ position:relative; }
  .rmhd a.mi::after, .rmhd nav a::after{ content:""; position:absolute; left:50%; right:50%; bottom:-6px; height:1.5px;
    background:#d9c07a; transition:left .3s ease, right .3s ease; opacity:.9; }
  .rmhd a.mi:hover::after, .rmhd nav a:hover::after{ left:0; right:0; }

  /* 5) IMAGE hover zoom — ảnh phóng nhẹ khi rê chuột.
     Card "12 giá trị" (.sv-card) có pointer-events:none + .svc-ph{transform:none!important} ->
     phải hover thẳng vào ảnh .svc-ph và override !important. */
  .sv-card, .s2-frame, .rm-pt-logo, .ti-h, .sv-lb{ overflow:hidden; }
  .s2-frame img, .rm-pt-logo img, .ti-h img{
    transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform; }
  .s2-frame:hover img, .rm-pt-logo:hover img, .ti-h:hover img{ transform:scale(1.07); }
  #giatri .sv-track .sv-card .svc-ph{ transition:transform .6s cubic-bezier(.22,.61,.36,1) !important; will-change:transform; }
  #giatri .sv-track .sv-card .svc-ph:hover{ transform:scale(1.08) !important; }

  /* 6) SCROLL PROGRESS BAR — thanh vàng mảnh trên đỉnh */
  #fx-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:200;
    background:linear-gradient(90deg,#b99a4e,#efdca0); box-shadow:0 0 8px rgba(217,192,122,.6); pointer-events:none; }

  /* 7) BACK TO TOP — nút tròn hiện sau khi cuộn */
  #fx-top{ position:fixed; right:28px; bottom:96px; width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(217,192,122,.6); background:rgba(1,22,10,.6); color:#e8d79c; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:20px; z-index:150;
    opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
    transition:opacity .35s ease, transform .35s ease, background-color .25s ease;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  #fx-top.fx-show{ opacity:1; transform:none; pointer-events:auto; }
  #fx-top:hover{ background:rgba(217,192,122,.18); }

  /* 8) BUTTON shine — nút CTA quét sáng khi hover */
  .hb-cta, .loc5-gmap, .rmft-submit, a.btn, .sub-cta{ position:relative; overflow:hidden; }
  .hb-cta::before, .loc5-gmap::before, .rmft-submit::before, a.btn::before, .sub-cta::before{
    content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,247,207,.28), transparent);
    transform:skewX(-18deg); transition:left .6s ease; }
  .hb-cta:hover::before, .loc5-gmap:hover::before, .rmft-submit:hover::before, a.btn:hover::before, .sub-cta:hover::before{ left:140%; }

  /* 6) SPARKLE markers — 5 kiểu lấp lánh DEMO cho ô số 01-05 trên map S7 */
  .s-fulldesign{ position:relative; }
  .fx-spk-layer{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
  .fx-spk{ position:absolute; width:2.4%; aspect-ratio:1; transform:translate(-50%,-50%); }
  .fx-spk i{ position:absolute; }

  /* KIỂU DÙNG THẬT: Breathing halo (cấu hình từ data/s7-spark.json, delay riêng --d -> so le) */
  .fx-spk-halo::before{ content:''; position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle, rgba(255,246,207,.95) 0%, rgba(255,233,168,.5) 36%, rgba(255,233,168,0) 70%);
    animation:spkBreath var(--p,2.4s) ease-in-out infinite; animation-delay:var(--d,0s); }

  /* 01 — Radar gold pulse: lõi sáng + 2 vòng loang */
  .fx-spk-1::before{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf;
    box-shadow:0 0 12px 4px rgba(255,233,168,.95); animation:spkCore 1.6s ease-in-out infinite; }
  .fx-spk-1 i{ inset:0; border-radius:50%; border:2px solid rgba(255,233,168,.9); opacity:0; animation:spkRadar 2s ease-out infinite; }
  .fx-spk-1 i:nth-child(2){ animation-delay:1s; }
  @keyframes spkRadar{ 0%{transform:scale(.25);opacity:.9} 80%{opacity:.15} 100%{transform:scale(1.8);opacity:0} }
  @keyframes spkCore{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.68);opacity:.75} }

  /* 02 — Twinkle: ngôi sao 4 cánh nhấp nháy + xoay */
  .fx-spk-2 i{ inset:16%; background:#fff6cf; filter:drop-shadow(0 0 7px rgba(255,233,168,.95));
    clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
    animation:spkTwinkle 1.5s ease-in-out infinite; }
  @keyframes spkTwinkle{ 0%,100%{transform:scale(.45) rotate(0);opacity:.35} 50%{transform:scale(1.2) rotate(90deg);opacity:1} }

  /* 03 — Breathing halo: quầng sáng mềm thở ra/vào */
  .fx-spk-3::before{ content:''; position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle, rgba(255,246,207,.95) 0%, rgba(255,233,168,.5) 36%, rgba(255,233,168,0) 70%);
    animation:spkBreath 2.4s ease-in-out infinite; }
  @keyframes spkBreath{ 0%,100%{transform:scale(.55);opacity:.45} 50%{transform:scale(1.3);opacity:1} }

  /* 04 — Glitter: lõi + nhiều hạt sáng lấp lánh quanh */
  .fx-spk-4::before{ content:''; position:absolute; inset:42%; border-radius:50%; background:#fff6cf; box-shadow:0 0 8px 2px rgba(255,233,168,.9); }
  .fx-spk-4 i{ width:15%; height:15%; border-radius:50%; background:#fff6cf; box-shadow:0 0 5px rgba(255,233,168,.95); opacity:0; animation:spkGlit 1.8s ease-in-out infinite; }
  .fx-spk-4 i:nth-child(1){ left:6%; top:20% } .fx-spk-4 i:nth-child(2){ left:80%; top:10%; animation-delay:.3s }
  .fx-spk-4 i:nth-child(3){ left:88%; top:72%; animation-delay:.6s } .fx-spk-4 i:nth-child(4){ left:18%; top:84%; animation-delay:.9s }
  .fx-spk-4 i:nth-child(5){ left:-2%; top:54%; animation-delay:1.2s } .fx-spk-4 i:nth-child(6){ left:54%; top:-4%; animation-delay:1.5s }
  @keyframes spkGlit{ 0%,100%{transform:scale(0);opacity:0} 50%{transform:scale(1);opacity:1} }

  /* 05 — Rotating gleam: lõi + tia sáng chữ thập xoay (lens flare) */
  .fx-spk-5::before{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf;
    box-shadow:0 0 12px 4px rgba(255,233,168,.95); animation:spkCore 1.6s ease-in-out infinite; }
  .fx-spk-5::after{ content:''; position:absolute; inset:0;
    background:linear-gradient(0deg,transparent 46%,rgba(255,246,207,.9) 50%,transparent 54%),
               linear-gradient(90deg,transparent 46%,rgba(255,246,207,.9) 50%,transparent 54%);
    animation:spkRotate 4s linear infinite, spkGleamOp 1.8s ease-in-out infinite; }
  @keyframes spkRotate{ to{ transform:rotate(360deg); } }
  @keyframes spkGleamOp{ 0%,100%{opacity:.35} 50%{opacity:1} }

  /* 06 (ô 09) — Firework burst: hạt bắn toả ra rồi tắt */
  .fx-spk-6::before{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf; box-shadow:0 0 10px 3px rgba(255,233,168,.95); animation:spkCore 1.6s ease-in-out infinite; }
  .fx-spk-6 i{ left:50%; top:50%; width:13%; height:13%; margin:-6.5% 0 0 -6.5%; border-radius:50%; background:#fff6cf; box-shadow:0 0 5px rgba(255,233,168,.9); opacity:0; animation:spkFire 1.9s ease-out infinite; }
  .fx-spk-6 i:nth-child(1){--a:0deg} .fx-spk-6 i:nth-child(2){--a:45deg} .fx-spk-6 i:nth-child(3){--a:90deg} .fx-spk-6 i:nth-child(4){--a:135deg}
  .fx-spk-6 i:nth-child(5){--a:180deg} .fx-spk-6 i:nth-child(6){--a:225deg} .fx-spk-6 i:nth-child(7){--a:270deg} .fx-spk-6 i:nth-child(8){--a:315deg}
  @keyframes spkFire{ 0%{transform:rotate(var(--a)) translateY(0) scale(.4);opacity:1} 70%{opacity:1} 100%{transform:rotate(var(--a)) translateY(-200%) scale(.2);opacity:0} }

  /* 07 (ô 13) — Comet orbit: chấm sáng bay vòng quanh */
  .fx-spk-7::before{ content:''; position:absolute; inset:42%; border-radius:50%; background:#fff6cf; box-shadow:0 0 8px 2px rgba(255,233,168,.9); }
  .fx-spk-7 i{ position:absolute; inset:0; animation:spkRotate 2.2s linear infinite; }
  .fx-spk-7 i::before{ content:''; position:absolute; top:-6%; left:50%; width:18%; height:18%; margin-left:-9%; border-radius:50%; background:#fff6cf; box-shadow:0 0 9px 3px rgba(255,233,168,.95); }

  /* 08 (ô 15) — Dashed ring rotate (neon) */
  .fx-spk-8::before{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf; box-shadow:0 0 9px 2px rgba(255,233,168,.9); }
  .fx-spk-8 i{ inset:4%; border-radius:50%; border:2px dashed rgba(255,233,168,.92); animation:spkRotate 6s linear infinite; }

  /* 09 (ô 16) — Heartbeat: lõi đập nhịp đôi */
  .fx-spk-9::before{ content:''; position:absolute; inset:38%; border-radius:50%; background:#fff6cf; box-shadow:0 0 12px 4px rgba(255,233,168,.95); animation:spkBeat 1.4s ease-in-out infinite; }
  @keyframes spkBeat{ 0%,100%{transform:scale(.8)} 14%{transform:scale(1.3)} 28%{transform:scale(.9)} 42%{transform:scale(1.18)} 58%{transform:scale(.8)} }

  /* 10 (ô 17) — Beacon beam: cột sáng vươn lên */
  .fx-spk-10::before{ content:''; position:absolute; left:50%; bottom:50%; width:34%; height:170%; margin-left:-17%; transform-origin:bottom center;
    background:linear-gradient(to top, rgba(255,233,168,.85), rgba(255,233,168,0)); filter:blur(1px); animation:spkBeacon 1.8s ease-in-out infinite; }
  .fx-spk-10::after{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf; box-shadow:0 0 10px 3px rgba(255,233,168,.95); }
  @keyframes spkBeacon{ 0%,100%{opacity:.3; transform:scaleY(.7)} 50%{opacity:.95; transform:scaleY(1.1)} }

  /* 11 (ô 19) — Water ripple: sóng tròn lan ra */
  .fx-spk-11::before{ content:''; position:absolute; inset:42%; border-radius:50%; background:#fff6cf; box-shadow:0 0 8px 2px rgba(255,233,168,.9); }
  .fx-spk-11 i{ inset:28%; border-radius:50%; background:radial-gradient(circle, rgba(255,233,168,.55), rgba(255,233,168,0) 70%); opacity:0; animation:spkWave 2.4s ease-out infinite; }
  .fx-spk-11 i:nth-child(2){ animation-delay:.8s } .fx-spk-11 i:nth-child(3){ animation-delay:1.6s }
  @keyframes spkWave{ 0%{transform:scale(.2);opacity:.85} 100%{transform:scale(2.4);opacity:0} }

  /* 12 (ô 21) — Expanding diamond: viên kim cương nở ra */
  .fx-spk-12::before{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf; box-shadow:0 0 8px 2px rgba(255,233,168,.9); }
  .fx-spk-12 i{ inset:22%; border:2px solid rgba(255,233,168,.9); opacity:0; animation:spkDia 2s ease-out infinite; }
  .fx-spk-12 i:nth-child(2){ animation-delay:1s }
  @keyframes spkDia{ 0%{transform:rotate(45deg) scale(.2);opacity:.9} 100%{transform:rotate(45deg) scale(1.4);opacity:0} }

  /* 13 (ô 22) — Spinning cross: tia sáng 4 hướng xoay */
  .fx-spk-13::before{ content:''; position:absolute; inset:40%; border-radius:50%; background:#fff6cf; box-shadow:0 0 10px 3px rgba(255,233,168,.95); z-index:1; }
  .fx-spk-13::after{ content:''; position:absolute; inset:-14%;
    background:radial-gradient(ellipse 50% 5% at 50% 50%, rgba(255,246,207,.95), transparent 70%),
               radial-gradient(ellipse 5% 50% at 50% 50%, rgba(255,246,207,.95), transparent 70%);
    animation:spkRotate 5s linear infinite, spkGleamOp 1.6s ease-in-out infinite; }

  @media (prefers-reduced-motion:reduce){
    .fx-rv,.fx-rv-img{ opacity:1 !important; transform:none !important; transition:none !important; }
    .fx-ken, .fx-spk *, .fx-spk::before, .fx-spk::after{ animation:none !important; }
  }
}