/*
Theme Name: Nha Xe Rong Da V15.36 - Dat Xe Nhanh Luxury
Author: Custom
Description: Giu nguyen giao dien V15.27, thay 4 anh gioi thieu dich vu bang bo anh luxury xanh navy - vang kim.
Version: 15.36
Requires PHP: 7.4
Text Domain: rong-da-v15-20-fast-cta
*/
:root{--blue:#092d60;--orange:#ff7800}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#17283c;background:#fff}a{text-decoration:none;color:inherit}.wrap{max-width:1150px;margin:auto;padding:0 18px}.header{background:#fff;position:sticky;top:0;z-index:30;box-shadow:0 2px 10px #0001}.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:15px}.brand{font-size:25px;line-height:1;font-style:italic;font-weight:900;color:var(--blue)}.brand:before{content:'🚘';margin-right:8px}.brand small{display:block;font-size:12px;color:var(--orange);margin:8px 0 0 45px}.nav{display:flex;gap:24px;align-items:center}.call{background:var(--orange);color:#fff;border-radius:12px;padding:14px 20px;font-weight:700}.hamb{display:none;border:0;background:none;font-size:30px;color:var(--blue)}.hero{background:linear-gradient(90deg,#071d38d9,#08264b77),url('assets/banner-rong-da-v15-20-neon.jpg') center/cover;min-height:450px;color:white;display:flex;align-items:center}.hero .wrap{width:100%}.hero h1{font-size:clamp(32px,5vw,58px);margin:0 0 15px}.hero h2{color:#ffad51;font-size:clamp(20px,3vw,34px);margin:0 0 20px}.hero p{line-height:1.8;font-size:18px;max-width:670px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.btn{display:inline-block;padding:15px 22px;border-radius:12px;font-weight:700}.btn.orange{background:var(--orange);color:#fff}.btn.white{background:#fff;color:var(--blue)}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:25px 0}.feature{padding:20px 10px;text-align:center;background:#f4f9ff;border-radius:15px;font-weight:700;color:var(--blue)}.feature span{display:block;font-size:29px;margin-bottom:10px}.section{padding:35px 0}.section h2{font-size:30px;color:var(--blue);margin:0 0 12px}.section h2:after{content:'';display:block;background:var(--orange);width:90px;height:4px;margin-top:12px}.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:26px}.route{border:1px solid #dae3ed;box-shadow:0 4px 14px #0000000d;border-radius:15px;padding:22px;display:flex;align-items:center;gap:18px}.route .emoji{font-size:44px}.route strong{color:var(--blue);display:block;font-size:19px}.route small{display:block;color:#5b6878;margin:9px 0}.route a{color:#0064ba;font-weight:700}.banner{width:100%;max-width:750px;display:block;margin:25px auto;border-radius:16px}.booking{background:#eff7ff;padding:30px 0}.booking form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.booking input,.booking select{padding:14px;border:1px solid #cad7e5;border-radius:9px;width:100%;font:inherit}.booking button{border:0;cursor:pointer;font-size:16px}.footer{background:var(--blue);color:#fff;padding:30px 0}.float{position:fixed;right:12px;bottom:35px;display:grid;gap:12px;z-index:35}.float a{display:grid;place-items:center;background:#0787ef;color:white;width:55px;height:55px;border-radius:50%;box-shadow:0 3px 12px #0003;font-weight:700}.float a.phone{background:#e51c35}.mobilebar{display:none}@media(max-width:800px){.header .wrap{min-height:70px}.brand{font-size:18px}.brand small{font-size:10px;margin-left:33px}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:white;padding:22px;flex-direction:column;box-shadow:0 10px 20px #0002}.nav.open{display:flex}.hamb{display:block}.header .call{padding:10px;font-size:0}.header .call:after{content:'☎';font-size:24px}.hero{min-height:480px;background-position:center}.hero p{font-size:15px}.features{grid-template-columns:repeat(4,1fr);gap:5px}.feature{font-size:12px;padding:14px 5px}.feature span{font-size:25px}.routes{grid-template-columns:1fr}.route{padding:14px}.section h2{font-size:25px}.booking form{grid-template-columns:1fr}.float{bottom:110px}.mobilebar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:end;justify-content:space-around;background:white;box-shadow:0 -4px 20px #0002;border-radius:25px 25px 0 0;height:83px;z-index:50;padding-bottom:7px}.mobilebar a,.mobilebar button{width:20%;text-align:center;font-size:12px;font-weight:bold;border:0;background:none;color:#263648}.mobilebar i{display:grid;place-items:center;margin:0 auto 5px;width:39px;height:39px;background:#0b9bf0;color:#fff;border-radius:50%;font-size:20px;font-style:normal}.mobilebar .main i{width:60px;height:60px;background:#d90074;border:4px solid white;margin-top:-33px;font-size:30px}.mobilebar .main{color:#0076a8}.footer{padding-bottom:115px}}

/* v1.1: Ẩn các widget liên hệ nổi bên TRÁI trên điện thoại.
   Giữ nguyên các nút nổi bên phải (.float) và thanh dưới (.mobilebar). */
@media (max-width: 800px) {
 .zalo-fixed-left, .phone-fixed-left, .float-contact-left, .left-contact-buttons,
 .zalo-left, .phone-left, .contact-left, .left-floating-contact {display:none!important;}
}

/* v1.2: animate only the center call icon in the mobile toolbar */
@media (max-width:800px) {
 .mobilebar .main i {position:relative;isolation:isolate;animation:xgPhoneShake 1.8s ease-in-out infinite;transform-origin:center center;}
 .mobilebar .main i::before,.mobilebar .main i::after {content:"";position:absolute;inset:-5px;border:2px solid #d90074;border-radius:50%;pointer-events:none;animation:xgPhonePulse 2.4s ease-out infinite;}
 .mobilebar .main i::after {animation-delay:1.2s;}
}
@keyframes xgPhoneShake {0%,30%,65%,100%{transform:rotate(0)}36%,48%,60%{transform:rotate(-15deg)}42%,54%{transform:rotate(15deg)}}
@keyframes xgPhonePulse {0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.mobilebar .main i,.mobilebar .main i::before,.mobilebar .main i::after{animation:none!important}}

/* v1.3: Ảnh riêng cho tuyến Nội Bài – Hải Phòng */
.route-photo{display:block;width:160px;height:100px;object-fit:cover;object-position:center;border-radius:10px;flex-shrink:0}
@media(max-width:800px){.route-photo{width:38%;max-width:170px;height:90px}.route{gap:12px}.route strong{font-size:16px}.route small{font-size:13px}}
@media(max-width:360px){.route-photo{width:34%;height:78px}}

/* V5: bảng giá rõ ràng, gọn nhẹ, ưu tiên điện thoại */
html{scroll-behavior:smooth;scroll-padding-top:90px}
.xg-pricing{background:linear-gradient(135deg,#f3f9ff,#fff);border-radius:24px;margin-top:24px;margin-bottom:10px;padding:28px 22px;border:1px solid #dbeafa;box-shadow:0 10px 30px #092d6010}
.price-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.price-kicker{font-size:12px;font-weight:800;color:#e51c35;letter-spacing:1.4px}.price-heading h2{margin:8px 0 10px}.price-heading p{line-height:1.6;color:#526277;max-width:720px}.price-call{white-space:nowrap;background:#ec183c;color:#fff;padding:13px 17px;border-radius:13px;font-weight:800}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:15px}.price-panel{background:#fff;border:1px solid #d8e5f4;border-radius:19px;padding:15px;box-shadow:0 5px 15px #092d600d}.price-panel-title{border-radius:13px;color:#fff;font-size:16px;font-weight:800;padding:13px 14px}.blue-title{background:linear-gradient(100deg,#0865b7,#092d60)}.red-title{background:linear-gradient(100deg,#f3493c,#ce1241)}.price-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 5px;border-bottom:1px solid #edf1f7}.price-line:last-child{border-bottom:0}.price-line span{font-weight:800;color:#14375f}.price-line small{display:block;font-weight:400;color:#63748a;font-size:12px;margin-top:5px}.price-line strong{color:#e10c32;font-size:clamp(17px,2.5vw,25px);white-space:nowrap}.price-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.price-zalo{border:1px solid #c5d8eb}
@media(max-width:800px){.xg-pricing{border-radius:18px;margin:16px 12px;padding:19px 12px}.price-heading{display:block}.price-call{display:inline-block;margin-top:6px}.price-grid{grid-template-columns:1fr;gap:12px}.price-panel{padding:10px}.price-line{padding:14px 4px}.price-line strong{font-size:21px}.price-actions .btn{flex:1;text-align:center;font-size:14px;padding:13px 9px}.section{scroll-margin-top:75px}}

/* V6: Hiển thị giá rõ ràng cho từng tuyến */
.route small{font-weight:600;color:#bd2942;line-height:1.6}.xg-price-note{font-size:13px;line-height:1.65;color:#53657c;margin:16px 0 0}.price-line strong{white-space:nowrap}@media(max-width:480px){.price-line{gap:8px}.price-line strong{font-size:17px}.route small{font-size:13px}}

/* V7 mobile-first route pricing; high-specificity and resilient layout */
body .xg-section-head{text-align:center;margin:0 auto 22px;max-width:650px}
body .xg-section-head h2{font-size:clamp(23px,4vw,32px);margin:7px 0 10px;color:#092d60}
body .xg-section-head h2:after{margin:12px auto 0}
body .xg-section-head p{font-size:15px;line-height:1.6;color:#526277;margin:0}
body .xg-eyebrow{font-size:12px;letter-spacing:1px;font-weight:800;color:#e85219}
body .xg-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body .xg-route-card{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #dce8f4;border-radius:18px;padding:20px;box-shadow:0 5px 20px #092d6010}
body .xg-route-top{display:flex;align-items:center;justify-content:space-between}
body .xg-route-icon{font-size:30px}
body .xg-route-tag{font-size:10px;letter-spacing:1px;font-weight:800;color:#0b67ad;background:#e8f4ff;border-radius:30px;padding:7px 10px}
body .xg-route-card h3{font-size:20px;line-height:1.35;color:#092d60;margin:12px 0 16px;overflow-wrap:break-word}
body .xg-route-price{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #eaf0f6;padding-top:13px}
body .xg-route-price span{font-size:14px;color:#526277;white-space:nowrap}
body .xg-route-price strong{font-size:25px;color:#df1535;white-space:nowrap}
body .xg-two{font-size:13px;color:#4e6075;margin:9px 0 0;line-height:1.5}
body .xg-book-btn{display:block;text-align:center;background:#ff7800;color:white;border-radius:11px;padding:12px;margin-top:auto;font-size:15px;font-weight:800}
body .xg-route-card .xg-book-btn{margin-top:18px}
body .xg-private{background:#f1f7ff;border:1px solid #dce8f4;border-radius:22px;padding:25px}
body .xg-private-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body .xg-private-card{background:#fff;border:1px solid #dbe7f3;border-radius:16px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px}
body .xg-private-card span{font-size:18px;font-weight:800;color:#092d60}
body .xg-private-card strong{font-size:clamp(23px,3vw,30px);color:#e3193c;white-space:nowrap}
body .xg-private-card small{font-size:13px;color:#6a798b}
body .xg-private-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
body .xg-private-actions .white{border:1px solid #ccdced}
@media(max-width:800px){body .xg-route-grid{grid-template-columns:1fr;gap:12px}body .xg-route-card{padding:16px}body .xg-route-card h3{font-size:19px}body .xg-route-price strong{font-size:23px}body .xg-private{padding:17px 12px}body .xg-private-grid{gap:9px}body .xg-private-card{padding:14px 7px}body .xg-private-card span{font-size:14px}body .xg-private-card strong{font-size:20px}body .xg-private-actions .btn{font-size:14px;padding:12px}body .float{display:none!important}body .section{padding-top:24px;padding-bottom:24px}body .mobilebar{padding-bottom:env(safe-area-inset-bottom,7px);height:calc(83px + env(safe-area-inset-bottom,0px))}}
@media(max-width:380px){body .xg-private-card strong{font-size:18px}body .xg-route-price strong{font-size:21px}}

/* V8 - screenshot-approved hero with functioning call and booking hotspots */
.xg-visual-hero{background:linear-gradient(90deg,#e9f4ff,#fff,#e9f4ff);margin:0;padding:0}
.xg-visual-inner{max-width:793px;margin:auto;position:relative;line-height:0}
.xg-visual-inner>img,.xg-visual-features img{width:100%;height:auto;display:block}
.xg-hotspot{position:absolute;display:block;z-index:2;border-radius:15px}
.xg-hotspot:focus-visible{outline:4px solid #ffb900;outline-offset:-4px}
.xg-hotspot-call{left:3%;top:82%;width:58%;height:12%}
.xg-hotspot-book{left:63%;top:82%;width:35%;height:12%}
.xg-visual-features{max-width:793px;margin:auto;line-height:0}
.header .brand{position:relative;padding-left:43px}
.header .brand:before{content:'🚘';position:absolute;left:0;top:0;font-size:28px}
@media(max-width:800px){
.header .wrap{padding:0 15px;min-height:65px}
.header .brand{font-size:19px;padding-left:36px}
.header .brand:before{font-size:24px}
.header .brand small{margin-left:0;font-size:10px}
.header .call{background:#ff7900;border-radius:15px;min-width:50px;min-height:50px;display:grid;place-items:center}
.header .call:after{font-size:23px}
.xg-visual-hero{background:#fff}
.xg-visual-features{margin-bottom:12px}
body{padding-bottom:90px}
}

/* V9 responsive hero: preserve full image width on mobile */
html,body{overflow-x:hidden;max-width:100%}.xg-visual-inner,.xg-visual-features{width:100%;max-width:793px;min-width:0}.xg-visual-inner>img,.xg-visual-features>img{width:100%;max-width:100%;height:auto;object-fit:contain}

/* V11: Two-passenger pricing */
body .xg-two{background:#fff4f5;border:1px solid #ffd5dc;padding:10px 12px;border-radius:10px;color:#153052;font-size:15px;margin:9px 0 4px}body .xg-two b{color:#d71935;font-size:20px;white-space:nowrap}

/* V13 - Thông tin đơn vị kinh doanh tại cuối trang */
.xg-business-info{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.xg-business-info div:nth-child(2){font-weight:800;font-size:17px;letter-spacing:.04em}
@media(max-width:600px){.xg-business-info{font-size:13px;line-height:1.7;padding-bottom:12px}}

/* V15: footer business identification */
.xg-business-info .xg-owner-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
@media(max-width:600px){.xg-business-info .xg-owner-line{display:flex;flex-direction:column;align-items:flex-start;gap:3px}}

/* v15.4: clearly readable fare labels and responsive feature strip */
body .xg-feature-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:100%;padding:20px 8px;background:#fff;box-shadow:0 3px 12px #092d6010}
body .xg-feature{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:8px 3px;border-right:1px solid #e4e8ee;min-width:0}
body .xg-feature:last-child{border-right:0}
body .xg-feature-icon{font-size:clamp(22px,5vw,38px);line-height:1.2}
body .xg-feature-icon.blue{color:#1265a6}body .xg-feature-icon.red{color:#e7192b}
body .xg-feature strong{font-size:clamp(11px,2.9vw,17px);line-height:1.25;color:#092d60;font-weight:800}
body .xg-route-price span{font-size:clamp(16px,3.6vw,20px)!important;font-weight:800!important;color:#092d60!important;white-space:normal!important;line-height:1.3}
body .xg-route-price strong{font-size:clamp(21px,5.2vw,29px)!important}
body .xg-route-second,body .xg-route-delivery{margin-top:9px!important;border:1px solid #f9dce2!important;background:#fff5f6;border-radius:10px;padding:10px 12px!important}
body .xg-route-price{gap:8px!important}
@media(max-width:370px){body .xg-route-price strong{font-size:20px!important}body .xg-route-price span{font-size:15px!important}}

/* V15.5: Fare rows align in two stable columns on all mobile widths. */
body .xg-route-card{box-sizing:border-box;min-width:0}
body .xg-route-card .xg-route-price{
 display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
 align-items:center!important;column-gap:12px!important;
 min-width:0!important;width:100%!important;box-sizing:border-box!important;
 padding:13px 12px!important;min-height:64px!important;
 border:1px solid #f6dbe1!important;border-radius:12px!important;
 background:#fff5f6!important;margin-top:8px!important;
}
body .xg-route-card .xg-route-price span{
 min-width:0!important;max-width:100%!important;overflow-wrap:normal!important;
 white-space:normal!important;font-size:clamp(15px,3.8vw,19px)!important;
 font-weight:800!important;line-height:1.3!important;color:#092d60!important;
}
body .xg-route-card .xg-route-price strong{
 display:block!important;min-width:0!important;white-space:nowrap!important;
 text-align:right!important;font-size:clamp(19px,5vw,26px)!important;
 font-weight:900!important;line-height:1.2!important;color:#df1535!important;
 font-variant-numeric:tabular-nums!important;
}
body .xg-route-card .xg-route-price:first-of-type{border-color:#f6dbe1!important}
body .xg-route-card h3{font-size:clamp(20px,4.8vw,25px)!important;line-height:1.3!important}
body .xg-route-card .xg-book-btn{width:100%;box-sizing:border-box;text-align:center}
@media(max-width:380px){body .xg-route-card{padding:13px!important}body .xg-route-card .xg-route-price{column-gap:6px!important;padding:12px 9px!important}body .xg-route-card .xg-route-price span{font-size:14px!important}body .xg-route-card .xg-route-price strong{font-size:18px!important}}

/* V15.7 - private ride prices, responsive alignment */
.xg-private-v157{background:#eef5ff;border:1px solid #d3e3f6;border-radius:26px;padding:clamp(18px,4vw,34px);text-align:center}
.xg-private-v157 .xg-section-head h2{margin:8px 0 20px}
.xg-private-price-range{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid #d2e1f5;border-radius:70px;padding:18px 10px;margin:20px 0 22px}
.xg-private-price-range strong{color:#d80c28;font-size:clamp(23px,5.4vw,39px);font-weight:900;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.xg-private-price-range span{color:#657487;font-size:clamp(13px,3.2vw,17px)}
.xg-private-v157 .xg-private-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.xg-private-v157 .xg-private-card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-width:0;background:#fff;border:1px solid #d2e1f5;border-radius:17px;padding:16px 9px}
.xg-private-v157 .xg-private-card .xg-service-icon{font-size:35px;line-height:1.1}
.xg-private-v157 .xg-private-card strong{color:#10325c;font-size:clamp(15px,3.3vw,21px);font-weight:800;line-height:1.25}
.xg-private-v157 .xg-private-card small{font-size:clamp(12px,2.8vw,16px);color:#63758a;line-height:1.3}
.xg-private-note{color:#3d526c;line-height:1.55;margin:22px auto;max-width:620px;font-size:clamp(14px,3.2vw,17px)}
.xg-private-v157 .xg-private-actions{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px}
.xg-private-v157 .xg-private-actions .btn{display:flex;justify-content:center;align-items:center;text-align:center;min-width:0;padding:13px 7px;font-size:clamp(12px,2.9vw,16px);white-space:normal}
@media(max-width:360px){.xg-private-price-range strong{font-size:21px}.xg-private-v157 .xg-private-grid{gap:7px}.xg-private-v157 .xg-private-card{padding:12px 5px}}

/* V15.8: variable fares on Hanoi–Que Vo route; prevent price collisions on narrow screens. */
.xg-route-variable .xg-route-price{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;gap:5px!important;padding:12px 13px!important}
.xg-route-variable .xg-route-price span{font-size:clamp(16px,3.6vw,20px)!important;line-height:1.3!important}
.xg-route-variable .xg-route-price strong{font-size:clamp(20px,4.7vw,28px)!important;white-space:normal!important;overflow-wrap:normal!important;line-height:1.25!important;justify-self:start!important}
.xg-price-location-note{margin:9px 0 14px;color:#5b6878;font-size:14px;font-weight:700;text-align:center}
@media(max-width:380px){.xg-route-variable .xg-route-price strong{font-size:20px!important}}

/* V15.11 approved premium visual poster */
.xg-visual-inner{max-width:793px!important}.xg-visual-inner>img{height:auto!important;object-fit:contain!important}.xg-hotspot-call{left:3%;top:74%;width:56%;height:11%}.xg-hotspot-book{left:59%;top:74%;width:39%;height:11%}

/* V15.12: full approved premium poster with correct responsive hit areas */
body .xg-visual-hero{background:linear-gradient(90deg,#e9f4ff,#fff,#e9f4ff)}
body .xg-visual-inner{max-width:793px!important;margin:0 auto!important}
body .xg-visual-inner>img{height:auto!important;object-fit:contain!important}
body .xg-hotspot:focus-visible{outline:4px solid #ffb700!important;outline-offset:-4px}


/* V15.14 — Professional lightweight animation directly over the approved banner.
   No GIF/video download, text remains crisp, and call/Zalo hotspots remain clickable. */
.xg-visual-inner .xg-motion-layer{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:none;
  contain:layout paint;
}
.xg-visual-inner.xg-motion-enabled .xg-motion-layer{display:block}
.xg-motion-layer span{position:absolute;display:block;pointer-events:none;will-change:opacity,transform,background-position}
/* Dragon logo: softly radiating gold highlight, never flashing. */
.xg-motion-logo{
  left:2.5%;top:.5%;width:39%;height:11%;
  background:radial-gradient(ellipse at 35% 45%,rgba(255,233,125,.3) 0%,rgba(255,216,92,.1) 40%,transparent 68%);
  mix-blend-mode:screen;animation:xgDragonBreath 8s ease-in-out infinite;
}
/* Slanted headline sheen clipped to the sign (not the surrounding copy). */
.xg-motion-title{
  left:18%;top:10%;width:69%;height:23%;overflow:hidden;
  clip-path:polygon(22% 5%,91% 0%,100% 70%,79% 97%,0% 90%,7% 18%);
  background:linear-gradient(107deg,transparent 0%,transparent 38%,rgba(255,241,179,0) 45%,rgba(255,245,197,.30) 49%,rgba(255,250,217,.07) 53%,transparent 59%);
  background-size:260% 100%;background-position:120% 0;
  mix-blend-mode:screen;animation:xgTitleShine 9s ease-in-out infinite;
}
/* Narrow sheen moving across the vehicle's body at sunset. */
.xg-motion-car-shine{
  left:33%;top:38%;width:64%;height:26%;overflow:hidden;
  clip-path:polygon(14% 16%,64% 0%,100% 20%,100% 72%,78% 100%,7% 100%,0% 49%);
  background:linear-gradient(109deg,transparent 27%,rgba(218,236,255,0) 39%,rgba(217,242,255,.24) 46%,transparent 56%);
  background-size:270% 100%;background-position:100% 0;
  mix-blend-mode:screen;animation:xgCarShine 8.5s linear infinite;
}
/* The original headlights are in the image; glow at those same locations. */
.xg-motion-headlights{
  inset:0;
  background:
   radial-gradient(ellipse 3.2% 1.4% at 37.3% 49.5%,rgba(194,233,255,.75),rgba(111,190,255,.14) 65%,transparent 100%),
   radial-gradient(ellipse 3.2% 1.4% at 61.7% 49.2%,rgba(194,233,255,.86),rgba(111,190,255,.18) 65%,transparent 100%),
   radial-gradient(ellipse 4.1% 2.1% at 38% 59%,rgba(188,226,255,.42),transparent 100%),
   radial-gradient(ellipse 4.1% 2.1% at 61% 59%,rgba(188,226,255,.42),transparent 100%);
  mix-blend-mode:screen;animation:xgHeadlightBreath 5.5s ease-in-out infinite;
}
/* Moving gold road reflection makes the vehicle look active without distorting its details. */
.xg-motion-road{
  left:26%;top:62.5%;width:65%;height:2.2%;transform:rotate(-8deg);
  background:linear-gradient(90deg,transparent 0%,rgba(255,221,120,0) 30%,rgba(255,232,161,.5) 48%,rgba(255,242,193,.9) 52%,rgba(255,207,88,0) 66%,transparent 100%);
  background-size:240% 100%;mix-blend-mode:screen;opacity:0;
  animation:xgRoadSweep 7s ease-in-out infinite;
}
/* Very gentle soft highlights on the destination-icon strip. */
.xg-motion-locations{
  inset:0;
  background:
    radial-gradient(ellipse 3% 1.5% at 18% 80.4%,rgba(255,221,129,.40),transparent 100%),
    radial-gradient(ellipse 3% 1.5% at 42% 80.4%,rgba(255,221,129,.35),transparent 100%),
    radial-gradient(ellipse 3% 1.5% at 64% 80.4%,rgba(255,221,129,.38),transparent 100%),
    radial-gradient(ellipse 3% 1.5% at 86% 80.4%,rgba(255,221,129,.35),transparent 100%);
  mix-blend-mode:screen;animation:xgIconGlint 7.5s ease-in-out infinite;
}
/* Interactive, accessible overlays on the exact printed phone/Zalo buttons. */
.xg-motion-enabled .xg-hotspot-call,
.xg-motion-enabled .xg-hotspot-book{
  z-index:4!important;border-radius:99px;outline-offset:-4px;
  animation:xgButtonBreathe 4.8s ease-in-out infinite;
}
.xg-motion-enabled .xg-hotspot-book{animation-delay:1.8s}
.xg-visual-inner .xg-hotspot{touch-action:manipulation}
@keyframes xgDragonBreath{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.62;transform:scale(1.025)}}
@keyframes xgTitleShine{0%,18%{opacity:0;background-position:120% 0}29%{opacity:.9}44%{opacity:.7;background-position:-120% 0}47%,100%{opacity:0;background-position:-120% 0}}
@keyframes xgCarShine{0%,30%{opacity:0;background-position:125% 0}42%{opacity:.72}57%{opacity:.3;background-position:-125% 0}60%,100%{opacity:0;background-position:-125% 0}}
@keyframes xgHeadlightBreath{0%,100%{opacity:.1}50%{opacity:.75}}
@keyframes xgRoadSweep{0%,21%{opacity:0;background-position:115% 0}35%{opacity:.7}51%{opacity:0;background-position:-125% 0}100%{opacity:0}}
@keyframes xgIconGlint{0%,100%{opacity:.08}50%{opacity:.45}}
@keyframes xgButtonBreathe{0%,100%{box-shadow:0 0 0 0 rgba(255,219,124,0)}50%{box-shadow:0 0 0 3px rgba(255,230,154,.5),0 0 17px rgba(255,220,122,.4)}}
/* Power-conscious: do not animate for people who request reduced motion. */
@media(prefers-reduced-motion:reduce){
 .xg-motion-layer span,.xg-motion-enabled .xg-hotspot-call,.xg-motion-enabled .xg-hotspot-book{animation:none!important}
 .xg-motion-layer{display:none!important}
}
@media(max-width:600px){
 .xg-motion-logo{opacity:.26}
 .xg-motion-title{opacity:.3}
 .xg-motion-enabled .xg-hotspot-call,.xg-motion-enabled .xg-hotspot-book{border-radius:14px}
}


/* V15.16 – Nút cam "Đặt xe ngay" rung lắc liên tục không nghỉ.
   Chỉ tác động vào CTA ở 6 thẻ tuyến; không làm dịch chuyển bố cục,
   không ảnh hưởng các nút Gọi ngay, Zalo hoặc banner gốc. */
body .xg-route-card a.xg-book-btn{
  transform-origin:center center;
  animation:xgBookingShakeContinuous .72s linear infinite;
  -webkit-tap-highlight-color:transparent;
}
@keyframes xgBookingShakeContinuous{
  0%,100%{transform:translateX(0) rotate(0deg) scale(1)}
  12.5%{transform:translateX(-2px) rotate(-1.2deg) scale(1.007)}
  25%{transform:translateX(2px) rotate(1.2deg) scale(1.009)}
  37.5%{transform:translateX(-2px) rotate(-1.1deg) scale(1.009)}
  50%{transform:translateX(2px) rotate(1.1deg) scale(1.007)}
  62.5%{transform:translateX(-2px) rotate(-1.2deg) scale(1.009)}
  75%{transform:translateX(2px) rotate(1.2deg) scale(1.007)}
  87.5%{transform:translateX(-2px) rotate(-1.1deg) scale(1.007)}
}
/* Giữ nút đứng yên khi khách đang tương tác; tôn trọng tùy chọn trợ năng. */
body .xg-route-card a.xg-book-btn:hover,
body .xg-route-card a.xg-book-btn:focus-visible,
body .xg-route-card a.xg-book-btn:active{animation-play-state:paused}
body .xg-route-card a.xg-book-btn:focus-visible{outline:3px solid #124e9c;outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  body .xg-route-card a.xg-book-btn{animation:none!important;transform:none!important;filter:none!important}
}
@media print{body .xg-route-card a.xg-book-btn{animation:none!important}}


/* V15.17 – Xe ô tô trong banner di chuyển từ dưới lên để tạo cảm giác xe chạy thật.
   Dùng lớp PNG tách riêng của Kia Carnival, đặt trên banner gốc.
   Hiệu ứng mượt, lặp liên tục nhưng không quá gắt. */
.xg-motion-car-drive{
  position:absolute; left:36.6%; top:34.7%; width:60.8%; height:34.5%;
  background-image:url("assets/car-cutout.png");
  background-repeat:no-repeat; background-size:contain; background-position:center bottom;
  transform-origin:center bottom; opacity:0; filter:drop-shadow(0 18px 18px rgba(1,27,67,.20));
  animation:xgCarDriveFromBottom 6.2s cubic-bezier(.22,.9,.19,1) infinite;
}
.xg-motion-car-shadow{
  position:absolute; left:46%; top:60.8%; width:37%; height:3.3%;
  background:radial-gradient(ellipse at center, rgba(0,16,52,.34) 0%, rgba(0,16,52,.20) 36%, rgba(0,16,52,0) 74%);
  transform-origin:center center; opacity:0; filter:blur(1px);
  animation:xgCarShadowDrive 6.2s cubic-bezier(.22,.9,.19,1) infinite;
}
@keyframes xgCarDriveFromBottom{
  0%{transform:translateY(56px) scale(.93);opacity:0}
  8%{transform:translateY(36px) scale(.955);opacity:.15}
  18%{transform:translateY(16px) scale(.98);opacity:.78}
  28%,62%{transform:translateY(0) scale(1);opacity:1}
  72%{transform:translateY(-2px) scale(1.003);opacity:1}
  82%{transform:translateY(0) scale(1);opacity:.96}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes xgCarShadowDrive{
  0%{transform:scale(.78);opacity:0}
  12%{transform:scale(.88);opacity:.08}
  28%,62%{transform:scale(1);opacity:.34}
  72%{transform:scale(1.03);opacity:.28}
  100%{transform:scale(1);opacity:.30}
}
@media(prefers-reduced-motion:reduce){
  .xg-motion-car-drive,.xg-motion-car-shadow{animation:none!important;opacity:1!important;transform:none!important}
}
@media(max-width:600px){
  .xg-motion-car-drive{left:36.2%;top:35.2%;width:61.2%;height:34.1%}
  .xg-motion-car-shadow{left:45.8%;top:61.2%;width:37.8%}
}


/* V15.18: xe di chuyển mạnh từ dưới lên và lao tới trước khán giả.
   Car is an independent transparent WebP layer aligned to the original poster crop,
   so the text and hotline stay stable. Hotspots remain on top and clickable. */
.xg-visual-inner.xg-motion-enabled .xg-motion-car-drive{
  left:28.51%!important;top:35.81%!important;
  width:66.29%!important;height:32.55%!important;
  background:url("assets/car-cutout-v15-18.webp") center/100% 100% no-repeat!important;
  transform-origin:63% 78%!important;
  opacity:1;
  filter:drop-shadow(0 5px 3px rgba(0,14,39,.20));
  animation:xgCarDriveStrong 4.5s cubic-bezier(.18,.78,.14,1) infinite!important;
}
@keyframes xgCarDriveStrong{
  0%{transform:translate(10px,44px) scale(.96);opacity:.05;filter:drop-shadow(0 0 0 rgba(12,39,71,0))}
  10%{transform:translate(8px,33px) scale(.968);opacity:.52}
  21%{transform:translate(3px,14px) scale(.993);opacity:.9}
  31%{transform:translate(-2px,-10px) scale(1.035);opacity:1}
  40%{transform:translate(-1px,-4px) scale(1.018);opacity:1}
  49%,78%{transform:translate(0,0) scale(1);opacity:1;filter:drop-shadow(0 7px 6px rgba(0,14,39,.25))}
  89%{transform:translate(-2px,-3px) scale(1.013);opacity:1}
  100%{transform:translate(10px,44px) scale(.96);opacity:0}
}
.xg-visual-inner.xg-motion-enabled .xg-motion-car-shadow{
  left:44%!important;top:61.0%!important;width:42%!important;height:5%!important;
  animation:xgCarShadowStrong 4.5s ease-out infinite!important;
}
@keyframes xgCarShadowStrong{
  0%{opacity:0;transform:translateY(18px) scale(.80)}
  25%{opacity:.7;transform:translateY(5px) scale(.95)}
  49%,78%{opacity:.4;transform:translateY(0) scale(1.05)}
  100%{opacity:0;transform:translateY(18px) scale(.80)}
}
/* Motion-blurred blue and gold light ribbons on roadway, not over the text. */
.xg-motion-speed-trails{
  left:36%;top:61.1%;width:58%;height:6%;
  transform-origin:left center;transform:skewY(-8deg);
  background:repeating-linear-gradient(176deg,
     transparent 0 15%,rgba(115,203,255,.38) 17%,transparent 20%,
     transparent 40%,rgba(255,217,107,.58) 43%,transparent 46%,transparent 66%);
  mask-image:linear-gradient(90deg,transparent,black 30%,black 85%,transparent);
  mix-blend-mode:screen;
  animation:xgSpeedTrailStrong 4.5s ease-in-out infinite!important;
}
@keyframes xgSpeedTrailStrong{
  0%{opacity:0;transform:translate(42px,16px) skewY(-8deg) scaleX(.6)}
  10%{opacity:.15}
  21%{opacity:.94;transform:translate(0,3px) skewY(-8deg) scaleX(1.06)}
  40%{opacity:.40;transform:translate(-26px,0) skewY(-8deg) scaleX(1.0)}
  49%,82%{opacity:.08;transform:translate(-36px,0) skewY(-8deg)}
  100%{opacity:0}
}
/* A brief powerful headlight burst at arrival. */
.xg-visual-inner.xg-motion-enabled .xg-motion-headlights{
  animation:xgHeadlightArrivalStrong 4.5s ease-in-out infinite!important;
}
@keyframes xgHeadlightArrivalStrong{
  0%,8%{opacity:0}22%{opacity:.5}33%{opacity:1}55%{opacity:.25}75%{opacity:.7}100%{opacity:0}
}
/* Accessibility: respect reduced-motion without hiding the banner or its links. */
@media(prefers-reduced-motion:reduce){
 .xg-visual-inner .xg-motion-car-drive,.xg-visual-inner .xg-motion-car-shadow,
 .xg-visual-inner .xg-motion-speed-trails{animation:none!important;opacity:0!important}
}
@media print{
 .xg-visual-inner .xg-motion-car-drive,.xg-visual-inner .xg-motion-car-shadow,
 .xg-visual-inner .xg-motion-speed-trails{animation:none!important;opacity:0!important}
}



/* V15.19 - xe trong suốt có KHUNG CẮT bảo đảm không che các nút hotline và Zalo.
   Lớp banner gốc được giữ lại khi tắt chuyển động. */
body .xg-visual-inner>img.xg-v1519-empty-road{
  position:absolute!important;inset:0!important;
  display:none!important;width:100%!important;height:100%!important;
  max-width:100%!important;object-fit:fill!important;
  z-index:1!important;pointer-events:none!important;
}
body .xg-visual-inner.xg-motion-enabled>img.xg-v1519-empty-road{display:block!important}
body .xg-visual-inner.xg-motion-enabled .xg-v1519-vehicle-window{
  position:absolute!important;left:28.51%!important;top:35.81%!important;
  width:66.29%!important;height:32.55%!important;
  overflow:hidden!important;display:block!important;z-index:3!important;
  pointer-events:none!important;
}
body .xg-visual-inner.xg-motion-enabled .xg-v1519-car{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  background-image:url('assets/car-cutout-v15-18.webp')!important;
  background-size:100% 100%!important;
  background-position:center!important;background-repeat:no-repeat!important;
  transform-origin:65% 85%!important;will-change:transform,opacity;
  filter:drop-shadow(1px 6px 6px rgba(0,17,49,.24));
  animation:xgVehicleArriveClearly 3.6s cubic-bezier(.14,.82,.16,1) infinite!important;
}
@keyframes xgVehicleArriveClearly{
  0%{transform:translateY(85%) scale(.84);opacity:0}
  9%{transform:translateY(70%) scale(.85);opacity:.75}
  32%{transform:translateY(7%) scale(.98);opacity:1}
  43%{transform:translateY(-3%) scale(1.025);opacity:1}
  51%,82%{transform:translateY(0) scale(1);opacity:1}
  91%{transform:translateY(-1.5%) scale(1.01);opacity:1}
  100%{transform:translateY(85%) scale(.84);opacity:0}
}
body .xg-visual-inner.xg-motion-enabled .xg-motion-speed-trails{animation:xgSpeedTrailStrong 3.6s ease-in-out infinite!important}
body .xg-visual-inner.xg-motion-enabled .xg-hotspot{z-index:5!important}
body .xg-visual-inner.xg-motion-enabled .xg-motion-layer{z-index:2!important;overflow:hidden!important}
@media(prefers-reduced-motion:reduce){
 body .xg-visual-inner.xg-motion-enabled>img.xg-v1519-empty-road{display:none!important}
 body .xg-visual-inner.xg-motion-enabled .xg-motion-layer{display:none!important}
 body .xg-visual-inner.xg-motion-enabled .xg-v1519-car{animation:none!important;opacity:0!important}
}
@media print{
 body .xg-visual-inner.xg-motion-enabled>img.xg-v1519-empty-road{display:none!important}
 body .xg-visual-inner.xg-motion-enabled .xg-motion-layer{display:none!important}
}


/* V15.20 — Motion is on the visible text and entire button, not an invisible hotspot.
   Designed to cover the static button artwork already inside the approved poster. */
body .xg-visual-inner {isolation:isolate}
body .xg-visual-inner .xg-cta-stage {
  display:block;position:absolute;left:0;top:63.35%;width:100%;height:12.5%;
  background:linear-gradient(100deg,#052759 0%,#07518b 49%,#032a67 85%,#04275a 100%);
  box-shadow:inset 0 2px 8px rgba(0,102,204,.30),inset 0 -2px 8px rgba(8,34,78,.35);
  z-index:3;pointer-events:none;
}
body .xg-visual-inner .xg-cta-stage:before {
 content:"";position:absolute;left:0;right:0;top:0;height:3%;
 background:linear-gradient(90deg,transparent,rgba(255,214,93,.45),rgba(0,191,255,.65),transparent);
}
body .xg-visual-inner .xg-cta-stage:after {
 content:"";position:absolute;left:0;right:0;bottom:0;height:3%;
 background:linear-gradient(90deg,transparent,rgba(0,168,255,.5),rgba(255,222,122,.55),transparent);
}
body .xg-visual-inner .xg-hotspot {
 position:absolute!important;z-index:7!important;display:block!important;
 text-decoration:none!important;touch-action:manipulation;
 overflow:visible!important;background:transparent!important;
}
body .xg-visual-inner .xg-hotspot-call{left:6.7%!important;top:65.35%!important;width:46.7%!important;height:8.8%!important}
body .xg-visual-inner .xg-hotspot-book{left:58.4%!important;top:65.35%!important;width:35.8%!important;height:8.8%!important}
body .xg-visual-inner .xg-cta-art{
 box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:clamp(2px,.8vw,11px);
 width:100%;height:100%;min-width:0;border-radius:999px;
 color:#fff;line-height:1.04!important;font-family:Arial,system-ui,sans-serif;
 transform-origin:50% 50%;will-change:transform,filter;
}
body .xg-visual-inner .xg-cta-call-art{
 border:clamp(2px,.3vw,4px) solid #ffda56;
 background:linear-gradient(180deg,#ff4136 0%,#ed020c 41%,#b00000 100%);
 box-shadow:0 4px 13px rgba(3,4,20,.75),inset 0 3px 5px rgba(255,255,255,.5),0 0 12px rgba(255,74,27,.95);
}
body .xg-visual-inner .xg-cta-zalo-art{
 border:clamp(2px,.3vw,4px) solid #dff5ff;
 background:linear-gradient(180deg,#12bcfa 0%,#0872ed 35%,#0633ab 100%);
 box-shadow:0 4px 13px rgba(3,4,20,.6),inset 0 3px 5px rgba(255,255,255,.45),0 0 12px rgba(13,185,255,.9);
}
body .xg-visual-inner .xg-cta-glyph {font-size:clamp(15px,4.1vw,38px);font-weight:900;line-height:1;flex:none}
body .xg-visual-inner .xg-cta-copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(1px,.2vw,4px);min-width:0}
body .xg-visual-inner .xg-cta-copy small{font-size:clamp(8px,2.1vw,18px);font-weight:800;line-height:1}
body .xg-visual-inner .xg-cta-copy strong{font-size:clamp(11px,3vw,26px);font-weight:900;white-space:nowrap;line-height:1;letter-spacing:-.025em}
body .xg-visual-inner .xg-zalo-mark{display:flex;align-items:center;justify-content:center;flex:none;background:#fff;color:#006ad6;border-radius:clamp(5px,1.4vw,12px);padding:clamp(3px,.7vw,7px);font-weight:900;font-size:clamp(9px,2.2vw,19px);letter-spacing:-.04em}
body .xg-visual-inner .xg-zalo-copy{font-weight:900;font-size:clamp(10px,2.55vw,23px);white-space:nowrap;letter-spacing:-.04em}
body .xg-visual-inner .xg-cta-chevron{font-weight:900;font-size:clamp(16px,3vw,30px);line-height:1}
/* Short, rapid side-to-side shaking without pauses; the hit target stays stable. */
body .xg-visual-inner.xg-motion-enabled .xg-cta-call-art{animation:xgV1520FastCTA .46s ease-in-out infinite!important}
body .xg-visual-inner.xg-motion-enabled .xg-cta-zalo-art{animation:xgV1520FastCTA .50s ease-in-out infinite reverse!important}
@keyframes xgV1520FastCTA{
  0%,100%{transform:translateX(0) rotate(0deg) scale(1);filter:brightness(1)}
  16%{transform:translateX(-5px) rotate(-1.4deg) scale(1.023);filter:brightness(1.14)}
  34%{transform:translateX(5px) rotate(1.4deg) scale(1.027);filter:brightness(1.04)}
  52%{transform:translateX(-4px) rotate(-1.1deg) scale(1.025);filter:brightness(1.16)}
  72%{transform:translateX(5px) rotate(1.3deg) scale(1.027);filter:brightness(1.03)}
  87%{transform:translateX(-3px) rotate(-.8deg) scale(1.018);filter:brightness(1.12)}
}
body .xg-visual-inner .xg-hotspot:hover .xg-cta-art,
body .xg-visual-inner .xg-hotspot:focus-visible .xg-cta-art,
body .xg-visual-inner .xg-hotspot:active .xg-cta-art{animation-play-state:paused!important;filter:brightness(1.2)}
body .xg-visual-inner .xg-hotspot:focus-visible{outline:3px solid #ffe650!important;outline-offset:4px!important}
@media(max-width:420px){
 body .xg-visual-inner .xg-cta-glyph{font-size:clamp(12px,3.9vw,17px)}
 body .xg-visual-inner .xg-cta-copy strong{font-size:clamp(11px,3.25vw,14px)}
 body .xg-visual-inner .xg-zalo-mark{font-size:clamp(8px,2.05vw,10px)}
 body .xg-visual-inner .xg-zalo-copy{font-size:clamp(9px,2.55vw,11px)}
 body .xg-visual-inner .xg-cta-chevron{display:none}
}
@media(prefers-reduced-motion:reduce){
 body .xg-visual-inner.xg-motion-enabled .xg-cta-art{animation:none!important;transform:none!important;filter:none!important}
}
@media print{body .xg-visual-inner .xg-cta-art{animation:none!important;transform:none!important}}

/* V15.20 route-title correction: Nội Bài – Hải Phòng banner asset dimensions and CTA overlay alignment */
body .xg-visual-inner .xg-cta-stage{top:54.1%!important;height:10.2%!important}
body .xg-visual-inner .xg-hotspot-call{left:8.2%!important;top:54.7%!important;width:44.5%!important;height:8.1%!important}
body .xg-visual-inner .xg-hotspot-book{left:56.3%!important;top:54.7%!important;width:35.5%!important;height:8.1%!important}


/* V15.20 banner replacement: portrait luxury artwork (864 x 1536).
   Rebuild the two CTA buttons as real links over the printed CTA area.
   The overlay masks the static lettering in the JPEG so each button can shake visibly. */
body .xg-visual-inner .xg-cta-stage{
  top:78.25%!important;
  height:16.0%!important;
  background:linear-gradient(180deg,rgba(3,39,91,.97),rgba(5,50,111,.98) 58%,rgba(4,35,83,.96))!important;
  box-shadow:inset 0 2px 9px rgba(255,205,89,.22),inset 0 -2px 9px rgba(255,205,89,.18)!important;
}
body .xg-visual-inner .xg-hotspot-call{
  left:10.0%!important;top:79.35%!important;width:80.0%!important;height:6.65%!important;
}
body .xg-visual-inner .xg-hotspot-book{
  left:17.0%!important;top:87.55%!important;width:66.0%!important;height:6.35%!important;
}
body .xg-visual-inner .xg-cta-art{
  width:100%!important;height:100%!important;
}
body .xg-visual-inner.xg-motion-enabled .xg-cta-call-art{
  animation:xgV1520FastCTA .46s ease-in-out infinite!important;
}
body .xg-visual-inner.xg-motion-enabled .xg-cta-zalo-art{
  animation:xgV1520FastCTA .50s ease-in-out infinite reverse!important;
}
@media(max-width:420px){
  body .xg-visual-inner .xg-cta-copy strong{font-size:clamp(12px,3.4vw,17px)}
  body .xg-visual-inner .xg-zalo-copy{font-size:clamp(11px,3.1vw,15px)}
}

/* V15.21 cache-busted portrait banner and CTA placement are finalized in the late inline head style. */


/* Rồng Đá V15.26 — interactive, mobile-first welcome service introduction */
.rd-intro{position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 15%,#124c91 0%,transparent 44%),linear-gradient(155deg,#061b39,#082d60 63%,#04152e);color:#fff;padding:clamp(18px,3vw,38px) 0 28px;isolation:isolate}
.rd-intro::before{content:"";pointer-events:none;position:absolute;inset:-30% -20%;z-index:-1;background:linear-gradient(115deg,transparent 32%,rgba(255,224,137,.09) 49%,transparent 58%);animation:rdIntroBackdrop 9s ease-in-out infinite}
.rd-intro-shell{width:min(100% - 28px,1120px);margin:0 auto}
.rd-intro-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(255,220,138,.38);padding:0 6px 18px;margin-bottom:22px;animation:rdIntroAppear .9s both}
.rd-intro-brand{display:flex;align-items:center;gap:12px;color:#ffdf8e;line-height:1}
.rd-intro-dragon{display:grid;place-items:center;width:50px;height:50px;font-size:36px;border:1px solid rgba(255,222,150,.5);border-radius:50%;background:radial-gradient(circle,#e9ad3e66,transparent 70%);box-shadow:0 0 20px #d99c3a33}
.rd-intro-brand span:not(.rd-intro-dragon){display:block;font-size:12px;font-weight:750;letter-spacing:.16em}
.rd-intro-brand strong{display:block;font-size:clamp(25px,4.7vw,36px);letter-spacing:.01em;white-space:nowrap;text-shadow:0 1px 16px #ffbb4b55}
.rd-intro-heading-side{text-align:right;text-transform:uppercase;line-height:1.35}
.rd-intro-heading-side span{display:block;font-size:clamp(10px,1.4vw,13px);letter-spacing:.09em;color:#f3dba6;font-weight:800}
.rd-intro-heading-side strong{font-size:clamp(12px,2vw,19px);color:#fff}
.rd-intro-stage{position:relative;min-height:360px}
.rd-intro-slide{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:360px}
.rd-intro-slide[hidden]{display:none!important}
.rd-intro-slide.is-active .rd-intro-eyebrow{animation:rdIntroFromLeft .55s .06s both}
.rd-intro-slide.is-active .rd-intro-kicker{animation:rdIntroFromLeft .65s .17s both}
.rd-intro-slide.is-active .rd-intro-title{animation:rdIntroFromLeft .67s .28s both}
.rd-intro-slide.is-active .rd-intro-description{animation:rdIntroFromLeft .7s .41s both}
.rd-intro-slide.is-active .rd-intro-price{animation:rdIntroFromLeft .66s .53s both}
.rd-intro-slide.is-active .rd-intro-actions{animation:rdIntroFromLeft .7s .66s both}
.rd-intro-slide.is-active .rd-intro-photo-frame{animation:rdIntroPhotoReveal 1s .12s both}
.rd-intro-copy{padding:20px 4px}
.rd-intro-eyebrow{display:inline-block;margin:0 0 12px;color:#fce2a2;font-size:12px;font-weight:900;letter-spacing:.1em}
.rd-intro-kicker{margin:0 0 9px;color:#ffd777;font-size:clamp(15px,2.5vw,22px);font-weight:800}
.rd-intro-title{margin:0 0 15px;color:#fff;font-size:clamp(32px,4.7vw,62px);font-weight:900;line-height:1.1;letter-spacing:-.03em;text-shadow:0 3px 19px #07152b}
.rd-intro-description{margin:0 0 15px;font-size:clamp(14px,1.8vw,18px);line-height:1.55;color:#dceafa}
.rd-intro-price{display:inline-flex;margin:0 0 20px;background:rgba(255,224,146,.12);color:#ffdb85;border:1px solid #f5c96477;padding:9px 12px;border-radius:10px;font-weight:850;font-size:clamp(14px,2vw,19px)}
.rd-intro-actions{display:flex;gap:10px;flex-wrap:wrap}
.rd-intro-actions a{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:12px 17px;font-size:14px;font-weight:850;color:#fff;min-height:46px;transition:filter .2s,transform .2s}
.rd-intro-actions a:hover{transform:translateY(-2px);filter:brightness(1.14)}
.rd-intro-call{background:linear-gradient(140deg,#fa4242,#bb0008);border:1px solid #f6a887;box-shadow:0 0 16px #f04c3444}
.rd-intro-zalo{background:linear-gradient(140deg,#19aff9,#0741be);border:1px solid #a8ddff;box-shadow:0 0 16px #1baef744}
.rd-intro-photo-frame{position:relative;overflow:hidden;border:2px solid #e6bf65;border-radius:26px;background:#0d396d;box-shadow:0 20px 38px #010e2366,0 0 26px #ffca6455;aspect-ratio:1.45}
.rd-intro-photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.rd-intro-photo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 40%,#fff6ce44 50%,transparent 59%);transform:translateX(-145%);animation:rdIntroShimmer 6.4s ease-in-out infinite}
.rd-intro-photo-mark{position:absolute;right:15px;bottom:14px;background:#071d41bd;border:1px solid #ffdc86;border-radius:50%;display:grid;place-items:center;font-size:25px;width:48px;height:48px}
.rd-intro-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 7px 2px;border-top:1px solid #ffffff29}
.rd-intro-control-label{font-size:11px;letter-spacing:.12em;color:#c6d8f3;font-weight:800}
.rd-intro-dots{display:flex;gap:7px;align-items:center}
.rd-intro-dot{width:24px;height:5px;border-radius:6px;background:#ffffff66;border:0;padding:0;cursor:pointer}
.rd-intro-dot.is-active{background:#ffd16b;width:40px;box-shadow:0 0 12px #ffd16b66}
.rd-intro-arrows{display:flex;gap:8px}
.rd-intro-arrows button{width:38px;height:38px;border:1px solid #d3b970;border-radius:50%;color:#fff;background:#ffffff13;font-size:26px;line-height:1;cursor:pointer}
.rd-intro-arrows button:hover{background:#eabd6933}
@keyframes rdIntroBackdrop{0%,100%{transform:translateX(-20%)}50%{transform:translateX(20%)}}
@keyframes rdIntroAppear{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes rdIntroFromLeft{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:translateX(0)}}
@keyframes rdIntroPhotoReveal{from{opacity:0;transform:translateX(35px) scale(.94);filter:brightness(.6)}to{opacity:1;transform:translateX(0) scale(1);filter:brightness(1)}}
@keyframes rdIntroShimmer{0%,25%{transform:translateX(-145%)}75%,100%{transform:translateX(145%)}}
@media(max-width:740px){.rd-intro{padding-top:18px}.rd-intro-shell{width:min(100% - 22px,520px)}.rd-intro-heading{gap:8px;margin-bottom:15px;padding-bottom:13px}.rd-intro-brand{gap:8px}.rd-intro-dragon{width:36px;height:36px;font-size:24px}.rd-intro-brand strong{font-size:clamp(20px,5.3vw,29px)}.rd-intro-brand span:not(.rd-intro-dragon){font-size:10px}.rd-intro-heading-side{max-width:43%}.rd-intro-heading-side strong{font-size:11px}.rd-intro-heading-side span{font-size:9px}.rd-intro-slide{grid-template-columns:1fr;gap:2px;min-height:0}.rd-intro-copy{padding:11px 9px 0}.rd-intro-eyebrow{margin-bottom:8px}.rd-intro-kicker{margin-bottom:5px}.rd-intro-title{font-size:clamp(28px,8vw,39px);margin-bottom:9px}.rd-intro-description{font-size:14px;margin-bottom:8px}.rd-intro-price{margin-bottom:12px}.rd-intro-photo-frame{order:-1;aspect-ratio:1.62;border-radius:18px}.rd-intro-photo-mark{width:39px;height:39px;font-size:21px}.rd-intro-actions a{padding:10px 11px;font-size:13px;flex:1}.rd-intro-stage{min-height:0}.rd-intro-controls{padding-top:11px}.rd-intro-control-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.rd-intro *, .rd-intro *::before,.rd-intro *::after,.rd-intro::before{animation:none!important;transition:none!important}}


/* V15.27: refined cinematic service-image presentation, mobile-first. */
.rd-intro{
  background:radial-gradient(ellipse at 76% -10%,rgba(42,118,211,.32),transparent 52%),
    radial-gradient(ellipse at 3% 94%,rgba(8,61,123,.52),transparent 58%),
    linear-gradient(165deg,#02142d 0%,#07254b 55%,#020b1e 100%)!important;
  border-top:2px solid #b99142;
  padding-bottom:clamp(20px,4vw,38px);
}
.rd-intro-shell{position:relative}
.rd-intro-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,215,143,.16),0 20px 80px rgba(0,0,0,.2);
}
.rd-intro-heading{border-bottom-color:rgba(255,209,112,.28)!important}
.rd-intro-dragon{border-color:#d8ad58!important;background:linear-gradient(145deg,#3e2d15,#a77d30 50%,#122f53)!important;box-shadow:inset 0 0 14px #ffe19c44,0 0 18px #d89d342b!important}
.rd-intro-heading-side span{color:#d8b36f!important;letter-spacing:.17em!important}
.rd-intro-kicker{color:#efc66c!important;letter-spacing:.015em}
.rd-intro-title{background:linear-gradient(175deg,#fff 10%,#fff2d0 45%,#dcac5e 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important}
.rd-intro-eyebrow{font-size:11px!important;letter-spacing:.19em!important;color:#e5bf72!important}
.rd-intro-price{border:1px solid #dfb86799!important;background:linear-gradient(120deg,#a17a2d2c,#f0c06912)!important;border-radius:999px!important;padding:11px 16px!important}
.rd-intro-photo-frame{
  position:relative!important;aspect-ratio:1.72!important;border-radius:clamp(17px,2.5vw,28px)!important;
  border:1px solid rgba(255,214,121,.78)!important;
  background:#051b3b!important;
  box-shadow:0 30px 58px rgba(0,7,22,.65),0 0 0 5px rgba(207,161,74,.09),0 0 35px rgba(244,184,75,.12)!important;
}
.rd-intro-photo-frame img{height:100%!important;object-fit:cover!important;filter:contrast(1.07) saturate(1.09)!important}
.rd-intro-photo-frame::before{content:"";pointer-events:none;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,12,33,.16) 65%,rgba(0,9,25,.69) 100%)}
.rd-intro-photo-frame::after{
  z-index:3!important;
  background:linear-gradient(106deg,transparent 37%,rgba(255,243,202,.02) 45%,rgba(255,237,184,.29) 50%,transparent 62%)!important;
  animation:rdLuxuryGoldSweep 8s ease-in-out infinite!important;
}
.rd-luxury-photo-caption{
  position:absolute;z-index:2;left:clamp(13px,3vw,24px);bottom:clamp(11px,2.7vw,22px);
  color:#fff4d5;letter-spacing:.18em;font-weight:800;font-size:clamp(10px,1.2vw,13px);
  line-height:1.2;text-shadow:0 2px 12px #000c;
  display:flex;gap:10px;align-items:center;
}
.rd-luxury-photo-line{display:inline-block;width:28px;height:1px;background:linear-gradient(90deg,#f7d383,#fff3ca)}
.rd-intro-slide.is-active .rd-intro-photo-frame{animation:rdLuxuryImageEnter 1.05s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-slide.is-active .rd-intro-photo-frame img{animation:rdLuxuryImageDrift 5.5s ease-out both}
.rd-intro-slide.is-active .rd-intro-eyebrow{animation:rdLuxuryText .75s .05s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-slide.is-active .rd-intro-kicker{animation:rdLuxuryText .75s .17s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-slide.is-active .rd-intro-title{animation:rdLuxuryText .8s .29s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-slide.is-active .rd-intro-description{animation:rdLuxuryText .8s .41s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-slide.is-active .rd-intro-price{animation:rdLuxuryText .8s .52s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-slide.is-active .rd-intro-actions{animation:rdLuxuryText .82s .62s cubic-bezier(.16,1,.3,1) both!important}
.rd-intro-call{background:linear-gradient(180deg,#f84e49,#c50b15 75%,#9c0206)!important;border-color:#ffda79!important}
.rd-intro-zalo{background:linear-gradient(180deg,#27c6ff,#0873e2 60%,#0638a4)!important;border-color:#fff2b0!important}
.rd-intro-actions a{box-shadow:inset 0 1px 3px #fff5,0 8px 18px #0006,0 0 14px #e3b15c33!important}
.rd-intro-dot{height:6px!important;transition:width .3s,background .3s!important}
.rd-intro-dot.is-active{background:linear-gradient(90deg,#c9963c,#ffe4a7,#bd893a)!important}
.rd-intro-arrows button{box-shadow:inset 0 1px 4px #fff2,0 0 10px #d7b56823}
@keyframes rdLuxuryGoldSweep {0%,12%{transform:translateX(-135%);opacity:0}24%{opacity:.6}64%{transform:translateX(130%);opacity:.5}74%,100%{transform:translateX(130%);opacity:0}}
@keyframes rdLuxuryImageEnter {from{opacity:0;clip-path:inset(0 100% 0 0 round 20px);transform:translateY(16px);filter:brightness(.5)}to{opacity:1;clip-path:inset(0 0% 0 0 round 20px);transform:translateY(0);filter:brightness(1)}}
@keyframes rdLuxuryImageDrift {from{transform:scale(1.075)}to{transform:scale(1)}}
@keyframes rdLuxuryText {from{opacity:0;transform:translate3d(-35px,16px,0);filter:blur(5px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@media(max-width:740px){
  .rd-intro{padding-top:17px}
  .rd-intro-photo-frame{aspect-ratio:1.48!important}
  .rd-intro-heading{padding:0 4px 14px!important}
  .rd-intro-copy{padding:16px 10px 2px!important}
  .rd-intro-title{font-size:clamp(28px,7.8vw,40px)!important}
  .rd-intro-description{font-size:14px!important;line-height:1.55!important}
  .rd-intro-photo-mark{display:none!important}
  .rd-intro-price{margin-bottom:14px!important}
  .rd-intro-controls{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
 .rd-intro-slide.is-active .rd-intro-photo-frame,
 .rd-intro-slide.is-active .rd-intro-photo-frame img,
 .rd-intro-slide.is-active .rd-intro-eyebrow,
 .rd-intro-slide.is-active .rd-intro-kicker,
 .rd-intro-slide.is-active .rd-intro-title,
 .rd-intro-slide.is-active .rd-intro-description,
 .rd-intro-slide.is-active .rd-intro-price,
 .rd-intro-slide.is-active .rd-intro-actions,
 .rd-intro-photo-frame::after{animation:none!important;transform:none!important;filter:none!important}
}

/* V15.29: display the four approved service compositions completely on mobile. */
.rd-intro-photo-frame{aspect-ratio:766/510!important;min-height:0!important;overflow:hidden!important}
.rd-intro-photo-frame img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.rd-intro-slide.is-active .rd-intro-photo-frame img{animation:rdLuxuryImageDrift 5.5s ease-out both}
@media(max-width:650px){
  .rd-intro-photo-frame{width:100%!important;aspect-ratio:766/510!important}
}



/* V15.30: shake the two CTA buttons inside each active service-introduction slide.
   This targets only the red call button and blue Zalo button in the service cards. */
@keyframes rdV1530ServiceCtaShake {
  0%, 22%, 100% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
    filter: brightness(1);
    box-shadow: inset 0 1px 3px rgba(255,255,255,.34), 0 8px 18px rgba(0,0,0,.38), 0 0 14px rgba(227,177,92,.20);
  }
  3% {
    transform: translate3d(-3px,0,0) rotate(-1.4deg) scale(1.025);
    filter: brightness(1.13);
    box-shadow: inset 0 1px 3px rgba(255,255,255,.48), 0 9px 20px rgba(0,0,0,.42), 0 0 23px rgba(255,218,121,.56);
  }
  6% {
    transform: translate3d(3px,0,0) rotate(1.4deg) scale(1.025);
    filter: brightness(1.13);
  }
  9% {
    transform: translate3d(-2.4px,0,0) rotate(-1deg) scale(1.02);
    filter: brightness(1.10);
  }
  12% {
    transform: translate3d(2.4px,0,0) rotate(1deg) scale(1.02);
    filter: brightness(1.10);
  }
  16% {
    transform: translate3d(-1px,0,0) rotate(-.45deg) scale(1.01);
    filter: brightness(1.05);
  }
  19% {
    transform: translate3d(1px,0,0) rotate(.45deg) scale(1.01);
    filter: brightness(1.03);
  }
}

/* Higher-specificity selectors override the theme's general reduced-motion
   animation reset for these two explicitly requested service CTAs. */
.rd-intro .rd-intro-slide.is-active .rd-intro-actions > a.rd-intro-call {
  transform-origin: 50% 50% !important;
  animation: rdV1530ServiceCtaShake 2.2s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform, filter;
}
.rd-intro .rd-intro-slide.is-active .rd-intro-actions > a.rd-intro-zalo {
  transform-origin: 50% 50% !important;
  animation: rdV1530ServiceCtaShake 2.2s ease-in-out .18s infinite !important;
  animation-play-state: running !important;
  will-change: transform, filter;
}


/* V15.32: smoother service-slider scene change and stronger CTA motion */
.rd-intro-stage{
  transition:opacity .28s ease, transform .40s cubic-bezier(.22,1,.36,1), filter .40s ease;
  transform-origin:center center;
  will-change:opacity,transform,filter;
}
.rd-intro-stage.is-switching{
  opacity:.42;
  transform:translate3d(10px,0,0) scale(.992);
  filter:blur(1.1px) saturate(.9);
}
@media(prefers-reduced-motion:reduce){
  .rd-intro-stage,.rd-intro-stage.is-switching{transition:none!important;transform:none!important;filter:none!important;opacity:1!important}
}

/* Stronger, more visible shake for the two service CTA buttons */
@keyframes rdV1532ServiceCtaShake {
  0%,20%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);filter:brightness(1);box-shadow:inset 0 1px 3px rgba(255,255,255,.34),0 8px 18px rgba(0,0,0,.38),0 0 14px rgba(227,177,92,.20)}
  2%{transform:translate3d(-4px,0,0) rotate(-1.8deg) scale(1.04);filter:brightness(1.16);box-shadow:inset 0 1px 3px rgba(255,255,255,.5),0 10px 22px rgba(0,0,0,.44),0 0 26px rgba(255,218,121,.65)}
  4%{transform:translate3d(4px,0,0) rotate(1.8deg) scale(1.04);filter:brightness(1.16)}
  6%{transform:translate3d(-3px,0,0) rotate(-1.35deg) scale(1.03);filter:brightness(1.12)}
  8%{transform:translate3d(3px,0,0) rotate(1.35deg) scale(1.03);filter:brightness(1.12)}
  10%{transform:translate3d(-2px,0,0) rotate(-.9deg) scale(1.02);filter:brightness(1.09)}
  12%{transform:translate3d(2px,0,0) rotate(.9deg) scale(1.02);filter:brightness(1.09)}
  15%{transform:translate3d(-1px,0,0) rotate(-.4deg) scale(1.01);filter:brightness(1.04)}
  17%{transform:translate3d(1px,0,0) rotate(.4deg) scale(1.01);filter:brightness(1.04)}
}
.rd-intro .rd-intro-slide.is-active .rd-intro-actions > a.rd-intro-call{
  animation:rdV1532ServiceCtaShake 1.72s ease-in-out infinite!important;
}
.rd-intro .rd-intro-slide.is-active .rd-intro-actions > a.rd-intro-zalo{
  animation:rdV1532ServiceCtaShake 1.72s ease-in-out .16s infinite!important;
}

/* Stronger shake for route-card call buttons in price list */
@keyframes xgBookingShakeV1532 {
  0%,23%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);filter:brightness(1)}
  3%{transform:translate3d(-3px,0,0) rotate(-1.6deg) scale(1.035);filter:brightness(1.10)}
  6%{transform:translate3d(3px,0,0) rotate(1.6deg) scale(1.035);filter:brightness(1.10)}
  9%{transform:translate3d(-2px,0,0) rotate(-1deg) scale(1.025);filter:brightness(1.08)}
  12%{transform:translate3d(2px,0,0) rotate(1deg) scale(1.025);filter:brightness(1.08)}
  16%{transform:translate3d(-1px,0,0) rotate(-.4deg) scale(1.01)}
  19%{transform:translate3d(1px,0,0) rotate(.4deg) scale(1.01)}
}
body .xg-route-card a.xg-book-btn{
  animation:xgBookingShakeV1532 1.7s ease-in-out infinite!important;
  transform-origin:center center!important;
  box-shadow:0 10px 24px rgba(255,120,0,.26), inset 0 1px 0 rgba(255,255,255,.2)!important;
}
body .xg-route-card a.xg-book-btn:hover,
body .xg-route-card a.xg-book-btn:focus-visible{filter:brightness(1.08)!important}


/* V15.34: transparent sample conversations styled like common messaging UI */
.rd-reviews-demo{background:linear-gradient(155deg,#041b3b,#082d57 55%,#031a36);padding:52px 0 58px;color:#f7f3e8}
.rd-reviews-inner{max-width:1150px;margin:0 auto;padding:0 18px}
.rd-reviews-header{text-align:center;max-width:780px;margin:0 auto 28px}
.rd-reviews-eyebrow{display:block;letter-spacing:.17em;color:#e8bc75;font-size:11px;font-weight:800;margin-bottom:11px}
.rd-reviews-header h2{font-size:clamp(24px,3.2vw,38px);line-height:1.18;margin:0 auto 10px;color:#fff7e5}
.rd-reviews-header>p{font-size:15px;line-height:1.7;color:#d1e1f5;margin:0 auto 15px}
.rd-reviews-disclosure{display:inline-block;font-size:12px;line-height:1.6;padding:9px 14px;border:1px solid #e5be71aa;border-radius:10px;background:#e3b26315;color:#f2deb2}
.rd-reviews-disclosure strong{letter-spacing:.04em}
.rd-reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rd-review-demo-card{border-radius:18px;background:#edf4f7;color:#1b3043;overflow:hidden;min-width:0;box-shadow:0 15px 35px #0004;border:1px solid #d3b67588}
.rd-review-demo-top{background:#fff;display:flex;gap:10px;align-items:center;padding:13px 14px;border-bottom:1px solid #e1e8ed}
.rd-review-demo-avatar{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#0d447f,#1779a2);color:#fff;font-weight:800;font-size:12px}
.rd-review-demo-top div{flex:1;min-width:0}
.rd-review-demo-top strong,.rd-review-demo-top small{display:block}
.rd-review-demo-top strong{font-size:14px;color:#0d294d}.rd-review-demo-top small{font-size:11px;color:#5e7484;margin-top:3px}
.rd-review-demo-tag{border:1px solid #d6b878;color:#806021;font-size:10px;font-weight:900;letter-spacing:.06em;padding:4px 6px;border-radius:6px}
.rd-review-demo-chat{padding:15px 12px 18px;display:flex;flex-direction:column;gap:9px;min-height:314px;background:radial-gradient(circle at 20% 25%,#e6f0f2 0,#eef5f6 60%,#e2edef 100%)}
.rd-msg{max-width:86%;font-size:13px;line-height:1.52;padding:10px 12px;border-radius:14px;margin:0;overflow-wrap:anywhere;box-shadow:0 3px 10px #14304a10}
.rd-msg-guest{align-self:flex-start;color:#173143;background:#fff;border-bottom-left-radius:4px}
.rd-msg-house{align-self:flex-end;background:#d4f5dc;border:1px solid #bee7c7;color:#153b27;border-bottom-right-radius:4px}
.rd-reviews-footer{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.rd-reviews-footer span{font-size:14px;color:#e2e5ef;margin-right:8px}
.rd-reviews-footer a{background:#f1cf89;color:#172d4b;padding:12px 18px;border-radius:999px;font-weight:800;font-size:13px;box-shadow:0 7px 20px #0003}
.rd-reviews-footer a:last-child{background:transparent;color:#ffe2aa;border:1px solid #ddba77}
.rd-reviews-footer a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:950px){.rd-reviews-grid{grid-template-columns:1fr;max-width:660px;margin:0 auto}.rd-review-demo-chat{min-height:0}}
@media(max-width:520px){.rd-reviews-demo{padding:37px 0 43px}.rd-reviews-inner{padding:0 13px}.rd-reviews-grid{gap:13px}.rd-reviews-footer{flex-direction:column;text-align:center}.rd-reviews-footer span{margin-right:0}.rd-reviews-footer a{width:min(100%,340px)}}

/* V15.35 - A clearly labeled 1-second sample booking request rotator. */
.rd-booking-demo{background:linear-gradient(135deg,#03172e,#092d60 65%,#04162b);padding:21px 18px 15px;color:#f8e9ca;border-top:1px solid #be944a;border-bottom:1px solid #be944a}
.rd-booking-demo-inner{max-width:1080px;margin:auto;display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.06);border:1px solid rgba(235,192,112,.35);border-radius:15px;padding:16px 18px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.rd-booking-demo-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff3cb;background:linear-gradient(135deg,#a37a30,#d5af5e,#806021);border-radius:50%;font-size:24px}
.rd-booking-demo-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.rd-booking-demo-caption{font-size:10px;letter-spacing:.11em;color:#d8b56e;font-weight:900;line-height:1.5}
.rd-booking-demo-caption strong{font-size:10px;font-weight:800;color:#d4e0ed;letter-spacing:0}
.rd-booking-demo-line{font-size:clamp(14px,2.6vw,19px);font-weight:850;line-height:1.38;color:#fff;min-height:26px}
.rd-booking-demo-line.rd-demo-in{animation:rdDemoSwap .32s ease-out both}
@keyframes rdDemoSwap{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.rd-booking-demo-action{flex:none;color:#091f41;background:linear-gradient(180deg,#fce0a0,#c79b4c);border-radius:999px;padding:12px 18px;font-size:14px;font-weight:900;box-shadow:0 4px 16px #0004}
.rd-booking-demo-note{max-width:1080px;margin:9px auto 0;color:#b9c6d9;font-size:11px;line-height:1.45}
@media(max-width:620px){.rd-booking-demo-inner{padding:12px;gap:9px}.rd-booking-demo-icon{width:31px;height:31px;font-size:18px}.rd-booking-demo-caption,.rd-booking-demo-caption strong{font-size:9px}.rd-booking-demo-action{padding:9px 11px;font-size:11px}.rd-booking-demo-line{font-size:13px;min-height:35px}.rd-booking-demo-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.rd-booking-demo-line.rd-demo-in{animation:none!important}}

/* V15.36 – Value-led booking section replaces simulated bookings. */
.rd-booking-benefits{padding:24px 18px 25px!important;color:#fff9e9;background:linear-gradient(145deg,#041731,#0a2c59 66%,#07192f)!important;border-top:1px solid #c49a52!important;border-bottom:1px solid #b18b4b!important}
.rd-benefits-wrap{max-width:1000px;margin:auto;border:1px solid rgba(222,177,99,.44);border-radius:22px;padding:19px clamp(16px,3vw,32px) 21px;background:linear-gradient(122deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 20px 44px rgba(0,0,0,.17),inset 0 1px rgba(255,236,183,.11)}
.rd-benefits-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}
.rd-benefits-label{font-weight:850;font-size:12px;color:#eecb84;letter-spacing:.13em;line-height:1.5}
.rd-benefits-accent{color:#ebcb84;font-size:22px;text-shadow:0 0 15px #f9cb7e}
.rd-benefits-stage{display:flex;align-items:center;gap:16px;min-height:81px}
.rd-benefits-symbol{display:grid;place-items:center;flex:none;width:55px;height:55px;border-radius:50%;background:linear-gradient(135deg,#9b6d27,#f0ca7e,#a4782d);font-size:27px;color:#fff9e7;box-shadow:0 0 26px rgba(245,192,102,.24)}
.rd-benefits-copy{flex:1;min-width:0}
.rd-benefits-copy strong{display:block;color:#fff2d6;font-size:clamp(19px,3.2vw,30px);line-height:1.26;font-weight:900;letter-spacing:-.02em}
.rd-benefits-copy p{font-size:clamp(13px,1.55vw,16px);color:#d5e4fa;margin:7px 0 0;line-height:1.45}
.rd-benefits-enter{animation:rdBenefitsFadeV1536 .39s cubic-bezier(.2,.8,.3,1) both}
@keyframes rdBenefitsFadeV1536{from{opacity:.25;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.rd-benefits-progress{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 19px}
.rd-benefits-dot{appearance:none;cursor:pointer;border:0;background:rgba(188,208,234,.55);width:14px;height:6px;border-radius:999px;padding:0;transition:width .26s ease,background .26s ease}
.rd-benefits-dot.is-active{width:34px;background:linear-gradient(90deg,#bc8d38,#f9da90)}
.rd-benefits-dot:focus-visible{outline:2px solid #fff;outline-offset:5px}
.rd-benefits-actions{display:flex;gap:11px}
.rd-benefits-actions a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-size:15px;font-weight:900;min-height:49px;padding:12px;border-radius:999px;transition:filter .2s ease,box-shadow .2s ease}
.rd-benefits-call{color:#10264a!important;background:linear-gradient(180deg,#ffe8ad,#d6a34d);border:1px solid #ffdd96;box-shadow:0 6px 18px rgba(196,143,48,.22)}
.rd-benefits-zalo{color:#fff!important;background:linear-gradient(180deg,#21bafb,#0961ce);border:1px solid #b4e9ff;box-shadow:0 6px 18px rgba(5,101,220,.25)}
.rd-benefits-actions a:hover{filter:brightness(1.09)}
@media(max-width:520px){
 .rd-booking-benefits{padding:20px 12px!important}
 .rd-benefits-wrap{padding:17px 13px 19px;border-radius:17px}
 .rd-benefits-label{font-size:10px;letter-spacing:.08em}
 .rd-benefits-stage{gap:10px;min-height:88px}
 .rd-benefits-symbol{width:39px;height:39px;font-size:22px}
 .rd-benefits-copy strong{font-size:18px}
 .rd-benefits-copy p{font-size:12px}
 .rd-benefits-actions a{font-size:13px;padding:10px 7px;min-height:46px}
}
@media(prefers-reduced-motion:reduce){.rd-benefits-enter{animation:none!important}.rd-benefits-dot{transition:none!important}}

/* V15.41: mobile-first Rồng Đá luxury banner; styles are inline in index.php for priority. */