/* Aline 1.2 – bố cục trang chủ theo bản demo: thẻ tour, vì sao + số liệu, quy trình, đánh giá, cẩm nang, dải kêu gọi, chân trang */

/* Thanh trên cùng */
.topbar .hours{display:inline-flex;align-items:center;gap:6px;opacity:.92}
.topbar-right{display:flex;align-items:center;gap:6px}
.topbar .soc-label{opacity:.85;margin-right:2px}
@media (max-width:860px){.topbar .hours,.topbar .soc-label{display:none}}

/* Nút */
.btn-sm{min-height:40px;padding:8px 16px;font-size:14px}
.btn-cta{box-shadow:0 6px 16px color-mix(in srgb,var(--cta) 30%,transparent)}
.btn-cta:hover{box-shadow:0 10px 22px color-mix(in srgb,var(--cta) 38%,transparent);transform:translateY(-2px)}
.btn-ghost:hover,.btn-navy:hover{transform:translateY(-2px)}

/* Tiêu đề mục */
.section{padding-block:72px}
.sec-head h2{color:var(--ink)}
.sec-head.center{justify-content:center;text-align:center}
.sec-head.center>div{max-width:720px;margin-inline:auto}
.sec-head.center .sub{margin-top:8px}
.pill-eyebrow{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:var(--pill);font-size:13px;font-weight:600;background:color-mix(in srgb,var(--navy) 10%,transparent);color:var(--navy)}
.pill-eyebrow--cta{background:color-mix(in srgb,var(--cta) 10%,transparent);color:var(--cta)}
.container.narrow{max-width:880px}
.faq-more.center{text-align:center;margin-top:18px}

/* Điểm đến: rê chuột phóng ảnh, hiện mô tả */
.dest img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.dest::after{background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--navy-deep) 82%,transparent));transition:opacity .4s}
.dest::before{content:"";position:absolute;inset:0;z-index:1;background:color-mix(in srgb,var(--navy-deep) 25%,transparent);opacity:0;transition:opacity .4s}
.dest:hover img,.dest:focus-within img{transform:scale(1.08)}
.dest:hover::before,.dest:focus-within::before{opacity:1}
.dest figcaption{z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;left:18px;right:18px;bottom:16px;font-size:inherit;font-weight:inherit}
.dest:first-child figcaption{left:22px;bottom:20px}
.dest-count{display:inline-block;background:var(--bg);color:var(--ink);font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--pill)}
.dest-name{font-size:22px;font-weight:700;color:var(--on-dark);line-height:1.2}
.dest:first-child .dest-name{font-size:30px}
.dest-more{display:grid;gap:4px;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);transition:max-height .45s ease,opacity .35s ease,transform .45s ease}
.dest:hover .dest-more,.dest:focus-within .dest-more{max-height:90px;opacity:1;transform:none}
.dest-desc{font-size:14px;color:var(--on-dark-muted);line-height:1.45}
.dest-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--on-dark)}
@media (hover:none){.dest-more{max-height:none;opacity:1;transform:none}.dest-desc{display:none}}

