* {
          box-sizing: border-box;
          --primary-color: #142233;
      }

      body {
          font-family: "Jost", sans-serif;
          background: #f7f3ec;
          color: #0c1a27;
          overflow-x: hidden;
          top: 0px !important;
      }

      h1,
      h2,
      h3,
      h4 {
          font-family: "Playfair Display", serif;
      }

      /* Scrollbar */
      ::-webkit-scrollbar {
          width: 6px;
      }

      ::-webkit-scrollbar-track {
          background: #0c1a27;
      }

      ::-webkit-scrollbar-thumb {
          background: #c8a45a;
      }

      input, select, textarea {
          outline: none !important;
      }

      /* Nav */
      .nav-link {
          position: relative;
          font-size: 12px;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #a8b8c6;
          transition: all 0.25s ease;
      }

      .nav-link::after {
          content: "";
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 1px;
          background: #c8a45a;
          transition: 0.3s;
      }

      .nav-link.active {
          color: #c8a45a;
      }

      .nav-link.active::after {
          width: 100%;
      }

      .nav-link:hover {
          color: #c8a45a;
      }

      .nav-link:hover::after {
          width: 100%;
      }

      .select2-container .select2-selection--single {
          height: 42px !important;
          border-radius: 0px !important;
          border: 1px solid #e5e7eb !important;
          padding: 6px 10px;
      }

      /* Ẩn thanh google translate */
      .skiptranslate {
          display: none !important;
      }

      .lang-btn {
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          background: white;
          padding: 4px;
      }

      /* Buttons */
      .btn-gold {
          background: #c8a45a;
          color: #0c1a27;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 13px 30px;
          border: none;
          cursor: pointer;
          transition: 0.25s;
          display: inline-flex;
          align-items: center;
          gap: 10px;
      }

      .btn-gold:hover {
          background: #e2c07e;
          transform: translateY(-2px);
      }

      .btn-outline-gold {
          border: 1px solid #c8a45a;
          color: #c8a45a;
          font-size: 11px;
          font-weight: 500;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 12px 28px;
          background: transparent;
          cursor: pointer;
          transition: 0.25s;
          display: inline-flex;
          align-items: center;
          gap: 8px;
      }

      .btn-outline-gold:hover {
          background: #c8a45a;
          color: #0c1a27;
      }

      .btn-outline-white {
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: #fff;
          font-size: 11px;
          font-weight: 500;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 12px 28px;
          background: transparent;
          cursor: pointer;
          transition: 0.25s;
      }

      .btn-outline-white:hover {
          border-color: #c8a45a;
          color: #c8a45a;
      }

      /* Section label */
      .sec-label {
          font-size: 10px;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: #c8a45a;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .sec-label::before {
          content: "";
          width: 28px;
          height: 1px;
          background: #c8a45a;
      }

      /* Cards */
      .prop-card {
          background: #fff;
          overflow: hidden;
          transition: 0.35s;
          cursor: pointer;
      }

      .prop-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 30px 70px rgba(12, 26, 39, 0.15);
      }

      .prop-card .card-img {
          overflow: hidden;
          height: 220px;
      }

      .prop-card .card-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: 0.5s;
      }

      .prop-card:hover .card-img img {
          transform: scale(1.08);
      }

      /* Badge */
      .badge-buy {
          background: #c8a45a;
          color: #0c1a27;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 4px 12px;
      }

      .badge-rent {
          background: #0c1a27;
          color: #c8a45a;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 4px 12px;
      }

      .badge-hot {
          background: #dc2626;
          color: #fff;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 4px 12px;
      }

      /* Search bar */
      .search-field {
          border-right: 1px solid #ede7db;
          flex: 1;
          padding: 0 20px;
      }

      .search-field:last-child {
          border-right: none;
      }

      .search-field label {
          font-size: 9px;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #7a8ea0;
          display: block;
          margin-bottom: 4px;
      }

      .search-field select,
      .search-field input {
          border: none;
          background: transparent;
          font-family: "Jost", sans-serif;
          font-size: 14px;
          color: #0c1a27;
          outline: none;
          width: 100%;
          padding: 0;
      }

      /* Tab */
      .tab-btn {
          padding: 10px 28px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 2px;
          text-transform: uppercase;
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #7a8ea0;
          background: transparent;
          cursor: pointer;
          transition: 0.2s;
      }

      .tab-btn.active,
      .tab-btn:hover {
          background: #c8a45a;
          color: #0c1a27;
          border-color: #c8a45a;
      }

      /* AOS simple */
      [data-aos] {
          opacity: 0;
          transform: translateY(30px);
          transition:
              opacity 0.7s ease,
              transform 0.7s ease;
      }

      [data-aos].aos-in {
          opacity: 1;
          transform: none;
      }

      [data-aos="fade-right"] {
          transform: translateX(-30px);
      }

      [data-aos="fade-right"].aos-in {
          transform: none;
      }

      [data-aos="zoom"] {
          transform: scale(0.95);
      }

      [data-aos="zoom"].aos-in {
          transform: none;
      }

      /* Counter */
      .counter-num {
          font-family: "Playfair Display", serif;
          font-size: 52px;
          font-weight: 600;
          color: #c8a45a;
          line-height: 1;
      }

      /* Service hover */
      .serv-card {
          background: #fff;
          padding: 44px 36px;
          border-bottom: 3px solid transparent;
          transition: 0.35s;
      }

      .serv-card:hover {
          background: #0c1a27;
          border-color: #c8a45a;
          transform: translateY(-4px);
      }

      .serv-card:hover .serv-title {
          color: #fff;
      }

      .serv-card:hover .serv-desc {
          color: #a8b8c6;
      }

      .serv-card:hover .serv-icon {
          border-color: #c8a45a;
          background: rgba(200, 164, 90, 0.1);
      }

      .serv-card:hover .serv-icon i {
          color: #c8a45a;
      }

      .serv-icon {
          width: 58px;
          height: 58px;
          border: 1px solid #ede7db;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 28px;
          transition: 0.3s;
      }

      .serv-icon i {
          font-size: 22px;
          color: #0c1a27;
          transition: 0.3s;
      }

      .serv-title {
          font-family: "Playfair Display", serif;
          font-size: 20px;
          color: #0c1a27;
          margin-bottom: 10px;
          transition: 0.3s;
      }

      .serv-desc {
          font-size: 13px;
          line-height: 1.75;
          color: #7a8ea0;
          transition: 0.3s;
      }

      /* Agent */
      .agent-card {
          background: #fff;
          text-align: center;
          padding: 40px 24px 32px;
          transition: 0.3s;
          position: relative;
          overflow: hidden;
      }

      .agent-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: #c8a45a;
          transform: scaleX(0);
          transition: 0.35s;
      }

      .agent-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 24px 60px rgba(12, 26, 39, 0.12);
      }

      .agent-card:hover::before {
          transform: scaleX(1);
      }

      .agent-avatar {
          width: 88px;
          height: 88px;
          border-radius: 50%;
          object-fit: cover;
          border: 3px solid #ede7db;
          margin: 0 auto 20px;
          display: block;
      }

      /* Timeline */
      .step-line {
          position: absolute;
          top: 28px;
          left: 50%;
          width: 100%;
          height: 1px;
          background: linear-gradient(90deg, #c8a45a, rgba(200, 164, 90, 0.2));
      }

      /* Testimonial */
      .testi-card {
          background: #142233;
          padding: 40px;
          position: relative;
      }

      .testi-card::before {
          content: '"';
          position: absolute;
          top: 20px;
          left: 28px;
          font-family: "Playfair Display", serif;
          font-size: 80px;
          color: rgba(200, 164, 90, 0.15);
          line-height: 1;
      }

      /* Gradient text */
      .grad-text {
          background: linear-gradient(135deg, #c8a45a, #e2c07e);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      /* Floating label on hero */
      .hero-float {
          background: rgba(12, 26, 39, 0.85);
          backdrop-filter: blur(12px);
          border: 1px solid rgba(200, 164, 90, 0.2);
          padding: 20px 28px;
      }

      /* Map placeholder */
      .map-placeholder {
          background: linear-gradient(135deg, #0c1a27, #1c2e41);
          position: relative;
          overflow: hidden;
      }

      .map-placeholder::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image:
              linear-gradient(rgba(200, 164, 90, 0.05) 1px, transparent 1px),
              linear-gradient(90deg, rgba(200, 164, 90, 0.05) 1px, transparent 1px);
          background-size: 40px 40px;
      }

      /* Sticky nav on scroll */
      nav {
          transition:
              background 0.3s,
              box-shadow 0.3s;
      }

      nav.scrolled {
          box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
      }

      /* Mobile menu */
      #mobileMenu {
          transition:
              max-height 0.4s ease,
              opacity 0.3s;
      }

      /* BREADCRUMB */
      .breadcrumb {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 11px;
          letter-spacing: 1px;
          text-transform: uppercase;
          color: #7A8EA0;
      }

      .breadcrumb a {
          color: #7A8EA0;
          text-decoration: none;
          transition: .2s;
      }

      .breadcrumb a:hover {
          color: #C8A45A;
      }

      .breadcrumb .sep {
          color: #C8A45A;
      }

      /* SPECS GRID */
      .spec-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px 16px;
          background: #F7F3EC;
          border: 1px solid #EDE7DB;
          transition: .2s;
      }

      .spec-item:hover {
          border-color: #C8A45A;
          background: #fff;
      }

      .spec-icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
      }

      .spec-icon i {
          font-size: 18px;
          color: #9E7B38;
      }

      .spec-val {
          font-family: 'Playfair Display', serif;
          font-size: 20px;
          font-weight: 500;
          color: #0C1A27;
          margin-bottom: 2px;
      }

      .spec-label {
          font-size: 10px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: #7A8EA0;
      }

      /* GALLERY */
      .gallery-main {
          position: relative;
          overflow: hidden;
          cursor: pointer;
          height: 520px;
      }

      .gallery-main img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform .6s ease;
      }

      .gallery-main:hover img {
          transform: scale(1.03);
      }

      .gallery-thumb {
          overflow: hidden;
          cursor: pointer;
          position: relative;
      }

      .gallery-thumb img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform .5s, filter .3s;
      }

      .gallery-thumb:hover img {
          transform: scale(1.06);
      }

      .gallery-thumb.active::after {
          content: '';
          position: absolute;
          inset: 0;
          border: 3px solid #C8A45A;
      }

      .gallery-thumb::before {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(12, 26, 39, .3);
          z-index: 1;
          transition: opacity .3s;
      }

      .gallery-thumb:hover::before {
          opacity: 0;
      }

      .gallery-counter {
          position: absolute;
          bottom: 20px;
          right: 20px;
          background: rgba(12, 26, 39, .75);
          backdrop-filter: blur(8px);
          color: #fff;
          font-size: 12px;
          padding: 6px 16px;
          letter-spacing: 1px;
          z-index: 2;
      }

      .play-video {
          position: absolute;
          bottom: 60px;
          left: 20px;
          background: rgba(12, 26, 39, .8);
          backdrop-filter: blur(8px);
          color: #C8A45A;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 8px 20px;
          border: 1px solid rgba(200, 164, 90, .35);
          cursor: pointer;
          z-index: 2;
          transition: .2s;
      }

      .view-all-btn {
          position: absolute;
          bottom: 20px;
          left: 20px;
          background: rgba(12, 26, 39, .8);
          backdrop-filter: blur(8px);
          color: #C8A45A;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 8px 20px;
          border: 1px solid rgba(200, 164, 90, .35);
          cursor: pointer;
          z-index: 2;
          transition: .2s;
      }

      .view-all-btn:hover, .play-video:hover {
          background: #C8A45A;
          color: #0C1A27;
      }

      /* TABS */
      .tab-nav {
          display: flex;
          border-bottom: 1px solid #EDE7DB;
      }

      .tab-item {
          padding: 14px 28px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: #7A8EA0;
          cursor: pointer;
          border-bottom: 2px solid transparent;
          margin-bottom: -1px;
          transition: .2s;
      }

      .tab-item.active {
          color: #C8A45A;
          border-bottom-color: #C8A45A;
      }

      .tab-item:hover {
          color: #C8A45A;
      }

      .tab-panel {
          display: none;
      }

      .tab-panel.active {
          display: block;
      }

      /* AMENITIES */
      .amenity {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 0;
          border-bottom: 1px solid #EDE7DB;
      }

      .amenity:last-child {
          border-bottom: none;
      }

      .amenity i {
          color: #C8A45A;
          width: 18px;
          text-align: center;
          font-size: 14px;
      }

      .amenity span {
          font-size: 13px;
          color: #0C1A27;
      }

      /* CONTACT FORM */
      .form-input {
          width: 100%;
          background: #F7F3EC;
          border: 1px solid #EDE7DB;
          color: #0C1A27;
          padding: 13px 16px;
          font-family: 'Jost', sans-serif;
          font-size: 13px;
          outline: none;
          transition: .2s;
      }

      .form-input:focus {
          border-color: #C8A45A;
          background: #fff;
      }

      .form-input::placeholder {
          color: #A8B8C6;
      }

      .form-label {
          font-size: 10px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: #7A8EA0;
          display: block;
          margin-bottom: 6px;
      }

      /* BADGE */
      .badge-buy {
          background: #C8A45A;
          color: #0C1A27;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 4px 12px;
          display: inline-block;
      }

      .badge-hot {
          background: #DC2626;
          color: #fff;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 4px 12px;
          display: inline-block;
      }

      .badge-new {
          background: #0C1A27;
          color: #C8A45A;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 4px 12px;
          display: inline-block;
      }

      /* RELATED CARD */
      .rel-card {
          background: #fff;
          overflow: hidden;
          transition: .35s;
          cursor: pointer;
      }

      .rel-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 20px 50px rgba(12, 26, 39, .13);
      }

      .rel-card .ri {
          overflow: hidden;
          height: 200px;
      }

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

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

      /* BTN */

      .btn-gold:hover {
          background: #E2C07E;
      }

      .btn-navy {
          background: #0C1A27;
          color: #C8A45A;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 14px 28px;
          border: none;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: .25s;
          width: 100%;
          justify-content: center;
      }

      .btn-navy:hover {
          background: #142233;
      }

      .btn-outline {
          background: transparent;
          color: #C8A45A;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 13px 28px;
          border: 1px solid #C8A45A;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: .25s;
      }

      .btn-outline:hover {
          background: #C8A45A;
          color: #0C1A27;
      }

      /* MAP PLACEHOLDER */
      .map-box {
          background: linear-gradient(135deg, #0C1A27 0%, #1C2E41 100%);
          position: relative;
          overflow: hidden;
          height: 350px;
      }

      .map-pin {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -60%);
          text-align: center;
      }

      .map-pin-dot {
          width: 20px;
          height: 20px;
          background: #C8A45A;
          border-radius: 50%;
          margin: 0 auto;
          animation: pinPulse 2s infinite;
      }


      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }

      .no-scrollbar {
          -ms-overflow-style: none;
          scrollbar-width: none;
      }

      .map-pin-label {
          background: #C8A45A;
          color: #0C1A27;
          font-size: 11px;
          font-weight: 700;
          padding: 5px 14px;
          margin-top: 8px;
          white-space: nowrap;
          letter-spacing: 1px;
      }

      /* SECTION LABEL */
      .sec-label {
          font-size: 10px;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: #C8A45A;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .sec-label::before {
          content: '';
          width: 24px;
          height: 1px;
          background: #C8A45A;
          display: inline-block;
      }

      /* PROGRESS BAR */
      .progress-bar {
          height: 4px;
          background: #EDE7DB;
          margin-top: 6px;
      }

      .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #C8A45A, #E2C07E);
          transition: width 1s ease;
      }

      /* MODAL */
      .modal-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, .92);
          z-index: 999;
          display: none;
          align-items: center;
          justify-content: center;
      }

      .modal-overlay.open {
          display: flex;
      }

      .modal-inner {
          position: relative;
          max-width: 1100px;
          width: 100%;
          max-height: 90vh;
      }

      .modal-img {
          width: 100%;
          max-height: 85vh;
          object-fit: contain;
      }

      .modal-close {
          position: absolute;
          top: 10px;
          right: 20px;
          background: transparent;
          border: none;
          color: #fff;
          font-size: 26px;
          cursor: pointer;
      }

      .modal-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(200, 164, 90, .9);
          color: #0C1A27;
          border: none;
          width: 48px;
          height: 48px;
          font-size: 18px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: .2s;
      }

      .modal-nav:hover {
          background: #C8A45A;
      }

      .modal-prev {
          left: 0px;
      }

      .modal-next {
          right: 0px;
      }

      /* SHARE */
      .share-btn {
          width: 36px;
          height: 36px;
          border: 1px solid #EDE7DB;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: .2s;
          font-size: 13px;
          color: #7A8EA0;
      }

      .share-btn:hover {
          border-color: #C8A45A;
          color: #C8A45A;
      }

      /* TIMELINE/schedule */
      .sched-item {
          display: flex;
          gap: 16px;
          padding: 16px 0;
          border-bottom: 1px solid #EDE7DB;
      }

      .sched-item:last-child {
          border-bottom: none;
      }

      .sched-dot {
          width: 10px;
          height: 10px;
          background: #C8A45A;
          border-radius: 50%;
          flex-shrink: 0;
          margin-top: 5px;
      }

      /* AOS */
      [data-aos] {
          opacity: 0;
          transform: translateY(24px);
          transition: opacity .65s ease, transform .65s ease;
      }

      [data-aos].in {
          opacity: 1;
          transform: none;
      }

      .content.collapsed {
          max-height: 526px;
          overflow: hidden;
          position: relative;
      }

      .content.collapsed::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 40px;
          background: linear-gradient(to bottom, transparent, white);
      }

      #mobileMenu {
          transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }

      #mobileMenu.opening {
          animation: menuBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      }


      @media screen and (max-width: 991px) {}

      @media screen and (max-width: 767px) {
          .hero-float {
              padding: 10px;
          }

          .gallery-main {
              height: 360px;
          }

          .swiper-button-next,
          .swiper-button-prev {
              display: none;
          }
      }

      @media screen and (max-width: 575px) {}