@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:wght@500;600;700&display=swap');

/* ─── RESET ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── DESIGN TOKENS ───────────────────────────────── */
:root {
  --brand:          #1a6b52;
  --brand-dk:       #0f4a38;
  --brand-lt:       #e6f4f0;
  --gold:           #c8922a;
  --gold-lt:        #fdf3e3;
  --white:          #ffffff;
  --dark:           #0d1b14;
  --surface-0:      #f7fbf9;
  --surface-1:      #eff7f4;
  --surface-2:      #ffffff;
  --text-primary:   #0d1b14;
  --text-secondary: #47665a;
  --text-muted:     #7a9a8a;
  --border:         rgba(26, 107, 82, 0.12);
  --radius:         8px;
  --font-sans:      'DM Sans', sans-serif;
  --font-heading:   'Fraunces', serif;
}

/* ─── PAGE ROOT ───────────────────────────────────── */
a, button, [role="button"], .hero-card, .act-card, .dest-card, .tour-card, .itin-day, .see-all, .nav-hamburger, .mob-close, .mob-tours-trigger {
  cursor: pointer;
}

body {
  font-family: var(--font-sans);
  background: var(--surface-0);
  color: var(--text-primary);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ── Skip link ─────────────────────────────────── */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: var(--brand);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    transition: top .2s;

    &:focus { top: 0; }
  }

  /* ── Fluid container ───────────────────────────── */
  .fluid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ── Shared section utilities ──────────────────── */
  .section {
    padding: 88px 0;
    position: relative;
  }

  .section-alt  { background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); }
  .section-dark { background: linear-gradient(180deg, #0d2a1e, #0a1f16); color: #fff; }

  .sec-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand);
    font-weight: 700;
    margin-bottom: 10px;

    &.sec-label-white { color: #4ecb9e; }
  }

  .sec-h {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -.5px;
    font-family: var(--font-heading);
    background: linear-gradient(135deg, #0d1b14, #1a6b52);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Responsive headings used across pages */
  h1 { font-size: clamp(26px, 3.5vw, 40px); line-height: 1.05; }
  h2 { font-size: clamp(18px, 2.2vw, 28px); }
  h3 { font-size: clamp(16px, 1.7vw, 20px); }
  .article-intro { font-size: 1.05rem; }
  .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

  /* Small helpers added for blog pages */
  .large-icon { font-size: 40px; display: block; margin-bottom: 12px; }
  .blog-author { font-size: 0.95rem; color: var(--text-muted); margin-top: 12px; }
  .footer-brand-name { font-size: 16px; }
  .nav-link-current { color: rgba(255,255,255,.9) !important; }
  .centered-container { max-width:1400px; margin:0 auto; padding:0 32px 48px; text-align:center; }
  .mob-tours-link-disabled { pointer-events: none; }

  /* Best-time season badges */
  .bt-season { width:48px; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; }
  .bt-season.sun { background: rgba(255,183,77,.15); }
  .bt-season.hot { background: rgba(255,100,70,.12); }
  .bt-season.rain { background: rgba(100,180,255,.15); }
  .bt-season.trans { background: rgba(78,203,158,.12); }

  .nl-note-white { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 14px; }

  .footer-muted-link { color: rgba(255,255,255,.4); text-decoration: none; }
  .footer-bottom-link { color: rgba(255,255,255,.3); }

  /* Destination specific tweaks */
  #dest-kratie .dest-card-img { background-position: center 60%; }

  /* Generic rule used across pages instead of inline hr styles */
  .rule { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
  .h2-spaced { margin-bottom: 20px; }

  /* Itinerary day image helper */
  .itin-day-img { background-size: cover; background-position: center; min-height: 220px; border-radius: 12px; }

  /* Booking box helpers */
  .booking-heading { font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--brand-lt); display:flex; align-items:center; gap:8px; }
  .booking-heading i { color: var(--brand); font-size: 16px; }
  .map-locations { margin-bottom: 24px; }
  .rule-sm { margin-bottom: 24px; }
  .booking-info-row .bir-val.available { color: var(--brand); }

  /* Related tour image helper */
  .related-tour-img { background-size: cover; background-position: center; min-height: 140px; border-radius: 10px; }

  /* Guide widget helpers */
  .guide-meta { display:flex; gap:14px; align-items:flex-start; }
  .guide-avatar { width:52px; height:52px; border-radius:50%; background: linear-gradient(135deg,var(--brand),#4ecb9e); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#fff; flex-shrink:0; font-family: var(--font-heading); }
  .guide-name { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:2px; }
  .guide-role { font-size:11px; color:var(--brand); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
  .guide-desc { font-size:13px; color:var(--text-secondary); line-height:1.65; margin:0; }

  /* Trust / feature list helpers */
  .trust-list { display:flex; flex-direction:column; gap:12px; }
  .trust-item { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-secondary); }
  .trust-icon { color:var(--brand); font-size:16px; flex-shrink:0; margin-top:1px; }

  .nl-label { margin-bottom:8px; }

  /* Star icon color used site-wide for ratings */
  .star-gold { color: #f5c518; }

  /* Footer helpers */
  .footer-brand-name { font-size: 16px; font-weight:500; color:#fff; }
  .footer-brand-accent { color: #4ecb9e; }
  .footer-address { font-style: normal; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.7; }
  .footer-address a { color: rgba(255,255,255,.4); text-decoration: none; }
  .footer-socials { margin-top: 16px; }
  .footer-bottom-note { color: rgba(255,255,255,.25); }

  .sec-sub {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.7;

    &.sec-sub-white { color: rgba(255, 255, 255, .6); }
  }

  .sec-head { margin-bottom: 48px; }

  .sec-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 24px;
  }

  .see-all {
    font-size: 14px;
    color: var(--brand);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all .2s;
    white-space: nowrap;

    &:hover { gap: 10px; color: var(--brand-dk); }
    &.see-all-white { color: #4ecb9e; }
  }

  .tag {
    font-size: 11px;
    color: var(--brand);
    background: var(--brand-lt);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
  }

  /* ─────────────────────────────────────────────────
     HEADER
  ───────────────────────────────────────────────── */
  #site-header {
    .site-nav {
      background: transparent;
      padding: 0 60px;
      display: flex;
      align-items: center;
      height: 72px;
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      backdrop-filter: none;
      transition: all .3s ease;
      width: 100%;

      &.scrolled {
        position: fixed;
        background: rgba(13, 27, 20, .4);
        backdrop-filter: blur(20px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .1);

        .nav-logo {
          .logo-img { display: none; }
          .logo-text {
            display: inline;
            &:hover { letter-spacing: 2.4px; text-shadow: 0 0 30px rgba(78, 203, 158, .2); }
            & span { &:hover { filter: drop-shadow(0 6px 18px rgba(78, 203, 158, .4)); } }
          }
        }
      }

      .nav-logo {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1.8px;
        font-family: var(--font-heading);
        font-style: italic;
        transition: all .3s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        text-decoration: none;

        .logo-img {
          height: 90px;
          width: auto;
          max-width: 200px;
          object-fit: contain;
          display: block;
          transition: opacity .3s;
          padding-top: 12px;
        }

        .logo-text {
          display: none;
          text-shadow: 0 0 20px rgba(78, 203, 158, .1);
          background: linear-gradient(135deg, #4ecb9e, rgba(255, 255, 255, .85));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;

          & span {
            background: linear-gradient(135deg, #4ecb9e, #1a6b52);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 2px 10px rgba(78, 203, 158, .2));
            letter-spacing: .5px;
            transition: all .3s ease;
          }
        }

        &:hover { transform: scale(1.02); }
      }

      .nav-links {
        display: flex;
        gap: 28px;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        & a {
          font-size: 15px;
          color: rgba(255, 255, 255, .5);
          text-decoration: none;
          cursor: pointer;
          transition: color .15s;
          font-weight: 500;

          &:hover { color: rgba(255, 255, 255, .9); }
        }
      }

      .nav-btns {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .btn-ghost {
        padding: 9px 18px;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
        font-weight: 500;
        transition: all .2s;
        backdrop-filter: blur(10px);

        &:hover {
          background: rgba(255, 255, 255, .12);
          border-color: rgba(255, 255, 255, .3);
        }
      }

      .btn-primary {
        padding: 10px 22px;
        background: linear-gradient(135deg, #1a6b52, #0f4a38);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all .3s;
        box-shadow: 0 8px 20px rgba(26, 107, 82, .25);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 28px rgba(26, 107, 82, .35);
        }
      }

      /* Hamburger button — hidden on desktop */
      .nav-hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 9px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 10px;
        cursor: pointer;
        margin-left: auto;
        z-index: 1002;
        transition: background .2s;

        &:hover { background: rgba(255,255,255,.14); }

        .ham-bar {
          display: block;
          width: 100%;
          height: 2px;
          background: rgba(255,255,255,.85);
          border-radius: 2px;
          transition: transform .3s ease, opacity .3s ease;
          transform-origin: center;
        }

        &.open {
          .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
          .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
          .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
        }
      }
    }

    /* Mobile menu panel */
    .mobile-menu {
      position: fixed;
      top: 0; left: 0; right: 0;
      background: rgba(6, 15, 10, .97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      z-index: 1001;
      padding: 96px 32px 48px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transform: translateY(-105%);
      transition: transform .38s cubic-bezier(.4, 0, .2, 1);
      border-bottom: 1px solid rgba(255,255,255,.08);

      &.open { transform: translateY(0); }

      .mob-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.15);
        color: rgba(255,255,255,.8);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s, color .2s;

        &:hover { background: rgba(255,255,255,.14); color: #fff; }
      }

      & a {
        font-size: 18px;
        color: rgba(255,255,255,.7);
        text-decoration: none;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        font-weight: 500;
        font-family: var(--font-heading);
        letter-spacing: .3px;
        transition: color .2s, padding-left .2s;

        &:hover { color: #4ecb9e; padding-left: 6px; }
        &:last-of-type { border-bottom: none; }
      }

      .mob-book-btn {
        margin-top: 20px;
        padding: 15px 24px !important;
        border-bottom: none !important;
        background: linear-gradient(135deg, #1a6b52, #0f4a38);
        color: #fff !important;
        border-radius: 12px;
        text-align: center;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: .5px;
        transition: opacity .2s !important;

        &:hover { opacity: .88; padding-left: 24px !important; }
      }
    }

    /* Overlay behind mobile menu */
    .mobile-menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity .38s ease;

      &.open { opacity: 1; pointer-events: auto; }
    }
  }

  /* ─────────────────────────────────────────────────
     NAV DROPDOWN  (shared across all pages)
  ───────────────────────────────────────────────── */
  .nav-item {
    position: relative;
  }

  .nav-item > a {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-item .nav-caret {
    font-size: 12px;
    transition: transform .2s;
    color: inherit;
  }

  .nav-item:hover .nav-caret,
  .nav-item:focus-within .nav-caret {
    transform: rotate(180deg);
  }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding-top: 12px;
    min-width: 220px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 2000;
  }

  .nav-dropdown-inner {
    background: rgba(13, 27, 20, .96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 8px;
  }

  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 14px !important;
    color: rgba(255,255,255,.7) !important;
    text-decoration: none;
    transition: background .15s, color .15s !important;
    white-space: nowrap;
    border-bottom: none !important;
  }

  .nav-dropdown a:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.95) !important;
    padding-left: 14px !important;
  }

  .nav-dropdown a i {
    font-size: 16px;
    color: var(--brand);
    flex-shrink: 0;
  }

  .nav-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 6px 0;
  }

  /* Mobile dropdown sub-links */
  .mob-tours-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    font-size: 18px;
    font-family: var(--font-heading);
    font-weight: 500;
    transition: color .2s;

    & a {
      border-bottom: none !important;
      padding: 0 !important;
      color: inherit !important;
      pointer-events: none;
      font-size: inherit !important;
    }

    &:hover { color: #4ecb9e; }

    .mob-caret {
      font-size: 13px;
      transition: transform .2s;
    }

    &.open .mob-caret { transform: rotate(180deg); }
  }

  .mob-dropdown-group {
    display: none;
    flex-direction: column;
    padding-left: 16px;
    border-left: 2px solid var(--brand-lt);
    margin: 0 0 8px;

    &.open { display: flex; }

    & a {
      font-size: 14px !important;
      color: rgba(255,255,255,.65) !important;
      padding: 7px 0 !important;
      border-bottom: none !important;
      display: flex;
      align-items: center;
      gap: 8px;

      & i { font-size: 14px; color: var(--brand); }
      &:hover { color: #4ecb9e !important; padding-left: 4px !important; }
    }
  }

  /* ─────────────────────────────────────────────────
     HERO
  ───────────────────────────────────────────────── */
  #section-hero {
    width: 100%;
    min-height: 100vh;
    background: #0d2a1e var(--hero-hero-bg, url('../img/banner/angkor-wat.jpg')) center / cover fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 32px;
    position: relative;
    overflow: hidden;
    transition: background 0.9s ease-in-out;

    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgba(13, 42, 30, .9) 0%, rgba(13, 42, 30, .45) 100%),
        repeating-linear-gradient(0deg,  rgba(26, 107, 82, .04) 0px, rgba(26, 107, 82, .04) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(90deg, rgba(26, 107, 82, .04) 0px, rgba(26, 107, 82, .04) 1px, transparent 1px, transparent 60px);
    }

    .hero-glow-a {
      position: absolute;
      top: -100px; left: -100px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: rgba(26, 107, 82, .18);
    }

    .hero-glow-b {
      position: absolute;
      bottom: -80px; right: -80px;
      width: 380px; height: 380px;
      border-radius: 50%;
      background: rgba(200, 146, 42, .1);
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(78, 203, 158, .15);
      border: 1px solid rgba(78, 203, 158, .25);
      color: #4ecb9e;
      font-size: 13px;
      padding: 8px 18px;
      border-radius: 24px;
      margin-bottom: 28px;
      font-weight: 600;
      backdrop-filter: blur(10px);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1024px;
      width: 100%;

      & h1 {
        font-size: 58px;
        font-weight: 700;
        color: #fff;
        line-height: 1.08;
        margin-bottom: 20px;
        letter-spacing: -1px;
        font-family: var(--font-heading);
        background: linear-gradient(135deg, #fff, #4ecb9e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;

        & em {
          color: #4ecb9e;
          font-style: normal;
          -webkit-text-fill-color: #4ecb9e;
        }
      }

      & p {
        font-size: 18px;
        color: rgba(255, 255, 255, .7);
        max-width: 580px;
        margin: 0 auto 40px;
        line-height: 1.7;
        font-weight: 300;
      }
    }

    .hero-search-bar {
      display: flex;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 16px;
      overflow: hidden;
      max-width: 660px;
      margin: 0 auto 20px;
      backdrop-filter: blur(20px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .2);

      .hsb-group {
        flex: 1;
        padding: 14px 20px;
        border-right: .5px solid rgba(255, 255, 255, .1);

        & label {
          display: block;
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: .08em;
          color: rgba(255, 255, 255, .45);
          margin-bottom: 3px;
        }

        & input,
        & select {
          background: none;
          border: none;
          color: #fff;
          font-size: 14px;
          width: 100%;
          outline: none;
        }

        & select option { background: #0d2a1e; color: #fff; }
      }

      & button {
        padding: 0 32px;
        background: linear-gradient(135deg, #1a6b52, #0f4a38);
        color: #fff;
        border: none;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all .3s;
        box-shadow: 0 4px 12px rgba(26, 107, 82, .2);

        &:hover {
          transform: scale(1.02);
          box-shadow: 0 6px 16px rgba(26, 107, 82, .3);
        }
      }
    }

    .hero-tags {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 40px;

      .hero-tag {
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(78, 203, 158, .2);
        color: rgba(255, 255, 255, .75);
        font-size: 13px;
        padding: 7px 16px;
        border-radius: 24px;
        cursor: pointer;
        font-weight: 500;
        transition: all .2s;

        &:hover {
          background: rgba(78, 203, 158, .15);
          border-color: rgba(78, 203, 158, .4);
          color: #4ecb9e;
        }

        &.active {
          background: linear-gradient(135deg, #1a6b52, #0f4a38);
          border-color: #4ecb9e;
          color: #fff;
          box-shadow: 0 4px 12px rgba(26, 107, 82, .35);
        }
      }
    }

    .hero-stats-row {
      display: flex;
      gap: 0;
      border-top: .5px solid rgba(255, 255, 255, .1);
      padding-top: 32px;
      margin-top: 8px;
      width: 100%;
      justify-content: center;

      .hs {
        padding: 0 36px;
        text-align: center;
        border-right: .5px solid rgba(255, 255, 255, .1);

        &:last-child { border-right: none; }

        & strong {
          display: block;
          font-size: 32px;
          font-weight: 700;
          color: #fff;
          line-height: 1;
          font-family: var(--font-heading);

          .hero-star-icon {
            color: #f5c518;
            font-size: 14px;
            vertical-align: middle;
            margin-left: 4px;
          }
        }

        & span {
          font-size: 12px;
          color: rgba(255, 255, 255, .5);
          margin-top: 4px;
          display: block;
        }
      }
    }

    .hero-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
      margin-top: 36px;
      align-items: stretch;
    }

    .hero-card {
      position: relative;
      min-height: 260px;
      border-radius: 28px;
      overflow: hidden;
      background: #0d2a1e;
      background-image: var(--hero-card-bg, none);
      background-size: cover;
      background-position: center;
      box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
      transition: transform .18s ease, box-shadow .18s ease;
      display: flex;
      align-items: flex-end;
      cursor: pointer;
      will-change: transform;
      text-decoration: none;
    }

    .hero-card:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 34px 70px rgba(0, 0, 0, .25);
    }

    .hero-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-image: var(--hero-card-bg, none);
      z-index: 1;
      opacity: .92;
      filter: saturate(1.1) contrast(1.05);
    }

    .hero-card .hero-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13, 42, 30, .1) 0%, rgba(13, 42, 30, .72) 100%);
      z-index: 2;
    }

    .hero-card .hero-card-body {
      position: relative;
      z-index: 3;
      padding: 24px;
      color: #fff;
      display: grid;
      gap: 10px;
    }

    .hero-card .hero-card-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: rgba(255, 255, 255, .8);
      font-weight: 700;
    }

    .hero-card h3 {
      margin: 0;
      font-size: 22px;
      line-height: 1.1;
      letter-spacing: -.02em;
    }

    .hero-card p {
      margin: 0;
      color: rgba(255, 255, 255, .8);
      font-size: 14px;
      line-height: 1.7;
    }

    .hero-card .hero-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #fff;
      font-weight: 700;
      text-decoration: none;
      margin-top: auto;
      transition: color .2s ease;
    }

    .hero-card .hero-card-link:hover {
      color: #4ecb9e;
    }

    .hero-card.active {
      transform: translateY(-8px) scale(1.035);
      box-shadow: 0 46px 92px rgba(0, 0, 0, .32);
    }

    .hero-card.active .hero-card-overlay {
      background: linear-gradient(180deg, rgba(13, 42, 30, .08) 0%, rgba(13, 42, 30, .65) 100%);
    }

    .hero-card.active .hero-card-body {
      padding: 28px;
    }

    .hero-card.active::before {
      opacity: 1;
      transform: scale(1.02);
      transition: transform .22s ease, opacity .22s ease;
    }

    .hero-card[data-bg] {
      --hero-card-bg: none;
    }
  }

  .hero-card.active {
    transform: translateY(-8px) scale(1.035);
    box-shadow: 0 46px 92px rgba(0, 0, 0, .32);
  }

  .hero-card.active .hero-card-overlay {
    background: linear-gradient(180deg, rgba(13, 42, 30, .08) 0%, rgba(13, 42, 30, .65) 100%);
  }

  .hero-card.active .hero-card-body {
    padding: 28px;
  }

  /* ─────────────────────────────────────────────────
     HERO SECTION (VALID CSS)
  ───────────────────────────────────────────────── */
  #section-hero {
    width: 100%;
    min-height: 100vh;
    background: #0d2a1e var(--hero-hero-bg, url('../img/banner/angkor-wat.jpg')) center / cover fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 32px;
    position: relative;
    overflow: hidden;
    transition: background 0.9s ease-in-out;
  }

  #section-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(13, 42, 30, .9) 0%, rgba(13, 42, 30, .45) 50%),
      repeating-linear-gradient(0deg, rgba(26, 107, 82, .04) 0px, rgba(26, 107, 82, .04) 1px, transparent 1px, transparent 60px),
      repeating-linear-gradient(90deg, rgba(26, 107, 82, .04) 0px, rgba(26, 107, 82, .04) 1px, transparent 1px, transparent 60px);
  }

  #section-hero .hero-glow-a {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(26, 107, 82, .18);
  }

  #section-hero .hero-glow-b {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(200, 146, 42, .1);
  }

  #section-hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(78, 203, 158, .15);
    border: 1px solid rgba(78, 203, 158, .25);
    color: #4ecb9e;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 24px;
    margin-bottom: 28px;
    font-weight: 600;
    backdrop-filter: blur(10px);
  }

  #section-hero .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1024px;
    width: 100%;
  }

  #section-hero .hero-inner h1 {
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.8px;
    font-family: var(--font-heading);
    background: linear-gradient(135deg, #fff, #4ecb9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: normal;
  }

  #section-hero .hero-inner h1 em {
    color: #4ecb9e;
    font-style: normal;
    -webkit-text-fill-color: #4ecb9e;
  }

  #section-hero .hero-inner h1 em#hero-active-title-word {
    position: relative;
  }

  #section-hero .hero-inner p {
    font-size: 18px;
    color: rgba(255, 255, 255, .7);
    max-width: 100%;
    margin: 0 auto 40px;
    line-height: 1.7;
    font-weight: 300;
  }

  #section-hero .hero-search-bar {
    display: flex;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    overflow: hidden;
    max-width: 660px;
    margin: 0 auto 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  }

  #section-hero .hero-search-bar .hsb-group {
    position: relative;
    flex: 1;
    padding: 14px 20px;
    border-right: .5px solid rgba(255, 255, 255, .1);
    transition: background .2s;
  }

  #section-hero .hero-search-bar .hsb-group.hsb-group-error {
    background: rgba(211, 71, 71, .12);
    box-shadow: inset 0 0 0 1px rgba(211, 71, 71, .5);
  }

  #section-hero .hero-search-bar .hsb-group.hsb-group-error input::placeholder {
    color: rgba(255, 173, 173, .8);
  }

  .hsb-suggestions {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(280px, 90vw);
    background: #0d2a1e;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .35);
    z-index: 40;
    color: #fff;
  }

  .hsb-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
  }

  .hsb-suggestion-item i {
    color: #4ecb9e;
    font-size: 15px;
  }

  .hsb-suggestion-item:hover,
  .hsb-suggestion-item.is-highlighted {
    background: rgba(78, 203, 158, .18);
    color: #fff;
  }

  .hsb-suggestion-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
  }

  .hsb-datepicker {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(280px, 90vw);
    background: #0d2a1e;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .35);
    z-index: 40;
    color: #fff;
  }

  .hsb-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .hsb-dp-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
  }

  .hsb-dp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background .2s;
  }

  .hsb-dp-nav:hover {
    background: rgba(255, 255, 255, .14);
  }

  .hsb-dp-weekdays,
  .hsb-dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
  }

  .hsb-dp-weekdays span {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    padding-bottom: 4px;
  }

  .hsb-dp-day {
    padding: 7px 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
  }

  .hsb-dp-day:hover {
    background: rgba(78, 203, 158, .18);
  }

  .hsb-dp-day.is-muted {
    color: rgba(255, 255, 255, .25);
  }

  .hsb-dp-day.is-disabled {
    color: rgba(255, 255, 255, .15);
    cursor: not-allowed;
  }

  .hsb-dp-day.is-disabled:hover {
    background: none;
  }

  .hsb-dp-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(78, 203, 158, .6);
  }

  .hsb-dp-day.is-selected {
    background: linear-gradient(135deg, #1a6b52, #0f4a38);
    color: #fff;
  }

  #section-hero .hero-search-bar .hsb-group label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 3px;
  }

  #section-hero .hero-search-bar .hsb-group input,
  #section-hero .hero-search-bar .hsb-group select {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    width: 100%;
    outline: none;
  }

  #section-hero .hero-search-bar .hsb-group select option {
    background: #0d2a1e;
    color: #fff;
  }

  #section-hero .hero-search-bar button {
    padding: 0 32px;
    background: linear-gradient(135deg, #1a6b52, #0f4a38);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s;
    box-shadow: 0 4px 12px rgba(26, 107, 82, .2);
  }

  #section-hero .hero-search-bar button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(26, 107, 82, .3);
  }

  #section-hero .hero-tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }

  #section-hero .hero-tags .hero-tag {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(78, 203, 158, .2);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 24px;
    cursor: pointer;
    font-weight: 500;
    transition: all .2s;
  }

  #section-hero .hero-tags .hero-tag:hover {
    background: rgba(78, 203, 158, .15);
    border-color: rgba(78, 203, 158, .4);
    color: #4ecb9e;
  }

  #section-hero .hero-tags .hero-tag.active {
    background: linear-gradient(135deg, #1a6b52, #0f4a38);
    border-color: #4ecb9e;
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 107, 82, .35);
  }

  #section-hero .hero-stats-row {
    display: flex;
    gap: 0;
    border-top: .5px solid rgba(255, 255, 255, .1);
    padding-top: 32px;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }

  #section-hero .hero-stats-row .hs {
    padding: 0 36px;
    text-align: center;
    border-right: .5px solid rgba(255, 255, 255, .1);
  }

  #section-hero .hero-stats-row .hs:last-child {
    border-right: none;
  }

  #section-hero .hero-stats-row .hs strong {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-family: var(--font-heading);
  }

  #section-hero .hero-stats-row .hs strong .hero-star-icon {
    color: #f5c518;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
  }

  #section-hero .hero-stats-row .hs span {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    margin-top: 4px;
    display: block;
  }

  #section-hero .hero-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 28px;
    align-items: stretch;
  }

  #section-hero .hero-card {
    position: relative;
    min-height: 130px;
    border-radius: 18px;
    overflow: hidden;
    background: #0d2a1e;
    background-image: var(--hero-card-bg, none);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    will-change: transform;
    text-decoration: none;
  }

  #section-hero .hero-card:hover {
    transform: translateY(-2px) scale(1.002);
    box-shadow: 0 18px 28px rgba(0, 0, 0, .16);
  }

  #section-hero .hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--hero-card-bg, none);
    z-index: 1;
    opacity: .92;
    filter: saturate(1.1) contrast(1.05);
  }

  #section-hero .hero-card .hero-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 42, 30, .14) 0%, rgba(13, 42, 30, .78) 100%);
    z-index: 2;
  }

  #section-hero .hero-card .hero-card-body {
    position: relative;
    z-index: 3;
    padding: 12px;
    color: #fff;
    display: grid;
    gap: 6px;
  }

  #section-hero .hero-card .hero-card-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .85);
    font-weight: 700;
  }

  #section-hero .hero-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  #section-hero .hero-card p {
    display: none;
  }

  #section-hero .hero-card .hero-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    margin-top: 0;
    transition: color .2s ease;
  }

  #section-hero .hero-card .hero-card-link:hover {
    color: #4ecb9e;
  }

  #section-hero .hero-card.active {
    transform: translateY(-8px) scale(1.035);
    box-shadow: 0 46px 92px rgba(0, 0, 0, .32);
  }

  #section-hero .hero-card.active .hero-card-overlay {
    background: linear-gradient(180deg, rgba(13, 42, 30, .08) 0%, rgba(13, 42, 30, .65) 100%);
  }

  #section-hero .hero-card.active .hero-card-body {
    padding: 28px;
  }

  #section-hero .hero-card.active::before {
    opacity: 1;
    transform: scale(1.02);
    transition: transform .22s ease, opacity .22s ease;
  }

  #section-hero .hero-card[data-bg] {
    --hero-card-bg: none;
  }

  /* ─────────────────────────────────────────────────
     DESTINATIONS
  ───────────────────────────────────────────────── */
  #section-destinations {
    .dest-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 240px);
      gap: 14px;

      .dest-card {
        position: relative;
        display: block;
        border-radius: 18px;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;

        &:first-child {
          grid-row: span 2;
          grid-template-rows: 1fr;
        }

        &:hover {
          .dest-img { transform: scale(1.06); }
          .dest-overlay { background: linear-gradient(to top, rgba(6,18,12,.9) 0%, rgba(6,18,12,.25) 60%, transparent 100%); }
          .dest-link { opacity: 1; transform: translateY(0); }
        }

        .dest-img {
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center;
          transition: transform .5s ease;
        }

        .dest-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(6,18,12,.8) 0%, rgba(6,18,12,.15) 55%, transparent 100%);
          transition: background .35s ease;
        }

        .dest-content {
          position: absolute;
          bottom: 0; left: 0; right: 0;
          padding: 20px 22px;
          z-index: 2;
        }

        .dest-country {
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: #4ecb9e;
          margin-bottom: 4px;
        }

        .dest-name {
          font-size: 20px;
          font-weight: 700;
          color: #fff;
          font-family: var(--font-heading);
          line-height: 1.2;
          margin-bottom: 5px;
        }

        .dest-tag {
          font-size: 11px;
          color: rgba(255,255,255,.7);
          line-height: 1.5;
        }

        .dest-link {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          margin-top: 10px;
          font-size: 11px;
          font-weight: 700;
          color: #4ecb9e;
          opacity: 0;
          transform: translateY(6px);
          transition: all .3s ease;
          text-decoration: none;
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     TOURS
  ───────────────────────────────────────────────── */
  #section-tours {
    .tour-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
      gap: 18px;
      align-items: stretch;

      .tour-card {
        background: linear-gradient(180deg, #fff, var(--surface-2));
        border: 1px solid rgba(26, 107, 82, .1);
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all .3s;
        box-shadow: 0 10px 28px rgba(13, 27, 20, .08);
        display: flex;
        flex-direction: column;
        min-width: 0;
        position: relative;

        &:hover {
          border-color: rgba(26, 107, 82, .35);
          box-shadow: 0 20px 44px rgba(26, 107, 82, .16);
          transform: translateY(-6px);
        }

        .tour-img {
          height: 180px;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
          padding: 14px;
          position: relative;
          font-size: 52px;
          flex-shrink: 0;
          isolation: isolate;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(13, 27, 20, .42));
            z-index: -1;
          }

          &::after {
            content: "";
            position: absolute;
            left: 14px; right: 14px; bottom: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, .45), transparent);
          }

          .tour-badge {
            position: absolute;
            top: 12px; right: 12px;
            background: linear-gradient(135deg, #1a6b52, #0f4a38);
            color: #fff;
            font-size: 11px;
            padding: 6px 12px;
            border-radius: 8px;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(26, 107, 82, .3);
            letter-spacing: .02em;

            &.tour-badge-gold { background: linear-gradient(135deg, #c8922a, #a6751f); }
          }
        }

        .tour-body {
          padding: 14px;
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;

          & h3 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 6px;
            font-family: var(--font-heading);
            color: #0d1b14;
            line-height: 1.22;
          }

          & p { flex: 1; padding: 0; margin: 2px 0 0; }

          .tour-stars {
            display: inline-flex;
            align-items: center;
            gap: 1px;
            width: max-content;
            color: #9a6b12;
            font-size: 11px;
            margin: 0 0 8px;
            background: #fff8e8;
            padding: 0 6px;
            border-radius: 6px;
            font-weight: 700;
          }

          .tour-meta {
            display: flex;
            gap: 4px;
            font-size: 10px;
            color: #47665a;
            margin: 8px 0 0;
            flex-wrap: wrap;

            & span {
              display: flex;
              align-items: center;
              gap: 3px;
              min-width: 0;
              background: #f3f8f6;
              border: 1px solid rgba(26, 107, 82, .1);
              padding: 2px 5px;
              border-radius: 5px;
              font-weight: 600;
            }

            & i { color: var(--brand); font-size: 10px; }
          }

          .tour-price {
            display: flex;
            align-items: center;
            gap: 6px 10px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(26, 107, 82, .09);
            justify-content: space-between;
            flex-wrap: wrap;

            & strong {
              font-size: 22px;
              font-weight: 700;
              color: var(--brand);
              font-family: var(--font-heading);
              line-height: 1;
            }

            & span { font-size: 11px; color: var(--text-muted); }

            .tour-btn {
              padding: 8px 16px;
              background: linear-gradient(135deg, #1a6b52, #0f4a38);
              color: #fff;
              border: none;
              border-radius: 8px;
              font-size: 13px;
              font-weight: 600;
              cursor: pointer;
              transition: all .25s;
              box-shadow: 0 4px 12px rgba(26, 107, 82, .2);
              white-space: nowrap;

              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(26, 107, 82, .3);
              }
            }
          }

          /* Tour description helper */
          .tour-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; margin:0; }

          .price-compact { display:flex; align-items:baseline; gap:5px; }
        }
      }
    }
  }

  /* Empty state helpers */
  .empty-icon { font-size:48px; color:var(--text-muted); }
  .empty-note { margin-top:16px; color:var(--text-muted); font-size:15px; }

  .centered { text-align:center; }
  .hidden { display:none !important; }

  .empty-container { padding: 60px 20px; }
  .cta-inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; }

  /* Section centering helpers: apply to .sec-head when content must be centered */
  .sec-head.centered { text-align: center; }
  .sec-head.centered .sec-h-460 { max-width: 460px; margin: 0 auto 12px; }
  .sec-head.centered .sec-h-500 { max-width: 500px; margin: 0 auto 12px; }
  .sec-head.centered .sec-h-440 { max-width: 440px; margin: 0 auto 12px; }
  .sec-head.centered .sec-sub { margin: 0 auto 48px; }

  /* Info tip block used across pages */
  .info-tip { display:flex; gap:12px; align-items:flex-start; background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,0)); padding:12px; border-radius:10px; border-left: 3px solid rgba(26,107,82,.12); }
  .info-tip.no-mt { margin-top: 0; }

  /* Month legend dots */
  .ml-dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:8px; vertical-align:middle; }
  .ml-dot.best { background: var(--brand); }
  .ml-dot.good { background: #a8e8cc; }
  .ml-dot.wet { background: #bfdbfe; }

  /* Two-column centered container */
  .two-col-center { margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; margin-left:auto; margin-right:auto; }

  .small-note { font-size:12px; }

  /* ─────────────────────────────────────────────────
     HOW IT WORKS
  ───────────────────────────────────────────────── */
  #section-how {
    .how-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 52px;
        left: calc(16.66% + 24px);
        right: calc(16.66% + 24px);
        height: 2px;
        background: linear-gradient(90deg, var(--brand), #4ecb9e, var(--brand));
        opacity: .25;
        z-index: 0;
      }

      .how-step {
        text-align: center;
        padding: 0 32px;
        position: relative;
        z-index: 1;

        .how-num {
          width: 52px; height: 52px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--brand), #4ecb9e);
          color: #fff;
          font-size: 20px;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          box-shadow: 0 6px 20px rgba(26,107,82,.3);
          font-family: var(--font-heading);
        }

        .how-icon {
          font-size: 32px;
          color: var(--brand);
          margin-bottom: 14px;
          display: block;
        }

        & h3 {
          font-size: 18px;
          font-weight: 700;
          color: var(--text-primary);
          margin-bottom: 10px;
          font-family: var(--font-heading);
        }

        & p {
          font-size: 14px;
          color: var(--text-secondary);
          line-height: 1.7;
        }
      }
    }

    .how-cta {
      margin-top: 56px;
      text-align: center;
      padding: 40px;
      background: linear-gradient(135deg, #0d2a1e, #0a1f16);
      border-radius: 20px;

      & h3 {
        font-size: 26px;
        font-weight: 700;
        color: #fff;
        font-family: var(--font-heading);
        margin-bottom: 8px;
      }

      & p { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 24px; }

      .how-cta-btns {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;

        .btn-primary {
          padding: 13px 28px;
          background: linear-gradient(135deg, #1a6b52, #0f4a38);
          color: #fff;
          border: none;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 6px 18px rgba(26,107,82,.35);
          transition: all .25s;
          &:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,107,82,.45); }
        }

        .btn-outline {
          padding: 13px 28px;
          background: transparent;
          color: #fff;
          border: 1.5px solid rgba(255,255,255,.25);
          border-radius: 10px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all .25s;
          &:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     WHY CHOOSE US
  ───────────────────────────────────────────────── */
  #section-why {
    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;

      .why-card {
        padding: 28px;
        border-radius: 16px;
        border: 1px solid rgba(78, 203, 158, .15);
        background: linear-gradient(135deg, rgba(78, 203, 158, .08), rgba(255, 255, 255, .03));
        backdrop-filter: blur(10px);
        transition: all .3s;

        &:hover {
          border-color: rgba(78, 203, 158, .3);
          background: linear-gradient(135deg, rgba(78, 203, 158, .12), rgba(255, 255, 255, .06));
          transform: translateY(-4px);
        }

        .why-icon {
          width: 44px; height: 44px;
          border-radius: 12px;
          background: rgba(78, 203, 158, .15);
          border: .5px solid rgba(78, 203, 158, .2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16px;
          font-size: 18px;
          color: #4ecb9e;
        }

        & h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 8px; font-family: var(--font-heading); }
        & p  { font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.6; }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     TESTIMONIALS
  ───────────────────────────────────────────────── */
  #section-testimonials {
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;

      .testi-card {
        background: var(--surface-2);
        border: 1px solid rgba(26, 107, 82, .08);
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
        transition: all .3s;

        &:hover {
          box-shadow: 0 12px 28px rgba(26, 107, 82, .12);
          transform: translateY(-2px);
        }

        .testi-stars { display: flex; gap: 2px; align-items: center; color: var(--gold); font-size: 14px; margin-bottom: 12px; }
        .testi-q     { font-size: 14px; line-height: 1.7; color: var(--text-primary); margin-bottom: 18px; }

        .testi-person {
          display: flex;
          align-items: center;
          gap: 10px;

          .testi-av {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 500;
            flex-shrink: 0;
          }

          .testi-name   { font-size: 13px; font-weight: 500; }
          .testi-loc    { font-size: 11px; color: var(--text-muted); }
          .testi-source { margin-left: auto; font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     ITINERARY
  ───────────────────────────────────────────────── */
  #section-itinerary {
    .itinerary-wrap {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 32px;
      align-items: start;

      .itin-days {
        display: flex;
        flex-direction: column;
        gap: 0;

        .itin-day {
          display: flex;
          gap: 16px;
          padding: 22px 0;
          border-bottom: 1px solid rgba(26, 107, 82, .08);
          cursor: pointer;
          transition: all .2s;

          &:hover { padding-left: 12px; border-left: 3px solid var(--brand); }
          &:last-child { border-bottom: none; }

          &.active {
            border-left: 3px solid var(--brand);
            padding-left: 12px;
            background: linear-gradient(135deg, rgba(26, 107, 82, .07), rgba(26, 107, 82, .03));
            border-radius: 12px;
            margin: 2px 0;

            & .day-num {
              background: linear-gradient(135deg, #1a6b52, #0f4a38);
              border-color: var(--brand);
              color: #fff;
              box-shadow: 0 6px 16px rgba(26, 107, 82, .25);
            }
          }

          .day-num {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--surface-1), var(--surface-2));
            border: 2px solid rgba(26, 107, 82, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            flex-shrink: 0;
            color: var(--brand);
            font-family: var(--font-heading);
            transition: all .3s;
          }

          .day-info {
            & h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
            & p  { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

            .day-tags {
              display: flex;
              gap: 6px;
              margin-top: 6px;
              flex-wrap: wrap;

              .dtag {
                font-size: 11px;
                padding: 2px 8px;
                border-radius: 20px;
                background: var(--surface-0);
                border: .5px solid var(--border);
                color: var(--text-secondary);
              }
            }
          }
        }
      }

      .itin-right {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .itin-preview {
          background: var(--surface-2);
          border: 1px solid rgba(26, 107, 82, .08);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

          .itin-img {
            height: 350px;
            background-size: cover;
            background-position: center;
            background-color: #1a3a28;
            opacity: 1;
            transition: opacity .18s ease;
          }

          .itin-detail {
            padding: 20px;

            & h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }

            .itin-highlights {
              display: flex;
              flex-direction: column;
              gap: 8px;
              margin-top: 12px;

              .ihi {
                display: flex;
                gap: 10px;
                font-size: 13px;
                align-items: flex-start;

                .ihi-dot {
                  width: 6px; height: 6px;
                  border-radius: 50%;
                  background: var(--brand);
                  flex-shrink: 0;
                  margin-top: 6px;
                }
              }
            }
          }
        }

        .itin-includes {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;

          .itin-inc-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 300px;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

            &:hover {
              .ic-img { transform: scale(1.07); }
              .ic-overlay { padding-bottom: 28px; }
            }

            .ic-img {
              position: absolute;
              inset: 0;
              background-size: cover;
              background-position: center;
              transition: transform .55s ease;
            }

            &::after {
              content: '';
              position: absolute;
              inset: 0;
              background: linear-gradient(
                to top,
                rgba(6, 18, 12, .88) 0%,
                rgba(6, 18, 12, .3) 55%,
                transparent 100%
              );
              z-index: 1;
              pointer-events: none;
            }

            .ic-num {
              position: absolute;
              top: 18px;
              left: 18px;
              z-index: 2;
              font-size: 10px;
              font-weight: 800;
              letter-spacing: .14em;
              text-transform: uppercase;
              color: rgba(255, 255, 255, .85);
              background: rgba(255, 255, 255, .12);
              backdrop-filter: blur(10px);
              -webkit-backdrop-filter: blur(10px);
              border: 1px solid rgba(255, 255, 255, .2);
              padding: 4px 12px;
              border-radius: 20px;
            }

            .ic-badge {
              position: absolute;
              top: 18px;
              right: 18px;
              z-index: 2;
              font-size: 10px;
              font-weight: 700;
              letter-spacing: .08em;
              text-transform: uppercase;
              color: #fff;
              background: var(--brand);
              padding: 4px 12px;
              border-radius: 20px;
            }

            .ic-overlay {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              z-index: 2;
              padding: 20px 22px 22px;
              transition: padding .3s ease;
            }

            .ic-title {
              font-size: 17px;
              font-weight: 700;
              color: #fff;
              letter-spacing: -.3px;
              line-height: 1.25;
              margin-bottom: 8px;
              font-family: var(--font-heading);
            }

            .ic-sub {
              font-size: 12px;
              color: rgba(255, 255, 255, .72);
              line-height: 1.65;
            }
          }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     GOOGLE REVIEWS
  ───────────────────────────────────────────────── */
  #section-reviews {
    .g-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 28px;
      padding: 24px 28px;
      background: linear-gradient(135deg, var(--surface-2), rgba(26, 107, 82, .04));
      border: 1px solid rgba(26, 107, 82, .1);
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .04);

      .g-score { font-size: 40px; font-weight: 500; color: var(--brand); line-height: 1; }

      .g-right {
        .g-stars { display: flex; gap: 2px; align-items: center; color: var(--gold); font-size: 18px; margin-bottom: 2px; }
        & p { font-size: 13px; color: var(--text-secondary); }
      }

      .g-badge {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-secondary);
        border: .5px solid var(--border);
        padding: 6px 14px;
        border-radius: 20px;
        cursor: pointer;
      }
    }

    .g-reviews {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;

      .g-review {
        background: var(--surface-2);
        border: 1px solid rgba(26, 107, 82, .08);
        border-radius: 14px;
        padding: 18px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .04);
        transition: all .3s;

        &:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }

        .g-rev-top {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 10px;

          .g-av {
            width: 32px; height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 500;
          }

          .g-rev-name { font-size: 13px; font-weight: 500; }
          .g-rev-date { font-size: 11px; color: var(--text-muted); }
        }

        .g-rev-stars { display: flex; gap: 1px; align-items: center; color: var(--gold); font-size: 11px; margin-bottom: 6px; }
        .g-rev-text  { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
        .g-verified  { font-size: 10px; color: var(--brand); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     TRAVEL ESSENTIALS
  ───────────────────────────────────────────────── */
  #section-essentials {
    .ess-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;

      .ess-card {
        background: var(--surface-2);
        border: 1px solid rgba(26,107,82,.1);
        border-radius: 16px;
        padding: 26px 24px;
        display: flex;
        gap: 18px;
        align-items: flex-start;
        transition: transform .25s, box-shadow .25s;
        box-shadow: 0 2px 10px rgba(0,0,0,.04);

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 24px rgba(26,107,82,.1);
        }

        .ess-icon {
          width: 46px; height: 46px;
          border-radius: 12px;
          background: var(--brand-lt);
          color: var(--brand);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          flex-shrink: 0;
        }

        .ess-body {
          min-width: 0;

          .ess-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--brand);
            margin-bottom: 4px;
          }

          .ess-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 5px;
          }

          .ess-desc {
            font-size: 12.5px;
            color: var(--text-secondary);
            line-height: 1.65;
          }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     AWARDS
  ───────────────────────────────────────────────── */
  #section-awards {
    .awards-row {
      display: flex;
      gap: 0;
      border: 1px solid rgba(26, 107, 82, .1);
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(26, 107, 82, .04), rgba(255, 255, 255, .02));
      box-shadow: 0 6px 16px rgba(0, 0, 0, .04);

      .award-item {
        flex: 1;
        padding: 28px 24px;
        text-align: center;
        border-right: 1px solid rgba(26, 107, 82, .08);
        transition: all .3s;

        &:hover      { background: rgba(26, 107, 82, .04); }
        &:last-child { border-right: none; }

        .award-icon { font-size: 28px; margin-bottom: 8px; }
        & h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; font-family: var(--font-heading); color: #0d1b14; }
        & p  { font-size: 11px; color: var(--text-secondary); }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     INSTAGRAM
  ───────────────────────────────────────────────── */
  #section-instagram {
    .ig-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;

      .ig-handle {
        display: flex;
        align-items: center;
        gap: 10px;

        .ig-avatar {
          width: 44px; height: 44px;
          border-radius: 50%;
          background: var(--brand);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 16px;
        }

        .ig-name { font-size: 15px; font-weight: 500; }
        .ig-sub  { font-size: 12px; color: var(--text-secondary); }
      }
    }

    .ig-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;

      .ig-post {
        aspect-ratio: 1;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        background: var(--surface-1);
        border: 1px solid rgba(26, 107, 82, .08);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all .3s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .06);

        &:hover {
          transform: scale(1.04);
          box-shadow: 0 8px 24px rgba(26, 107, 82, .12);

          .ig-overlay { opacity: 1; }
        }

        .ig-overlay {
          position: absolute;
          inset: 0;
          background: rgba(13, 42, 30, .5);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          opacity: 0;
          transition: opacity .2s;
          color: #fff;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     BLOG
  ───────────────────────────────────────────────── */
  #section-blog {
    .blog-grid {
      display: grid;
      grid-template-columns: minmax(min(100%, 420px), 1.15fr) minmax(0, .85fr);
      gap: 18px;
      align-items: start;

      .blog-main {
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(26, 107, 82, .08);
        background: var(--surface-2);
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        transition: all .3s;
        grid-row: span 2;
        align-self: start;
        height: max-content;

        &:hover {
          box-shadow: 0 16px 40px rgba(26, 107, 82, .16);
          transform: translateY(-4px);
        }

        .blog-main-img {
          height: 350px;
          display: flex;
          align-items: flex-end;
          padding: 20px;
          background: #1a3a28;
          font-size: 60px;
        }

        .blog-main-body {
          padding: 20px;

          & h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; font-family: var(--font-heading); color: #0d1b14; }
          & p  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }

          .blog-meta { font-size: 11px; color: var(--text-muted); }
        }
      }

      .blog-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        .blog-sm {
          display: flex;
          gap: 12px;
          background: var(--surface-2);
          border: 1px solid rgba(26, 107, 82, .08);
          border-radius: 12px;
          padding: 16px;
          cursor: pointer;
          box-shadow: 0 4px 10px rgba(0, 0, 0, .04);
          transition: all .3s;

          &:hover {
            box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
            transform: translateX(4px);
          }

          .blog-sm-img {
            width: 56px; height: 56px;
            border-radius: var(--radius);
            background: var(--surface-1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
          }

          .blog-sm-info {
            & h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; line-height: 1.3; font-family: var(--font-heading); color: #0d1b14; }
            & p  { font-size: 11px; color: var(--text-muted); }
          }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     TRIPADVISOR REVIEWS
  ───────────────────────────────────────────────── */
  #section-tripadvisor {
    background: linear-gradient(180deg, #f0fdf8, var(--surface-0));

    .ta-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 48px;
      padding: 28px 32px;
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(0, 170, 108, .15);
      box-shadow: 0 4px 20px rgba(0, 170, 108, .07);
      flex-wrap: wrap;

      .ta-brand {
        display: flex;
        align-items: center;
        gap: 16px;

        .ta-logo {
          width: 56px; height: 56px;
          border-radius: 14px;
          background: linear-gradient(135deg, #00aa6c, #007a4d);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          box-shadow: 0 6px 16px rgba(0, 170, 108, .3);
        }

        .ta-brand-name {
          font-size: 20px;
          font-weight: 800;
          color: #161616;
          letter-spacing: -.3px;
          font-family: var(--font-heading);
        }

        .ta-brand-sub {
          font-size: 12px;
          color: #00aa6c;
          font-weight: 700;
          letter-spacing: .06em;
          text-transform: uppercase;
          margin-top: 2px;
        }
      }

      .ta-score-wrap {
        display: flex;
        align-items: center;
        gap: 32px;
        flex-wrap: wrap;

        .ta-score-box {
          text-align: center;

          .ta-score {
            font-size: 40px;
            font-weight: 800;
            color: #161616;
            font-family: var(--font-heading);
            line-height: 1;
          }

          .ta-dots {
            display: flex;
            gap: 4px;
            justify-content: center;
            margin: 6px 0 4px;

            span {
              width: 16px; height: 16px;
              border-radius: 50%;
              background: #00aa6c;
              display: block;
            }
          }

          .ta-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
        }

        .ta-badge {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          padding: 14px 20px;
          border: 2px solid #00aa6c;
          border-radius: 14px;
          background: #f0fdf8;

          .ta-badge-icon { font-size: 28px; color: #00aa6c; }
          .ta-badge-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #007a4d; }
          .ta-badge-year { font-size: 16px; font-weight: 800; color: #161616; font-family: var(--font-heading); }
        }
      }
    }

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

      .ta-card {
        background: #fff;
        border: 1px solid rgba(0, 170, 108, .12);
        border-radius: 16px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
        transition: transform .25s ease, box-shadow .25s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 28px rgba(0, 170, 108, .12);
        }

        .ta-card-top {
          display: flex;
          align-items: center;
          gap: 12px;

          .ta-av {
            width: 42px; height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            flex-shrink: 0;
          }

          .ta-reviewer-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
          }

          .ta-reviewer-loc {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
          }
        }

        .ta-rating {
          display: flex;
          gap: 4px;

          span {
            width: 13px; height: 13px;
            border-radius: 50%;
            background: #00aa6c;
            display: block;
          }
        }

        .ta-title {
          font-size: 13px;
          font-weight: 700;
          color: var(--text-primary);
          line-height: 1.35;
          font-family: var(--font-heading);
        }

        .ta-text {
          font-size: 12.5px;
          color: var(--text-secondary);
          line-height: 1.7;
          flex: 1;
        }

        .ta-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 12px;
          border-top: 1px solid rgba(0, 170, 108, .1);

          .ta-date { font-size: 11px; color: var(--text-muted); }

          .ta-source {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 700;
            color: #00aa6c;
          }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────
     NEWSLETTER
  ───────────────────────────────────────────────── */
  #section-newsletter {
    background: linear-gradient(135deg, #0d2a1e, #051613);
    padding: 80px 40px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .08);

    & h2 { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 10px; font-family: var(--font-heading); }
    & p  { font-size: 15px; color: rgba(255, 255, 255, .6); margin-bottom: 28px; }

    .nl-form {
      display: flex;
      gap: 8px;
      max-width: 440px;
      margin: 0 auto;

      & input {
        flex: 1;
        padding: 14px 18px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, .15);
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-size: 14px;
        backdrop-filter: blur(10px);
        transition: all .2s;

        &::placeholder { color: rgba(255, 255, 255, .4); }
        &:focus { outline: none; border-color: rgba(78, 203, 158, .4); background: rgba(255, 255, 255, .12); }
      }

      & button {
        padding: 14px 28px;
        background: linear-gradient(135deg, #4ecb9e, #3ab885);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: 0 8px 20px rgba(78, 203, 158, .25);
        transition: all .3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 28px rgba(78, 203, 158, .35);
        }
      }
    }

    .nl-note { font-size: 11px; color: rgba(255, 255, 255, .35); margin-top: 10px; }
  }

  /* ─────────────────────────────────────────────────
     FOOTER
  ───────────────────────────────────────────────── */
  #site-footer {
    background: #060f0a;
    padding: 56px 40px 24px;

    .footer-top {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 32px;
      margin-bottom: 40px;

      .footer-brand {
        & p { font-size: 13px; color: rgba(255, 255, 255, .4); margin-top: 10px; line-height: 1.7; max-width: 220px; }

        .footer-socials {
          display: flex;
          gap: 8px;

          .fsoc {
            width: 36px; height: 36px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: rgba(255, 255, 255, .6);
            font-size: 16px;
            transition: all .3s;
            background: rgba(255, 255, 255, .04);
            text-decoration: none;

            &:hover {
              border-color: rgba(78, 203, 158, .4);
              color: #4ecb9e;
              background: rgba(78, 203, 158, .1);
              transform: translateY(-2px);
            }
          }
        }
      }

      .footer-col {
        & h5 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .3); margin-bottom: 14px; font-weight: 500; }

        & a {
          display: block;
          font-size: 13px;
          color: rgba(255, 255, 255, .5);
          margin-bottom: 8px;
          cursor: pointer;
          text-decoration: none;

          &:hover { color: rgba(255, 255, 255, .85); }
        }
      }
    }

    .footer-bottom {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
      border-top: .5px solid rgba(255, 255, 255, .08);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & p { font-size: 12px; color: rgba(255, 255, 255, .3); }
    }
  }

  /* ─────────────────────────────────────────────────────
     DESTINATIONS PAGE (destinations.html)
  ───────────────────────────────────────────────────── */

  /* ── Destinations Hero ─────────────────────────────── */
  #dest-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/allimage/angkor-wat-temple.png') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(170deg, rgba(7,18,12,.4) 0%, rgba(7,18,12,.9) 100%);
    }

    .dest-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px 80px;
    }

    h1 {
      font-family: var(--font-heading);
      font-size: 56px;
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 16px;
      max-width: 700px;

      em {
        font-style: italic;
        background: linear-gradient(135deg, #4ecb9e, #a8e6d0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .hero-sub {
      font-size: 17px;
      color: rgba(255,255,255,.72);
      max-width: 560px;
      line-height: 1.65;
      margin-bottom: 36px;
    }

    .dest-hero-stats {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;

      .dhs-item {
        display: flex;
        flex-direction: column;
        gap: 2px;

        strong {
          font-family: var(--font-heading);
          font-size: 28px;
          font-weight: 700;
          color: #4ecb9e;
        }

        span {
          font-size: 12px;
          color: rgba(255,255,255,.5);
          text-transform: uppercase;
          letter-spacing: .08em;
        }
      }
    }
  }

  .dest-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
  }

  /* ── Region Filter Bar ──────────────────────────────── */
  #dest-filter-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    border-bottom: 1px solid rgba(26,107,82,.1);
    box-shadow: 0 2px 12px rgba(13,27,20,.07);

    .dest-filter-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
      &::-webkit-scrollbar { display: none; }
    }

    .reg-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 13px 18px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: all .2s;

      i { font-size: 15px; }
      &:hover { color: var(--brand); }
      &.active { color: var(--brand); border-bottom-color: var(--brand); }
    }
  }

  /* ── Destinations Grid Section ──────────────────────── */
  #section-destinations-all {
    padding: 72px 0 88px;

    .sec-label { color: var(--brand); }
    .sec-h { color: var(--dark); }
    .sec-sub { color: var(--text-secondary); }
  }

  .dest-page-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 330px;
    gap: 14px;
  }

  /* ── Full-bleed immersive destination card ──────────── */
  .dest-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;

    &.dest-card-xl { grid-column: span 2; grid-row: span 2; }
    &.dest-card-wide { grid-column: span 2; }
  }

  .dest-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .65s cubic-bezier(.2,.8,.2,1);
  }

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

  .dest-card-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 25%,
      rgba(5,13,9,.6) 58%,
      rgba(5,13,9,.97) 100%
    );
    transition: background .35s;
  }

  .dest-card:hover .dest-card-inner {
    background: linear-gradient(
      180deg,
      rgba(5,13,9,.08) 0%,
      transparent 18%,
      rgba(5,13,9,.72) 54%,
      rgba(5,13,9,.99) 100%
    );
  }

  .dest-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .dest-badge {
    background: rgba(5,13,9,.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #4ecb9e;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid rgba(78,203,158,.22);
  }

  .dest-badge-hot {
    background: linear-gradient(135deg, #d4875a, #b05e2e);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 20px;
  }

  .dest-card-foot { display: flex; flex-direction: column; }

  .dest-card-meta {
    display: flex;
    gap: 14px;
    margin-bottom: 7px;

    span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: rgba(255,255,255,.45);

      i { font-size: 12px; color: #4ecb9e; }
    }
  }

  .dest-card-name {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 10px;
    transition: letter-spacing .3s;
  }

  .dest-card-xl .dest-card-name { font-size: 40px; }
  .dest-card-wide .dest-card-name { font-size: 32px; }
  .dest-card:hover .dest-card-name { letter-spacing: .012em; }

  .dest-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    span {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,.55);
      background: rgba(255,255,255,.09);
      backdrop-filter: blur(4px);
      padding: 3px 9px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.1);
      transition: background .2s, color .2s;
    }
  }

  .dest-card:hover .dest-card-tags span {
    background: rgba(78,203,158,.12);
    color: rgba(78,203,158,.85);
    border-color: rgba(78,203,158,.2);
  }

  .dest-card-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1);

    > .dest-panel-inner { overflow: hidden; }
  }

  .dest-card:hover .dest-card-panel { grid-template-rows: 1fr; }

  .dest-panel-body {
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;

    p {
      font-size: 12.5px;
      color: rgba(255,255,255,.65);
      line-height: 1.6;
      text-align: left;
    }

    .dest-panel-hl {
      display: flex;
      flex-direction: column;
      gap: 3px;

      span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: rgba(255,255,255,.6);

        i { font-size: 13px; color: #4ecb9e; flex-shrink: 0; }
      }
    }

    .dest-panel-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      background: #4ecb9e;
      color: #071309;
      border-radius: 10px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      width: fit-content;
      margin-top: 2px;
      transition: background .2s, gap .25s;

      &:hover { background: #6ddeb3; gap: 11px; }
    }
  }

  /* ── Best Time to Visit Section ─────────────────────── */
  #section-best-time {
    background: var(--surface-2);
    padding: 72px 0;

    .best-time-grid {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .bt-card {
      background: var(--surface-1);
      border-radius: 16px;
      padding: 28px 24px;
      border: 1px solid var(--border);
      text-align: center;

      .bt-season {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 22px;
      }

      h3 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
      .bt-months { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
      p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
    }
  }

  /* ── Destinations CTA Band ───────────────────────────── */
  #section-dest-cta {
    background: linear-gradient(135deg, var(--brand-dk) 0%, #1a4a35 100%);
    padding: 80px 0;

    .dest-cta-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 40px;

      .dest-cta-text {
        p.sec-label { color: rgba(78,203,158,.8); margin-bottom: 10px; }
        h2 { font-family: var(--font-heading); font-size: 36px; color: #fff; line-height: 1.2; margin-bottom: 14px; }
        p.desc { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.65; max-width: 540px; }
      }

      .dest-cta-btns {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 220px;

        a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 14px 28px;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 700;
          text-decoration: none;
          transition: all .25s;
          white-space: nowrap;
        }

        .btn-white {
          background: #fff;
          color: var(--brand-dk);
          box-shadow: 0 8px 24px rgba(0,0,0,.2);
          &:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
        }

        .btn-outline-white {
          background: transparent;
          color: #fff;
          border: 2px solid rgba(255,255,255,.35);
          &:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
        }
      }
    }
  }

  /* ─────────────────────────────────────────────────────
     TOURS PAGE (tours.html)
  ───────────────────────────────────────────────────── */

  /* ── Tours Hero ─────────────────────────────────────── */
  #tours-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/banner/angkor-wat.jpg') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(170deg, rgba(7,18,12,.45) 0%, rgba(7,18,12,.88) 100%);
    }

    .tours-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px 80px;
    }

    h1 {
      font-family: var(--font-heading);
      font-size: 58px;
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 18px;
      max-width: 740px;

      em {
        font-style: italic;
        background: linear-gradient(135deg, #4ecb9e, #a8e6d0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .hero-sub {
      font-size: 17px;
      color: rgba(255,255,255,.72);
      max-width: 580px;
      line-height: 1.65;
      margin-bottom: 32px;
      padding: 0;
    }
  }

  .tours-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
  }

  .hero-trust {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .hero-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,.65);

    i { color: #4ecb9e; font-size: 16px; }
    strong { color: #fff; }
  }

  /* ── Tours Grid Section ─────────────────────────────── */
  #section-tours {
    background: var(--surface-1);
    padding: 64px 0 80px;

    .tours-layout {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 40px;
      align-items: start;
    }

    #tours-filter-nav {
      position: sticky;
      top: 90px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .filter-sidebar-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-muted);
      padding: 8px 14px 4px;
    }

    .filter-sidebar-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 6px;
    }

    .filter-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 14px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-secondary);
      background: none;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      transition: background .15s, color .15s;

      i { font-size: 16px; flex-shrink: 0; }
      &:hover { background: var(--surface-1); color: var(--brand); }
      &.active { background: var(--brand-lt); color: var(--brand); font-weight: 700; }
    }

    .tours-grid-area { min-width: 0; }

    .tours-grid-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }

    .tours-count {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0;
      strong { color: var(--brand); }
    }

    .sort-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .sort-bar-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-right: 4px;
    }

    .sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 13px;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--surface-2);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;

      i { font-size: 13px; }
      &:hover { border-color: var(--brand); color: var(--brand); }
      &.active { background: var(--brand); color: #fff; border-color: var(--brand); }
    }

    .tour-card[hidden] { display: none !important; }

    .tour-btn {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .card-link {
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
    }
  }

  /* ── Custom Tour CTA ─────────────────────────────────── */
  #section-custom-tour {
    background: linear-gradient(135deg, var(--brand-dk) 0%, #1a4a35 100%);
    padding: 80px 0;
  }

  .custom-tour-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
  }

  .custom-tour-text {
    p.sec-label { color: rgba(78,203,158,.8); margin-bottom: 10px; }
    h2 { font-family: var(--font-heading); font-size: 36px; color: #fff; line-height: 1.2; margin-bottom: 14px; }
    p.desc { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.65; max-width: 540px; }
  }

  .custom-tour-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;

    .btn-white {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: all .25s;
      white-space: nowrap;
      background: #fff;
      color: var(--brand-dk);
      box-shadow: 0 8px 24px rgba(0,0,0,.2);
      &:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
    }

    .btn-outline-white {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: all .25s;
      white-space: nowrap;
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255,255,255,.35);
      &:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
    }
  }

  /* ── Why Us ─────────────────────────────────────────── */
  #section-tours-why {
    background: #fff;
    padding: 80px 0;
  }

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

  .tours-why-card {
    background: linear-gradient(180deg, var(--brand-lt), #fff);
    border: 1px solid rgba(26,107,82,.12);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;

    .why-icon-wrap {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, var(--brand), var(--brand-dk));
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      font-size: 24px;
      color: #fff;
    }

    h3 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
    p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  }

  /* ─────────────────────────────────────────────────────
     TOUR DETAIL PAGE (tour-detail.html)
  ───────────────────────────────────────────────────── */

  /* ── Tour Hero ───────────────────────────────────────── */
  #tour-hero {
    height: 518px;
    background: #0d2a1e url('../img/tours/1.png') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(170deg, rgba(7,18,12,.3) 0%, rgba(7,18,12,.9) 100%);
    }

    .tour-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px 72px;
    }

    h1 {
      font-family: var(--font-heading);
      font-size: clamp(30px, 4.5vw, 56px);
      font-weight: 700;
      color: #fff;
      line-height: 1.12;
      margin-bottom: 18px;
      max-width: 820px;
      letter-spacing: -.5px;
    }
  }

  .tour-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
    i { font-size: 10px; }
  }

  .tour-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .tour-hero-meta .tour-badge-hero {
    background: linear-gradient(135deg, #c8922a, #e8b040);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 12px;
    border-radius: 20px;
  }

  .tour-hero-meta .hero-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: rgba(255,255,255,.6);

    i { color: #4ecb9e; font-size: 14px; }
    strong { color: #fff; }
  }

  .tour-hero-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;

    .stars-icons { color: #f5c518; font-size: 15px; display: flex; gap: 2px; }
    .stars-label { font-size: 14px; color: rgba(255,255,255,.8); }
    .stars-count { font-size: 13px; color: rgba(255,255,255,.45); }
  }

  /* ── Detail Layout ───────────────────────────────────── */
  #section-tour-detail {
    background: var(--surface-0);
  }

  #section-tour-detail .detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
  }

  .tour-body-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .tour-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px 40px;
  }

  .tour-panel h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--brand-lt);
    display: flex;
    align-items: center;
    gap: 10px;

    i { color: var(--brand); font-size: 22px; }
  }

  .tour-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .tour-stat {
    background: var(--surface-2);
    padding: 20px 16px;
    text-align: center;

    .stat-icon { font-size: 22px; color: var(--brand); margin-bottom: 6px; }
    .stat-val { font-size: 16px; font-weight: 700; color: var(--dark); font-family: var(--font-heading); }
    .stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
  }

  .tour-overview-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 0;
  }

  .tour-overview-text p { margin-bottom: 16px; }
  .tour-overview-text p:last-child { margin-bottom: 0; }

  .highlight-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;

    i { color: var(--brand); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  }

  .itinerary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .itin-day {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s;

    &.open { border-color: var(--brand); }
  }

  .itin-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: background .18s;

    &:hover { background: var(--surface-1); }
    .itin-day.open & { background: var(--brand-lt); }
  }

  .day-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dk));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .itin-day.open & { background: linear-gradient(135deg, var(--brand-dk), #0a3528); }
  }

  .itin-trigger-text {
    flex: 1;
    min-width: 0;

    .day-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--brand);
      margin-bottom: 2px;
    }

    h3 {
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .itin-chevron {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform .25s;

    .itin-day.open & { transform: rotate(180deg); color: var(--brand); }
  }

  .itin-body {
    display: none;
    padding: 0 20px 20px;

    .itin-day.open & { display: block; }

    p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 10px;
    }
  }

  .itin-day-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }

  .itin-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-lt);
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all .18s;

    i { font-size: 12px; }
    &:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(26,107,82,.2);
    }
  }

  /* ── Map modal ───────────────────────────────────────── */
  #map-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;

    &.open { opacity: 1; pointer-events: all; }
  }

  #map-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7,18,12,.65);
    backdrop-filter: blur(4px);
  }

  #map-modal-card {
    position: relative;
    z-index: 1;
    background: var(--surface-2);
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    transform: translateY(16px) scale(.98);
    transition: transform .25s;

    #map-modal.open & { transform: translateY(0) scale(1); }
  }

  #map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    gap: 12px;

    .map-modal-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--brand-lt);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand);
      font-size: 18px;
      flex-shrink: 0;
    }

    .map-modal-title {
      flex: 1;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.3;
    }

    .map-modal-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--surface-1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 18px;
      transition: all .18s;
      flex-shrink: 0;

      &:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    }
  }

  #map-modal-frame {
    width: 100%;
    height: 380px;
    border: none;
    display: block;
  }

  #map-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;

    a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--brand);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: var(--brand-dk); }
    }
  }

  .itin-day-img {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    background: center / cover no-repeat;
    margin-bottom: 14px;
  }

  .itin-schedule {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 14px 0;
  }

  .itin-step {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0 20px;
    position: relative;

    &:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 76px;
      top: 20px;
      bottom: 0;
      width: 2px;
      background: var(--brand-lt);
    }
  }

  .itin-step-time {
    text-align: right;
    padding-top: 3px;
    flex-shrink: 0;

    span {
      font-size: 11px;
      font-weight: 700;
      color: var(--brand);
      background: var(--brand-lt);
      border-radius: 6px;
      padding: 3px 6px;
      display: inline-block;
      white-space: nowrap;
    }
  }

  .itin-step-dot {
    position: absolute;
    left: 71px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--brand);
    z-index: 1;
  }

  .itin-step-content {
    padding: 0 0 20px 4px;

    .step-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 3px;
      font-family: var(--font-heading);
    }

    .step-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.6;
      margin: 0;
    }
  }

  .incl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .incl-col h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    i { font-size: 16px; }
  }

  .incl-col.yes h3 i { color: var(--brand); }
  .incl-col.no  h3 i { color: #e05252; }

  .incl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .incl-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;

    i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
  }

  .incl-list.yes li i { color: var(--brand); }
  .incl-list.no  li i { color: #e05252; }

  .notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .note-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface-1);
    border-radius: 12px;
    padding: 14px 16px;
    border-left: 3px solid var(--brand);

    i { color: var(--brand); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
    p { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin: 0; }
    strong { color: var(--dark); }
  }

  .reviews-summary {
    display: flex;
    gap: 32px;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }

  .review-score-big {
    text-align: center;
    flex-shrink: 0;

    .score-num {
      font-family: var(--font-heading);
      font-size: 56px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1;
    }
    .score-stars { color: #f5c518; font-size: 18px; margin: 6px 0 4px; }
    .score-count { font-size: 12px; color: var(--text-muted); }
  }

  .review-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .review-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);

    .bar-track {
      flex: 1;
      height: 6px;
      background: var(--brand-lt);
      border-radius: 3px;
      overflow: hidden;

      .bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--brand), #4ecb9e);
        border-radius: 3px;
      }
    }
  }

  .review-card {
    background: var(--surface-1);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;

    &:last-child { margin-bottom: 0; }

    .rc-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .rc-av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--brand), #4ecb9e);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .rc-name { font-size: 14px; font-weight: 600; color: var(--dark); }
    .rc-date { font-size: 11px; color: var(--text-muted); }
    .rc-stars { color: #f5c518; font-size: 13px; margin-left: auto; }
    .rc-text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
  }

  /* ── Sticky sidebar ──────────────────────────────────── */
  .tour-sidebar {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .booking-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 40px rgba(13,27,20,.09);
  }

  .booking-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;

    strong { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--dark); }
    span { font-size: 14px; color: var(--text-muted); }
  }

  .booking-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--text-secondary);

    .stars { color: #f5c518; font-size: 13px; display: flex; gap: 1px; }
    strong { color: var(--dark); }
  }

  .booking-info-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--surface-1);
    border-radius: 12px;
  }

  .booking-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;

    .bir-label {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted);
      i { color: var(--brand); font-size: 15px; }
    }

    .bir-val { font-weight: 600; color: var(--dark); }
  }

  .btn-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dk));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all .25s;
    margin-bottom: 10px;

    &:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(15,74,56,.35); }
  }

  .btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all .25s;
    margin-bottom: 16px;

    &:hover { background: #1ebe58; transform: translateY(-1px); }
  }

  .booking-guarantee {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    justify-content: center;

    i { color: var(--brand); font-size: 14px; }
  }

  .sidebar-widget {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }

  .sidebar-widget h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-lt);
    display: flex;
    align-items: center;
    gap: 8px;
    i { color: var(--brand); font-size: 16px; }
  }

  .tour-map-placeholder {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, var(--brand-lt), #d4eee6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--brand);
    margin-bottom: 14px;

    i { font-size: 32px; }
    span { font-size: 12px; font-weight: 600; }
  }

  .map-locations {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .map-loc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    i { color: var(--brand); font-size: 14px; }
  }

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

  .related-tour-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .25s;

    &:hover { box-shadow: 0 14px 48px rgba(26,107,82,.11); transform: translateY(-4px); }
  }

  .related-tour-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: center / cover no-repeat;
  }

  .related-tour-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .related-tour-body h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
    margin: 8px 0 10px;
  }

  .related-tour-body .related-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }

  .related-tour-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;

    strong { font-size: 16px; font-weight: 700; color: var(--dark); font-family: var(--font-heading); }
    span { font-size: 11px; color: var(--text-muted); }

    a {
      font-size: 12px;
      font-weight: 700;
      color: var(--brand);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: gap .15s;
      &:hover { gap: 7px; }
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   ACTIVITIES PAGE
   ═══════════════════════════════════════════════════════════ */
body {

  /* ── Activities Hero ─────────────────────────── */
  #act-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/banner/angkor-wat.jpg') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(170deg, rgba(7,18,12,.45) 0%, rgba(7,18,12,.88) 100%);
    }

    .act-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px 80px;
    }

    h1 {
      font-family: var(--font-heading);
      font-size: 58px;
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 18px;
      max-width: 700px;

      em {
        font-style: italic;
        background: linear-gradient(135deg, #4ecb9e, #a8e6d0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .hero-sub {
      font-size: 17px;
      color: rgba(255,255,255,.72);
      max-width: 560px;
      line-height: 1.65;
      margin-bottom: 32px;
      padding: 0;
    }
  }

  .act-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
  }

  .hero-trust {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .hero-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,.65);

    i { color: #4ecb9e; font-size: 16px; }
    strong { color: #fff; }
  }

  /* ── Activities Section ──────────────────────── */
  #section-activities {
    background: var(--surface-1);
    padding: 72px 0 88px;

    .act-section-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .act-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 48px;
    }

    .act-card {
      height: 290px;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: #0d2a1e;
      border: none;
      box-shadow: 0 8px 28px rgba(13,27,20,.18);
      transition: transform .35s ease, box-shadow .35s ease;

      a {
        display: block;
        height: 100%;
        text-decoration: none;
        position: relative;
      }

      .act-img {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        border-radius: 0;
        transition: transform .55s ease;
        z-index: 1;
      }

      .act-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(16, 58, 38, .10) 0%, rgba(8, 24, 16, .25) 35%, rgba(4, 12, 8, .82) 100%);
        pointer-events: none;
        z-index: 2;
      }

      .act-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(180deg,
          rgba(15, 86, 58, .08) 0%,
          rgba(9, 48, 34, .26) 38%,
          rgba(3, 16, 12, .82) 100%);
        transition: background .35s;
      }

      .act-icon-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 4;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,.14);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        color: #fff;
        transition: all .3s;
      }

      .act-tours-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 4;
        background: rgba(26,107,82,.65);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        padding: 4px 11px;
        border-radius: 20px;
        border: 1px solid rgba(78,203,158,.3);
      }

      .act-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
        padding: 20px 20px 22px;
        color: #fff;
      }

      .act-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .3s, transform .3s;
        text-decoration: none;

        i { font-size: 13px; transition: transform .2s; }
      }

      &:hover {
        transform: translateY(-7px);
        box-shadow: 0 24px 52px rgba(13,27,20,.32);

        .act-img { transform: scale(1.07); }

        .act-overlay { background: linear-gradient(180deg, rgba(7,18,12,.05) 0%, rgba(7,18,12,.52) 42%, rgba(7,18,12,.88) 100%); }

        .act-icon-badge { background: var(--brand); border-color: var(--brand); }

        .act-link { opacity: 1; transform: translateY(0); i { transform: translateX(3px); } }
      }
    }
  }

  /* ── What to Expect ──────────────────────────── */
  #section-act-expect {
    background: #fff;
    padding: 80px 0;
  }

  .expect-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .expect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
  }

  .expect-card {
    border: 1px solid rgba(26,107,82,.1);
    border-radius: 16px;
    padding: 32px 28px;
    background: linear-gradient(180deg, var(--brand-lt), #fff);

    .expect-icon {
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, var(--brand), var(--brand-dk));
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: #fff;
      margin-bottom: 20px;
    }

    h3 { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
    p { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
  }

  /* ── CTA ─────────────────────────────────────── */
  #section-act-cta {
    background: linear-gradient(135deg, var(--brand-dk) 0%, #1a4a35 100%);
    padding: 80px 0;
  }

  .act-cta-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
  }

  .act-cta-text {
    p.sec-label { color: rgba(78,203,158,.8); margin-bottom: 10px; }
    h2 { font-family: var(--font-heading); font-size: 36px; color: #fff; line-height: 1.2; margin-bottom: 14px; }
    p.desc { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.65; max-width: 540px; }
  }

  .act-cta-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;

    .btn-white {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: all .25s;
      white-space: nowrap;
      background: #fff;
      color: var(--brand-dk);
      box-shadow: 0 8px 24px rgba(0,0,0,.2);
      &:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
    }

    .btn-outline-white {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: all .25s;
      white-space: nowrap;
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255,255,255,.35);
      &:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   TRAVEL INFO PAGE
   ═══════════════════════════════════════════════════════════ */
body {

  /* ── Travel Info Hero ─────────────────────────── */
  #ti-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/banner/angkor-wat.jpg') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  #ti-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(7,18,12,.48) 0%, rgba(7,18,12,.84) 100%);
  }

  #ti-hero .ti-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 72px;
  }

  .ti-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
    i { font-size: 10px; }
  }

  #ti-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 18px;

    em {
      font-style: italic;
      background: linear-gradient(135deg, #4ecb9e, #a8e8cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  #ti-hero .hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,.6);
    max-width: 540px;
    line-height: 1.75;
  }

  /* ── Quick Nav Pills ──────────────────────────── */
  #section-ti-nav {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 90;
  }

  .ti-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  .ti-nav-inner a {
    flex-shrink: 0;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;

    &:hover { color: var(--brand); border-color: var(--brand); }
    &.active { color: var(--brand); border-color: var(--brand); }
  }

  /* ── Quick Facts ──────────────────────────────── */
  #section-quick-facts .qf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .qf-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: box-shadow .25s, transform .25s;
    &:hover { box-shadow: 0 10px 36px rgba(26,107,82,.1); transform: translateY(-3px); }
  }

  .qf-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--brand-lt);
    color: var(--brand);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .qf-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  .qf-value {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
  }

  .qf-note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  /* ── Season Strip ─────────────────────────────── */
  #section-climate {
    background: var(--surface-1);
  }

  .climate-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .season-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .season-card {
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }

  .season-card.dry {
    background: linear-gradient(135deg, #fff8ec, #fef3d7);
    border: 1px solid #f5d88a;
  }

  .season-card.wet {
    background: linear-gradient(135deg, #eef6ff, #dceeff);
    border: 1px solid #93c5fd;
  }

  .season-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }

  .season-card.dry .season-icon { background: #fde68a; color: #b45309; }
  .season-card.wet .season-icon { background: #bfdbfe; color: #1d4ed8; }

  .season-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    font-family: var(--font-heading);
    margin-bottom: 4px;
  }

  .season-months {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
  }

  .season-card.dry .season-months { color: #b45309; }
  .season-card.wet .season-months { color: #1d4ed8; }

  .season-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

  /* Month bar */
  .month-bar {
    margin-top: 40px;
  }

  .month-bar h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
    font-family: var(--font-heading);
  }

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

  .month-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .month-item .m-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .month-item .m-bar {
    width: 100%;
    border-radius: 6px;
    height: 40px;
  }

  .month-item.peak .m-bar { background: #1a6b52; }
  .month-item.shoulder .m-bar { background: #a8e8cc; }
  .month-item.wet-m .m-bar { background: #bfdbfe; }

  .month-item .m-temp {
    font-size: 10px;
    color: var(--text-muted);
  }

  .month-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  .month-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .ml-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }

  /* ── Info Blocks (Visa, Health, Money) ────────── */
  .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .info-block {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
  }

  .info-block-head {
    padding: 24px 28px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--border);
  }

  .info-block-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--brand-lt);
    color: var(--brand);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .info-block-head h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    font-family: var(--font-heading);
  }

  .info-block-head p {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .info-block-body {
    padding: 20px 28px 24px;
  }

  .info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .info-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .info-list li i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--brand);
    font-size: 16px;
  }

  .info-list li strong {
    color: var(--dark);
    display: block;
    margin-bottom: 2px;
  }

  .info-tip {
    margin-top: 18px;
    background: var(--brand-lt);
    border-left: 3px solid var(--brand);
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--brand-dk);
    line-height: 1.6;
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }

  .info-tip i { flex-shrink: 0; margin-top: 1px; }

  /* ── Transport ────────────────────────────────── */
  #section-transport .transport-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .transport-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px;
    transition: box-shadow .25s, transform .25s;
    &:hover { box-shadow: 0 14px 48px rgba(26,107,82,.1); transform: translateY(-3px); }
  }

  .tc-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--brand-lt);
    color: var(--brand);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .transport-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    font-family: var(--font-heading);
    margin-bottom: 6px;
  }

  .tc-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 12px;
  }

  .transport-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

  /* ── Etiquette ────────────────────────────────── */
  #section-etiquette {
    background: var(--surface-1);
  }

  .etiquette-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .etiquette-col {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
  }

  .etiquette-col-head {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--font-heading);
  }

  .etiquette-col.do .etiquette-col-head {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
  }

  .etiquette-col.dont .etiquette-col-head {
    background: #fff1f2;
    color: #9f1239;
    border-bottom: 1px solid #fecdd3;
  }

  .etiquette-items {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .etiquette-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .etiquette-item i { flex-shrink: 0; margin-top: 2px; font-size: 16px; }
  .etiquette-col.do .etiquette-item i { color: #16a34a; }
  .etiquette-col.dont .etiquette-item i { color: #e11d48; }

  /* ── Emergency ────────────────────────────────── */
  #section-emergency .emergency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .emergency-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow .2s;
    &:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); }
  }

  .ec-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 12px;
  }

  .emergency-card.police .ec-icon { background: #eff6ff; color: #1d4ed8; }
  .emergency-card.ambulance .ec-icon { background: #fff1f2; color: #e11d48; }
  .emergency-card.fire .ec-icon { background: #fff7ed; color: #c2410c; }
  .emergency-card.tourist .ec-icon { background: var(--brand-lt); color: var(--brand); }

  .emergency-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    font-family: var(--font-heading);
  }

  .emergency-card .ec-number {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: .5px;
  }

  .emergency-card .ec-note {
    font-size: 11px;
    color: var(--text-muted);
  }

  /* ── CTA ──────────────────────────────────────── */
  #section-ti-cta {
    text-align: center;
    background: linear-gradient(180deg, #0d2a1e, #071410);
    color: #fff;
  }

  #section-ti-cta .sec-h {
    background: linear-gradient(135deg, #ffffff, #4ecb9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  #section-ti-cta .cta-sub {
    font-size: 16px;
    color: rgba(255,255,255,.55);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.7;
  }

  #section-ti-cta .cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-cta-primary {
    padding: 15px 34px;
    background: linear-gradient(135deg, #1a6b52, #0f4a38);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 26px rgba(26,107,82,.3);
    transition: all .25s;
    &:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26,107,82,.4); }
  }

  .btn-cta-ghost {
    padding: 15px 34px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    transition: all .25s;
    &:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOG PAGE
   ═══════════════════════════════════════════════════════════ */
body {

  /* ── Blog Hero ────────────────────────────────── */
  #blog-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/banner/angkor-wat.jpg') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  #blog-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(7,18,12,.48) 0%, rgba(7,18,12,.84) 100%);
  }

  #blog-hero .blog-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 64px;
  }

  #blog-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 16px;

    em {
      font-style: italic;
      background: linear-gradient(135deg, #4ecb9e, #a8e8cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  #blog-hero .hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,.6);
    max-width: 520px;
    line-height: 1.75;
  }

  /* ── Category filter ──────────────────────────── */
  #section-blog-main .blog-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 52px;
  }

  .filter-btn {
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    transition: all .2s;

    &:hover {
      border-color: var(--brand);
      color: var(--brand);
      background: var(--brand-lt);
    }

    &.active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
  }

  /* ── Featured article ─────────────────────────── */
  #section-blog-main .blog-featured {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin-bottom: 48px;
    min-height: 380px;
    box-shadow: 0 8px 40px rgba(0,0,0,.07);
    transition: box-shadow .25s, transform .25s;

    &:hover { box-shadow: 0 16px 56px rgba(0,0,0,.12); transform: translateY(-3px); }
  }

  .blog-featured-img {
    background: center / cover no-repeat;
    min-height: 320px;
  }

  .blog-featured-body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }

  .blog-featured-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .blog-featured-body h2 {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.25;
  }

  .blog-featured-body p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.75;
  }

  .blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    transition: gap .18s, color .18s;
    align-self: flex-start;

    &:hover { gap: 10px; color: var(--brand-dk); }
  }

  /* ── Cards grid ───────────────────────────────── */
  #section-blog-main .blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .blog-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow .25s, transform .25s;

    &:hover { box-shadow: 0 14px 48px rgba(26,107,82,.11); transform: translateY(-4px); }
    &.hidden { display: none; }
  }

  .blog-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: center / cover no-repeat;
    flex-shrink: 0;
  }

  .blog-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
  }

  .blog-card-body h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
  }

  .card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .card-stars {
    display: flex;
    gap: 1px;
    color: var(--gold);
    font-size: 12px;
  }

  .card-rating-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
  }

  .card-rating-count {
    font-size: 11px;
    color: var(--text-muted);
  }

  .blog-card-body p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    flex: 1;
  }

  .blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: auto;
  }

  .card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    span {
      font-size: 12px;
      font-weight: 600;
      color: var(--dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .card-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--brand);
    flex-shrink: 0;
  }

  .card-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  .card-date, .card-time {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 8px;
    white-space: nowrap;

    i { font-size: 11px; }
  }

  /* ── Load more ────────────────────────────────── */
  #section-blog-main .blog-load-more {
    text-align: center;
    margin-top: 52px;
  }

  .btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all .22s;

    &:hover {
      border-color: var(--brand);
      color: var(--brand);
      background: var(--brand-lt);
      box-shadow: 0 6px 20px rgba(26,107,82,.12);
    }
  }

  /* ── No results message ───────────────────────── */
  .blog-no-results {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOG DETAIL PAGE
   ═══════════════════════════════════════════════════════════ */
body {

  /* ── Reading progress bar ─────────────────────── */
  #reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #4ecb9e);
    width: 0%;
    z-index: 9999;
    transition: width .1s linear;
  }

  /* ── Article hero ─────────────────────────────── */
  #article-hero {
    min-height: 42vh;
    background: #0d2a1e url('../img/allimage/angkor-wat-temple.png') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  #article-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,18,12,.3) 0%, rgba(7,18,12,.88) 100%);
  }

  #article-hero .article-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 64px;
  }

  .article-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
    i { font-size: 10px; }
  }

  .article-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .article-hero-meta .tag { font-size: 12px; }

  .article-hero-meta span {
    font-size: 13px;
    color: rgba(255,255,255,.5);
  }

  #article-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4.5vw, 56px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin-bottom: 20px;
    max-width: 860px;
  }

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

  .article-author-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #4ecb9e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }

  .article-author-info strong {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
  }

  .article-author-info span {
    font-size: 12px;
    color: rgba(255,255,255,.5);
  }

  /* ── Main layout ──────────────────────────────── */
  #section-article {
    background: var(--surface-0);
  }

  #section-article .detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
  }

  /* ── Article body ─────────────────────────────── */
  .article-body {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 48px;
    min-width: 0;
  }

  .article-body .article-hero-meta {
    color: var(--text-muted);
  }

  .article-body .article-hero-meta span {
    color: var(--text-muted);
  }

  .article-body .article-author-row {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }

  .article-body .article-author-info strong {
    color: var(--text-primary);
  }

  .article-body .article-author-info span {
    color: var(--text-muted);
  }

  .article-body .article-intro {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
  }

  .article-body h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.25;
    margin: 40px 0 16px;
    letter-spacing: -.2px;
  }

  .article-body h3 {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    margin: 28px 0 12px;
  }

  .article-body p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 18px;
  }

  .article-body ul, .article-body ol {
    margin: 0 0 20px 0;
    padding-left: 0;
    list-style: none;

    li {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.8;
      padding: 6px 0 6px 24px;
      position: relative;
      border-bottom: 1px solid var(--border);

      &:last-child { border-bottom: none; }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 14px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
      }
    }
  }

  .article-body ol {
    counter-reset: list-counter;
    li {
      counter-increment: list-counter;
      &::before {
        content: counter(list-counter);
        background: none;
        color: var(--brand);
        font-weight: 700;
        font-size: 13px;
        top: 6px;
        border-radius: 0;
        width: auto;
        height: auto;
      }
    }
  }

  .article-body blockquote {
    border-left: 4px solid var(--brand);
    background: var(--brand-lt);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    margin: 28px 0;

    p {
      font-size: 16px;
      font-style: italic;
      color: var(--brand-dk);
      margin-bottom: 8px;
      font-family: var(--font-heading);
      line-height: 1.7;
    }

    cite {
      font-size: 12px;
      color: var(--text-muted);
      font-style: normal;
      font-weight: 600;
    }
  }

  .article-body .article-img {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    margin: 28px 0;
  }

  .article-body .article-img div {
    width: 100%;
    height: 340px;
    background: center / cover no-repeat;
  }

  .article-body .article-img figcaption {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 10px 0 0;
    font-style: italic;
  }

  .article-body .tip-box {
    background: linear-gradient(135deg, var(--brand-lt), #d4eee6);
    border: 1px solid rgba(26,107,82,.2);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 24px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }

  .tip-box-icon {
    font-size: 22px;
    color: var(--brand);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .tip-box-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-dk);
    margin-bottom: 4px;
  }

  .tip-box-text p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.7;
  }

  /* Share bar */
  .article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 40px 0;
    flex-wrap: wrap;
  }

  .article-share span {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    margin-right: 4px;
  }

  .share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    background: var(--surface-2);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all .2s;
    &:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
  }

  .share-btn.fb  { &:hover { background: #1877f2; color: #fff; border-color: #1877f2; } }
  .share-btn.tw  { &:hover { background: #000; color: #fff; border-color: #000; } }
  .share-btn.wa  { &:hover { background: #25d366; color: #fff; border-color: #25d366; } }
  .share-btn.ln  { &:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; } }

  /* Gallery lightbox */
  .gallery-lightbox-img {
    transition: transform .2s ease, opacity .2s ease;
  }

  .gallery-lightbox-img:hover {
    transform: scale(1.03);
    opacity: .92;
  }

  .gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(7, 18, 12, .94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .gallery-lightbox.open {
    display: flex;
  }

  .gallery-lightbox-stage {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .gallery-lightbox-stage img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }

  .gallery-lightbox-counter {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,.6);
    letter-spacing: .3px;
  }

  .gallery-lightbox-close,
  .gallery-lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }

  .gallery-lightbox-close:hover,
  .gallery-lightbox-nav:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.4);
  }

  .gallery-lightbox-close {
    top: 24px;
    right: 24px;
  }

  .gallery-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
  }

  .gallery-lightbox-prev { left: 24px; }
  .gallery-lightbox-next { right: 24px; }

  @media (max-width: 600px) {
    .gallery-lightbox-nav { width: 38px; height: 38px; font-size: 16px; }
    .gallery-lightbox-prev { left: 10px; }
    .gallery-lightbox-next { right: 10px; }
    .gallery-lightbox-close { top: 12px; right: 12px; }
  }

  /* Author bio */
  .author-bio-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .author-bio-av {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #4ecb9e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--font-heading);
  }

  .author-bio-text strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
    font-family: var(--font-heading);
  }

  .author-bio-text .author-role {
    font-size: 11px;
    color: var(--brand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 10px;
  }

  .author-bio-text p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
  }

  /* ── Right sidebar ────────────────────────────── */
  .detail-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sidebar-widget {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }

  .sidebar-widget h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-lt);
    display: flex;
    align-items: center;
    gap: 8px;
    i { color: var(--brand); font-size: 16px; }
  }

  /* TOC */
  .toc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .toc-list a {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: all .18s;
    line-height: 1.4;

    &::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--border);
      flex-shrink: 0;
      margin-top: 5px;
      transition: background .18s;
    }

    &:hover, &.active {
      background: var(--brand-lt);
      color: var(--brand);
      &::before { background: var(--brand); }
    }
  }

  /* Categories */
  .sw-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    font-size: 13px;
    color: var(--text-secondary);
    transition: color .15s;

    &:last-child { border-bottom: none; }
    &:hover { color: var(--brand); }

    .cat-count {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      padding: 2px 8px;
    }
  }

  /* Recent posts */
  .sw-recent-post {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;

    &:last-child { border-bottom: none; }
    &:hover .sw-recent-title { color: var(--brand); }
  }

  .sw-recent-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: center / cover no-repeat;
    flex-shrink: 0;
  }

  .sw-recent-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.35;
    margin-bottom: 5px;
    transition: color .15s;
    font-family: var(--font-heading);
  }

  .sw-recent-date {
    font-size: 11px;
    color: var(--text-muted);
  }

  /* Tags */
  .sw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .sw-tag {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    text-decoration: none;
    transition: all .18s;

    &:hover {
      background: var(--brand-lt);
      border-color: var(--brand);
      color: var(--brand);
    }
  }

  /* Sidebar newsletter */
  .sw-newsletter p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 14px;
  }

  .sw-nl-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .sw-nl-form input {
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--surface-0);
    color: var(--dark);
    transition: border-color .18s;
    &::placeholder { color: var(--text-muted); }
    &:focus { border-color: var(--brand); }
  }

  .sw-nl-form button {
    padding: 11px;
    background: linear-gradient(135deg, #1a6b52, #0f4a38);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: opacity .2s;
    &:hover { opacity: .88; }
  }

  /* ── Related articles ─────────────────────────── */
  #section-related .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .related-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .25s;

    &:hover { box-shadow: 0 14px 48px rgba(26,107,82,.11); transform: translateY(-4px); }
  }

  .related-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: center / cover no-repeat;
  }

  .related-body { padding: 20px; }

  .related-body h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
    margin: 8px 0 6px;
  }

  .related-body .related-meta {
    font-size: 11px;
    color: var(--text-muted);
  }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════ */