/* Thẻ tour */
.tour{padding:0;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line);background:var(--bg);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.tour:hover{transform:translateY(-6px);box-shadow:0 18px 34px color-mix(in srgb,var(--navy) 14%,transparent);border-color:var(--sky)}
.tour-img{aspect-ratio:4/3;border-radius:0;overflow:hidden}
.tour-img img{transition:transform .5s ease}
.tour:hover .tour-img img{transform:scale(1.06)}
.tour .badge{left:12px;right:auto;top:12px;font-size:12px;padding:4px 10px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tour-body{padding:16px 18px 18px;gap:8px}
.tour-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.tour-meta span{display:inline-flex;align-items:center;gap:5px}
.tour-meta .rate{color:var(--ink);font-weight:700}
.tour-meta .rate .icon{color:var(--star)}
.tour-meta .rate small{font-weight:500;color:var(--muted)}
.tour .tour-title{font-size:16px;font-weight:700;line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tour .tour-title a:hover{color:var(--navy)}
.depart{font-size:13.5px;color:var(--muted)}
.depart strong{color:var(--ink);font-weight:600}
.tour-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.old-price{display:block;font-size:13px;color:var(--muted)}
.tour .price{font-size:19px;font-weight:800;color:var(--cta);margin:0;line-height:1.3}
.tour .tour-foot .btn{width:auto;margin:0;flex:none}

/* Vì sao chọn + số liệu */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 22px;text-align:center;box-shadow:0 4px 14px color-mix(in srgb,var(--navy) 6%,transparent);transition:transform .3s,box-shadow .3s}
.why-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px color-mix(in srgb,var(--navy) 12%,transparent)}
.why-ic{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--navy) 10%,transparent);color:var(--navy);transition:background-color .3s,color .3s}
.why-ic .icon{width:28px;height:28px}
.why-card:hover .why-ic{background:var(--navy);color:var(--on-dark)}
.why-card h3{font-size:17px;font-weight:700;color:var(--ink)}
.why-card p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.stats-bar{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 24px;border-radius:20px;color:var(--on-dark);text-align:center;background:linear-gradient(135deg,var(--navy) 0%,color-mix(in srgb,var(--navy) 55%,var(--sky)) 100%);box-shadow:0 20px 40px color-mix(in srgb,var(--navy) 25%,transparent)}
.stat b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.stat>span{display:block;margin-top:4px;font-size:15px;opacity:.9}

/* Quy trình */
.process{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:24px;counter-reset:st}
.process::before{content:"";position:absolute;top:26px;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));height:2px;background:var(--line-strong)}
.process-step{position:relative;text-align:center;counter-increment:st}
.process-no{position:relative;z-index:1;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);border:2px solid var(--line-strong);color:var(--navy);font-size:20px;font-weight:800;transition:background-color .3s,color .3s,border-color .3s,transform .3s}
.process-no::before{content:counter(st)}
.process-step:hover .process-no{background:var(--navy);border-color:var(--navy);color:var(--on-dark);transform:scale(1.1)}
.process-step h3{font-size:17px;font-weight:700;color:var(--ink)}
.process-step p{margin:8px auto 0;max-width:250px;font-size:14.5px;color:var(--muted)}

/* Khách hàng nói gì */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{margin:0;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:0 4px 14px color-mix(in srgb,var(--navy) 6%,transparent);transition:transform .3s,box-shadow .3s}
.testi:hover{transform:translateY(-6px);box-shadow:0 18px 34px color-mix(in srgb,var(--navy) 12%,transparent)}
.testi .stars{color:var(--star)}
.testi .stars .icon{width:18px;height:18px}
.testi blockquote{flex:1;margin:14px 0 18px;font-style:italic;font-size:15px;color:var(--muted);line-height:1.65}
.testi figcaption{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.testi .avatar{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--bg-soft);color:var(--navy);font-weight:700}
.testi figcaption b{display:block;font-size:15px;color:var(--ink)}
.testi figcaption small{display:block;font-size:13px;color:var(--muted)}

/* Cẩm nang */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:0 4px 14px color-mix(in srgb,var(--navy) 6%,transparent);transition:transform .3s,box-shadow .3s}
.news-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px color-mix(in srgb,var(--navy) 12%,transparent)}
.news-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--line)}
.news-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news-card:hover .news-media img{transform:scale(1.06)}
.news-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.news-meta{font-size:13px;color:var(--muted)}
.news-body h3{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.news-body h3 a:hover{color:var(--navy)}
.news-body p{font-size:14.5px;color:var(--muted);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy);font-size:15px}
.news-more .icon{transition:transform .2s}
.news-more:hover .icon{transform:translateX(4px)}

