/*
Theme Name: Nhà Xe Hưng Thịnh - Luxury Motion V5 (Rung 2 nút dưới)
Theme URI: https://example.invalid/hung-thinh
Author: Hưng Thịnh
Description: Mobile-first theme cho xe ghép Hưng Thịnh: banner chuyển động dịu, liên kết gọi điện và Zalo, tối ưu ảnh.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hung-thinh
*/
:root{--navy:#05172e;--navy2:#0a2a4f;--gold:#ead08b;--gold2:#c99545;--text:#edf3fb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f3f6fb;color:#102842;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid #ffd36e;outline-offset:4px}.site-header{background:#fff;border-bottom:2px solid #d7b76e;position:relative;z-index:5}.header-wrap{max-width:1050px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}.brand{color:#092c54;text-decoration:none;font-weight:900;font-size:clamp(19px,3.6vw,29px);line-height:1.1}.brand span{display:block;color:#98712e;font-size:11px;letter-spacing:.14em;font-weight:700;margin-top:5px}.header-call{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#ad1521;color:white;padding:12px 17px;border-radius:12px;font-weight:800;white-space:nowrap}.main{max-width:950px;margin:auto}.hero{padding:16px 12px 26px;background:linear-gradient(#071b35,#102c53)}.hero-stage{position:relative;width:min(100%,700px);margin:auto;aspect-ratio:1199/1312;overflow:hidden;border-radius:18px;border:1px solid #b99551;box-shadow:0 25px 55px rgba(1,11,26,.42);isolation:isolate}.hero-poster{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center;animation:htPosterBreath 16s ease-in-out infinite alternate}.car-layer{position:absolute;z-index:2;width:61.8%;height:24%;left:24.7%;top:44.5%;background:url('assets/car-layer.webp') center/100% 100% no-repeat;pointer-events:none;animation:htCarFloat 7s ease-in-out infinite;opacity:.97}.hero-shine{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(105deg,transparent 34%,rgba(255,222,144,.16) 47%,transparent 56%);background-size:240% 100%;background-position:200% 0;animation:htSoftSweep 14s ease-in-out infinite;mix-blend-mode:screen}.hero-hotspot{position:absolute;z-index:5;border-radius:16px;display:block;font-size:0;text-decoration:none}.hero-hotspot:hover{box-shadow:inset 0 0 0 2px rgba(255,223,145,.75)}.hero-hotspot:focus-visible{outline:3px solid #ffd65f;outline-offset:-4px}.hero-phone{left:8.5%;top:82.3%;width:56%;height:11%}.hero-zalo{left:66.5%;top:83%;width:26.5%;height:10%}.hero-caption{max-width:700px;margin:14px auto 0;text-align:center;color:#f1e5c7;font-size:13px;line-height:1.65}.section{padding:32px 17px}.section h2{text-align:center;margin:0 0 20px;font-size:clamp(23px,4vw,31px);color:#092c50}.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.route{background:#fff;border:1px solid #ded7ca;box-shadow:0 7px 19px rgba(12,29,58,.08);padding:18px 14px;border-radius:16px;text-align:center;font-weight:850;font-size:clamp(15px,2.7vw,19px)}.route b{display:block;color:#bb8e36;margin-bottom:5px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.service{background:#fff;border-radius:14px;padding:19px 12px;border:1px solid #e1e6ed;box-shadow:0 6px 16px rgba(9,30,57,.06);text-align:center}.service span{display:block;font-size:25px;margin-bottom:8px}.service strong{font-size:14px;line-height:1.4}.booking{background:#081f3d;color:#fff;border-radius:20px;padding:24px 16px;margin:0 12px 25px;text-align:center}.booking h2{color:#f1d590}.booking p{line-height:1.65}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{padding:16px 22px;border-radius:13px;text-decoration:none;font-weight:850;min-width:190px;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s ease,filter .25s ease}.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}.btn-call{background:linear-gradient(180deg,#fa4149,#ad0817);color:#fff;box-shadow:0 7px 18px #0004}.btn-zalo{background:linear-gradient(180deg,#288efa,#0652b5);color:#fff}.footer{background:#061b32;color:#cad5e2;text-align:center;padding:23px 15px 90px;font-size:13px}.footer strong{color:#eed18b}.bottom-nav{display:none}.reveal{animation:htFadeUp .75s ease-out both}@keyframes htPosterBreath{0%{transform:scale(1)}100%{transform:scale(1.007)}}@keyframes htCarFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(1.5px,-1.5px,0)}}@keyframes htSoftSweep{0%,70%,100%{background-position:200% 0;opacity:0}78%,89%{opacity:.24}90%{background-position:-130% 0;opacity:0}}@keyframes htFadeUp{from{opacity:.75;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:650px){.header-wrap{padding:10px 13px}.brand{font-size:19px}.header-call{font-size:12px;padding:11px 12px}.hero{padding:10px 0 18px}.hero-stage{width:100%;border-radius:0;border-left:0;border-right:0}.hero-caption{padding:0 18px}.routes{grid-template-columns:1fr}.service-grid{grid-template-columns:repeat(2,1fr)}.section{padding:27px 15px}.booking{margin:0 10px 20px}.actions .btn{width:100%}.bottom-nav{display:flex;position:fixed;z-index:99;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -7px 24px #071b3533;border-top:1px solid #d5dfea;padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:8px;justify-content:space-around}.bottom-nav a{flex:1;text-decoration:none;text-align:center;font-size:13px;font-weight:800;border-radius:10px;padding:11px 6px;background:#eef4fa;color:#113251}.bottom-nav a:first-child{background:#cf1323;color:#fff}.bottom-nav a:last-child{background:#0870d7;color:#fff}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* V2 - CTA is actual isolated artwork, not an invisible clickable hotspot. */
.hero-stage .hero-hotspot{display:block;overflow:visible;border-radius:0;font-size:0;box-shadow:none!important;transform-origin:center;will-change:transform,filter;isolation:isolate}
.hero-stage .hero-hotspot img{width:100%;height:100%;display:block;object-fit:fill;pointer-events:none}
.hero-stage .hero-phone{left:6.34%;top:81.78%;width:58.97%;height:12.20%;animation:htPhoneShakeV2 2.8s ease-in-out infinite}
.hero-stage .hero-zalo{left:66.97%;top:83.31%;width:24.02%;height:9.22%;animation:htZaloShakeV2 2.8s ease-in-out .5s infinite}
@keyframes htPhoneShakeV2{
0%,16%,41%,100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:drop-shadow(0 0 0 transparent)}
20%{transform:translate3d(-3px,0,0) rotate(-.8deg) scale(1.026)}
24%{transform:translate3d(3px,0,0) rotate(.8deg) scale(1.032);filter:drop-shadow(0 0 6px #f1aa44a6)}
28%{transform:translate3d(-2px,0,0) rotate(-.6deg) scale(1.026)}
33%{transform:translate3d(1px,0,0) rotate(.3deg) scale(1.013)}
}
@keyframes htZaloShakeV2{
0%,18%,43%,100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:drop-shadow(0 0 0 transparent)}
22%{transform:translate3d(-3px,0,0) rotate(-1deg) scale(1.035)}
26%{transform:translate3d(3px,0,0) rotate(1deg) scale(1.045);filter:drop-shadow(0 0 6px #35a8ff99)}
30%{transform:translate3d(-2px,0,0) rotate(-.65deg) scale(1.035)}
35%{transform:translate3d(1px,0,0) rotate(.3deg) scale(1.014)}
}
@media(prefers-reduced-motion:reduce){.hero-stage .hero-phone,.hero-stage .hero-zalo{animation:none!important;filter:none!important;transform:none!important}}

/* V4: responsive prices in real HTML, not a bitmap. */
.ht-pricing{padding:38px 16px 46px;background:linear-gradient(165deg,#061b35 0%,#102e51 62%,#061b35 100%);color:#f5f7fb;scroll-margin-top:20px}
.ht-pricing-intro{text-align:center;max-width:720px;margin:0 auto 24px}.ht-pricing-eyebrow{font-size:11px;font-weight:850;letter-spacing:.15em;color:#e7c67f}.ht-pricing h2{color:#f5d88e;font-size:clamp(27px,5vw,40px);margin:8px 0 7px}.ht-pricing-intro p{color:#d2dce8;font-size:14px;line-height:1.65;margin:0}
.ht-rate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin:auto}
.ht-rate-card{min-width:0;border:1px solid rgba(228,191,115,.6);border-radius:17px;background:#fff;color:#123050;overflow:hidden;box-shadow:0 12px 25px #0004;display:flex;flex-direction:column}
.ht-rate-heading{display:flex;align-items:center;gap:11px;background:linear-gradient(125deg,#082341,#123c65);padding:17px 17px;color:#fff;min-height:78px}
.ht-rate-index{border:1px solid #eacb88;border-radius:8px;color:#edcd86;padding:6px 7px;font-weight:800;font-size:13px}
.ht-rate-heading h3{margin:0;color:#fff;font-size:clamp(16px,2.3vw,21px);line-height:1.32}
.ht-rate-body{padding:8px 15px 12px;flex:1}
.ht-rate-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid #e7edf3;font-size:14px;line-height:1.35}
.ht-rate-row:last-child{border-bottom:0}.ht-rate-row strong{text-align:right;color:#af2026;max-width:54%;font-size:14px;line-height:1.4;font-weight:850}
.ht-book-route{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;text-align:center;padding:15px 10px;margin:0 13px 14px;background:linear-gradient(180deg,#f33745 0%,#c4061d 90%);color:#fff;text-decoration:none;border:1px solid #ffd58d;box-shadow:0 5px 0 #840b1b,0 10px 22px #b11d3440;border-radius:12px;font-size:14px;font-weight:900;transform-origin:center;animation:htBookingPulse 1.65s ease-in-out infinite;will-change:transform}
.ht-book-route span{font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.01em}
.ht-rate-card:nth-child(2n) .ht-book-route{animation-delay:.3s}
@keyframes htBookingPulse{0%,49%,100%{transform:translateX(0) scale(1)}55%{transform:translateX(-3px) rotate(-.4deg) scale(1.018)}61%{transform:translateX(3px) rotate(.4deg) scale(1.028)}67%{transform:translateX(-2px) scale(1.015)}73%{transform:translateX(1px) scale(1.01)}79%{transform:translateX(0) scale(1)}}
.ht-book-route:hover,.ht-book-route:focus-visible{filter:brightness(1.1)}.ht-rate-disclaimer{font-size:13px;line-height:1.7;text-align:center;color:#e2e8f0;max-width:730px;margin:22px auto 0}.ht-rate-disclaimer a{color:#f1d58e;font-weight:800}
@media(max-width:700px){.ht-rate-grid{grid-template-columns:1fr;gap:14px}.ht-pricing{padding:31px 12px 36px}.ht-rate-heading{min-height:unset;padding:14px 15px}.ht-rate-body{padding:6px 15px 10px}.ht-rate-row{font-size:14px;padding:10px 0}.ht-rate-row strong{font-size:14px}.ht-book-route{font-size:15px;min-height:53px}}
@media(prefers-reduced-motion:reduce){.ht-book-route{animation:none!important;will-change:auto}}

/* V5: Only the first and third buttons of the FIXED MOBILE bottom navigation shake.
   The middle pricing link and all other CTAs remain unchanged. */
@media (max-width:650px) and (prefers-reduced-motion:no-preference){
  .bottom-nav > a:first-child,
  .bottom-nav > a:last-child {
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    animation: htBottomCallJiggle 1.45s linear infinite;
  }
  .bottom-nav > a:last-child{animation-name: htBottomZaloJiggle;animation-delay:-.31s}
  .bottom-nav > a:nth-child(2){animation:none!important;transform:none!important}
  .bottom-nav > a:first-child:active,
  .bottom-nav > a:last-child:active{animation-play-state:paused}
}
@keyframes htBottomCallJiggle{
  0%,43%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  4%{transform:translate3d(-2px,0,0) rotate(-1.7deg)}
  8%{transform:translate3d(2px,0,0) rotate(1.7deg)}
  12%{transform:translate3d(-2px,0,0) rotate(-1.7deg)}
  16%{transform:translate3d(2px,0,0) rotate(1.7deg)}
  20%{transform:translate3d(-1.5px,0,0) rotate(-1deg)}
  24%{transform:translate3d(1.5px,0,0) rotate(1deg)}
  28%{transform:translate3d(-1px,0,0) rotate(-.5deg)}
  32%{transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes htBottomZaloJiggle{
  0%,43%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  4%{transform:translate3d(2px,0,0) rotate(1.7deg)}
  8%{transform:translate3d(-2px,0,0) rotate(-1.7deg)}
  12%{transform:translate3d(2px,0,0) rotate(1.7deg)}
  16%{transform:translate3d(-2px,0,0) rotate(-1.7deg)}
  20%{transform:translate3d(1.5px,0,0) rotate(1deg)}
  24%{transform:translate3d(-1.5px,0,0) rotate(-1deg)}
  28%{transform:translate3d(1px,0,0) rotate(.5deg)}
  32%{transform:translate3d(0,0,0) rotate(0deg)}
}