body {

  /* ── About Hero ───────────────────────────────── */
  #about-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/banner/angkor-wat.jpg') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  #about-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(7,18,12,.48) 0%, rgba(7,18,12,.84) 100%);
  }

  #about-hero .about-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 72px;
  }

  .about-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
    i { font-size: 10px; }
  }

  #about-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: 0;
    max-width: 840px;
    margin-bottom: 18px;

    em {
      font-style: italic;
      background: linear-gradient(135deg, #4ecb9e, #a8e8cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  #about-hero .hero-sub {
    font-size: clamp(16px, 1.35vw, 18px);
    color: rgba(255,255,255,.6);
    max-width: 620px;
    line-height: 1.75;
  }

  /* ── Story ────────────────────────────────────── */
  #section-story .story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  #section-story .story-text p {
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 16px;
    font-size: clamp(15px, 1.15vw, 16px);
    &:last-child { margin-bottom: 0; }
  }

  #section-story .story-img-wrap {
    position: relative;
    padding-bottom: 32px;
  }

  #section-story .story-img {
    width: 420px;
    height: 560px;
    max-width: 100%;
    flex-shrink: 0;
    border-radius: 20px;
    background: url('../img/allimage/artisans-angkor-siem-reap.jpg') center / cover no-repeat;
    background-size: cover;
    box-shadow: 0 28px 72px rgba(0,0,0,.18);
    overflow: hidden;
  }

  #section-story .story-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  #section-story .story-badge {
    position: absolute;
    bottom: 0;
    left: -24px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,.14);
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 200px;
  }

  #section-story .story-badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 22px;
    flex-shrink: 0;
  }

  #section-story .story-badge strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
  }

  #section-story .story-badge span {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* ── Stats bar ────────────────────────────────── */
  #section-stats {
    background: linear-gradient(135deg, #0a1a12, #0f3322);
    padding: 72px 0;
  }

  #section-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  #section-stats .stat-item {
    text-align: center;
    padding: 24px 32px;
    border-right: 1px solid rgba(255,255,255,.1);
    &:last-child { border-right: none; }
  }

  #section-stats .stat-icon {
    font-size: 28px;
    color: #4ecb9e;
    margin-bottom: 14px;
  }

  #section-stats .stat-number {
    font-family: var(--font-heading);
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
  }

  #section-stats .stat-label {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
  }

  /* ── Values ───────────────────────────────────── */
  #section-values .values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .value-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 32px;
    display: flex;
    gap: 20px;
    transition: box-shadow .25s, transform .25s;
    &:hover { box-shadow: 0 14px 48px rgba(26,107,82,.1); transform: translateY(-3px); }
  }

  .value-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--brand-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 26px;
    flex-shrink: 0;
  }

  .value-body h3 {
    font-size: clamp(17px, 1.25vw, 19px);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    font-family: var(--font-heading);
  }

  .value-body p {
    font-size: clamp(14px, 1.05vw, 15px);
    color: var(--text-secondary);
    line-height: 1.75;
  }

  /* ── Team ─────────────────────────────────────── */
  #section-team .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .team-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    &:hover { box-shadow: 0 18px 56px rgba(26,107,82,.12); transform: translateY(-4px); }
  }

  .team-photo {
    width: 100%;
    aspect-ratio: 4/3;
    background: center / cover no-repeat;
    position: relative;
    overflow: hidden;
  }

  .team-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .team-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10,20,14,.6) 100%);
  }

  .team-info { padding: 24px; }

  .team-info h3 {
    font-size: clamp(19px, 1.35vw, 21px);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 3px;
    font-family: var(--font-heading);
  }

  .team-role {
    font-size: 11px;
    color: var(--brand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 12px;
  }

  .team-bio {
    font-size: clamp(13px, 1vw, 14px);
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 14px;
  }

  .team-langs { display: flex; gap: 6px; flex-wrap: wrap; }

  .lang-tag {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
  }

  /* ── About CTA ────────────────────────────────── */
  #section-about-cta {
    text-align: center;
    background: linear-gradient(180deg, #0d2a1e, #071410);
    color: #fff;
  }

  #section-about-cta .sec-h {
    background: linear-gradient(135deg, #ffffff, #4ecb9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  #section-about-cta .cta-sub {
    font-size: 16px;
    color: rgba(255,255,255,.55);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.7;
  }

  #section-about-cta .cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* About page utility replacements */
  .nav-link-current {
    color: rgba(255,255,255,.9) !important;
  }

  .mob-tours-link-disabled {
    pointer-events: none;
  }

  .values-head {
    text-align: center;
  }

  .values-title {
    max-width: 480px;
    margin: 0 auto 12px;
  }

  .values-sub {
    margin: 0 auto 48px;
  }

  .team-photo-sothy {
    background-image: url('../img/allimage/angkor-wat-temple.png');
  }

  .team-photo-maly {
    background-image: url('../img/allimage/kompong-pluk.jpg');
  }

  .team-photo-dara {
    background-image: url('../img/allimage/artisans-angkor-siem-reap.jpg');
  }

  .nl-label {
    margin-bottom: 8px;
  }

  .footer-brand-name {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .footer-brand-highlight {
    color: #4ecb9e;
  }

  .footer-address {
    font-style: normal;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.4);
    line-height: 1.7;
  }

  .footer-muted-link {
    color: rgba(255,255,255,.4);
    text-decoration: none;
  }

  .footer-socials-spaced {
    margin-top: 16px;
  }

  .footer-bottom-link {
    color: rgba(255,255,255,.3);
  }

  .footer-cert {
    color: rgba(255,255,255,.25);
  }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════ */
body {

  /* ── Contact Hero ─────────────────────────────── */
  #contact-hero {
    min-height: 518px;
    background: #0d2a1e url('../img/banner/angkor-wat.jpg') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  #contact-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(7,18,12,.5) 0%, rgba(7,18,12,.85) 100%);
  }

  #contact-hero .contact-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 72px;
  }

  .contact-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 6px;

    a {
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .15s;
      &:hover { color: rgba(255,255,255,.75); }
    }
    i { font-size: 10px; }
  }

  #contact-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 18px;

    em {
      font-style: italic;
      background: linear-gradient(135deg, #4ecb9e, #a8e8cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  #contact-hero .hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,.6);
    max-width: 480px;
    line-height: 1.75;
  }

  /* ── Contact main section ─────────────────────── */
  #section-contact .contact-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 56px;
    align-items: start;
  }

  /* Info cards */
  .info-cards { display: flex; flex-direction: column; gap: 16px; }

  .info-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: box-shadow .22s, transform .22s;
    &:hover { box-shadow: 0 10px 36px rgba(26,107,82,.1); transform: translateY(-2px); }
  }

  .info-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--brand-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 22px;
    flex-shrink: 0;
  }

  .info-card-body { flex: 1; }

  .info-card-body h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .info-card-body p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .info-card-body a {
    font-size: 14px;
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
    &:hover { color: var(--brand-dk); }
  }

  /* Social row under info cards */
  .contact-socials {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .contact-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--surface-2);
    transition: all .2s;

    &:hover {
      background: var(--brand-lt);
      border-color: var(--brand);
      color: var(--brand);
    }
    i { font-size: 16px; }
  }

  /* Contact form */
  .contact-form-wrap {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
  }

  .contact-form-wrap h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    font-family: var(--font-heading);
  }

  .contact-form-wrap .form-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 28px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }

  .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: .02em;
  }

  .form-group .req {
    color: var(--brand);
    margin-left: 2px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--dark);
    background: var(--surface-0);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    width: 100%;
    -webkit-appearance: none;

    &::placeholder { color: var(--text-muted); }

    &:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(26,107,82,.1);
    }
  }

  .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2347665a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
  }

  .form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
  }

  .form-submit {
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, #1a6b52, #0f4a38);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(26,107,82,.28);
    transition: all .25s;
    margin-top: 8px;

    &:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(26,107,82,.38); }
    &:active { transform: translateY(0); }
  }

  .form-note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  /* ── Map section ──────────────────────────────── */
  #section-map { padding: 56px 0; }

  .map-wrap {
    width: 100%;
    height: 420px;
    background: var(--surface-1);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.1);
  }

  .map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  .map-overlay-card {
    position: absolute;
    top: 32px;
    left: 32px;
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,.14);
    min-width: 240px;
    z-index: 2;
  }

  .map-overlay-card .map-logo {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--brand);
    margin-bottom: 8px;
    letter-spacing: .5px;
  }

  .map-overlay-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .map-overlay-card .map-directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    transition: gap .18s;
    &:hover { gap: 10px; color: var(--brand-dk); }
  }

  /* ── FAQ strip ────────────────────────────────── */
  #section-contact-faq .faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .faq-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
  }

  .faq-card .faq-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 20px;
    margin-bottom: 14px;
  }

  .faq-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    font-family: var(--font-heading);
  }

  .faq-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.75;
  }
}
/* Contact page utility replacements */
body {
  .contact-heading-title {
    margin-bottom: 8px;
  }

  .contact-heading-sub {
    margin-bottom: 32px;
  }

  .contact-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
  }

  .contact-info-note {
    margin-top: 2px;
    font-size: 12px;
  }

  .contact-socials-spaced {
    margin-top: 24px;
  }

  .map-logo-accent {
    color: var(--gold);
  }

  .contact-faq-head {
    text-align: center;
  }

  .contact-faq-title {
    max-width: 420px;
    margin: 0 auto 12px;
  }

  .contact-faq-sub {
    margin: 0 auto 48px;
  }
}