/* =========================
   Home page — SaigonTeam Travel
   (phần dùng chung: xem variables.css / base.css / layout.css / components.css)
   ========================= */

    /* ANNOUNCEMENT BAR */

    /* REVIEWS CAROUSEL */
    #reviews {
      padding: 72px 0;
      background: var(--nv);
      overflow: hidden;
      position: relative
    }

    #reviews::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 50%, rgba(232, 93, 4, .15), transparent 50%), radial-gradient(circle at 80% 50%, rgba(255, 183, 3, .08), transparent 50%);
      pointer-events: none
    }

    .rv-scroll-wrap {
      overflow: hidden;
      -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 6%, #fff 94%, transparent 100%);
      mask: linear-gradient(90deg, transparent 0%, #fff 6%, #fff 94%, transparent 100%);
      margin-top: 8px
    }

    .rv-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: destRoll 42s linear infinite;
      padding: 8px 0 16px
    }

    .rv-track:hover {
      animation-play-state: paused
    }

    .rv-card {
      flex: 0 0 300px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 20px;
      padding: 24px;
      backdrop-filter: blur(8px);
      transition: transform .3s, background .3s
    }

    .rv-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, .11)
    }

    .rv-stars {
      color: var(--gd);
      font-size: .85rem;
      letter-spacing: 1px;
      margin-bottom: 12px
    }

    .rv-quote {
      font-size: .84rem;
      color: rgba(255, 255, 255, .82);
      line-height: 1.75;
      margin-bottom: 18px;
      font-style: italic
    }

    .rv-author {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .rv-av {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--or), var(--gd));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: .95rem;
      color: #fff;
      flex-shrink: 0
    }

    .rv-nm {
      font-size: .85rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.2
    }

    .rv-loc {
      font-size: .72rem;
      color: rgba(255, 255, 255, .45);
      margin-top: 2px
    }

    .rv-service {
      display: inline-block;
      margin-top: 14px;
      font-size: .67rem;
      font-weight: 700;
      color: var(--gd);
      text-transform: uppercase;
      letter-spacing: 1px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      padding-top: 12px;
      width: 100%
    }


    /* HERO */
    #hero {
      min-height: 100vh;
      background:
        linear-gradient(105deg, rgba(4, 10, 24, .97) 0%, rgba(4, 10, 24, .90) 28%, rgba(4, 10, 24, .52) 50%, rgba(4, 10, 24, .08) 70%, transparent 86%),
        linear-gradient(to top, rgba(0, 0, 0, .5) 0%, transparent 38%),
        url('../../../images/du-lich-phu-quoc.jpg') right center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden
    }

    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, .14) 0%, transparent 55%);
      z-index: 0;
      pointer-events: none
    }

    #hero .container,
    #hero .scroll-hint {
      position: relative;
      z-index: 1
    }

    /* Hero banner slider (dữ liệu từ admin "Quản lý Banner") */
    .hero-slider {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      background-position: right center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 1.4s ease
    }

    .hero-slide.active {
      opacity: 1
    }

    .hero-glow {
      display: none
    }

    .hero-dots {
      display: none
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      padding: 120px 0 90px
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(255, 255, 255, .12);
      border: 1.5px solid rgba(255, 255, 255, .25);
      color: #fff;
      padding: 7px 16px;
      border-radius: 30px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 22px;
      animation: fdDown .8s ease both;
      backdrop-filter: blur(8px)
    }

    .hero-h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 5vw, 4.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.14;
      margin-bottom: 20px;
      animation: fdLeft .8s ease .2s both;
      text-shadow: 0 2px 40px rgba(0, 0, 0, .8), 0 4px 80px rgba(0, 0, 0, .5)
    }

    .hero-h1 em {
      font-style: normal;
      display: inline;
      background: linear-gradient(125deg, #FF8C42, #FFB703, #E85D04, #FF8C42);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 4s ease infinite
    }

    .hero-p {
      font-size: 1rem;
      color: rgba(255, 255, 255, .88);
      line-height: 1.9;
      margin-bottom: 28px;
      animation: fdLeft .8s ease .38s both;
      max-width: 500px;
      text-shadow: 0 1px 12px rgba(0, 0, 0, .6)
    }

    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      animation: fdLeft .8s ease .5s both;
      margin-bottom: 24px
    }

    .btn-ol-dk {
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .45);
      padding: 12px 26px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: .9rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .3s;
      cursor: pointer;
      backdrop-filter: blur(6px)
    }

    .btn-ol-dk:hover {
      background: rgba(255, 255, 255, .2);
      border-color: #fff;
      transform: translateY(-2px)
    }

    /* ── Hero CTA: maximum attention ── */
    /* Primary: fire gradient + shimmer sweep + pulsing glow ring */
    .hero-btns .btn-pr {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #FF4800, var(--or), #FF8C42, var(--gd));
      background-size: 250% 250%;
      animation: btnGradAnim 3s ease infinite, btnOrangePulse 2.2s ease-in-out infinite;
      box-shadow: 0 8px 32px rgba(232, 93, 4, .7);
      padding: 15px 36px;
      font-size: .96rem;
      letter-spacing: .3px;
      border: none
    }

    .hero-btns .btn-pr::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 55%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
      animation: btnSweep 3s ease-in-out infinite;
      pointer-events: none
    }

    .hero-btns .btn-pr:hover {
      transform: translateY(-5px) scale(1.07) !important;
      box-shadow: 0 22px 52px rgba(232, 93, 4, .95) !important;
      animation: none !important
    }

    /* Secondary: electric cyan glow + sweep + pulse */
    .hero-btns .btn-ol-dk {
      position: relative;
      overflow: hidden;
      background: rgba(0, 212, 255, .07);
      border: 2px solid rgba(0, 212, 255, .7) !important;
      box-shadow: 0 0 24px rgba(0, 212, 255, .35), inset 0 1px 0 rgba(0, 212, 255, .12);
      animation: btnCyanPulse 2.5s ease-in-out infinite;
      padding: 15px 36px;
      font-size: .96rem;
      letter-spacing: .2px
    }

    .hero-btns .btn-ol-dk::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 55%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .28), transparent);
      animation: btnSweep 3s ease-in-out .85s infinite;
      pointer-events: none
    }

    .hero-btns .btn-ol-dk:hover {
      background: rgba(0, 212, 255, .16) !important;
      border-color: rgba(0, 212, 255, .95) !important;
      box-shadow: 0 0 44px rgba(0, 212, 255, .7), inset 0 0 22px rgba(0, 212, 255, .1) !important;
      transform: translateY(-5px) scale(1.06) !important;
      color: #7EF0FF !important;
      animation: none !important
    }

    @keyframes btnGradAnim {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @keyframes btnSweep {
      0% {
        left: -100%
      }

      48%,
      100% {
        left: 150%
      }
    }

    @keyframes btnOrangePulse {

      0%,
      100% {
        box-shadow: 0 8px 32px rgba(232, 93, 4, .7), 0 0 0 0 rgba(232, 93, 4, .45)
      }

      50% {
        box-shadow: 0 8px 32px rgba(232, 93, 4, .85), 0 0 0 12px rgba(232, 93, 4, 0)
      }
    }

    @keyframes btnCyanPulse {

      0%,
      100% {
        box-shadow: 0 0 24px rgba(0, 212, 255, .35), inset 0 1px 0 rgba(0, 212, 255, .12)
      }

      50% {
        box-shadow: 0 0 42px rgba(0, 212, 255, .6), inset 0 0 18px rgba(0, 212, 255, .1)
      }
    }

    /* Search strip — white pill nổi trên ảnh */
    .hero-search {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, .97);
      border-radius: 60px;
      box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
      padding: 6px;
      gap: 0;
      animation: fdLeft .8s ease .65s both;
      max-width: 540px;
      border: 1.5px solid rgba(255, 255, 255, .6)
    }

    .hs-field {
      display: flex;
      flex-direction: column;
      padding: 6px 16px;
      flex: 1;
      cursor: pointer;
      border-right: 1px solid #eee;
      min-width: 0
    }

    .hs-field:last-of-type {
      border-right: none
    }

    .hs-lbl {
      font-size: .59rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--tl);
      margin-bottom: 2px
    }

    .hs-sel {
      border: none;
      outline: none;
      font-family: 'Montserrat', sans-serif;
      font-size: .82rem;
      font-weight: 600;
      color: var(--nv);
      background: transparent;
      cursor: pointer;
      width: 100%;
      -webkit-appearance: none;
      appearance: none
    }

    .hs-inp {
      border: none;
      outline: none;
      font-family: 'Montserrat', sans-serif;
      font-size: .82rem;
      font-weight: 600;
      color: var(--nv);
      background: transparent;
      width: 100%
    }

    .hs-btn {
      background: linear-gradient(135deg, var(--or), #FF6B08);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 12px 22px;
      font-family: 'Montserrat', sans-serif;
      font-size: .82rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all .3s;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(232, 93, 4, .5)
    }

    .hs-btn:hover {
      box-shadow: 0 6px 24px rgba(232, 93, 4, .6);
      transform: scale(1.02)
    }

    /* Destination chips */
    .hero-tags {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      animation: fdLeft .8s ease .8s both;
      margin-top: 16px
    }

    .ht-lbl {
      font-size: .73rem;
      color: rgba(255, 255, 255, .7);
      font-weight: 600;
      flex-shrink: 0
    }

    .htag {
      padding: 5px 13px;
      background: rgba(255, 255, 255, .14);
      border: 1.5px solid rgba(255, 255, 255, .3);
      border-radius: 30px;
      font-size: .73rem;
      font-weight: 600;
      color: #fff;
      transition: all .3s;
      backdrop-filter: blur(6px)
    }

    .htag:hover {
      background: var(--or);
      border-color: var(--or);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(232, 93, 4, .5)
    }

    /* Hero visual — clean stacked card design */
    .hero-vis {
      position: relative;
      animation: fdRight .8s ease .3s both;
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .hv-stack {
      position: relative;
      height: 430px;
      flex-shrink: 0
    }

    /* Card base */
    .hv-card {
      position: absolute;
      border-radius: 22px;
      overflow: hidden;
      cursor: default
    }

    .hv-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s
    }

    .hv-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 58%);
      pointer-events: none
    }

    .hv-card-lbl {
      position: absolute;
      bottom: 14px;
      left: 16px;
      color: #fff;
      font-size: .78rem;
      font-weight: 700;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 6px;
      letter-spacing: .2px
    }

    .hv-card-lbl i {
      color: var(--or3);
      font-size: .7rem
    }

    /* Card positions */
    .hv-c1 {
      width: 83%;
      height: 64%;
      top: 0;
      right: 0;
      transform: rotate(3.5deg);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
      z-index: 1;
      background: linear-gradient(135deg, var(--nv), var(--nv2))
    }

    .hv-c2 {
      width: 80%;
      height: 68%;
      bottom: 0;
      left: 0;
      transform: rotate(-2deg);
      box-shadow: 0 32px 72px rgba(0, 0, 0, .3);
      z-index: 2;
      background: linear-gradient(135deg, #0B6E4F, #219EBC)
    }

    .hv-c1:hover img {
      transform: scale(1.06) rotate(-1deg)
    }

    .hv-c2:hover img {
      transform: scale(1.06) rotate(1deg)
    }

    /* Rating badge */
    .hv-badge {
      position: absolute;
      top: 42%;
      right: -20px;
      transform: translateY(-50%);
      background: #fff;
      border-radius: 14px;
      padding: 10px 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 10;
      animation: float 4.5s ease-in-out infinite;
      white-space: nowrap
    }

    .hv-badge-ico {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #FFB703, #FB8500);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      color: #fff;
      flex-shrink: 0
    }

    .hv-badge-n {
      font-size: .95rem;
      font-weight: 900;
      color: var(--nv);
      line-height: 1
    }

    .hv-badge-l {
      font-size: .62rem;
      color: var(--tl);
      margin-top: 2px
    }

    /* Stats row */
    .hv-stats {
      display: flex;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(255, 255, 255, .1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .18)
    }

    .hv-st {
      flex: 1;
      padding: 13px 10px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, .12);
      transition: background .3s
    }

    .hv-st:last-child {
      border-right: none
    }

    .hv-st:hover {
      background: rgba(255, 255, 255, .08)
    }

    .hv-st-n {
      font-size: 1.2rem;
      font-weight: 900;
      color: #fff;
      line-height: 1
    }

    .hv-st-n span {
      color: var(--gd)
    }

    .hv-st-l {
      font-size: .6rem;
      color: rgba(255, 255, 255, .55);
      margin-top: 3px;
      letter-spacing: .6px;
      text-transform: uppercase
    }

    .scroll-hint {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: rgba(255, 255, 255, .45);
      animation: bob 2s ease-in-out infinite;
      z-index: 2
    }

    .scroll-hint span {
      display: block;
      font-size: .62rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 5px
    }

    /* ABOUT */
    #about {
      padding: 96px 0;
      background: #fff
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .about-vis {
      position: relative
    }

    .about-main {
      height: 440px;
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(135deg, var(--nv), var(--nv2))
    }

    .about-main img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .about-acc {
      position: absolute;
      bottom: -28px;
      right: -28px;
      width: 170px;
      height: 170px;
      border-radius: 14px;
      overflow: hidden;
      border: 5px solid #fff;
      box-shadow: 0 10px 36px rgba(0, 0, 0, .14);
      background: linear-gradient(135deg, var(--or), var(--gd))
    }

    .about-acc img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .about-yr {
      position: absolute;
      top: 28px;
      left: -18px;
      background: var(--or);
      color: #fff;
      padding: 14px 18px;
      border-radius: 14px;
      text-align: center;
      box-shadow: 0 10px 28px rgba(232, 93, 4, .4)
    }

    .about-yn {
      font-size: 2.2rem;
      font-weight: 900;
      line-height: 1
    }

    .about-yt {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: .9
    }

    .info-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 26px 0
    }

    .info-row {
      display: flex;
      align-items: flex-start;
      gap: 13px
    }

    .info-ico {
      width: 40px;
      height: 40px;
      background: rgba(232, 93, 4, .1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--or);
      font-size: .95rem;
      flex-shrink: 0
    }

    .info-tx strong {
      display: block;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--tl);
      margin-bottom: 2px
    }

    .info-tx span {
      font-size: .9rem;
      font-weight: 500;
      color: var(--tx);
      line-height: 1.5
    }

    .hl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 26px
    }

    .hl {
      padding: 13px 15px;
      background: var(--gy);
      border-radius: 10px;
      border-left: 3px solid var(--or);
      display: flex;
      align-items: center;
      gap: 9px
    }

    .hl i {
      color: var(--or);
      font-size: .85rem
    }

    .hl span {
      font-size: .82rem;
      font-weight: 600;
      color: var(--nv)
    }

    /* SERVICES */
    #services {
      padding: 96px 0;
      background: var(--cr)
    }

    .srv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .srv {
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
      transition: all .4s;
      cursor: default
    }

    .srv:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .12)
    }

    .srv-top {
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden
    }

    .srv-top i {
      display: none
    }

    .srv-top::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .55) 100%);
      z-index: 1
    }

    .srv-top img {
      opacity: 1 !important;
      z-index: 0 !important
    }

    .g1,
    .g2,
    .g3,
    .g4,
    .g5,
    .g6 {
      background: #1B2A4A
    }

    .srv-body {
      padding: 22px
    }

    .srv-ttl {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 9px
    }

    .srv-dsc {
      font-size: .82rem;
      color: var(--tl);
      line-height: 1.75;
      margin-bottom: 13px
    }

    .srv-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .srv-tag {
      padding: 3px 10px;
      background: rgba(232, 93, 4, .09);
      color: var(--or);
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 600
    }

    .srv-hot {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--gd);
      color: var(--nv);
      font-size: .65rem;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 20px;
      z-index: 3;
      letter-spacing: .5px
    }

    /* STATS */
    #stats {
      padding: 80px 0;
      background: var(--nv);
      position: relative;
      overflow: hidden
    }

    #stats::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 15% 50%, rgba(232, 93, 4, .2), transparent 50%), radial-gradient(circle at 85% 50%, rgba(255, 183, 3, .1), transparent 50%)
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
      z-index: 2
    }

    .stat {
      text-align: center;
      padding: 28px 16px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      transition: all .3s
    }

    .stat:hover {
      background: rgba(255, 255, 255, .09);
      transform: translateY(-4px)
    }

    .stat-ic {
      font-size: 1.9rem;
      color: var(--or);
      margin-bottom: 14px
    }

    .stat-n {
      font-size: 2.8rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      margin-bottom: 4px
    }

    .stat-n span {
      color: var(--gd)
    }

    .stat-l {
      font-size: .75rem;
      color: rgba(255, 255, 255, .55);
      text-transform: uppercase;
      letter-spacing: 1.2px
    }

    /* WHY */
    #why {
      padding: 96px 0;
      background: #fff
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px
    }

    .why-card {
      padding: 30px 22px;
      border-radius: 18px;
      background: var(--gy);
      transition: all .35s;
      text-align: center
    }

    .why-card:hover {
      background: var(--nv);
      transform: translateY(-6px);
      box-shadow: 0 16px 44px rgba(27, 42, 74, .2)
    }

    .why-card:hover .why-ico {
      background: rgba(232, 93, 4, .2);
      color: var(--or3)
    }

    .why-card:hover .why-ttl {
      color: #fff
    }

    .why-card:hover .why-dsc {
      color: rgba(255, 255, 255, .65)
    }

    .why-ico {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      background: rgba(232, 93, 4, .1);
      color: var(--or);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 18px;
      transition: all .35s
    }

    .why-ttl {
      font-size: 1rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 10px;
      transition: color .35s
    }

    .why-dsc {
      font-size: .82rem;
      color: var(--tl);
      line-height: 1.75;
      transition: color .35s
    }

    /* PARTNERS */
    #partners {
      padding: 80px 0;
      background: var(--cr)
    }

    .marq-wrap {
      overflow: hidden;
      position: relative;
      margin-top: 0
    }

    .marq-wrap::before,
    .marq-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 140px;
      z-index: 2;
      pointer-events: none
    }

    .marq-wrap::before {
      left: 0;
      background: linear-gradient(to right, var(--cr), transparent)
    }

    .marq-wrap::after {
      right: 0;
      background: linear-gradient(to left, var(--cr), transparent)
    }

    .marq-track {
      display: flex;
      gap: 18px;
      width: max-content;
      animation: marq 32s linear infinite
    }

    .marq-track:hover {
      animation-play-state: paused
    }

    .p-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 175px;
      height: 72px;
      background: #fff;
      border-radius: 12px;
      border: 1.5px solid #e8eaf0;
      font-weight: 700;
      font-size: .8rem;
      color: var(--nv);
      letter-spacing: .5px;
      flex-shrink: 0;
      transition: all .3s;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .05)
    }

    .p-logo:hover {
      background: var(--nv);
      color: #fff;
      border-color: var(--nv)
    }

    /* LANGUAGES */
    #languages {
      padding: 80px 0;
      background: #fff
    }

    .lang-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .lang-card {
      background: var(--gy);
      border-radius: 16px;
      padding: 28px 20px;
      text-align: center;
      transition: all .35s;
      border: 2px solid transparent
    }

    .lang-card:hover {
      transform: translateY(-5px);
      border-color: var(--or);
      box-shadow: 0 12px 36px rgba(232, 93, 4, .12)
    }

    .lang-card.main {
      border-color: var(--or);
      background: rgba(232, 93, 4, .05)
    }

    .lang-flag {
      font-size: 2.8rem;
      margin-bottom: 11px
    }

    .lang-nm {
      font-size: 1rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 4px
    }

    .lang-native {
      font-size: .78rem;
      color: var(--tl)
    }

    /* CONTACT */
    #contact {
      padding: 96px 0;
      background: var(--cr)
    }

    .ct-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 60px
    }

    .ct-items {
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin: 28px 0
    }

    .ct-row {
      display: flex;
      align-items: flex-start;
      gap: 15px
    }

    .ct-ico {
      width: 48px;
      height: 48px;
      background: rgba(232, 93, 4, .1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--or);
      font-size: 1.05rem;
      flex-shrink: 0
    }

    .ct-tx strong {
      display: block;
      font-size: .8rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .ct-tx span,
    .ct-tx a {
      font-size: .88rem;
      color: var(--tl);
      line-height: 1.6
    }

    .ct-tx a {
      color: var(--or);
      font-weight: 600
    }

    .socials {
      display: flex;
      gap: 10px;
      margin-top: 26px
    }

    .soc {
      width: 42px;
      height: 42px;
      background: var(--gy);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--nv);
      font-size: .95rem;
      transition: all .3s
    }

    .soc:hover {
      background: var(--or);
      color: #fff;
      transform: translateY(-3px)
    }

    .ct-form {
      background: #fff;
      border-radius: 22px;
      padding: 38px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, .07)
    }

    .form-ttl {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 22px
    }

    .f-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px
    }

    .fg {
      margin-bottom: 14px
    }

    .fg label {
      display: block;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--tx);
      margin-bottom: 5px
    }

    .fg input,
    .fg select,
    .fg textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid #E8EAF0;
      border-radius: 10px;
      font-family: 'Montserrat', sans-serif;
      font-size: .875rem;
      color: var(--tx);
      outline: none;
      transition: border-color .3s;
      background: #fff
    }

    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      border-color: var(--or)
    }

    .fg textarea {
      height: 110px;
      resize: vertical
    }

    .f-btn {
      width: 100%;
      padding: 14px;
      background: var(--or);
      color: #fff;
      border: none;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    .f-btn:hover {
      background: var(--or2);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(232, 93, 4, .35)
    }

    /* FOOTER */
    footer {
      background: var(--nv);
      color: #fff;
      padding: 60px 0 28px
    }

    .ft-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.3fr;
      gap: 36px;
      margin-bottom: 40px
    }

    .ft-dsc {
      font-size: .83rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.85;
      margin: 14px 0 20px
    }

    .ft-ttl {
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--gd);
      margin-bottom: 18px
    }

    .ft-ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .ft-ul a {
      color: rgba(255, 255, 255, .55);
      font-size: .83rem;
      transition: all .3s
    }

    .ft-ul a:hover {
      color: #fff;
      padding-left: 5px
    }

    .ft-cl {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px
    }

    .ft-cl li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: .78rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.5
    }

    .ft-cl li i {
      color: var(--or);
      width: 13px;
      margin-top: 1px;
      flex-shrink: 0
    }

    .ft-bot {
      border-top: 1px solid rgba(255, 255, 255, .09);
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .77rem;
      color: rgba(255, 255, 255, .35)
    }

    /* FLOAT SOCIAL */
    .float-social {
      position: fixed;
      bottom: 28px;
      right: 22px;
      z-index: 800;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px
    }

    .fsoc {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.15rem;
      text-decoration: none;
      position: relative;
      transition: transform .25s, box-shadow .25s;
      flex-shrink: 0
    }

    .fsoc::before {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: 50%;
      animation: socRing 2.4s ease-out infinite;
      opacity: 0;
      pointer-events: none
    }

    .fsoc:hover {
      transform: scale(1.18) translateX(-5px) !important;
      animation: none !important
    }

    .fsoc:hover::before {
      display: none
    }

    /* Tooltip label */
    .fsoc::after {
      content: attr(data-tip);
      position: absolute;
      right: calc(100% + 11px);
      background: rgba(20, 20, 20, .82);
      color: #fff;
      font-size: .71rem;
      font-weight: 700;
      white-space: nowrap;
      padding: 5px 10px;
      border-radius: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      font-family: 'Montserrat', sans-serif;
      letter-spacing: .2px
    }

    .fsoc:hover::after {
      opacity: 1
    }

    /* Colors & shadows */
    .fsoc.fb {
      background: #1877F2;
      box-shadow: 0 5px 18px rgba(24, 119, 242, .55);
      animation: socBob 3.5s ease-in-out infinite
    }

    .fsoc.fb::before {
      border: 2.5px solid rgba(24, 119, 242, .7)
    }

    .fsoc.ph {
      background: linear-gradient(135deg, var(--or), #FF5E14);
      box-shadow: 0 5px 18px rgba(232, 93, 4, .55);
      animation: socShake 3s ease-in-out 1.5s infinite
    }

    .fsoc.ph::before {
      border: 2.5px solid rgba(232, 93, 4, .7);
      animation-delay: .5s
    }

    .fsoc.za {
      background: #0068FF;
      box-shadow: 0 5px 18px rgba(0, 104, 255, .55);
      animation: socBob 3.5s ease-in-out .85s infinite
    }

    .fsoc.za::before {
      border: 2.5px solid rgba(0, 104, 255, .7);
      animation-delay: .85s
    }

    .fsoc.gm {
      background: #EA4335;
      box-shadow: 0 5px 18px rgba(234, 67, 53, .55);
      animation: socBob 3.5s ease-in-out 1.6s infinite
    }

    .fsoc.gm::before {
      border: 2.5px solid rgba(234, 67, 53, .7);
      animation-delay: 1.6s
    }

    .zalo-ltr {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: .88rem;
      letter-spacing: -.5px;
      line-height: 1
    }

    /* KEYFRAMES */
    @keyframes fdDown {
      from {
        opacity: 0;
        transform: translateY(-18px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fdLeft {
      from {
        opacity: 0;
        transform: translateX(-28px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes fdRight {
      from {
        opacity: 0;
        transform: translateX(28px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes bob {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-9px)
      }
    }

    @keyframes marq {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 8px 24px rgba(232, 93, 4, .5), 0 0 0 0 rgba(232, 93, 4, .4)
      }

      50% {
        box-shadow: 0 8px 24px rgba(232, 93, 4, .5), 0 0 0 14px rgba(232, 93, 4, 0)
      }
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @keyframes destRoll {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% center
      }

      100% {
        background-position: 200% center
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0) rotate(-1deg)
      }

      50% {
        transform: translateY(-14px) rotate(1deg)
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(.88)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes badgePulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 183, 3, .4)
      }

      60% {
        box-shadow: 0 0 0 10px rgba(255, 183, 3, 0)
      }
    }

    @keyframes waveMove {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    @keyframes socRing {
      0% {
        transform: scale(1);
        opacity: .75
      }

      100% {
        transform: scale(1.8);
        opacity: 0
      }
    }

    @keyframes socBob {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-6px)
      }
    }

    @keyframes socShake {

      0%,
      85%,
      100% {
        transform: rotate(0)
      }

      88% {
        transform: rotate(-15deg)
      }

      92% {
        transform: rotate(15deg)
      }

      96% {
        transform: rotate(-8deg)
      }
    }

    /* Destinations mosaic */
    #destinations {
      padding: 72px 0 80px;
      background: #fff
    }

    .dest-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 32px
    }

    .dest-filter {
      display: flex;
      gap: 8px
    }

    .df-btn {
      padding: 9px 24px;
      border-radius: 30px;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .28s;
      font-family: 'Montserrat', sans-serif;
      border: 2px solid #E5E7EB;
      background: #fff;
      color: var(--tl)
    }

    .df-btn.active {
      background: #1D4ED8;
      color: #fff;
      border-color: #1D4ED8;
      box-shadow: 0 4px 14px rgba(29, 78, 216, .22)
    }

    .df-btn:hover:not(.active) {
      border-color: var(--nv);
      color: var(--nv)
    }

    .dest-mosaic {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      grid-template-rows: 240px 240px;
      gap: 14px
    }

    .dm-card {
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      cursor: pointer
    }

    .dm-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .dm-card:hover img {
      transform: scale(1.07)
    }

    .dm-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .08) 55%, transparent 100%)
    }

    .dm-large {
      grid-row: 1/3
    }

    .dm-info {
      position: absolute;
      bottom: 18px;
      left: 18px;
      color: #fff;
      z-index: 2
    }

    .dm-name {
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: 4px;
      text-shadow: 0 1px 6px rgba(0, 0, 0, .4)
    }

    .dm-large .dm-name {
      font-size: 1.55rem
    }

    .dm-count {
      font-size: .75rem;
      color: rgba(255, 255, 255, .82)
    }

    .dm-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(0, 0, 0, .38);
      backdrop-filter: blur(6px);
      color: #fff;
      font-size: .66rem;
      font-weight: 700;
      padding: 4px 11px;
      border-radius: 20px;
      z-index: 2;
      border: 1px solid rgba(255, 255, 255, .25)
    }

    @media(max-width:900px) {
      .dest-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
      }

      .dm-large {
        grid-row: auto;
        height: 240px
      }

      .dm-card {
        height: 200px
      }
    }

    @media(max-width:480px) {
      .dest-mosaic {
        grid-template-columns: 1fr
      }

      .dm-card,
      .dm-large {
        height: 200px
      }
    }

    /* Wave section dividers */
    .wave-sep {
      display: block;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      height: 56px;
      margin-top: -1px
    }

    .wave-sep svg {
      display: block;
      width: 100%;
      height: 100%
    }

    /* Service card image layer */
    .srv-top {
      position: relative
    }

    /* Tour cards 3D hover */
    .tcard {
      transition: transform .35s, box-shadow .35s
    }

    .tcard:hover {
      transform: translateY(-8px) scale(1.015);
      box-shadow: 0 22px 52px rgba(0, 0, 0, .14)
    }

    /* Price number shimmer */
    .new-pr {
      background: linear-gradient(90deg, var(--or), #FF6B08, var(--or));
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 2.5s linear infinite
    }

    /* Hero badge glow pulse */
    .hero-badge {
      animation: fdDown .8s ease both, badgePulse 3s ease-in-out 1.2s infinite !important
    }

    /* Hero badge float animation */
    .hv-badge {
      animation: float 4.5s ease-in-out infinite
    }

    /* Stats counter pop */
    .stat-n,
    .st-n {
      transition: transform .3s
    }

    /* Section subtle bg pattern overlay */
    #tours {
      background: var(--gy) url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231B2A4A' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    }

    /* Combo card enhanced */
    .ccard:hover {
      transform: translateY(-8px) scale(1.015);
      box-shadow: 0 22px 52px rgba(0, 0, 0, .12);
      border-color: rgba(232, 93, 4, .25)
    }

    /* RESPONSIVE */
    @media(max-width:1100px) {
      .hero-grid {
        grid-template-columns: 1fr
      }

      .hero-vis {
        display: none
      }

      .hero-grid {
        padding: 120px 0 64px
      }

      .about-grid {
        grid-template-columns: 1fr
      }

      .about-vis {
        display: none
      }

      .srv-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .why-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .ft-grid {
        grid-template-columns: 1fr 1fr
      }

      .hero-search {
        max-width: 100%
      }
    }

    /* Hero search: wrap to 2-row at mid tablet */
    @media(max-width:900px) {
      .hero-search {
        flex-wrap: wrap;
        border-radius: 18px;
        padding: 10px 10px 6px;
        gap: 0
      }

      .hs-field {
        flex: 1 1 44%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 8px 12px;
        min-width: 0
      }

      .hs-field:nth-child(2) {
        border-bottom: none
      }

      .hs-btn {
        flex: 1 1 100%;
        justify-content: center;
        border-radius: 12px;
        margin-top: 4px;
        padding: 13px
      }
    }

    @media(max-width:768px) {
      .nav-ul {
        display: none
      }

      .hbg {
        display: flex
      }

      .container {
        padding: 0 18px
      }

      .hero-grid {
        padding: 100px 0 48px
      }

      .srv-grid {
        grid-template-columns: 1fr
      }

      .lang-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .ct-grid {
        grid-template-columns: 1fr
      }

      .f-row {
        grid-template-columns: 1fr
      }

      .ft-grid {
        grid-template-columns: 1fr
      }

      .ft-bot {
        flex-direction: column;
        gap: 8px;
        text-align: center
      }

      .float-social {
        bottom: 20px;
        right: 16px;
        gap: 9px
      }

      .fsoc {
        width: 46px;
        height: 46px;
        font-size: 1.05rem
      }

      .tour-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .combo-grid {
        grid-template-columns: 1fr
      }

      .glr-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto
      }

      .gi:nth-child(1),
      .gi:nth-child(8) {
        grid-column: auto;
        grid-row: auto
      }

      .gi {
        height: 180px
      }

      .dest-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .hl-grid {
        grid-template-columns: 1fr
      }

      .ft-grid {
        gap: 24px
      }

      /* Disable all card hover transforms on touch screens */
      .tcard,
      .ccard,
      .srv {
        transform: none !important;
        will-change: auto !important
      }

      .tcard:hover,
      .ccard:hover,
      .srv:hover {
        transform: none !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, .09) !important
      }
    }

    /* Small mobile (≤480px) */
    @media(max-width:480px) {
      .container {
        padding: 0 14px
      }

      /* Hero */
      .hero-grid {
        padding: 82px 0 36px;
        gap: 0
      }

      .hero-h1 {
        font-size: clamp(1.7rem, 7.5vw, 2.2rem);
        margin-bottom: 14px
      }

      .hero-badge {
        font-size: .63rem;
        padding: 6px 12px;
        margin-bottom: 16px
      }

      .hero-p {
        font-size: .86rem;
        margin-bottom: 18px;
        line-height: 1.75
      }

      .hero-btns {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start
      }

      .hero-btns .btn,
      .btn-ol-dk {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: .85rem
      }

      /* Hero search: full-stack */
      .hero-search {
        flex-direction: column;
        border-radius: 14px;
        padding: 10px;
        gap: 0;
        margin-top: 12px
      }

      .hs-field {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 9px 12px;
        width: 100%
      }

      .hs-field:nth-child(2) {
        border-bottom: 1px solid #eee
      }

      .hs-field:last-of-type {
        border-bottom: none
      }

      .hs-btn {
        width: 100%;
        justify-content: center;
        border-radius: 10px;
        margin-top: 6px;
        padding: 13px
      }

      .hero-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch
      }

      .hero-tags::-webkit-scrollbar {
        display: none
      }

      /* Sections */
      .sec {
        padding: 56px 0
      }

      .sec-title {
        font-size: clamp(1.55rem, 5vw, 1.9rem)
      }

      .sec-head {
        margin-bottom: 36px
      }

      /* Grids → single column */
      .tour-grid {
        grid-template-columns: 1fr !important
      }

      .dest-grid {
        grid-template-columns: 1fr
      }

      .glr-grid {
        grid-template-columns: 1fr
      }

      .combo-grid {
        grid-template-columns: 1fr !important
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr
      }

      /* Tour filter tabs */
      .filter-tabs {
        gap: 6px
      }

      .ftab {
        padding: 7px 13px;
        font-size: .74rem
      }

      /* Cards — reset any stuck transforms */
      .tcard,
      .ccard,
      .srv {
        transform: none !important;
        transition: box-shadow .3s !important
      }

      .tcard:hover,
      .ccard:hover,
      .srv:hover {
        transform: none !important
      }

      .tcard,
      .ccard {
        margin: 0;
        width: 100%
      }

      .tc-img {
        height: 200px
      }

      .cc-img {
        height: 180px
      }

      .gi {
        height: 200px
      }

      /* Price shimmer fallback: ensure text always visible */
      .new-pr,
      .cc-new {
        color: var(--or) !important
      }

      /* Footer */
      .ft-grid {
        grid-template-columns: 1fr;
        gap: 20px
      }

      .ft-bot {
        font-size: .72rem
      }

      /* Nav */
      #nav {
        padding: 14px 0
      }

      #nav.solid {
        padding: 10px 0
      }

      .logo-nm {
        font-size: 1rem
      }

      .logo-ico {
        width: 38px;
        height: 38px
      }

      /* Contact form */
      .f-row {
        grid-template-columns: 1fr
      }

      /* Floating social */
      .float-social {
        bottom: 14px;
        right: 12px;
        gap: 8px
      }

      .fsoc {
        width: 44px;
        height: 44px;
        font-size: 1rem
      }

      .fsoc::after {
        display: none
      }
    }

    /* ===== TOURS ===== */
    #tours {
      padding: 96px 0;
      background: #fff
    }

    .filter-tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 44px;
      flex-wrap: wrap
    }

    .ftab {
      padding: 9px 22px;
      border-radius: 30px;
      border: 1.5px solid #e5e7eb;
      background: #fff;
      color: var(--tl);
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .3s;
      font-family: 'Montserrat', sans-serif
    }

    .ftab.active,
    .ftab:hover {
      background: var(--or);
      color: #fff;
      border-color: var(--or);
      box-shadow: 0 4px 14px rgba(232, 93, 4, .25)
    }

    .tour-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .tcard {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 3px 16px rgba(0, 0, 0, .07);
      transition: all .4s;
      cursor: default
    }

    .tcard:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .13)
    }

    .tcard[data-cat] {
      transition: opacity .3s, transform .3s
    }

    .tcard.hidden {
      display: none
    }

    .tc-img {
      height: 210px;
      position: relative;
      overflow: hidden
    }

    .tc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s
    }

    .tcard:hover .tc-img img {
      transform: scale(1.08)
    }

    .tc-badges {
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      gap: 6px;
      z-index: 2
    }

    .tbadge {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: .67rem;
      font-weight: 800;
      letter-spacing: .5px
    }

    .tbadge.hot {
      background: #EF4444;
      color: #fff
    }

    .tbadge.sale {
      background: var(--or);
      color: #fff
    }

    .tbadge.dur {
      background: rgba(0, 0, 0, .55);
      color: #fff;
      backdrop-filter: blur(4px)
    }

    .tbadge.newt {
      background: #10B981;
      color: #fff
    }

    .tc-fav {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, .9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--or);
      font-size: .85rem;
      z-index: 2;
      cursor: pointer;
      transition: all .3s;
      border: none;
      font-family: inherit
    }

    .tc-fav:hover {
      background: var(--or);
      color: #fff
    }

    .tc-dest-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
      padding: 18px 14px 10px
    }

    .tc-dest {
      font-size: .7rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .9);
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    .tc-body {
      padding: 16px 18px 18px
    }

    .tc-name {
      font-size: .95rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 10px;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 2.9rem
    }

    .tc-meta {
      display: flex;
      gap: 14px;
      margin-bottom: 9px;
      flex-wrap: wrap
    }

    .tc-meta span {
      font-size: .73rem;
      color: var(--tl);
      display: flex;
      align-items: center;
      gap: 4px
    }

    .tc-meta i {
      color: var(--or);
      font-size: .68rem
    }

    .tc-rating {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 12px
    }

    .stars {
      color: var(--gd);
      font-size: .73rem
    }

    .r-num {
      font-size: .78rem;
      font-weight: 700;
      color: var(--nv)
    }

    .r-cnt {
      font-size: .7rem;
      color: var(--tl)
    }

    .tc-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid #f0f2f5
    }

    .tc-price {
      display: flex;
      flex-direction: column;
      gap: 1px
    }

    .old-pr {
      font-size: .73rem;
      color: var(--tl);
      text-decoration: line-through
    }

    .new-pr {
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--or);
      line-height: 1.1
    }

    .per-pr {
      font-size: .67rem;
      color: var(--tl)
    }

    .btn-book {
      padding: 9px 18px;
      background: var(--or);
      color: #fff;
      border: none;
      border-radius: 30px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      transition: all .3s;
      white-space: nowrap;
      flex-shrink: 0
    }

    .btn-book:hover {
      background: var(--or2);
      transform: scale(1.04)
    }

    .view-all-wrap {
      text-align: center;
      margin-top: 44px
    }

    /* ===== COMBOS ===== */
    #combos {
      padding: 80px 0;
      background: var(--cr);
      position: relative;
      overflow: hidden
    }

    #combos::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 95% 0%, rgba(232, 93, 4, .07), transparent 45%), radial-gradient(ellipse at 5% 100%, rgba(255, 183, 3, .07), transparent 45%);
      pointer-events: none
    }

    .combo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
      z-index: 2
    }

    .ccard {
      background: #fff;
      border: 1.5px solid #EEF0F5;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
      transition: all .4s
    }

    .ccard:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 52px rgba(0, 0, 0, .11);
      border-color: rgba(232, 93, 4, .2)
    }

    .cc-img {
      height: 190px;
      overflow: hidden;
      position: relative
    }

    .cc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s
    }

    .ccard:hover .cc-img img {
      transform: scale(1.07)
    }

    .cc-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      background: var(--gd);
      color: var(--nv);
      font-size: .67rem;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 20px;
      letter-spacing: .5px;
      z-index: 2
    }

    .cc-save {
      position: absolute;
      top: 12px;
      right: 12px;
      background: #EF4444;
      color: #fff;
      font-size: .67rem;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 20px;
      z-index: 2
    }

    .cc-body {
      padding: 18px
    }

    .cc-dest {
      font-size: .7rem;
      font-weight: 700;
      color: var(--or);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 5px
    }

    .cc-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--nv);
      margin-bottom: 13px;
      line-height: 1.4
    }

    .cc-inc {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px
    }

    .cc-inc li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .77rem;
      color: var(--tl);
      list-style: none
    }

    .cc-inc li i {
      color: var(--or);
      width: 13px;
      font-size: .72rem;
      flex-shrink: 0
    }

    .cc-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid #F0F2F5
    }

    .cc-pr-wrap {
      display: flex;
      flex-direction: column;
      gap: 1px
    }

    .cc-old {
      font-size: .78rem;
      color: var(--tl);
      text-decoration: line-through
    }

    .cc-new {
      font-size: 1.25rem;
      font-weight: 900;
      color: var(--or)
    }

    .cc-per {
      font-size: .67rem;
      color: var(--tl)
    }

    .btn-combo {
      padding: 10px 20px;
      background: var(--or);
      color: #fff;
      border: none;
      border-radius: 30px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      transition: all .3s;
      white-space: nowrap;
      flex-shrink: 0
    }

    .btn-combo:hover {
      background: var(--or2);
      box-shadow: 0 6px 18px rgba(232, 93, 4, .3)
    }

    /* ===== GALLERY ===== */
    #gallery {
      padding: 80px 0;
      background: var(--cr)
    }

    .glr-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 200px);
      gap: 12px
    }

    .gi {
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      cursor: pointer
    }

    .gi img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s
    }

    .gi:hover img {
      transform: scale(1.09)
    }

    .gi-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .35s
    }

    .gi:hover .gi-ov {
      opacity: 1
    }

    .gi-lbl {
      position: absolute;
      bottom: 13px;
      left: 14px;
      color: #fff;
      font-size: .8rem;
      font-weight: 700;
      transform: translateY(6px);
      opacity: 0;
      transition: all .35s;
      z-index: 2
    }

    .gi:hover .gi-lbl {
      opacity: 1;
      transform: translateY(0)
    }

    .gi-zoom {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, .92);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--nv);
      font-size: .7rem;
      opacity: 0;
      transition: all .35s;
      z-index: 2
    }

    .gi:hover .gi-zoom {
      opacity: 1
    }

    .gi:nth-child(1) {
      grid-column: 1/3;
      grid-row: 1/3
    }

    .gi:nth-child(8) {
      grid-column: 3/5;
      grid-row: 3/5
    }

    /* LIGHTBOX */
    .lb {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .92);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all .3s;
      padding: 20px
    }

    .lb.on {
      opacity: 1;
      visibility: visible
    }

    .lb-img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 12px;
      object-fit: contain;
      transform: scale(.92);
      transition: transform .35s
    }

    .lb.on .lb-img {
      transform: scale(1)
    }

    .lb-close {
      position: absolute;
      top: 20px;
      right: 24px;
      background: rgba(255, 255, 255, .15);
      border: none;
      color: #fff;
      font-size: 1.4rem;
      cursor: pointer;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .3s;
      font-family: inherit;
      z-index: 2
    }

    .lb-close:hover {
      background: rgba(255, 255, 255, .28)
    }

    .lb-prev,
    .lb-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, .55);
      border: 1.5px solid rgba(255, 255, 255, .45);
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .3s;
      z-index: 2;
      font-family: inherit
    }

    .lb-prev {
      left: 14px
    }

    .lb-next {
      right: 14px
    }

    .lb-prev:hover,
    .lb-next:hover {
      background: var(--or);
      border-color: var(--or)
    }

    .lb-cap {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255, 255, 255, .8);
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: 1px;
      white-space: nowrap
    }

    .lb-counter {
      position: absolute;
      bottom: 22px;
      right: 24px;
      color: rgba(255, 255, 255, .55);
      font-size: .78rem;
      font-weight: 600
    }

    /* DEST HIGHLIGHTS */
    #destinations {
      padding: 80px 0;
      background: #fff
    }

    .dest-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .dest-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      height: 240px;
      cursor: pointer
    }

    .dest-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .dest-card:hover img {
      transform: scale(1.1)
    }

    .dest-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, transparent 55%)
    }

    .dest-info {
      position: absolute;
      bottom: 16px;
      left: 16px;
      color: #fff;
      z-index: 2
    }

    .dest-name {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 3px
    }

    .dest-cnt {
      font-size: .72rem;
      color: rgba(255, 255, 255, .75)
    }

    .dest-card:hover .dest-name {
      color: var(--gd)
    }
  </style>