/* Dải kêu gọi */
.cta-band{margin:0;padding-block:56px;color:var(--on-dark);background:linear-gradient(135deg,var(--navy) 0%,color-mix(in srgb,var(--navy) 45%,var(--sky)) 100%)}
.cta-inner{display:grid;grid-template-columns:minmax(0,1.3fr) auto;align-items:center;gap:24px}
.cta-band h2{color:var(--on-dark);font-size:clamp(22px,2.6vw,30px);font-weight:800}
.cta-band p{margin-top:8px;font-size:17px;color:color-mix(in srgb,var(--on-dark) 85%,transparent);max-width:640px}
.cta-band .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.cta-band .btn-glass{background:color-mix(in srgb,#fff 10%,transparent);backdrop-filter:blur(4px)}
.cta-band .btn-glass:hover{background:color-mix(in srgb,#fff 24%,transparent);transform:translateY(-2px)}

/* Chân trang */
.footer{padding-block:64px 24px}
.f-grid{grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:36px}
.f-grid--3{grid-template-columns:1.6fr 1fr 1fr}
.footer h3{text-transform:uppercase;font-size:14px;letter-spacing:.04em}
.footer .brand p{max-width:340px}
.footer .f-contact{margin-top:14px;display:grid;gap:8px}
.footer .f-contact li{align-items:flex-start}
.footer .f-contact .icon{color:var(--sky);margin-top:3px}
.footer .f-contact a{color:var(--on-dark)}
.f-news p{font-size:14.5px;margin-bottom:12px}
.news-form{display:flex;flex-wrap:wrap;gap:8px}
.news-form input[type=email]{flex:1 1 180px;min-width:0;min-height:46px;border:0;border-radius:var(--pill);padding:0 18px;font:500 15px var(--font);color:var(--ink);background:var(--bg)}
.news-form input:focus{outline:3px solid var(--sky);outline-offset:1px}
.news-msg{flex-basis:100%;font-size:14px;color:var(--on-dark)}
.news-msg.is-error{color:#FECACA}
.f-news .social{margin-top:16px}
.footer a:hover{color:var(--on-dark);text-decoration:underline}

/* Hiện dần khi cuộn tới */
.js [data-reveal],.js [data-reveal-group]>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .is-in[data-reveal],.js [data-reveal-group].is-in>*{opacity:1;transform:none}
.js [data-reveal-group].is-in>.tour:hover,.js [data-reveal-group].is-in>.why-card:hover,.js [data-reveal-group].is-in>.testi:hover,.js [data-reveal-group].is-in>.news-card:hover{transform:translateY(-6px);transition-delay:0s}

@media (max-width:1100px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid,.f-grid--3{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .section{padding-block:56px}
  .process{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .process::before{display:none}
  .stats-bar{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .cta-inner{grid-template-columns:1fr}
  .cta-band .actions{justify-content:flex-start}
}
@media (max-width:560px){
  .why-grid,.testi-grid,.news-grid,.f-grid,.f-grid--3{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .cta-band .btn{flex:1 1 100%}
  .tour-foot{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-group]>*{opacity:1;transform:none;transition:none}
}
.reveal-all [data-reveal],.reveal-all [data-reveal-group]>*{opacity:1!important;transform:none!important}

/* ---------- Nút gọi nổi: sóng lan + rung máy ---------- */
.floating .fab{position:relative}
.fab-phone{isolation:auto}
.fab-phone::before,.fab-phone::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--cta);z-index:-1;pointer-events:none;animation:tp-wave 2s cubic-bezier(.2,.6,.4,1) infinite}
.fab-phone::after{animation-delay:1s}
.fab-phone .icon{animation:tp-shake 2.4s ease-in-out infinite;transform-origin:50% 50%}
.fab-phone:hover .icon{animation-play-state:paused}
@keyframes tp-wave{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.85);opacity:0}}
@keyframes tp-shake{0%,45%,100%{transform:rotate(0)}5%,15%,25%,35%{transform:rotate(-16deg)}10%,20%,30%,40%{transform:rotate(16deg)}}
.fab-zalo::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #0068FF;z-index:-1;pointer-events:none;animation:tp-wave 2.6s ease-out infinite .5s}
/* Máy tắt hiệu ứng: vẫn giữ sóng nhẹ cho nút gọi (không rung). */
@media (prefers-reduced-motion:reduce){
  .fab-phone::before{animation:tp-wave 2.4s ease-out infinite!important}
  .fab-phone::after,.fab-zalo::after{animation:none!important;opacity:0}
}
.footer .f-about a,.footer .copy a{color:var(--on-dark);text-decoration:none}
.footer .f-about a:hover,.footer .copy a:hover{text-decoration:underline}
.footer .f-about b,.footer .f-about strong{color:var(--on-dark)}