/* ==========================================================
   LUXATOUR — site.css
   Phan 1: style goc cua ban thiet ke Luxatour (gop tu 6 trang HTML cu)
   Phan 2: style bo sung cho bo cuc trang chu kieu Vietkingtravel
   ========================================================== */

/* ----------  PHAN 1: STYLE GOC  ---------- */
:root{
    --navy:#16233F; --navy-deep:#0D1730; --navy-800:#1E2E4F;
    --gold:#C6A15B; --gold-deep:#B08A45; --gold-soft:#D8BE8A;
    --cream:#FAF7F1; --cream-2:#F1EBDE; --white:#FFFFFF;
    --ink:#1A2238; --muted:#5E6577; --faint:#8A90A0; --line:#E7E2D6;
    --red:#B23A3A;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,92%);margin-inline:auto}
.serif{font-family:var(--serif)}
/* utility bar */
  .util{background:var(--navy-deep);color:#C9CFDA}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;font-size:.76rem;font-weight:300;flex-wrap:wrap}
.util b{color:var(--gold-soft);font-weight:600}
.util .r{color:#9AA1B2;letter-spacing:.02em}
/* header */
  header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.head{display:flex;align-items:center;justify-content:space-between;height:82px}
.logo{height:56px;width:auto}
.nav{display:flex;gap:2rem;align-items:center}
.nav a{font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);transition:color .2s}
.nav a:hover,.nav a.active{color:var(--gold-deep)}
.nav .cta{background:var(--navy);color:#fff;padding:.7rem 1.3rem;border-radius:3px;letter-spacing:.03em}
.nav .cta:hover{background:var(--gold-deep);color:#fff}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:25px;height:2px;background:var(--navy)}
/* search bar */
  .searchbar{background:var(--navy);}
.searchbar .wrap{display:flex;gap:.8rem;align-items:center;padding:1rem 0;flex-wrap:wrap}
.searchbar .field{background:#fff;border-radius:3px;display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;flex:1;min-width:180px}
.searchbar .field svg{flex:0 0 auto;color:var(--gold-deep)}
.searchbar input,.searchbar select{border:0;outline:0;font-family:var(--sans);font-size:.88rem;color:var(--ink);width:100%;background:transparent}
.searchbar .go{background:var(--gold);color:#fff;border:0;font-family:var(--sans);font-weight:600;font-size:.85rem;letter-spacing:.03em;padding:.85rem 1.8rem;border-radius:3px;cursor:pointer;display:inline-flex;gap:.5rem;align-items:center;transition:background .25s}
.searchbar .go:hover{background:var(--gold-deep)}
/* breadcrumb + title */
  .crumb{font-size:.8rem;color:var(--muted);padding:1.4rem 0 .2rem}
.crumb a:hover{color:var(--gold-deep)}
.page-head{display:flex;align-items:baseline;gap:1rem;margin:.4rem 0 1.4rem}
.page-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);color:var(--navy)}
.page-head .count{font-size:.85rem;color:var(--muted)}
/* tabs */
  .tabs{display:flex;gap:.6rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1.3rem;margin-bottom:1.8rem}
.tab{font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.02em;padding:.6rem 1.2rem;border-radius:40px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:.2s}
.tab:hover{border-color:var(--gold)}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
/* layout */
  .cols{display:grid;grid-template-columns:1fr 320px;gap:2.2rem;padding-bottom:4rem;align-items:start}
.list{display:flex;flex-direction:column;gap:1.4rem}
/* tour card */
  .tour{display:grid;grid-template-columns:250px 1fr;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:box-shadow .3s,transform .3s}
.tour:hover{box-shadow:0 20px 50px -26px rgba(13,23,48,.4);transform:translateY(-3px)}
.tour .media{position:relative;overflow:hidden}
.tour .media img{width:100%;height:100%;object-fit:cover;min-height:220px;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tour:hover .media img{transform:scale(1.05)}
.badge{position:absolute;top:0;left:0;background:var(--gold);color:#fff;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem}
.tour .body{padding:1.5rem 1.6rem;display:flex;flex-direction:column}
.tour h3{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--navy);line-height:1.15;margin-bottom:.9rem}
.meta{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.meta .m{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--muted);font-weight:300}
.meta .m svg{flex:0 0 auto;color:var(--gold-deep)}
.meta .m b{color:var(--ink);font-weight:500}
.tfoot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid var(--line);flex-wrap:wrap}
.price .lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.price .val{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--gold-deep);line-height:1}
.price .val small{font-size:.7rem;color:var(--muted);font-weight:400;font-family:var(--sans)}
.book{background:var(--navy);color:#fff;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.03em;padding:.8rem 1.5rem;border-radius:3px;transition:.25s;white-space:nowrap}
.book:hover{background:var(--gold-deep)}
/* sidebar */
  .side{display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:100px}
.box{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.5rem}
.box h4{font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--navy);margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--gold);display:inline-block}
.cats{display:flex;flex-direction:column}
.cats a{padding:.6rem 0;font-size:.9rem;color:var(--muted);font-weight:400;border-bottom:1px solid var(--line);display:flex;gap:.6rem;align-items:center;transition:.2s}
.cats a:last-child{border-bottom:0}
.cats a::before{content:"›";color:var(--gold);font-weight:700}
.cats a:hover{color:var(--gold-deep);padding-left:.4rem}
.callbox{background:var(--navy);color:#fff;border:0}
.callbox h4{color:#fff;border-color:var(--gold-soft)}
.callbox p{font-size:.85rem;color:#C3CAD8;font-weight:300;margin-bottom:1.1rem}
.callbox .tel{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--gold-soft);display:block;margin-bottom:1rem}
.callbox .b{display:block;text-align:center;padding:.85rem;border-radius:3px;font-weight:600;font-size:.85rem;letter-spacing:.03em;margin-bottom:.7rem}
.callbox .b.gold{background:var(--gold);color:#fff}
.callbox .b.gold:hover{background:var(--gold-deep)}
.callbox .b.zalo{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.callbox .b.zalo:hover{background:rgba(255,255,255,.18)}
.commit li{list-style:none;font-size:.85rem;color:var(--muted);font-weight:300;padding:.45rem 0 .45rem 1.6rem;position:relative}
.commit li::before{content:"✓";position:absolute;left:0;color:var(--gold-deep);font-weight:700}
/* footer */
  footer{background:var(--navy-deep);color:#9CA5B7;padding:3rem 0 2rem;border-top:3px solid var(--gold)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-logo{height:52px;filter:brightness(0) invert(1);margin-bottom:1rem}
.foot p{font-size:.86rem;font-weight:300;max-width:32ch;line-height:1.7}
.foot h5{color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.office{margin-bottom:.9rem}
.office b{display:block;color:#D6DAE3;font-weight:500;font-size:.88rem}
.office span{font-size:.82rem;font-weight:300}
.foot a{display:block;font-size:.86rem;font-weight:300;margin-bottom:.5rem;transition:.2s}
.foot a:hover{color:var(--gold-soft)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;font-size:.76rem;font-weight:300;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mnav{position:fixed;inset:0;background:var(--navy-deep);z-index:60;transform:translateX(100%);transition:.4s;display:flex;flex-direction:column;padding:6rem 2rem 2rem}
.mnav.open{transform:none}
.mnav a{color:#EBE3D4;font-family:var(--serif);font-size:1.5rem;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav .x{position:absolute;top:1.5rem;right:1.5rem;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
/* floating contact buttons (left) */
  .fab{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:14px}
.fab a{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 26px -6px rgba(0,0,0,.45);transition:transform .25s}
.fab a:hover{transform:scale(1.08)}
.fab .call{background:var(--gold-deep)}
.fab .zalo{background:#0068FF;font-weight:700;font-size:.74rem;letter-spacing:.02em}
.fab .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2);opacity:0}}
/* chat popup (right) */
  .chat-launch{position:fixed;right:20px;bottom:20px;z-index:70;width:60px;height:60px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(13,23,48,.55);transition:transform .25s;animation:bob 2.4s ease-in-out infinite}
.chat-launch:hover{transform:scale(1.08)}
.chat-launch .dot{position:absolute;top:1px;right:1px;width:15px;height:15px;background:var(--gold);border-radius:50%;border:2px solid #fff}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.chat-pop{position:fixed;right:20px;bottom:20px;z-index:71;width:min(360px,calc(100vw - 40px));background:#fff;border-radius:16px;box-shadow:0 34px 74px -18px rgba(13,23,48,.6);overflow:hidden;transform:translateY(24px) scale(.95);opacity:0;pointer-events:none;transition:.34s cubic-bezier(.2,.85,.25,1)}
.chat-pop.open{transform:none;opacity:1;pointer-events:auto}
.chat-hd{background:linear-gradient(135deg,var(--navy),var(--navy-800));color:#fff;padding:1.4rem;position:relative;display:flex;gap:.9rem;align-items:center}
.chat-hd .av{width:48px;height:48px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:#fff;flex:0 0 auto}
.chat-hd .t b{font-family:var(--serif);font-size:1.25rem;display:block;line-height:1.1}
.chat-hd .t span{font-size:.74rem;color:#C9CFDA;font-weight:300}
.chat-hd .x{position:absolute;top:.7rem;right:.9rem;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;opacity:.85;line-height:1}
.chat-bd{padding:1.3rem 1.4rem 1.5rem}
.chat-bd .intro{font-size:.86rem;color:var(--muted);font-weight:300;margin-bottom:1.1rem}
.chat-bd .fg{margin-bottom:.8rem}
.chat-bd label{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-weight:600;display:block;margin-bottom:.35rem}
.chat-bd input,.chat-bd textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:.72rem .9rem;font-family:var(--sans);font-size:.88rem;background:var(--cream);color:var(--ink)}
.chat-bd input:focus,.chat-bd textarea:focus{outline:0;border-color:var(--gold);background:#fff}
.chat-bd textarea{resize:vertical;min-height:62px}
.chat-bd .send{width:100%;margin-top:.4rem;background:var(--navy);color:#fff;border:0;border-radius:9px;padding:.9rem;font-family:var(--sans);font-weight:600;font-size:.86rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .25s}
.chat-bd .send:hover{background:var(--gold-deep)}
.chat-ok{display:none;text-align:center;padding:.6rem .4rem 1rem}
.chat-ok.show{display:block}
.chat-ok .big{font-size:2rem;color:var(--gold-deep)}
@media (prefers-reduced-motion:reduce){
    .fab .ring,.chat-launch{animation:none}
    .chat-pop{transition:opacity .2s}
  }
@media(max-width:900px){
    .nav{display:none}.burger{display:flex}
    .cols{grid-template-columns:1fr}
    .side{position:static;flex-direction:column}
    .foot{grid-template-columns:1fr 1fr}
  }
@media(max-width:620px){
    .tour{grid-template-columns:1fr}
    .tour .media img{min-height:200px}
    .foot{grid-template-columns:1fr}
  }
.foot4{display:grid;grid-template-columns:1.7fr 1.2fr 1.2fr 1fr;gap:2.2rem;margin-bottom:1.6rem}
.foot4 p{font-size:.86rem;font-weight:300;line-height:1.7;color:#9CA5B7;margin-top:.9rem;max-width:34ch}
.fcol h5{color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.fcol a{display:block;font-size:.86rem;font-weight:300;margin-bottom:.55rem;color:#9CA5B7;transition:.2s}
.fcol a:hover{color:var(--gold-soft)}
.foot-legal{border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0;display:grid;grid-template-columns:1.7fr 1fr;gap:1.8rem}
.foot-legal b{color:#D6DAE3;font-weight:600;display:block;margin-bottom:.4rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.foot-legal span{font-size:.8rem;font-weight:300;line-height:1.7;color:#9CA5B7}
@media(max-width:900px){.foot4{grid-template-columns:1fr 1fr}.foot-legal{grid-template-columns:1fr}}
@media(max-width:560px){.foot4{grid-template-columns:1fr}}
:root{--navy:#16233F;--navy-deep:#0D1730;--navy-800:#1E2E4F;--gold:#C6A15B;--gold-deep:#B08A45;--gold-soft:#D8BE8A;--cream:#FAF7F1;--cream-2:#F1EBDE;--white:#FFFFFF;--ink:#1A2238;--muted:#5E6577;--faint:#8A90A0;--line:#E7E2D6;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{width:min(1160px,92%);margin-inline:auto}
.narrow{width:min(820px,92%);margin-inline:auto}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.util{background:var(--navy-deep);color:#C9CFDA}
.util .r{color:#9AA1B2}
header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.head{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{height:54px;width:auto}
.nav{display:flex;gap:1.7rem;align-items:center}
.nav a{font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);transition:color .2s}
.nav .cta{background:var(--navy);color:#fff;padding:.65rem 1.2rem;border-radius:3px}
.banner{position:relative;color:#fff;padding:5rem 0 4rem;background-size:cover;background-position:center}
.banner .crumb{font-size:.8rem;color:#B9C0CF;margin-bottom:1rem}
.banner .crumb a:hover{color:var(--gold-soft)}
.banner .eyebrow{color:var(--gold-soft)}
.banner h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.1;margin-top:.5rem}
.banner p{color:#D7DAE2;font-weight:300;max-width:52ch;margin-top:1rem}
section{padding:5rem 0}
.sec-head{margin-bottom:2.4rem}
.sec-head.center{text-align:center;max-width:640px;margin-inline:auto}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--navy);margin:.6rem 0 .5rem;line-height:1.15}
.sec-head p{color:var(--muted);font-weight:300;max-width:60ch}
.sec-head.center p{margin-inline:auto}
.prose p{color:#3D4661;font-weight:300;margin-bottom:1.1rem;font-size:1.02rem}
.prose strong{color:var(--navy);font-weight:600}
.why{background:var(--white)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.why-card{background:var(--cream);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:5px;padding:1.8rem}
.why-card .n{font-family:var(--serif);color:var(--gold-deep);font-weight:700;letter-spacing:.08em;font-size:1.05rem}
.why-card h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--navy);margin:.4rem 0 .5rem}
.why-card p{color:var(--muted);font-weight:300;font-size:.94rem}
.compare{background:var(--navy-deep);color:#fff}
.compare .sec-head h2{color:#fff}
.compare .sec-head p{color:#AEB6C6}
.cmp-wrap{max-width:900px;margin:0 auto;overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:560px}
table.cmp th,table.cmp td{padding:1.05rem 1.2rem;text-align:left;font-size:.92rem}
table.cmp thead th{font-family:var(--serif);font-size:1.15rem;font-weight:600;border-bottom:1px solid rgba(198,161,91,.4)}
table.cmp thead th.lux{color:var(--gold-soft)}
table.cmp thead th.other{color:#9AA3B5}
table.cmp tbody td{border-bottom:1px solid rgba(255,255,255,.08);color:#D6DAE3;font-weight:300}
table.cmp tbody td:first-child{color:#fff;font-weight:500}
table.cmp td.lux{color:#fff}
table.cmp td.lux::before{content:"✓ ";color:var(--gold-soft);font-weight:700}
table.cmp td.other{color:#8790A3}
.trust{background:var(--cream)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.2rem}
.trust-card{border-top:2px solid var(--gold);padding-top:1.3rem}
.trust-card .n{font-family:var(--serif);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.trust-card h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--navy);margin:.4rem 0 .6rem}
.trust-card p{color:var(--muted);font-weight:300;font-size:.94rem}
.guide{background:var(--white)}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.4rem}
.g-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:.3s;display:flex;flex-direction:column}
.g-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px -28px rgba(13,23,48,.4)}
.g-thumb{aspect-ratio:16/10;background:var(--navy) center/cover no-repeat}
.g-body{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.g-cat{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.5rem}
.g-body h3{font-family:var(--serif);font-weight:600;font-size:1.28rem;color:var(--navy);line-height:1.22;margin-bottom:.5rem}
.g-body p{color:var(--muted);font-weight:300;font-size:.9rem;flex:1}
.g-body .more{margin-top:.9rem;font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep)}
.cta{background:linear-gradient(180deg,var(--navy),var(--navy-deep));color:#fff;text-align:center}
.cta .eyebrow{color:var(--gold-soft)}
.cta h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,2.8rem);margin:.8rem 0 1rem}
.cta p{color:#C3CAD8;font-weight:300;max-width:52ch;margin:0 auto 1.8rem}
.cta .tel{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--gold-soft)}
.cta-actions{display:flex;gap:1rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.82rem;letter-spacing:.03em;padding:.9rem 1.8rem;border-radius:3px;transition:.25s}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep)}
.btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
footer{background:var(--navy-deep);color:#9CA5B7;padding:3rem 0 2rem;border-top:3px solid var(--gold)}
.mnav a{color:#EBE3D4;font-family:var(--serif);font-size:1.4rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.fab{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:14px}
.fab .zalo{background:#0068FF;font-weight:700;font-size:.74rem}
.chat-launch{position:fixed;right:20px;bottom:20px;z-index:70;width:60px;height:60px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(13,23,48,.55);transition:transform .25s;animation:bob 2.4s ease-in-out infinite}
.chat-hd .av{width:48px;height:48px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:#fff}
.chat-hd .x{position:absolute;top:.7rem;right:.9rem;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;opacity:.85}
.chat-bd .send{width:100%;margin-top:.4rem;background:var(--navy);color:#fff;border:0;border-radius:9px;padding:.9rem;font-weight:600;font-size:.86rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .25s}
@media (prefers-reduced-motion:reduce){.fab .ring,.chat-launch{animation:none}.chat-pop{transition:opacity .2s}}
@media(max-width:940px){.nav{display:none}.burger{display:flex}}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}.why-grid,.g-grid,.trust-grid{grid-template-columns:1fr 1fr}}
.blogwrap{display:grid;grid-template-columns:1fr 320px;gap:2.2rem;align-items:start;padding-bottom:1rem}
.bloglist{display:flex;flex-direction:column;gap:1.5rem}
.bpost{display:grid;grid-template-columns:250px 1fr;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.3s}
.bpost:hover{box-shadow:0 20px 50px -26px rgba(13,23,48,.4);transform:translateY(-3px)}
.bpost .bthumb{background:var(--navy) center/cover no-repeat;min-height:190px}
.bpost .bbody{padding:1.5rem 1.7rem;display:flex;flex-direction:column}
.bpost .bdate{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.5rem;display:flex;gap:.5rem;align-items:center}
.bpost h3{font-family:var(--serif);font-weight:700;font-size:1.42rem;color:var(--navy);line-height:1.2;margin-bottom:.55rem}
.bpost p{color:var(--muted);font-weight:300;font-size:.92rem;flex:1}
.bpost .more{margin-top:.9rem;font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep)}
.bside{display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:100px}
.bbox{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.5rem}
.bbox h4{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--navy);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--gold);display:inline-block}
.bcats a{display:flex;gap:.5rem;padding:.55rem 0;font-size:.9rem;color:var(--muted);border-bottom:1px solid var(--line);transition:.2s}
.bcats a:last-child{border-bottom:0}
.bcats a::before{content:"›";color:var(--gold);font-weight:700}
.bcats a:hover{color:var(--gold-deep);padding-left:.3rem}
.brecent a{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--line);align-items:center}
.brecent a:last-child{border-bottom:0}
.brecent .rt{width:64px;height:52px;border-radius:5px;background:var(--navy) center/cover no-repeat;flex:0 0 auto}
.brecent .rx b{display:block;font-size:.82rem;color:var(--navy);font-weight:500;line-height:1.3}
.brecent .rx span{font-size:.7rem;color:var(--faint)}
.callbox2{background:var(--navy);color:#fff}
.callbox2 h4{color:#fff;border-color:var(--gold-soft)}
.callbox2 p{font-size:.84rem;color:#C3CAD8;font-weight:300;margin-bottom:1rem}
.callbox2 .tel2{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--gold-soft);display:block;margin-bottom:.9rem}
.callbox2 a.b{display:block;text-align:center;padding:.75rem;border-radius:4px;font-weight:600;font-size:.82rem;margin-bottom:.6rem;background:var(--gold);color:#fff}
.callbox2 a.b:hover{background:var(--gold-deep)}
@media(max-width:900px){.blogwrap{grid-template-columns:1fr}.bside{position:static}}
/* info / policy page */
  .infonav{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:80px;z-index:30}
.infonav .wrap{display:flex;gap:.4rem;flex-wrap:wrap;padding:.9rem 0;overflow-x:auto}
.infonav a{font-size:.78rem;font-weight:500;color:var(--navy);padding:.5rem 1rem;border-radius:40px;border:1px solid var(--line);white-space:nowrap;transition:.2s}
.infonav a:hover{border-color:var(--gold);color:var(--gold-deep)}
.article{padding:3.4rem 0;border-top:1px solid var(--line);scroll-margin-top:150px}
.article:first-of-type{border-top:0}
.article h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--navy);margin-bottom:.4rem}
.article .lead{color:var(--muted);font-weight:300;margin-bottom:1.4rem;max-width:70ch}
.article h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--navy);margin:1.4rem 0 .6rem}
.article p{color:#3D4661;font-weight:300;margin-bottom:.9rem;max-width:72ch}
.article ul,.article ol{margin:0 0 1rem 1.3rem;color:#3D4661;font-weight:300;max-width:72ch}
.article li{margin-bottom:.5rem}
.article .steps{list-style:none;margin:1rem 0;counter-reset:st;display:flex;flex-direction:column;gap:.9rem}
.article .steps li{position:relative;padding-left:2.6rem;counter-increment:st}
.article .steps li::before{content:counter(st);position:absolute;left:0;top:-.1rem;width:1.8rem;height:1.8rem;background:var(--navy);color:var(--gold-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:.9rem}
.article .box{background:var(--cream);border-left:3px solid var(--gold);border-radius:0 6px 6px 0;padding:1rem 1.3rem;margin:1.2rem 0;font-size:.92rem;color:#3D4661}
@media(max-width:900px){.foot4{grid-template-columns:1fr 1fr}.foot-legal{grid-template-columns:1fr}.infonav{top:0}}
@media(max-width:560px){.why-grid,.g-grid,.trust-grid,.foot{grid-template-columns:1fr}.bpost{grid-template-columns:1fr}.bpost .bthumb{min-height:200px}.foot4{grid-template-columns:1fr}}
:root{
    --navy:#16233F; --navy-deep:#0D1730; --navy-800:#1E2E4F;
    --gold:#C6A15B; --gold-deep:#B08A45; --gold-soft:#D8BE8A;
    --cream:#FAF7F1; --cream-2:#F1EBDE; --white:#FFFFFF;
    --ink:#1A2238; --muted:#5E6577; --faint:#8A90A0; --line:#E7E2D6;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
.narrow{width:min(860px,92%);margin-inline:auto}
.nav .cta{background:var(--navy);color:#fff;padding:.7rem 1.3rem;border-radius:3px}
/* page banner */
  .banner{position:relative;color:#fff;padding:5.5rem 0 4.5rem;background:linear-gradient(180deg,rgba(13,23,48,.78),rgba(13,23,48,.88)),var(--navy-deep) center/cover no-repeat}
.banner h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.1}
.banner p{color:#D7DAE2;font-weight:300;max-width:46ch;margin-top:1rem}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--navy);margin:.7rem 0 .5rem;line-height:1.15}
/* company info card */
  .about{background:var(--white);border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.info{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:1.8rem}
.info h3{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--navy);margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--gold);display:inline-block}
.info .row{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.info .row:last-child{border-bottom:0}
.info .row .k{color:var(--muted);font-weight:300;flex:0 0 38%}
.info .row .v{color:var(--ink);font-weight:500}
/* timeline */
  .timeline{background:var(--cream)}
.tl{position:relative;max-width:900px;margin:0 auto;padding-left:2.2rem}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--gold),var(--cream-2))}
.tl-item{position:relative;padding-bottom:2.4rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-2.2rem;top:5px;width:16px;height:16px;border-radius:50%;background:var(--navy);border:3px solid var(--gold);box-shadow:0 0 0 4px var(--cream)}
.tl-item .ph{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.tl-item h3{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--navy);margin:.2rem 0 .5rem}
.tl-item p{color:#3D4661;font-weight:300;font-size:.98rem}
/* vision / mission */
  .vm{background:var(--white);border-top:1px solid var(--line)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.vm-card{border-top:2px solid var(--gold);padding-top:1.4rem}
.vm-card h3{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:var(--navy);margin-bottom:.8rem}
.vm-card p{color:#3D4661;font-weight:300;font-size:.98rem;margin-bottom:.9rem}
.values{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.values span{background:var(--cream);border:1px solid var(--gold);color:var(--navy);font-size:.82rem;font-weight:500;padding:.5rem 1rem;border-radius:40px}
.docs{background:var(--white);border-top:1px solid var(--line)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem;margin-top:.5rem}
.doc-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:.3s;display:flex;flex-direction:column}
.doc-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px -26px rgba(13,23,48,.4)}
.doc-card .frame{background:var(--cream-2);aspect-ratio:3/4;overflow:hidden}
.doc-card .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.doc-card figcaption{padding:.9rem 1rem;font-size:.84rem;color:var(--navy);font-weight:600;text-align:center}
.doc-card figcaption span{display:block;color:var(--muted);font-weight:300;font-size:.74rem;margin-top:.2rem}
.docs .note{text-align:center;margin-top:1.6rem;font-size:.8rem;color:var(--faint);font-weight:300}
/* why grid */
  .why{background:var(--cream);border-top:1px solid var(--line)}
.why-card{background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:5px;padding:1.8rem}
.why-card .n{font-family:var(--serif);color:var(--gold-deep);font-weight:700;letter-spacing:.08em}
.why-card h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--navy);margin:.4rem 0 .5rem}
.why-card p{color:var(--muted);font-weight:300;font-size:.92rem}
/* cẩm nang */
  .guide{background:var(--white);border-top:1px solid var(--line)}
/* cta */
  .cta{background:linear-gradient(180deg,var(--navy),var(--navy-deep));color:#fff;text-align:center}
/* floating + chat */
  .fab{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){
    .nav{display:none}.burger{display:flex}
    .about-grid,.vm-grid{grid-template-columns:1fr}
    .why-grid,.g-grid{grid-template-columns:1fr 1fr}
    .foot{grid-template-columns:1fr 1fr}
  }
@media(max-width:620px){.why-grid,.g-grid,.foot{grid-template-columns:1fr}}

/* ==========================================================
   PHAN 2: STYLE BO SUNG (bo cuc trang chu kieu Vietkingtravel,
   chi tiet tour, form tu van, phan trang...)
   ========================================================== */

/* --- Chuan hoa lai vai gia tri bi lech giua cac trang cu --- */
.banner { background-color: var(--navy); }  /* mau nen du phong khi trang chua co anh banner */
.wrap { width: min(1200px, 92%); margin-inline: auto; }
.narrow { width: min(860px, 92%); margin-inline: auto; }
body { line-height: 1.7; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ==========  HERO TRANG CHU  ========== */
.hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease; transform: scale(1.04);
}
.hero-slide.on { opacity: 1; animation: heroZoom 12s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.08) } to { transform: scale(1) } }
.hero-inner { position: relative; z-index: 2; padding: 5rem 0 2.6rem; width: min(1200px, 92%); }
.hero-text { max-width: 46rem; color: #fff; margin-bottom: 2.2rem; }
.hero-text .eyebrow { color: var(--gold-soft); }
.hero-text h1 {
  font-family: var(--serif); font-weight: 700; color: #fff; line-height: 1.08;
  font-size: clamp(2.1rem, 5vw, 3.6rem); margin: .5rem 0 .9rem;
}
.hero-text p { color: #D8DEEA; font-weight: 300; font-size: clamp(.95rem, 1.6vw, 1.1rem); max-width: 42rem; }
.hero-text .btn { margin-top: 1.4rem; }

.hero-search {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  background: rgba(255, 255, 255, .96); border-radius: 6px; padding: .8rem;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.hero-search .field {
  background: var(--cream); border: 1px solid var(--line); border-radius: 4px;
  display: flex; align-items: center; gap: .55rem; padding: .75rem 1rem; flex: 1 1 200px; min-width: 180px;
}
.hero-search .field svg { flex: 0 0 auto; color: var(--gold-deep); }
.hero-search input, .hero-search select {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-family: var(--sans); font-size: .88rem; color: var(--ink);
}
.hero-search .go {
  background: var(--gold); color: #fff; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .85rem; letter-spacing: .03em;
  padding: .95rem 1.9rem; border-radius: 4px; display: inline-flex; gap: .5rem; align-items: center;
  transition: background .25s;
}
.hero-search .go:hover { background: var(--gold-deep); }

.hero-dots { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 3; }
.hero-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: .25s; padding: 0;
}
.hero-dots button.on { background: var(--gold); width: 26px; border-radius: 5px; }

/* ==========  KHOI NOI DUNG CHUNG  ========== */
.block { padding: 3.6rem 0; background: var(--cream); }
.block-alt { background: var(--white); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.block-head.center { justify-content: center; text-align: center; }
.block-head h2 {
  font-family: var(--serif); font-weight: 700; color: var(--navy);
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; position: relative; padding-bottom: .6rem;
}
.block-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 2px; background: var(--gold); }
.block-head.center h2::after { left: 50%; transform: translateX(-50%); }
.more-link { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
.more-link:hover { color: var(--navy); }
.block-desc { color: var(--muted); font-weight: 300; margin: -.8rem 0 1.6rem; max-width: 62ch; }

/* ==========  CARD TOUR DANG LUOI  ========== */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tgrid-2 { grid-template-columns: repeat(2, 1fr); }
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s;
}
.tcard:hover { box-shadow: 0 22px 52px -28px rgba(13, 23, 48, .45); transform: translateY(-4px); }
.tcard-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tcard:hover .tcard-media img { transform: scale(1.06); }
.tcard-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); color: var(--faint); }
.tcard-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.tcard-body h3 { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--navy); margin-bottom: .8rem; }
.tcard-body h3 a:hover { color: var(--gold-deep); }
.tcard-meta { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.tcard-meta li { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; color: var(--muted); font-weight: 300; }
.tcard-meta svg { flex: 0 0 auto; color: var(--gold-deep); margin-top: .22rem; }
.tcard-foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.tcard-foot .price del { display: block; font-size: .74rem; color: var(--faint); }
.tcard-foot .price .val { font-family: var(--serif); font-weight: 700; font-size: 1.38rem; color: var(--gold-deep); line-height: 1; }
.tcard-foot .price .val small { font-size: .68rem; color: var(--muted); font-weight: 400; font-family: var(--sans); margin-left: .2rem; }
.tcard-foot .price .val.contact { font-size: 1.1rem; }
.tcard-foot .book { background: var(--navy); color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .03em; padding: .72rem 1.2rem; border-radius: 3px; white-space: nowrap; transition: .25s; }
.tcard-foot .book:hover { background: var(--gold-deep); }

/* ==========  KHOI TIN TUC TRANG CHU  ========== */
.newsgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6rem; }
.news-lead { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: .3s; }
.news-lead:hover { box-shadow: 0 22px 52px -28px rgba(13, 23, 48, .45); transform: translateY(-3px); }
.nl-thumb { display: block; aspect-ratio: 16 / 9; background: var(--cream-2) center/cover no-repeat; }
.nl-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.nl-body b { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: var(--navy); }
.nl-ex { font-size: .89rem; color: var(--muted); font-weight: 300; }
.news-list { display: flex; flex-direction: column; gap: .8rem; }
.news-item { display: grid; grid-template-columns: 108px 1fr; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .7rem; transition: .25s; }
.news-item:hover { border-color: var(--gold); transform: translateX(3px); }
.ni-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--cream-2) center/cover no-repeat; }
.ni-body { display: flex; flex-direction: column; gap: .3rem; justify-content: center; }
.ni-body b { font-family: var(--serif); font-weight: 700; font-size: 1.03rem; line-height: 1.25; color: var(--navy); }
.news-lead .more { color: var(--gold-deep); font-size: .8rem; font-weight: 600; letter-spacing: .04em; }

/* ==========  CAM NHAN KHACH HANG  ========== */
.block-review { overflow: hidden; }
.rev-track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev { flex: 0 0 clamp(280px, 33%, 380px); scroll-snap-align: start; background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; display: flex; flex-direction: column; gap: .9rem; }
.rev .stars { color: var(--gold); letter-spacing: .12em; font-size: .95rem; }
.rev blockquote { font-size: .9rem; color: var(--muted); font-weight: 300; line-height: 1.75; flex: 1; }
.rev figcaption { display: flex; align-items: center; gap: .7rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.rev figcaption img, .rev figcaption .av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rev figcaption .av { background: var(--navy); color: var(--gold-soft); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; }
.rev figcaption b { display: block; color: var(--navy); font-size: .9rem; }
.rev figcaption small { color: var(--faint); font-size: .78rem; }
.rev-nav { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; }
.rev-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 1.3rem; cursor: pointer; transition: .2s; }
.rev-nav button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ==========  LOGO DOI TAC / BAO CHI  ========== */
.logorow { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; justify-content: center; }
.logorow img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: .25s; }
.logorow a:hover img, .logorow span:hover img { filter: none; opacity: 1; }

/* ==========  FORM DANG KY TU VAN  ========== */
.block-lead { background: var(--navy-deep); color: #fff; }
.leadwrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; }
.lead-copy .eyebrow { color: var(--gold-soft); }
.lead-copy h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; margin: .5rem 0 .9rem; }
.lead-copy p { color: #B9C2D4; font-weight: 300; }
.lead-tel { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.6rem; color: var(--gold-soft); }
.lead-tel svg { flex: 0 0 auto; }
.lead-tel small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8E99AE; }
.lead-tel b { font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; }

.leadform { background: #fff; border-radius: 8px; padding: 1.8rem; color: var(--ink); }
.leadform h3 { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--navy); margin-bottom: 1.1rem; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.leadform .fg { margin-bottom: .9rem; }
.leadform label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.leadform .req { color: var(--red); }
.leadform input, .leadform select, .leadform textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: .78rem .9rem;
  font-family: var(--sans); font-size: .9rem; color: var(--ink); background: var(--cream); outline: 0; transition: .2s;
}
.leadform input:focus, .leadform select:focus, .leadform textarea:focus { border-color: var(--gold); background: #fff; }
.leadform textarea { resize: vertical; min-height: 84px; }
.leadform .lf-submit { width: 100%; border: 0; cursor: pointer; font-family: var(--sans); margin-top: .3rem; }
.lf-msg { margin-top: .8rem; padding: .75rem .9rem; border-radius: 4px; font-size: .86rem; }
.lf-msg.ok { background: #EAF6EC; color: #1F6B31; border: 1px solid #C6E4CC; }
.lf-msg.err { background: #FBEDED; color: #9B2C2C; border: 1px solid #F0C9C9; }
.lf-note { margin-top: .8rem; font-size: .76rem; color: var(--faint); font-weight: 300; }
.chat-err { margin-top: .6rem; font-size: .82rem; color: var(--red); }

/* ==========  THANH LOC & PHAN TRANG  ========== */
.filterbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .8rem; margin-bottom: 1.4rem; }
.filterbar .field { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; gap: .5rem; padding: .68rem .9rem; flex: 1 1 200px; }
.filterbar .field svg { flex: 0 0 auto; color: var(--gold-deep); }
.filterbar input, .filterbar select { border: 0; outline: 0; background: transparent; width: 100%; font-family: var(--sans); font-size: .88rem; color: var(--ink); }
.filterbar .go { background: var(--navy); color: #fff; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: .82rem; padding: .82rem 1.5rem; border-radius: 4px; transition: .25s; }
.filterbar .go:hover { background: var(--gold-deep); }
.filterbar .clearf { font-size: .8rem; color: var(--muted); text-decoration: underline; }
.filterbar.mini { margin-bottom: 1.6rem; }
.tabs a.tab { display: inline-block; }
.empty { background: #fff; border: 1px dashed var(--line); border-radius: 6px; padding: 2.4rem; text-align: center; color: var(--muted); font-weight: 300; }

.pager { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin: 2.4rem 0 1rem; }
.pager a, .pager .gap { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--navy); font-size: .86rem; font-weight: 500; transition: .2s; }
.pager a:hover { border-color: var(--gold); color: var(--gold-deep); }
.pager a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager .gap { border: 0; background: transparent; color: var(--faint); }

/* ==========  CHI TIET TOUR  ========== */
.tour-banner { background: var(--navy) center/cover no-repeat; color: #fff; padding: 2.6rem 0 3.2rem; }
.tour-banner .crumb { color: #A7B0C3; padding-top: 0; }
.tour-banner .crumb a { color: #C9D2E2; }
.tour-banner .eyebrow { color: var(--gold-soft); margin-top: .8rem; }
.tour-banner h1 { font-family: var(--serif); font-weight: 700; color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin: .4rem 0 .7rem; }
.tour-banner p { color: #C7CEDC; font-weight: 300; max-width: 62ch; }
.tour-main { padding: 2.4rem 0 3rem; }
.factbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 2.2rem; }
.fact { background: #fff; padding: 1rem 1.1rem; }
.fact span { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .25rem; }
.fact b { font-size: .92rem; color: var(--navy); font-weight: 600; }
.tour-sec { margin-bottom: 2.4rem; }
.tour-sec > h2 { font-family: var(--serif); font-weight: 700; font-size: 1.65rem; color: var(--navy); margin-bottom: 1rem; padding-bottom: .55rem; border-bottom: 2px solid var(--gold); display: inline-block; }
.hilite { list-style: none; display: grid; gap: .6rem; }
.hilite li { position: relative; padding-left: 1.7rem; font-size: .93rem; color: var(--muted); font-weight: 300; }
.hilite li::before { content: "✦"; position: absolute; left: 0; color: var(--gold-deep); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; transition: .3s; }
.gallery a:hover img { transform: scale(1.03); box-shadow: 0 14px 34px -18px rgba(13, 23, 48, .6); }
.itin { display: flex; flex-direction: column; gap: .7rem; }
.itin-day { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.itin-day summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: var(--navy); }
.itin-day summary::-webkit-details-marker { display: none; }
.itin-day summary .n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--gold-soft); display: grid; place-items: center; font-size: .85rem; font-family: var(--sans); font-weight: 600; }
.itin-day[open] summary { background: var(--cream-2); }
.itin-body { padding: 0 1.2rem 1.3rem 3.1rem; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.incl-col { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1.3rem 1.4rem; }
.incl-col h3 { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; margin-bottom: .7rem; }
.incl-col.ok h3 { color: #2C7A43; }
.incl-col.no h3 { color: var(--red); }
.pricebox { text-align: center; }
.pricebox .lbl { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pricebox del { display: block; font-size: .85rem; color: var(--faint); }
.pricebox .val { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--gold-deep); line-height: 1.1; margin-bottom: 1rem; }
.pricebox .val small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; font-family: var(--sans); }
.pricebox .val.contact { font-size: 1.5rem; }
.pricebox .pnote { font-size: .8rem; color: var(--muted); font-weight: 300; margin-bottom: 1rem; }
.pricebox .b { display: block; text-align: center; padding: .85rem; border-radius: 3px; font-weight: 600; font-size: .85rem; margin-bottom: .6rem; background: var(--navy); color: #fff; transition: .2s; }
.pricebox .b.gold { background: var(--gold); }
.pricebox .b.gold:hover { background: var(--gold-deep); }
.pricebox .b.zalo { background: #0068FF; }
.pricebox .b:hover { opacity: .92; }
.block-related { padding: 1rem 0 4rem; }

/* ==========  TRANG TINH & BAI VIET  ========== */
.pagebody > section:first-child { padding-top: 3rem; }
.postmeta { color: #B9C2D4 !important; font-size: .84rem; font-weight: 300; }
.article .lead { font-size: 1.05rem; color: var(--navy); font-weight: 400; border-left: 3px solid var(--gold); padding-left: 1rem; margin-bottom: 1.6rem; }
.share { display: flex; align-items: center; gap: .7rem; margin: 2.2rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.share a { padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 3px; color: var(--navy); font-weight: 500; transition: .2s; }
.share a:hover { border-color: var(--gold); color: var(--gold-deep); }
.relposts { margin-top: 2.6rem; }
.relposts h3 { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--navy); margin-bottom: 1rem; }
.bcats a.on { color: var(--gold-deep); font-weight: 600; }

/* ==========  TRANG LIEN HE  ========== */
.contactwrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.4rem; align-items: start; }
.contact-info { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1.8rem; }
.contact-info h2 { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--navy); margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--gold); display: inline-block; }
.ci { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.ci:last-of-type { border-bottom: 0; }
.ci span { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .25rem; }
.ci b, .ci a { font-size: .93rem; color: var(--navy); font-weight: 500; }
.ci a:hover { color: var(--gold-deep); }
.mapbox { margin-top: 1.2rem; border-radius: 6px; overflow: hidden; }
.mapbox iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ==========  404  ========== */
.notfound { background: var(--cream); padding: 6rem 0; text-align: center; }
.nf-code { font-family: var(--serif); font-weight: 700; font-size: clamp(4rem, 14vw, 9rem); color: var(--gold-soft); line-height: 1; }
.notfound h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--navy); margin: .5rem 0 .8rem; }
.notfound p { color: var(--muted); font-weight: 300; max-width: 52ch; margin: 0 auto 1.8rem; }
.notfound .cta-actions { justify-content: center; }

/* ==========  RESPONSIVE  ========== */
@media (max-width: 1080px) {
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .newsgrid { grid-template-columns: 1fr; }
  .leadwrap, .contactwrap { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
  .hero { min-height: 460px; }
  .hero-inner { padding-top: 3.4rem; }
  .tgrid-2 { grid-template-columns: 1fr; }
  .incl { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 640px) {
  .tgrid, .tgrid-2 { grid-template-columns: 1fr; }
  .lf-row { grid-template-columns: 1fr; }
  .block { padding: 2.6rem 0; }
  .hero-search { padding: .6rem; }
  .hero-search .field { flex: 1 1 100%; }
  .hero-search .go { width: 100%; justify-content: center; }
  .news-item { grid-template-columns: 88px 1fr; }
  .rev { flex: 0 0 86%; }
  .logorow img { height: 36px; }
  .leadform { padding: 1.3rem; }
  .itin-body { padding-left: 1.2rem; }
}

/* Thanh trên cùng: trên máy nhỏ cho phép xuống dòng thay vì bị cắt chữ */
@media (max-width: 760px) {
  .util .wrap { height: auto; min-height: 38px; padding: .35rem 0; line-height: 1.45; gap: .1rem; }
}