:root{
  --bg:#07111d;
  --bg2:#0b1830;
  --text:#eef7ff;
  --muted:#a5b8cf;
  --line:rgba(255,255,255,.12);
  --card:rgba(11,20,37,.72);
  --card2:rgba(14,28,50,.86);
  --nav-bg:rgba(5,11,20,.74);
  --accent:#34d5ff;
  --accent2:#ffcf4a;
  --accent3:#ff5f7b;
  --primary-gradient:linear-gradient(135deg,#34d5ff 0%,#6be7ff 44%,#8fdcff 100%);
  --warning-gradient:linear-gradient(135deg,#ffd34d 0%,#ffbf1b 100%);
  --danger-gradient:linear-gradient(135deg,#ff6d86 0%,#ff3f66 100%);
  --shadow:0 28px 60px rgba(0,0,0,.32);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:inherit;background:
radial-gradient(circle at top left,rgba(52,213,255,.16),transparent 32%),
radial-gradient(circle at top right,rgba(255,207,74,.13),transparent 22%),
linear-gradient(180deg,var(--bg) 0%,var(--bg2) 40%,#09101d 100%);
min-height:100vh;position:relative;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(100% - 42px,1160px);margin:auto;position:relative;z-index:1}
.font-be-vietnam{font-family:"Be Vietnam Pro",system-ui,sans-serif}
.font-roboto{font-family:"Roboto",system-ui,sans-serif}
.font-noto-sans{font-family:"Noto Sans",system-ui,sans-serif}
.font-nunito{font-family:"Nunito",system-ui,sans-serif}
.font-montserrat{font-family:"Montserrat",system-ui,sans-serif}

.page-glow{position:fixed;pointer-events:none;filter:blur(80px);opacity:.55;z-index:0;animation:floatGlow 14s ease-in-out infinite}
.glow-1{width:260px;height:260px;left:-60px;top:110px;background:rgba(52,213,255,.18)}
.glow-2{width:320px;height:320px;right:-90px;top:460px;background:rgba(255,207,74,.13);animation-delay:-7s}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#34d5ff,#ffcf4a);box-shadow:0 0 20px rgba(52,213,255,.55);z-index:100}
.back-to-top{position:fixed;right:18px;bottom:110px;width:48px;height:48px;border:none;border-radius:50%;display:grid;place-items:center;background:rgba(9,17,29,.88);backdrop-filter:blur(14px);color:#fff;font-size:19px;box-shadow:0 12px 28px rgba(0,0,0,.35);border:1px solid var(--line);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s;z-index:62}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);border-color:rgba(52,213,255,.4)}

.theme-gosafe{--accent:#34d5ff;--accent2:#ffd24d}
.theme-sunset{--accent:#ff7b7b;--accent2:#ffd15c}
.theme-ocean{--accent:#50e1ff;--accent2:#84ffcf}
.theme-midnight{--accent:#8c8dff;--accent2:#ff8dde}
.theme-forest{--accent:#5bd879;--accent2:#c5ff6b}
.theme-luxury{--accent:#f1c66c;--accent2:#ffe2a8}
.theme-candy{--accent:#ff73c8;--accent2:#81dfff}
.theme-neo{--accent:#42f5c8;--accent2:#ffd146}
.theme-ember{--accent:#ff8b4f;--accent2:#ffd053}
.theme-clean{--accent:#54c6ff;--accent2:#ffe16b}

.topbar{position:sticky;top:0;z-index:70;background:var(--nav-bg);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:78px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px}
.brand img{width:52px;height:52px;border-radius:16px;object-fit:cover;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent)}
.brand span{display:flex;flex-direction:column;font-size:16px}
.brand small{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:1.2px;font-weight:800}
.menu-btn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:10px 14px;border-radius:14px;font-weight:800}
.navlinks{display:flex;align-items:center;gap:12px}
.navlinks a{padding:11px 14px;border-radius:999px;color:color-mix(in srgb,var(--text) 90%,var(--accent));font-weight:800;position:relative;transition:.25s}
.navlinks a:not(.nav-cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:.25s;opacity:.9}
.navlinks a:hover{background:rgba(255,255,255,.04);color:#fff}
.navlinks a:hover::after{transform:scaleX(1)}
.nav-cta{background:var(--primary-gradient);color:#03131f!important;box-shadow:0 14px 36px color-mix(in srgb,var(--accent) 25%,transparent)}
.nav-cta:hover{transform:translateY(-2px)}

.hero{position:relative;min-height:calc(100vh - 78px);display:flex;align-items:center;padding:48px 0 54px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;filter:blur(4px) saturate(1.04);transform:scale(1.06)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,19,.62),rgba(8,14,24,.9) 70%,rgba(8,14,24,1))}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 85%);opacity:.18}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:color-mix(in srgb,var(--accent) 78%,#fff);font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:1.2px}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 rgba(255,207,74,.6);animation:pulse 1.8s infinite}
h1{font-size:clamp(40px,6vw,74px);line-height:.96;margin:18px 0 16px;letter-spacing:-2.3px}
.grad{background:linear-gradient(180deg,#ffffff 0%,#d8f4ff 50%,#a7ddff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:var(--muted);line-height:1.72;max-width:670px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;border-radius:16px;border:1px solid transparent;font-weight:900;letter-spacing:.2px;transition:transform .25s, box-shadow .25s, border-color .25s, background .25s;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .75s ease;z-index:-1}
.btn:hover::before{left:150%}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--primary-gradient);color:#031620;box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 25%,transparent)}
.btn-warning{background:var(--warning-gradient);color:#211500;box-shadow:0 18px 42px color-mix(in srgb,var(--accent2) 22%,transparent)}
.btn-ghost{background:rgba(255,255,255,.08);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-call{animation:callPulse 2.4s ease-in-out infinite}
.btn-contact{animation:contactBob 3.2s ease-in-out infinite}

.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid var(--line);border-radius:30px;padding:18px;box-shadow:var(--shadow);position:relative;transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease}
.hero-card:before{content:"";position:absolute;inset:-1px;border-radius:30px;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 65%,transparent),color-mix(in srgb,var(--accent2) 38%,transparent),rgba(255,255,255,.08));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-card:hover{box-shadow:0 35px 75px rgba(0,0,0,.38)}
.hero-card-media{padding:8px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(236,241,247,.98));box-shadow:inset 0 0 0 1px rgba(12,22,38,.06)}
.hero-card img{width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;object-position:center;border-radius:20px;background:#fff;padding:10px}
.status-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.status{background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:18px;padding:15px;transition:transform .25s ease, background .25s ease, border-color .25s ease}
.status:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:rgba(8,16,28,.65)}
.status b{display:block;font-size:23px;color:var(--accent2)}
.status span{display:block;color:var(--muted);font-weight:700;font-size:13px;margin-top:4px}

.section{padding:78px 0;position:relative}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:28px}
.eyebrow{color:var(--accent);font-weight:950;text-transform:uppercase;letter-spacing:1.2px;font-size:13px}
.section h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:8px 0 0;letter-spacing:-1.4px}
.section-desc{color:var(--muted);max-width:610px;margin:0;line-height:1.65}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card,.review,.faq-item,.pricing-wrap,.form-card,.contact-card,.gallery a{will-change:transform}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 16px 44px rgba(0,0,0,.18);transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease}
.card:hover{background:var(--card2);transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:0 24px 48px rgba(0,0,0,.26)}
.icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);font-size:24px;box-shadow:inset 0 0 28px rgba(255,255,255,.04)}
.card h3{font-size:20px;margin:16px 0 9px}
.card p{color:var(--muted);margin:0;line-height:1.65}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent2) 15%,transparent);color:color-mix(in srgb,var(--accent2) 78%,#fff);font-size:12px;font-weight:900;margin-top:16px}

.pricing-wrap{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card);position:relative}
.pricing-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.04) 45%,transparent 60%);transform:translateX(-130%);animation:shine 5s linear infinite;pointer-events:none}
.pricing-row{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);align-items:center}
.pricing-row:last-child{border-bottom:0}
.pricing-row.head{background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:950;color:color-mix(in srgb,var(--accent) 80%,#fff)}
.price{font-weight:950;color:var(--accent2);font-size:20px}
.note{color:var(--muted)}
.process{counter-reset:step}
.step{position:relative;padding-left:86px;overflow:hidden}
.step:before{counter-increment:step;content:"0" counter(step);position:absolute;left:24px;top:24px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--primary-gradient);color:#00131d;font-weight:950;box-shadow:0 14px 30px rgba(0,0,0,.25)}

.gallery{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.gallery a{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(13,23,40,.9),rgba(9,16,29,.92));min-height:230px;transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease}
.gallery a:first-child{grid-row:span 2;min-height:476px}
.gallery a:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 24px 54px rgba(0,0,0,.28)}
.gallery img{width:100%;height:100%;object-fit:contain;object-position:center;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));transition:transform .45s}
.gallery a:hover img{transform:scale(1.03)}
.gallery span{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(0,0,0,.48);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:9px 12px;font-weight:900}

