/* Nam Anh Travel — style.css */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;color:#1f2937;background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
h2{font-size:1.7rem;margin-bottom:6px;color:#0f1013}
section{padding:52px 0}
section h2{text-align:center}
section>div>p{text-align:center;color:#666;max-width:720px;margin:0 auto 30px}

/* Topbar */
.topbar{background:#0f1013;color:#fff;font-size:.82rem;padding:7px 0}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.topbar a{color:#00b7ff;font-weight:600}

/* Header */
header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.navwrap{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo b{display:block;font-size:1.05rem;color:#e30001;letter-spacing:.5px}
.logo small{display:block;font-size:.68rem;color:#666}
#nav{display:flex;gap:4px;margin-left:auto}
#nav a{padding:8px 12px;border-radius:6px;font-size:.92rem;color:#333}
#nav a:hover,#nav a.active{background:#eef1f4}
.hot a{display:inline-block;background:#e30001;color:#fff;padding:9px 16px;border-radius:8px;font-weight:700;font-size:.92rem}
.hot a:hover{background:#c0272b}
#nav-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;margin-left:auto}

/* Hero */
.hero{background:linear-gradient(135deg,#0067cf 0%,#00b7ff 60%,#67e8f9 100%);padding:64px 0 0;color:#fff}
.hero-text{text-align:center;max-width:820px;margin:0 auto 34px}
.hero-text h1{font-size:2.2rem;line-height:1.3;margin-bottom:12px}
.hero-text h1 span{color:#ffd166}
.hero-text p{font-size:1.05rem;color:#eaf6ff}

/* Search box */
.search-box{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.12);padding:18px 22px;color:#1f2937}
.tabs{display:flex;gap:6px;border-bottom:2px solid #eef1f4;margin-bottom:16px}
.tab{background:none;border:none;padding:10px 18px;font-size:1rem;cursor:pointer;color:#666;border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:600}
.tab.active{color:#e30001;border-color:#e30001}
.tab-panel{display:none}
.tab-panel.active{display:block}
.row{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.field label{display:block;font-size:.78rem;color:#666;margin-bottom:4px;font-weight:600}
.field input,.field select{width:100%;padding:10px 12px;border:1px solid #d9dee3;border-radius:8px;font-size:.95rem;background:#fff}
.btn-search{background:#e30001;color:#fff;border:none;padding:11px 22px;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-search:hover{background:#c0272b}
.quick{margin-top:12px;font-size:.85rem;color:#666;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.quick a{color:#0067cf;text-decoration:underline}

/* Deals */
.deals{background:#f4f5f7}
.deal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.deal-card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.06);position:relative}
.deal-tag{position:absolute;top:-10px;left:18px;background:#e30001;color:#fff;font-size:.72rem;padding:4px 10px;border-radius:20px;font-weight:700}
.deal-card h3{margin:6px 0 6px;color:#0f1013}
.deal-card p{font-size:.88rem;color:#666;margin-bottom:12px}
.price{font-size:.88rem;color:#666;margin-bottom:12px}
.price b{color:#e30001;font-size:1.15rem}
.price em{font-size:.7rem;color:#999;font-style:normal}
.btn{display:inline-block;background:#0067cf;color:#fff;padding:9px 18px;border-radius:8px;font-weight:600;font-size:.9rem}
.btn:hover{background:#0055a8}

/* Cards (tour & hotel) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #eef1f4;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;flex-direction:column}
.thumb{height:150px;position:relative;color:#fff;background-size:cover;background-position:center}
.img-tuyhoa{background-image:url('img/tuyhoa.jpg')}
.img-coto{background-image:url('img/coto.jpg')}
.img-culaocham{background-image:url('img/culaocham.jpg')}
.img-halong{background-image:url('img/halong.jpg')}
.img-sapa{background-image:url('img/sapa.jpg')}
.img-mikhe{background-image:url('img/mikhe.jpg')}
.img-phuquoc{background-image:url('img/phuquoc.jpg')}
.img-hoian{background-image:url('img/hoian.jpg')}
.img-nhatrang{background-image:url('img/nhatrang.jpg')}
.img-hanquoc{background-image:url('img/hanquoc.jpg')}
.img-nhatban{background-image:url('img/nhatban.jpg')}
.thumb span{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
.card h3{font-size:1rem;padding:14px 16px 4px;color:#0f1013}
.card p{font-size:.85rem;color:#666;padding:0 16px 10px;flex:1}
.card .price{padding:0 16px 12px}
.card .btn{margin:0 16px 16px;text-align:center}

/* Destinations */
.destinations{background:#f4f5f7}
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dest{border-radius:12px;padding:60px 18px;color:#fff;text-align:center;cursor:pointer;background-size:cover;background-position:center}
.dest h3{font-size:1.15rem;margin-bottom:4px}
.dest p{font-size:.85rem;opacity:.9}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-item{background:#fff;border:1px solid #eef1f4;border-radius:12px;padding:22px;text-align:center}
.ico{font-size:2rem;display:block;margin-bottom:10px}
.why-item h3{font-size:1rem;margin-bottom:8px;color:#0f1013}
.why-item p{font-size:.86rem;color:#666;text-align:left}

/* Reviews */
.reviews{background:#f4f5f7}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:#fff;border-radius:12px;padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.stars{color:#f59e0b;margin-bottom:10px;letter-spacing:2px}
.rev p{font-size:.9rem;color:#374151;font-style:italic;margin-bottom:14px}
.who b{display:block;color:#0f1013}
.who span{font-size:.78rem;color:#888}

/* Subscribe */
.subscribe{background:linear-gradient(135deg,#0067cf,#00b7ff);color:#fff;text-align:center}
.subscribe p{color:#eaf6ff;margin-bottom:18px}
.subscribe form{display:flex;gap:10px;justify-content:center;max-width:520px;margin:0 auto}
.subscribe input{flex:1;padding:12px 16px;border:none;border-radius:8px;font-size:1rem}
#sub-msg{display:block;margin-top:10px;color:#ffd166;font-weight:600}

/* Contact */
.contact{background:#f4f5f7}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:26px;align-items:start}
.contact-info{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.contact-info p{margin-bottom:14px;font-size:.95rem}
.contact-info a{color:#e30001;font-weight:700}
.contact-form{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.05);display:grid;gap:12px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:11px 14px;border:1px solid #d9dee3;border-radius:8px;font-size:.95rem;font-family:inherit}
.form-note{font-size:.74rem;color:#999}

/* Footer */
footer{background:#0f1013;color:#cfd4da;padding:44px 0 20px;font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:26px;margin-bottom:26px}
footer h3{color:#fff;font-size:1rem;margin-bottom:12px}
footer a{display:block;color:#cfd4da;margin-bottom:8px}
footer a:hover{color:#00b7ff}
.copyright{border-top:1px solid #2a2d33;padding-top:16px;text-align:center;font-size:.78rem;color:#8a9099}

.credits{margin-top:10px;font-size:.72rem;color:#8a9099}
.credits a{display:inline;color:#00b7ff}

/* Responsive */
@media(max-width:900px){
  .row{grid-template-columns:1fr 1fr}
  .btn-search{grid-column:span 2}
  .deal-cards,.cards,.rev-grid,.why-grid{grid-template-columns:1fr 1fr}
  .dest-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  #nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:10px 16px;box-shadow:0 6px 12px rgba(0,0,0,.1)}
  #nav.open{display:flex}
  #nav-toggle{display:block}
  .hero-text h1{font-size:1.6rem}
  .row{grid-template-columns:1fr}
  .btn-search{grid-column:span 1;width:100%}
  .deal-cards,.cards,.rev-grid,.why-grid,.dest-grid,.foot-grid{grid-template-columns:1fr}
  .subscribe form{flex-direction:column}
  .hot{display:none}
}