/* Cỏ Travel public catalog V101 — clean travel-commerce UI */
:root{
  --v101-green:#087547;
  --v101-green-dark:#075d3a;
  --v101-ink:#173326;
  --v101-muted:#687970;
  --v101-line:#dce7e1;
  --v101-soft:#f3f8f5;
  --v101-orange:#e87524;
}

body{background:#f5f7f6!important;color:var(--v101-ink)!important;line-height:1.45!important}
.wrap{max-width:1180px!important;padding-left:18px!important;padding-right:18px!important}

/* Header: one calm navigation bar, not a marketing banner. */
.topbar{
  background:rgba(255,255,255,.96)!important;
  color:var(--v101-ink)!important;
  border-bottom:1px solid #e3ebe6!important;
  box-shadow:0 5px 18px rgba(28,61,43,.06)!important;
  backdrop-filter:saturate(160%) blur(12px);
}
.topInner{max-width:1180px!important}
.hamb{background:#f3f8f5!important;color:var(--v101-green)!important;box-shadow:none!important;border:1px solid #dce7e1!important}
.logoDot{height:42px!important;width:154px!important;border:1px solid #e2eae5!important;box-shadow:none!important;border-radius:12px!important}
.brandText .t1{color:var(--v101-ink)!important}
.topLinks{gap:2px!important}
.topLinks a{color:#3b5448!important;border-radius:10px!important;padding:9px 10px!important;font-weight:800!important}
.topLinks a:hover{background:#f1f7f3!important;color:var(--v101-green)!important}
.searchRow input{border:1px solid #dce7e1!important;background:#f8faf9!important;box-shadow:none!important;border-radius:12px!important;color:var(--v101-ink)!important}
.searchRow input:focus{background:#fff!important;border-color:#9fcbb2!important;box-shadow:0 0 0 3px rgba(8,117,71,.08)!important}
.previewInTop{background:#f3f8f5!important;border:1px solid #dce7e1!important;color:var(--v101-ink)!important}
.previewInTop .pvLabel{color:#597064!important}
.previewInTop select{border:1px solid #dce7e1!important;color:var(--v101-green)!important;box-shadow:none!important}

/* Hero: editorial + booking shortcuts, with one brand accent only. */
.seoLandingHero{
  padding:30px 32px!important;
  border-radius:22px!important;
  background:#fff!important;
  color:var(--v101-ink)!important;
  border:1px solid #dfe8e3!important;
  box-shadow:0 12px 34px rgba(28,61,43,.07)!important;
}
.seoLandingHero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--v101-green)}
.seoLandingHero:after{display:none!important}
.seoLandingHero .heroInner{gap:32px!important;grid-template-columns:minmax(0,1.42fr) minmax(300px,.58fr)!important}
.seoLandingHero .eyebrow{color:var(--v101-green)!important;font-size:11px!important;letter-spacing:1.1px!important}
.seoLandingHero h1{color:#173326!important;font-size:clamp(30px,4.4vw,48px)!important;line-height:1.05!important;letter-spacing:-1.35px!important;max-width:760px}
.seoLandingHero .lead{color:#5f7168!important;font-size:15px!important;font-weight:650!important;max-width:790px!important;line-height:1.7!important}
.seoLandingHero .heroTrust{margin-top:18px!important;gap:8px!important}
.seoLandingHero .heroTrust span{background:#f3f8f5!important;color:#365446!important;border:1px solid #dce8e1!important;box-shadow:none!important;padding:7px 9px!important;font-size:11px!important;font-weight:800!important}
.seoLandingHero .heroBox{border:1px solid #dce7e1!important;border-radius:16px!important;box-shadow:none!important;background:#f8faf9!important;padding:16px!important}
.seoLandingHero .heroBoxTitle{color:#294638!important;font-size:13px!important;margin-bottom:10px!important}
.seoLandingHero .heroLinks{gap:5px!important}
.seoLandingHero .heroLinks a{background:#fff!important;border-color:#e1e9e4!important;color:#334f42!important;border-radius:10px!important;padding:9px 10px!important;font-weight:800!important}
.seoLandingHero .heroLinks a:hover{border-color:#9fcbb2!important;color:var(--v101-green)!important}
.seoLandingHero .heroCta{gap:7px!important}
.seoLandingHero .heroCta .primary{background:var(--v101-green)!important;color:#fff!important}
.seoLandingHero .heroCta .ghost{background:#fff!important;color:#a64b16!important;border-color:#ead4c4!important}

.seoIntentNav{padding:2px 0 14px!important;gap:7px!important}
.seoIntentNav a{background:transparent!important;border-color:#d7e2dc!important;color:#4a6156!important;box-shadow:none!important;font-weight:800!important;padding:8px 11px!important}
.seoIntentNav a:hover{background:#fff!important;color:var(--v101-green)!important;border-color:#a9cdb8!important}

/* Section hierarchy: label bar instead of large gradients. */
.tourSection{margin-top:26px!important}
.tourSectionHead{
  position:relative;
  display:block!important;
  margin:0 0 12px!important;
  padding:4px 0 9px 14px!important;
  border:0!important;
  border-bottom:1px solid #dde6e1!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--v101-ink)!important;
  box-shadow:none!important;
}
.tourSectionHead:before{content:"";position:absolute;left:0;top:4px;bottom:9px;width:4px;border-radius:99px;background:var(--v101-green)}
.tourSectionHead h2{color:#173326!important;font-size:19px!important;line-height:1.25!important;letter-spacing:-.15px!important}
.tourSectionDesc{margin-top:4px!important;color:#718078!important;font-size:11.5px!important;font-weight:650!important}

/* Product cards: use a single strong photograph, no collage noise. */
.grid{gap:18px!important;margin-top:0!important}
.tourCard{
  border:1px solid #dfe7e2!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(29,66,45,.055)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tourCard:hover{transform:translateY(-3px)!important;border-color:#cbdcd2!important;box-shadow:0 14px 32px rgba(29,66,45,.09)!important}
.imgCollage{display:block!important;height:205px!important;padding:0!important;background:#e8efeb!important;position:relative!important}
.imgMain{width:100%!important;height:100%!important;border-radius:0!important;overflow:hidden!important}
.imgThumb{display:none!important}
.imgCollage img{transition:transform .35s ease!important}
.tourCard:hover .imgMain img{transform:scale(1.025)}
.badge{top:12px!important;left:12px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 5px 16px rgba(15,34,24,.12)!important;color:var(--v101-green-dark)!important;font-size:10.5px!important;padding:6px 9px!important;backdrop-filter:blur(8px)}
.cardBody{padding:14px 15px 15px!important}
.tourTop{gap:6px!important;margin:0 0 7px!important}
.tourLabel{display:none!important}
.codePill,.tagPill{height:21px!important;font-size:10.5px!important;padding:0 8px!important;font-weight:850!important}
.codePill{background:#eff7f2!important;border-color:#d9e9df!important;color:#0b6841!important}
.tagPill.hot{background:#fff5ed!important;border-color:#f1dac9!important;color:#b85217!important}
.tourName{font-size:16px!important;line-height:1.35!important;font-weight:900!important;color:#183326!important;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:43px}
.tourIntro{font-size:11.5px!important;color:#74827b!important;line-height:1.5!important;margin-top:6px!important;max-height:3em!important}
.tourRoute{font-size:11.5px!important;color:#596d63!important;margin:8px 0 5px!important;line-height:1.45!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:33px}
.tourMeta{margin-top:7px!important;gap:3px!important}
.tourMeta .row{font-size:11.5px!important;color:#66786f!important;gap:6px!important}
.tourMeta .row b{font-weight:800!important;color:#486055!important}
.tourMeta .ic{width:15px!important}
.tourBottom{border-top:1px solid #edf1ef!important;padding-top:12px!important;margin-top:12px!important;align-items:center!important}
.priceFrom{color:#7a8982!important}
.priceValue{color:#c95e1b!important;font-size:16px!important;letter-spacing:-.2px!important}
.ctaWrap{flex-direction:row!important;gap:6px!important}
.ctaWrap .cardBookBtn,.ctaWrap .cardDetailBtn{border-radius:10px!important;padding:9px 11px!important;font-size:11px!important;min-height:36px!important}
.ctaWrap .cardBookBtn{background:var(--v101-green)!important;border-color:var(--v101-green)!important;box-shadow:none!important}
.ctaWrap .cardBookBtn:hover{background:var(--v101-green-dark)!important}
.ctaWrap .cardDetailBtn{background:#fff!important;color:#3d584b!important;border-color:#d7e1dc!important}
.tourSectionToggle{background:#fff!important;border-color:#d6e2dc!important;color:#356049!important;box-shadow:none!important;border-radius:11px!important;font-weight:850!important}

/* Floating helpers should not compete with the catalog. */
.quickActions{gap:7px!important;right:14px!important}
.qaBtn{box-shadow:0 8px 22px rgba(25,55,38,.12)!important;border:1px solid rgba(214,225,219,.9)!important}

/* Detail page follows the same quieter hierarchy. */
.tourSeoDetail{background:#fff!important;border:1px solid #dfe8e3!important;box-shadow:0 10px 30px rgba(28,61,43,.06)!important}
.detailTitle{color:#173326!important;letter-spacing:-.6px!important}
.detailKicker{color:var(--v101-green)!important}

@media(max-width:860px){
  .seoLandingHero{padding:22px!important}
  .seoLandingHero .heroInner{grid-template-columns:1fr!important;gap:18px!important}
  .seoLandingHero .heroBox{display:none!important}
  .seoLandingHero h1{font-size:32px!important}
}
@media(max-width:620px){
  .wrap{padding-left:12px!important;padding-right:12px!important}
  .topbar{padding-left:8px!important;padding-right:8px!important}
  .logoDot{width:118px!important;height:38px!important}
  .searchRow{gap:6px!important}
  .searchRow input{height:40px!important;padding:9px 10px!important;font-size:12px!important}
  .seoLandingHero{margin-top:9px!important;padding:20px 17px 18px 20px!important;border-radius:17px!important}
  .seoLandingHero h1{font-size:29px!important;letter-spacing:-.8px!important}
  .seoLandingHero .lead{font-size:13.5px!important;line-height:1.62!important}
  .seoLandingHero .heroTrust span:nth-child(n+3){display:none!important}
  .seoIntentNav{margin-left:-1px!important;margin-right:-1px!important}
  .tourSection{margin-top:22px!important}
  .tourSectionHead h2{font-size:17px!important}
  .imgCollage{height:196px!important}
  .tourName{font-size:15.5px!important;min-height:auto!important}
  .tourBottom{align-items:flex-end!important}
  .ctaWrap{gap:5px!important}
  .ctaWrap .cardBookBtn,.ctaWrap .cardDetailBtn{padding:8px 9px!important}
  .quickActions{bottom:82px!important;right:9px!important}
}