.review .stars{color:var(--accent2);letter-spacing:2px}
.review strong{display:block;margin-top:14px}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden;transition:border-color .25s ease, transform .25s ease}
.faq-item.open,.faq-item:hover{border-color:color-mix(in srgb,var(--accent) 30%,transparent);transform:translateY(-2px)}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:14px;text-align:left;padding:18px 20px;background:transparent;color:var(--text);border:0;font-size:16px;font-weight:950;cursor:pointer}
.faq-a{display:none;color:var(--muted);padding:0 20px 18px;line-height:1.7}
.faq-item.open .faq-a{display:block}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
.contact-card{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,transparent),rgba(255,255,255,.06));border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;inset:auto -30% -45% auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 62%);pointer-events:none}
.contact-card p{color:var(--muted);line-height:1.72}
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field label{font-weight:900;color:color-mix(in srgb,var(--text) 86%,var(--accent));font-size:13px}
.input,.textarea,.select{width:100%;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.22);color:var(--text);padding:14px 15px;outline:none;transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease}
.textarea{min-height:120px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent);transform:translateY(-1px)}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 20px 48px rgba(0,0,0,.22)}
.alert{border-radius:16px;padding:14px 16px;margin-bottom:16px;font-weight:850}
.alert.ok{background:rgba(51,230,162,.12);border:1px solid rgba(51,230,162,.3);color:#bcffe6}
.alert.err{background:rgba(255,79,109,.12);border:1px solid rgba(255,79,109,.3);color:#ffd3dc}
iframe.map{width:100%;height:410px;border:0;border-radius:var(--radius);filter:saturate(.96) contrast(1.05);box-shadow:0 20px 48px rgba(0,0,0,.22)}
.footer{padding:36px 0;border-top:1px solid var(--line);background:rgba(0,0,0,.18);color:var(--muted)}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.actions a{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:800}
.actions a:hover{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}

.floating{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float-btn{display:flex;align-items:center;gap:10px;border-radius:999px;padding:12px 15px;font-weight:950;box-shadow:0 14px 40px rgba(0,0,0,.35);position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
.float-btn:hover{transform:translateY(-4px) scale(1.02)}
.float-btn::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid transparent;opacity:0;animation:ringWave 2.5s ease-out infinite}
.float-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);font-size:16px}
.float-call{background:var(--warning-gradient);color:#211500}.float-call::after{border-color:rgba(255,207,74,.45);opacity:1}
.float-zalo{background:linear-gradient(135deg,#2a8dff,#54d2ff);color:white}.float-zalo::after{border-color:rgba(84,210,255,.45);opacity:1;animation-delay:.6s}
.mobile-quick{display:none;position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--nav-bg);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:9px}
.mobile-quick a{flex:1;text-align:center;border-radius:14px;padding:11px 7px;font-weight:950;font-size:13px;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.mobile-quick .call{background:var(--warning-gradient);color:#201400;animation:callPulse 2.6s ease-in-out infinite}
.mobile-quick .zalo{background:#2a8dff;color:#fff}
.mobile-quick .book{background:var(--primary-gradient);color:#00131d}
.no-data{padding:26px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);text-align:center}
.banner{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card);margin-top:22px}
.banner img{width:100%;height:auto}
.seo-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="up"]{transform:translateY(26px)}
[data-reveal].is-visible{opacity:1;transform:translate(0,0)}
.tilt-card{transform-style:preserve-3d;transition:transform .2s ease}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,207,74,.55)}70%{box-shadow:0 0 0 12px rgba(255,207,74,0)}100%{box-shadow:0 0 0 0 rgba(255,207,74,0)}}
@keyframes callPulse{0%,100%{box-shadow:0 16px 38px color-mix(in srgb,var(--accent2) 22%,transparent)}50%{box-shadow:0 22px 48px color-mix(in srgb,var(--accent2) 34%,transparent)}}
@keyframes contactBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ringWave{0%{transform:scale(.95);opacity:.85}70%{transform:scale(1.12);opacity:0}100%{transform:scale(1.15);opacity:0}}
@keyframes shine{0%{transform:translateX(-130%)}100%{transform:translateX(140%)}}
@keyframes floatGlow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(26px,-18px,0)}}

