@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink:#3d1118; --green:#7a1020; --green-2:#4b0b15; --orange:#f47b20; --cream:#f5f0e7; --paper:#fffdf9; --muted:#766a6c; --font-sans:'Be Vietnam Pro'; --font-display:'Playfair Display'; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 var(--font-sans),sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:96px; padding:0 clamp(24px,5vw,84px); display:flex; align-items:center; justify-content:space-between; gap:28px; color:white; background:#5c0d18; position:relative; z-index:20; border-bottom:1px solid rgba(255,255,255,.13); }
.brand { display:flex; align-items:center; min-width:220px; }
.brand img { width:190px; height:68px; object-fit:contain; object-position:left center; }
nav { display:flex; gap:clamp(18px,2.5vw,40px); font-size:15px; font-weight:600; }
nav a { padding:32px 0 29px; border-bottom:3px solid transparent; }
nav a:hover { color:var(--orange); border-color:var(--orange); }
.header-call { display:flex; align-items:center; gap:11px; color:white; }
.header-call>span:first-child { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:var(--orange); transform:rotate(-18deg); }
.header-call>span:last-child { display:flex; flex-direction:column; }
.header-call small { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#a9c3be; }
.header-call strong { margin-top:2px; font-size:20px; }
.hero { position:relative; min-height:680px; color:white; overflow:hidden; background:var(--green-2); }
.hero-backdrop { position:absolute; inset:0; background:linear-gradient(90deg,rgba(42,4,11,.98) 0%,rgba(78,8,20,.93) 42%,rgba(42,4,11,.32) 72%,rgba(42,4,11,.42) 100%),url('https://www.ngochungvannhan.com/img/about.jpg') center right/cover no-repeat; }
.hero-backdrop:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 35%,transparent 0 15%,rgba(0,0,0,.15) 58%),linear-gradient(115deg,transparent 65%,rgba(244,123,32,.16)); }
.hero-inner { position:relative; z-index:2; max-width:1420px; margin:auto; min-height:680px; padding:88px clamp(24px,7vw,110px) 92px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.68fr); gap:9vw; align-items:center; }
.hero-copy { max-width:700px; }
.eyebrow { margin:0 0 20px; display:flex; align-items:center; gap:11px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:#f7b17d; }
.eyebrow span { width:35px; height:2px; background:var(--orange); }
.hero h1 { margin:0; font:700 clamp(48px,5vw,72px) var(--font-display),serif; letter-spacing:-.055em; }
.hero h1 em { color:#ff9c4e; font-weight:600; }
.hero-lead { max-width:590px; margin:28px 0 33px; color:#d6e2df; font-size:19px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:54px; padding:0 27px; display:inline-flex; align-items:center; justify-content:center; gap:20px; border-radius:3px; font-size:15px; font-weight:700; }
.button-primary { background:var(--orange); color:white; box-shadow:0 14px 30px rgba(244,123,32,.22); }
.button-primary:hover { background:#ff8b35; transform:translateY(-1px); }
.button-ghost { border:1px solid rgba(255,255,255,.36); }
.button-ghost:hover { background:rgba(255,255,255,.08); }
.trust-row { display:flex; margin-top:54px; gap:0; }
.trust-row div { display:flex; flex-direction:column; min-width:130px; padding-right:28px; margin-right:28px; border-right:1px solid rgba(255,255,255,.2); }
.trust-row div:last-child { border:0; }
.trust-row strong { font:600 25px/1 var(--font-display),serif; color:#fff; }
.trust-row span { margin-top:8px; font-size:12px; color:#a9c0bb; }
.hero-card { align-self:center; margin-bottom:0; padding:34px; background:rgba(255,253,249,.97); color:var(--ink); border-top:5px solid var(--orange); box-shadow:0 25px 70px rgba(0,0,0,.28); backdrop-filter:blur(8px); }
.hero-card>p:first-child { margin:0 0 20px; font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--orange); font-weight:700; }
.destination-picker label { display:block; margin-bottom:8px; color:#6e7e79; font-size:13px; font-weight:600; }
.select-wrap { position:relative; }
.select-wrap select { width:100%; height:57px; padding:0 48px 0 16px; color:var(--ink); background:#fff; border:1px solid #cfd8d4; border-radius:3px; appearance:none; outline:none; font:700 18px var(--font-sans),sans-serif; cursor:pointer; }
.select-wrap select:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(244,123,32,.13); }
.select-wrap>span { position:absolute; right:17px; top:50%; transform:translateY(-58%); color:var(--orange); font-size:22px; pointer-events:none; }
.schedule-line { display:grid; grid-template-columns:1fr 62px 1fr; gap:9px; align-items:center; padding:22px 0; }
.schedule-line>div { display:flex; flex-direction:column; }
.schedule-line small { font-size:11px; color:#7b8985; }
.schedule-line strong { margin-top:6px; font:700 19px/1.15 var(--font-display),serif; }
.route-line { display:flex; align-items:center; color:var(--orange); }
.route-line i { height:1px; background:#cbd4d0; flex:1; }.route-line b { font-size:15px; }
.price-results { border-top:1px solid #dde3df; border-bottom:1px solid #dde3df; }
.price-results>div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; }
.price-results span { font-size:13px; color:#7b8985; }.price-results strong { color:var(--orange); font-size:28px; }
.quick-routes { max-width:1420px; margin:auto; padding:86px clamp(24px,7vw,110px) 100px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.section-heading .eyebrow { color:var(--orange); margin-bottom:12px; }
.section-heading h2 { margin:0; font:600 clamp(34px,4vw,54px)/1.05 var(--font-display),serif; letter-spacing:-.035em; }
.section-heading>a { padding-bottom:7px; font-size:14px; font-weight:700; border-bottom:1px solid #bac5c1; }
.section-heading>a span { margin-left:14px; color:var(--orange); }
.route-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.route-card { position:relative; padding:28px; min-height:205px; background:#f4f1e9; border:1px solid transparent; transition:.25s ease; }
.route-card:hover { transform:translateY(-5px); background:white; border-color:#d9dedb; box-shadow:0 15px 38px rgba(83,12,25,.10); }
.route-icon { position:absolute; right:23px; top:23px; width:34px; height:34px; display:grid; place-items:center; border:1px solid #cbd3cf; border-radius:50%; color:var(--orange); }
.route-card>p { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#88938f; }
.route-card h3 { max-width:260px; margin:19px 0 31px; font:600 25px/1.25 var(--font-display),serif; }
.route-card>div:last-child { display:flex; align-items:baseline; gap:8px; }.route-card>div span { color:#88938f; font-size:12px; }.route-card>div strong { color:var(--orange); font-size:19px; }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:690px; background:var(--cream); }
.about-image { position:relative; min-height:620px; overflow:hidden; }
.about-image:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(70,8,18,.28)); }
.about-image img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.88) contrast(1.04); }
.experience-badge { position:absolute; z-index:2; right:0; bottom:0; width:180px; height:165px; padding:30px; color:white; background:var(--orange); display:flex; flex-direction:column; justify-content:end; }
.experience-badge strong { font:700 54px/.9 var(--font-display),serif; }.experience-badge span { margin-top:10px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.about-copy { padding:90px clamp(35px,7vw,110px); display:flex; flex-direction:column; justify-content:center; }
.eyebrow.dark { color:var(--orange); }
.about h2,.fare-section h2,.booking-cta h2 { margin:0; font:600 clamp(43px,5vw,68px)/1 var(--font-display),serif; letter-spacing:-.04em; }
.about h2 em,.fare-section h2 em,.booking-cta h2 em { color:var(--orange); font-weight:600; }
.about-copy>p:not(.eyebrow) { max-width:590px; margin:26px 0 32px; color:#5f716c; font-size:17px; line-height:1.8; }
.about ul { list-style:none; margin:0; padding:0; max-width:590px; }
.about li { display:flex; gap:18px; padding:18px 0; border-top:1px solid #d3d8d2; }
.about li b { color:var(--orange); font-size:12px; padding-top:3px; }.about li span { display:flex; flex-direction:column; }.about li strong { font:600 18px var(--font-display),serif; }.about li small { margin-top:5px; color:#788782; font-size:14px; line-height:1.5; }
.fare-section { display:grid; grid-template-columns:minmax(310px,.72fr) minmax(600px,1.4fr); gap:7vw; padding:100px clamp(24px,7vw,110px); color:white; background:var(--green); }
.fare-intro { align-self:start; position:sticky; top:35px; }
.fare-intro>p:not(.eyebrow) { max-width:390px; margin:27px 0; color:#b9cbc7; font-size:15px; line-height:1.8; }
.fare-table-wrap { min-width:0; }
.fare-table-head,.fare-row { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; align-items:center; }
.fare-table-head { padding:0 20px 18px; color:#a2bbb6; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.fare-row { min-height:76px; padding:0 20px; border-top:1px solid rgba(255,255,255,.15); font-size:18px; }
.fare-row:hover { background:rgba(255,255,255,.045); }.fare-row strong { font:600 22px var(--font-display),serif; }.fare-row strong i { display:inline-block; width:8px; height:8px; margin-right:14px; border-radius:50%; background:var(--orange); }.fare-row span { color:#ffa35e; font-size:22px; font-weight:700; }
.fare-note { margin-top:26px; padding:20px; color:#b6cac6; background:rgba(0,0,0,.12); font-size:14px; line-height:1.7; }
.contact-section { max-width:1420px; margin:auto; padding:100px clamp(24px,7vw,110px); }
.contact-hotline { display:flex; flex-direction:column; align-items:flex-end; }.contact-hotline small { color:#84918d; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }.contact-hotline strong { margin-top:5px; color:var(--orange); font:700 31px var(--font-display),serif; }
.office-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:45px; border-top:1px solid #dce1de; border-bottom:1px solid #dce1de; }
.office-grid article { min-height:320px; padding:34px; display:flex; flex-direction:column; position:relative; border-right:1px solid #dce1de; }.office-grid article:last-child { border:0; }.office-grid article>span { position:absolute; top:30px; right:30px; color:#c1cac6; font:600 22px var(--font-display),serif; }.office-grid p { margin:0; color:var(--orange); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }.office-grid h3 { margin:12px 0 23px; font:600 33px var(--font-display),serif; }.office-grid address { min-height:47px; margin-bottom:20px; color:#667671; font-style:normal; font-size:14px; line-height:1.6; }.office-grid a { width:max-content; margin-top:9px; padding:2px 0; color:var(--ink); font-size:19px; font-weight:700; border-bottom:1px solid #b9c5c1; transition:.2s ease; }.office-grid a:hover { color:var(--orange); border-color:var(--orange); }
.booking-cta { margin:0 clamp(18px,3vw,46px); padding:74px clamp(28px,7vw,100px); display:flex; align-items:end; justify-content:space-between; gap:45px; color:white; background:linear-gradient(110deg,#4a0a14,#7a1020); position:relative; overflow:hidden; }
.booking-cta:after { content:"NHVN"; position:absolute; right:2%; top:-38px; color:rgba(255,255,255,.035); font:800 190px/1 var(--font-sans),sans-serif; letter-spacing:-.08em; }
.booking-cta p { margin:0 0 15px; color:#9eb5b0; font-size:12px; text-transform:uppercase; letter-spacing:.14em; }.booking-cta>div { position:relative; z-index:2; }.booking-cta>div:last-child { display:flex; flex-direction:column; align-items:flex-end; }.booking-cta>div:last-child span { margin-bottom:9px; color:#9eb5b0; font-size:12px; }.booking-cta a { padding:17px 25px; background:var(--orange); font-size:21px; font-weight:700; }
footer { min-height:115px; padding:27px clamp(24px,6vw,86px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; color:#82908c; font-size:12px; }
.footer-brand { display:flex; align-items:center; gap:11px; color:var(--ink); }.footer-brand img { width:46px; height:46px; object-fit:contain; }.footer-brand div { display:flex; flex-direction:column; }.footer-brand strong { font-size:13px; }.footer-brand small { margin-top:5px; color:#8c9995; font-size:10px; }.footer-brand+ p { text-align:center; }footer>a { text-align:right; color:var(--ink); font-weight:600; }
.mobile-call { display:none; }
@media (max-width:980px){ nav{display:none}.hero-inner{grid-template-columns:1fr;gap:50px}.hero-card{align-self:auto;max-width:560px}.hero{min-height:auto}.route-grid{grid-template-columns:1fr 1fr}.hero-backdrop{background-position:62% center}.hero-inner{background:rgba(42,4,11,.25)}.about{grid-template-columns:1fr}.about-image{min-height:520px}.fare-section{grid-template-columns:1fr;padding-top:80px}.fare-intro{position:static}.office-grid{grid-template-columns:1fr 1fr}.office-grid article:nth-child(2){border-right:0}.office-grid article:last-child{border-top:1px solid #dce1de}.booking-cta{align-items:start;flex-direction:column}.booking-cta>div:last-child{align-items:flex-start} }
@media (max-width:660px){
  body{padding-bottom:64px}
  .site-header{height:82px;padding:0 18px}
  .brand{min-width:0}
  .brand img{width:155px;height:58px}
  .header-call>span:first-child{width:38px;height:38px}
  .header-call>span:last-child{display:none}
  .hero-inner{padding:70px 22px 60px}
  .hero h1{font-size:61px}
  .hero-lead{font-size:16px}
  .trust-row{margin-top:40px}
  .trust-row div{min-width:0;flex:1;padding-right:13px;margin-right:13px}
  .trust-row span{font-size:10px}
  .hero-card{padding:25px 20px}
  .schedule-line{grid-template-columns:1fr 38px 1fr}
  .schedule-line strong{font-size:16px}
  .price-results strong{font-size:24px}
  .quick-routes{padding:66px 20px}
  .section-heading{align-items:start}
  .section-heading>a{display:none}
  .route-grid{grid-template-columns:1fr}
  .route-card{min-height:175px}
  .hero-backdrop{background-position:65% center}
  .hero-backdrop:before{content:"";position:absolute;inset:0;background:rgba(42,4,11,.18)}
  .about-image{min-height:390px}
  .experience-badge{width:130px;height:120px;padding:20px}
  .experience-badge strong{font-size:41px}
  .about-copy{padding:65px 22px}
  .about h2,.fare-section h2,.booking-cta h2{font-size:43px}
  .fare-section{display:block;padding:67px 18px}
  .fare-table-wrap{margin-top:50px}
  .fare-table-head,.fare-row{width:auto;grid-template-columns:1.55fr 1fr}
  .fare-row, .fare-row span {font-size:16px}
  .fare-row i {display: none!important;}
  .contact-section{padding:67px 20px}
  .contact-hotline{display:none}
  .office-grid{grid-template-columns:1fr}
  .office-grid article{min-height:250px;border-right:0;border-bottom:1px solid #dce1de}
  .office-grid article:nth-child(2){border-bottom:1px solid #dce1de}
  .office-grid article:last-child{border-top:0;border-bottom:0}
  .booking-cta{margin:0 12px;padding:55px 24px}
  .booking-cta:after{font-size:100px;top:10px}
  footer{grid-template-columns:1fr;padding:35px 22px;text-align:left}
  .footer-brand+ p{display:none}
  footer>a{text-align:left}
  .mobile-call{position:fixed;z-index:50;left:0;right:0;bottom:0;height:66px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;background:var(--orange);font-size:18px;font-weight:700;box-shadow:0 -10px 30px rgba(73,8,18,.18)}
}