@supports not (color:color-mix(in srgb,#000,#fff)){
  .brand img{border-color:rgba(52,213,255,.5);box-shadow:0 0 0 4px rgba(52,213,255,.08)}
  .nav-cta,.btn-primary{box-shadow:0 12px 35px rgba(52,213,255,.24)}
  .kicker{border-color:rgba(52,213,255,.34);background:rgba(52,213,255,.12);color:#bdf4ff}
  .icon{background:rgba(52,213,255,.12);border-color:rgba(52,213,255,.24)}
  .badge{background:rgba(255,204,61,.15);color:#ffe391}
  .pricing-row.head{background:rgba(52,213,255,.12);color:#dffaff}
  .contact-card{background:linear-gradient(180deg,rgba(52,213,255,.14),rgba(255,255,255,.06));border-color:rgba(52,213,255,.24)}
}

@media(max-width:980px){
  .menu-btn{display:block}
  .navlinks{position:fixed;top:76px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;padding:12px;background:var(--nav-bg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 14px}
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .section-head{display:block}
  .section-desc{margin-top:10px}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery a:first-child{grid-column:span 2;min-height:360px}
  .pricing-row{grid-template-columns:1fr}
  .pricing-row.head{display:none}
  .price{font-size:18px}
}

@media(max-width:620px){
  body{padding-bottom:66px}
  .container{width:min(100% - 22px,1160px)}
  .nav{height:68px}
  .brand small{display:none}
  .brand img{width:42px;height:42px}
  .hero{padding:42px 0 30px}
  .lead{font-size:17px}
  .hero-actions .btn{width:100%}
  .hero-card img{aspect-ratio:1/1}
  .status-row{grid-template-columns:1fr 1fr}
  .section{padding:54px 0}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery a,.gallery a:first-child{grid-column:auto;grid-row:auto;min-height:240px}
  .floating{display:none}
  .mobile-quick{display:flex;gap:8px}
  .footer{padding-bottom:84px}
  .step{padding-left:24px;padding-top:78px}
  .step:before{left:24px;top:24px}
  h1{letter-spacing:-1.2px}
  .back-to-top{right:14px;bottom:82px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}


/* --- V4 motion and interaction upgrade --- */
.hero::after{content:"";position:absolute;inset:auto -12% -24% auto;width:min(44vw,500px);height:min(44vw,500px);background:radial-gradient(circle, color-mix(in srgb,var(--accent) 16%,transparent), transparent 66%);filter:blur(18px);opacity:.8;pointer-events:none;animation:orbFloat 11s ease-in-out infinite}
.hero-card-media{position:relative;overflow:hidden}
.hero-card-media::after{content:"";position:absolute;inset:-120% auto auto -30%;width:56%;height:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:rotate(18deg);animation:heroShine 6.5s ease-in-out infinite;pointer-events:none}
.hero-card img{max-height:min(62vw,520px)}
.hero-actions .btn{min-width:170px}
.btn:active,.float-btn:active,.mobile-quick a:active{transform:translateY(0) scale(.985)}
.btn-call,.float-call,.mobile-quick .call{position:relative}
.btn-call::after,.float-call::before,.mobile-quick .call::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(255,207,74,.35);pointer-events:none;animation:ringWaveLarge 2.6s ease-out infinite}
.btn-contact::after,.float-zalo::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(84,210,255,.28);pointer-events:none;animation:ringWaveLarge 2.9s ease-out infinite .5s}
.float-btn{min-width:60px}
.float-btn span:last-child{white-space:nowrap}
@media (hover:hover){.floating:hover .float-btn{opacity:.82}.floating .float-btn:hover{opacity:1}}

.gallery a{display:flex;align-items:center;justify-content:center;isolation:isolate}
.gallery a::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,.09),transparent 34%);opacity:.95;pointer-events:none}
.gallery a::after{content:"Xem ảnh";position:absolute;right:14px;top:14px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:900;letter-spacing:.2px;opacity:0;transform:translateY(8px);transition:.28s}
.gallery a:hover::after{opacity:1;transform:translateY(0)}
.gallery img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center}
.gallery span{z-index:2}
.gallery a > img,.hero-card img{image-rendering:auto}

.lightbox-overlay{position:fixed;inset:0;background:rgba(5,10,18,.86);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;z-index:120}
.lightbox-overlay.open{opacity:1;visibility:visible}
.lightbox-dialog{position:relative;width:min(1100px,100%);max-height:92vh;border-radius:26px;padding:18px;background:rgba(10,18,31,.9);border:1px solid rgba(255,255,255,.12);box-shadow:0 28px 72px rgba(0,0,0,.48)}
.lightbox-dialog img{width:100%;max-height:calc(92vh - 88px);object-fit:contain;border-radius:18px;background:#09101d}
.lightbox-caption{margin-top:12px;font-weight:800;color:#dfeaf8;text-align:center}
.lightbox-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer;border:1px solid rgba(255,255,255,.14)}
.lightbox-close:hover{background:rgba(255,255,255,.14)}

.reveal-pop.is-visible{animation:softPop .6s ease both}
.menu-btn,.actions a,.navlinks a,.mobile-quick a,.btn,.float-btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rippleEffect .65s linear;background:rgba(255,255,255,.38);pointer-events:none}

[data-magnetic]{transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease}
.hero-bg[data-parallax]{will-change:transform}

@keyframes rippleEffect{to{transform:scale(4);opacity:0}}
@keyframes heroShine{0%,72%,100%{transform:translateX(-135%) rotate(18deg)}85%{transform:translateX(235%) rotate(18deg)}}
@keyframes softPop{0%{transform:scale(.96);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes ringWaveLarge{0%{transform:scale(.96);opacity:.75}70%{transform:scale(1.1);opacity:0}100%{transform:scale(1.13);opacity:0}}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-16px,-24px,0)}}

@media(max-width:980px){
  .hero-card img{max-height:460px}
  .hero-actions .btn{min-width:0}
}
@media(max-width:620px){
  .hero-card-media{padding:0}
  .hero-card img{max-height:none;aspect-ratio:auto;padding:8px}
  .gallery a::after{opacity:1;transform:none;font-size:11px;padding:7px 10px}
  .lightbox-overlay{padding:12px}
  .lightbox-dialog{padding:12px;border-radius:20px}
  .lightbox-dialog img{max-height:78vh}
}
@media (prefers-reduced-motion: reduce){
  .hero::after,.hero-card-media::after,.btn-call::after,.float-call::before,.mobile-quick .call::before,.btn-contact::after,.float-zalo::before{animation:none!important}
}

/* --- V6 tổng đài booking upgrade --- */
.ops-public .ops-card{position:relative;overflow:hidden}.ops-public .ops-card::after{content:"";position:absolute;inset:auto -40px -60px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%);pointer-events:none}.callcenter-points{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.callcenter-points span{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px;font-weight:850;color:#e8f5ff}.booking-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.booking-form-grid .full{grid-column:1/-1}.booking-form .btn[type="submit"]{width:100%;margin-top:14px}.fare-preview{border:1px solid color-mix(in srgb,var(--accent2) 34%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 12%,transparent),rgba(255,255,255,.055));border-radius:18px;padding:13px 14px;display:grid;gap:4px}.fare-preview span{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:950}.fare-preview b{font-size:22px;color:var(--accent2);letter-spacing:-.4px}.fare-preview small{color:var(--muted);line-height:1.35}.booking-form .select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 12px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}.operations-section{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.04),rgba(255,255,255,.02))}@media(max-width:620px){.booking-form-grid{grid-template-columns:1fr}.callcenter-points{grid-template-columns:1fr}.fare-preview b{font-size:20px}}