:root {
  --trip-text: #2f2a38;
  --trip-muted: #4c4455;
  --trip-card-shadow: 0 20px 45px rgba(141, 103, 173, 0.14);
  --ai-purple-dark: #4c1d95;
  --ai-purple-light: #a78bfa;
}

/* === UTILITY CLASSES (Replacing Inline Styles) === */
.ih-title-editable {
  outline: none;
  border-bottom: 2px dashed transparent;
  transition: border-color 0.2s;
  padding: 2px 4px;
  border-radius: 4px;
}

.ih-title-editable:hover {
  border-bottom-color: #ccc;
  background: rgba(0, 0, 0, 0.03);
}

.ih-title-editable:focus {
  border-bottom-color: #6d28d9;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: text;
}

.hide-initial {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

.text-underline {
  text-decoration: underline;
}

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

.flex-align-center-gap16 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.flex-align-center-gap4 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-flag-img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
}

.lang-text-style {
  font-weight: 500;
  font-size: 16px;
  color: #212529;
}

.lang-menu-flag {
  width: 24px;
  height: 16px;
  margin-right: 8px;
}

.user-toggle-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.user-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-info-text-container {
  display: none;
  flex-direction: column;
}

.user-name-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.user-email-text {
  font-size: 12px;
  color: #A6A8A9;
  line-height: 16px;
}

.user-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.user-name-bold {
  font-weight: 600;
}

.user-email-muted {
  font-size: 13px;
  color: #666;
}

.btn-transparent-noborder {
  border: none;
  background: transparent;
}

.opacity-50-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.align-items-start {
  align-items: flex-start;
}

/* === L?P PH? LOADING AI T�NH TO�N === */
#aiGeneratingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ai-loading-content {
  text-align: center;
}

.ai-spin {
  transform-origin: 50% 50%;
  animation: spin 4s linear infinite;
}

.ai-spin-reverse {
  transform-origin: 50% 50%;
  animation: spinReverse 5s linear infinite;
}

.ai-pulse {
  transform-origin: 50% 50%;
  animation: ping 1.5s ease-in-out infinite;
}

.ai-loading-text {
  font-size: 24px;
  font-weight: bold;
  color: var(--ai-purple-dark);
  margin-top: 15px;
}

.ai-loading-desc {
  color: var(--trip-muted);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* === GIAO DI?N SAU KHI L�N L?CH THEO FIGMA === */
body.is-itinerary-mode .trip-main-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

body.is-itinerary-mode .itinerary-full-header {
  display: block !important;
  width: 100%;
  background: #fff;
  flex-shrink: 0;
  z-index: 10;
}

body.is-itinerary-mode .itinerary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 40px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0;
}

body.is-itinerary-mode .trip-content-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

body.is-itinerary-mode .trip-landing {
  width: 33%;
  max-width: 45vw;
  /* Tr�nh chi?m qu� n?a m�n h�nh tr�n m�y nh? */
  min-width: 400px;
  flex-shrink: 0;
  border-right: 1px solid #e2e8f0;
  background: #f8fbfb;
  position: relative;
  height: 100%;
}

body.is-itinerary-mode .trip-landing__container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100% - 100px);
}

body.is-itinerary-mode .trip-hero,
body.is-itinerary-mode .trip-options,
body.is-itinerary-mode .planner-language-switch,
body.is-itinerary-mode #plannerTabsSection {
  display: none !important;
}

body.is-itinerary-mode .trip-chat-interface {
  display: flex !important;
  width: 100%;
  background: #f8fbfb;
  flex-grow: 1;
  flex-direction: column;
  height: calc(100% - 160px);
  /* Ch?a 160px bi�n du?i cho Composer */
  max-height: calc(100% - 160px);
  overflow-y: auto;
}

body.is-itinerary-mode .trip-composer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  z-index: 10;
  padding: 16px 20px;
}

/* Khung chi ti?t l?ch tr�nh b�n ph?i (Center-Area trong Figma) */
body.is-itinerary-mode #tripItineraryBoard {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  background: #f5f3ff;
  padding: 24px 40px;
  overflow-y: auto;
}

/* Header Itinerary Figma */
.itinerary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
}

.ih-title {
  color: var(--Content-text-primary, #212529);
  font-family: "Roboto";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  /* 133.333% */
  flex: 1;
  margin-bottom: 4px;
}

.ih-title-group i {
  margin-bottom: 4px;
  cursor: pointer;
}

.ih-meta {
  display: flex;
  gap: 24px;
  color: #64748b;
  font-size: 16px;
}

.ih-meta-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ih-meta-item i {
  margin-right: 6px;
  color: #8b5cf6;
  /* Icon color from Figma */
}

.ih-actions {
  display: flex;
  gap: 0;
}

.ih-actions .btn {
  border-color: #e2e8f0;
  color: #475569;
  border-radius: 8px;
  padding: 8px;
  border: none;
}

.ih-actions .btn:disabled {
  opacity: 0.25;
}

.ih-actions .btn:hover {
  background: #f1f5f9;
}

.spinner-border .sr-only {
  font-size: 0
}

/* Tinh ch?nh UI renderScheduleUI (timeline style) gi?ng Figma */
.schedule-container {
  width: 100%;
  /* max-width: 900px; */
  margin: 0 auto;
}

.schedule-tabs {
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 30px;
  gap: 10px;
}

.schedule-tabs .nav-link {
  color: #64748b;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0;
}

.schedule-tabs .nav-link.active {
  color: #8b5cf6;
  background: transparent;
  border-bottom-color: #8b5cf6;
}

/* Styles Cho Timeline Card gi?ng Figma */
.tl-item {
  position: relative;
  display: flex;
  margin-bottom: 40px;
}

.tl-item:last-child::before {
  display: none;
}

.tl-time-box {
  width: 50px;
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-icon-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e0e7ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* M�u n?n icon figma */
.tl-content-box {
  flex: 1;
  padding-left: 20px;
}

.tl-title-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  margin-top: 8px;
}

.tl-pill-time {
  color: #475569;
  font-weight: 600;
  font-size: 16px;
}

.tl-activity-text {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

/* The Location Card inside the timeline */
.tl-location-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.tl-loc-img-placeholder {
  width: 140px;
  height: 120px;
  background: #cbd5e1;
  border-radius: 8px;
  flex-shrink: 0;
}

.tl-loc-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tl-loc-heading {
  font-weight: bold;
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 8px;
}

.tl-loc-addr,
.tl-loc-desc {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tl-transit-bar {
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4d5154;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.tl-transit-dot {
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  background-color: #a6a8a9;
  border-radius: 50%;
}

html,
body {
  min-height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  src:
    local("Roboto"),
    url("/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  src:
    local("Playfair Display"),
    url("/assets/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
}

/******************************************************************************************************************
**********************************************PLAN TRIP START**************************************************
******************************************************************************************************************/

body.plantrip-body {
  margin: 0;
  font-family: "Roboto", "Segoe UI", sans-serif;
  color: var(--trip-text);
  background: url(../images/banner/bg-plantrip.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.plantrip-main {
  min-height: 100vh;
}

.trip-landing {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 100px);
}

.trip-landing__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1192px);
  margin: 0 auto;
  /* 1. Bi?n container th�nh Flexbox c?t */
  display: flex;
  flex-direction: column;
  /* 2. �?m b?o container cao �t nh?t b?ng 1 m�n h�nh */
  min-height: 100vh;
  /* 3. Padding an to�n tr�n/du?i d? kh�ng d�nh s�t m�p (t�y ch?nh theo � b?n) */
  padding-top: 20px;
  padding-bottom: 40px;
  gap: 0;
}

/* N�t ch?n ng�n ng? theo m?u h�nh ?nh */
.planner-lang-selector {
  position: absolute;
  top: 40px;
  right: 20px;
  z-index: 100;
}

.planner-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--trip-text);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.planner-lang-btn:hover {
  background: #f8f9fa;
}

.planner-lang-btn::after {
  margin-left: 4px;
  vertical-align: middle;
}

.planner-lang-menu {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  margin-top: 8px !important;
}

.planner-lang-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--trip-text);
}

.planner-lang-menu .dropdown-item.active {
  background-color: rgba(112, 8, 231, 0.1);
  color: #7008e7;
  font-weight: 600;
}

.flag-icon {
  font-size: 16px;
  line-height: 1;
}

.trip-landing__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.45;
  pointer-events: none;
}

.trip-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.trip-hero__branding {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  gap: 24px;
}

.trip-hero__logo {
  width: min(120px, 30vw);
  object-fit: contain;
}

.trip-hero__title-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.trip-hero__title-text {
  display: flex;
  flex-direction: column;
  color: #551693;
  /* Purple base from design */
}

.trip-hero__title-main {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}

.trip-hero__title-sub {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.trip-hero__title-divider {
  width: 2px;
  height: 48px;
  background-color: #B295D3;
}

.trip-hero__title-badge {
  color: #551693;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.trip-hero__message {
  color: var(--Content-text-primary, #212529);
  /* Body/Large */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.5px;
}

.trip-hero__message p {
  margin: 0 0 4px;
  text-align: center;
}

.trip-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.trip-options__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.trip-options__stack {
  display: grid;
  gap: 16px;
}

.trip-options__extra {
  display: flex;
  gap: 16px;
  background: linear-gradient(90deg, #e7d4ff 0%, #fae5ff 100%);
  border-radius: 16px;
  height: 198px;
  padding: 0;
}

.trip-card {
  position: relative;
  display: grid;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--trip-card-shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  align-content: start;
}

.trip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 54px rgba(141, 103, 173, 0.18);
}

.trip-card--plan {
  border-radius: 16px;
  background: linear-gradient(125deg, #ffe372 0%, #fffae4 100%);
  box-shadow: 1px 1px 8px 0 rgba(211, 162, 0, 0.12);
  display: flex;
  padding: 24px;
  flex-direction: column;
  gap: 4px;
  flex: 1 0 0;
  align-self: stretch;
}

.trip-card--stay,
.trip-card--service {
  min-height: 153px;
  padding: 22px 24px;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
}

.trip-card--stay {
  background: linear-gradient(135deg, #69cbff 0%, #bbeef4 100%);
}

.trip-card--service {
  background: linear-gradient(135deg, #51e36f 0%, #dff8b8 100%);
}

.trip-card--extra {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.trip-card--extra:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.trip-options__extra .trip-card__art--extra {
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.trip-options__extra .trip-card__art--extra img {
  max-width: none;
  width: 130%;
  height: auto;
}

.trip-options__extra .trip-card__copy h2 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
}

.trip-card__copy {
  position: relative;
  z-index: 2;
}

.trip-card__copy h2 {
  color: var(--Content-text-primary, #212529);
  /* Headline/Small */
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  /* 133.333% */
}

.trip-card__copy p {
  width: min(230px, 100%);
  margin: 0;
  font-size: 16px;
  line-height: 1.33;
  color: rgba(46, 37, 51, 0.9);
}

.trip-card__art {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
}

.trip-options__stack .trip-card__art {
  position: absolute;
  right: 20px;
}

.trip-card__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.trip-card__art--plan {
  margin-right: -6px;
  margin-bottom: -12px;
  width: min(252px, 100%);
}

.trip-card__art--stay,
.trip-card__art--service {
  margin-right: -6px;
  width: min(180px, 100%);
}

.trip-composer {
  /* 1. X�a position: fixed v� bottom: 40px di */
  position: relative;
  /* 2. Set chi?u r?ng full 100% c?a container */
  width: 100%;
  /* 3. ��Y L� CH�A KH�A: T? d?ng d?y ph?n t? n�y xu?ng du?i c�ng */
  margin-top: auto;
  /* C�c thu?c t�nh trang tr� b�n du?i c?a b?n du?c gi? nguy�n */
  padding: 16px 20px 16px;
  border-radius: 16px;
  border: 1px solid rgba(182, 184, 210, 0.75);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(152, 134, 171, 0.14);
}

.trip-composer__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.trip-composer__pills:empty {
  display: none;
}

.trip-composer__fab-menu {
  display: none;
}

.trip-composer__fab-menu {
  position: absolute;
  bottom: 80px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.trip-composer__fab-menu.show {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.trip-composer__fab-menu .fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  font-weight: 500;
  color: #212529;
  font-family: 'Roboto', sans-serif;
  transition: background 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.trip-composer__fab-menu .fab-item:active {
  background: #f8f9fa;
}

.trip-composer__fab-menu .fab-item i {
  font-size: 20px;
  color: #4D5154;
}

.trip-composer__icon--attach.is-fab-open {
  background: #6100FF;
  color: #fff;
}

.trip-composer__icon--attach.is-fab-open::before {
  content: "\2715";
  font-size: 20px;
  color: #fff;
  line-height: 1;
}

.trip-composer__icon--attach.is-fab-open svg {
  display: none;
}

.planner-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e9ecef;
  font-size: 14px;
  color: var(--trip-text);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.3s ease;
  transition: all 0.3s ease;
}

.planner-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: #d0d5db;
}

.planner-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: #f1f3f5;
  color: #212529;
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
  transition: all 0.2s;
}

.planner-pill__remove:hover {
  background: #e9ecef;
  color: #ff5722;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

.trip-composer__label {
  display: none;
}

.trip-composer__input {
  width: 100%;
  min-height: 60px;
  height: 60px;
  max-height: 200px;
  overflow-y: auto;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--trip-text);
  font-size: 16px;
  line-height: 1.45;
  outline: none;
  padding: 0;
}

.trip-composer__input::placeholder {
  color: #b3b0b8;
}

.trip-composer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.trip-composer__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #4d4c4f;
  border-radius: 50%;
}

.trip-composer__icon svg {
  width: 20px;
  height: 20px;
}

.trip-composer__icon--send {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--Background-bg-disabled, #e9ecef);
}

@media screen and (max-width: 991px) {
  .ai-assistant-wrapper .ai-assistant__footer {
    display: flex;
  }
}

/* Make card images and titles clickable */
.ai-card__image-container,
.chat-stay-card__img-wrap,
.ai-card__title {
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .trip-hero__message {
    font-size: 16px;
  }

  .trip-options__main {
    grid-template-columns: 1fr;
  }

  .trip-options {
    margin-bottom: 84px;
  }

  .trip-options__extra {
    flex-direction: column;
    height: auto;
    gap: 0;
  }

  .trip-card--plan {
    min-height: 280px;
  }
}

@media (max-width: 767.98px) {
  .trip-landing {
    padding: 28px 16px 32px;
  }

  .trip-hero {
    margin-bottom: 24px;
  }

  .trip-hero__branding {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }

  .trip-hero__logo {
    margin-bottom: 0;
    width: 140px;
  }

  .trip-hero__title-container {
    flex-direction: column;
    gap: 12px;
  }

  .trip-hero__title-divider {
    width: 48px;
    height: 2px;
  }

  .trip-hero__title-main {
    font-size: 20px;
    text-align: center;
  }

  .trip-hero__title-sub {
    font-size: 16px;
    text-align: center;
  }

  .trip-hero__title-text,
  .trip-hero__title-badge {
    align-items: center;
  }

  .trip-hero__message p {
    font-size: 14px;
  }

  .trip-card--plan,
  .trip-card--stay,
  .trip-card--service {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .trip-card--plan {
    padding-bottom: 8px;
  }

  .trip-card--stay,
  .trip-card--service {
    gap: 8px;
  }

  .trip-card__copy h2,
  .trip-card--stay .trip-card__copy h2,
  .trip-card--service .trip-card__copy h2 {
    font-size: 28px;
  }

  .trip-footer__copy {
    font-size: 13px;
  }

  .trip-footer__socials {
    gap: 12px;
  }

  .trip-card__copy p {
    width: 100%;
    font-size: 16px;
  }

  .trip-card__art--plan {
    width: min(100%, 280px);
    justify-self: center;
  }

  .trip-card__art--stay,
  .trip-card__art--service {
    width: 150px;
  }

  .trip-composer {
    padding: 14px 16px 16px;
    border-radius: 16px;
  }

  .trip-composer__input {
    min-height: 90px;
    font-size: 16px;
  }
}

/******************************************************************************************************************
**********************************************PLAN TRIP OPTION**************************************************
******************************************************************************************************************/
.planner-panel .card,
.planner-panel .card-body {
  padding: 0 !important;
  border: none;
  background: none;
}

.planner-panel .nav-tabs {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4.400000095367432px);
  display: flex;
  padding: 2px;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  margin: 0 auto;
}

.planner-panel .nav-tabs .nav-link {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  overflow: hidden;
  color: var(--Content-text-primary, #212529);
  /* Title/Medium */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.15px;
  outline: none !important;
}

.planner-panel .nav-tabs .nav-item.show .nav-link,
.planner-panel .nav-tabs .nav-link.active,
.planner-panel .nav-tabs .nav-link:focus,
.planner-panel .nav-tabs .nav-link:hover {
  border-radius: 6px;
  background: var(--Background-bg-white, #fff);
  box-shadow: 0 0 1px 0 rgba(112, 8, 231, 0.12);
  border: none;
  outline: none !important;
}

#plannerTabContent .tab-pane {
  padding: 24px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid var(--Border-border-white, #fff);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

/* #plannerTabContent .tab-pane:hover {
    transform: translateY(-4px);
    box-shadow: var(--trip-card-shadow, 0 12px 24px rgba(141, 103, 173, 0.14));
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.8) 100%
    );
} */

.slick-next:before,
.slick-prev:before {
  content: none;
}

#plannerTabContent .tab-pane .planner-section,
.planner-form-row {
  width: 100%;
  margin-bottom: 24px;
}

#plannerTabContent .tab-pane h4 {
  color: var(--Content-text-primary, #212529);
  text-align: left;
  font-family: "Roboto";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.15px;
}

#plannerTabsSection {
  margin-top: 0 !important;
}

.planner-section .planner-choice-button,
.planner-section .planner-chip-button,
.chat-wizard-box .planner-choice-button,
.chat-wizard-box .planner-chip-button {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--Border-border-secondary, #dee2e6);
  background: rgba(255, 255, 255, 0.6);
  color: var(--Content-text-primary, #212529);
  /* Body/Large */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.planner-section .planner-choice-button:hover:not(.is-max-reached),
.planner-section .planner-chip-button:hover:not(.is-max-reached),
.chat-wizard-box .planner-choice-button:hover:not(.is-max-reached),
.chat-wizard-box .planner-chip-button:hover:not(.is-max-reached) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(112, 8, 231, 0.15);
  border-color: rgba(112, 8, 231, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

.planner-section .planner-choice-button.active,
.planner-section .planner-chip-button.active,
.planner-section--budget .planner-choice-grid .planner-budget-button.active,
.chat-wizard-box .planner-choice-button.active,
.chat-wizard-box .planner-chip-button.active,
.chat-wizard-box .planner-budget-button.active {
  background-color: #f1e6fd;
  border-color: #7008e7;
  box-shadow: 0 0 0 1px #7008e7;
}

.planner-section .planner-choice-button.active .planner-choice-button__title,
.planner-section .planner-chip-button.active .planner-choice-button__title,
.planner-section--budget .planner-choice-grid .planner-budget-button.active .planner-budget-button__title,
.chat-wizard-box .planner-choice-button.active .planner-choice-button__title,
.chat-wizard-box .planner-chip-button.active .planner-choice-button__title,
.chat-wizard-box .planner-budget-button.active .planner-budget-button__title {
  color: #7008e7;
  font-weight: 500;
}

.planner-section--style .planner-choice-grid,
.chat-wizard-box .planner-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.planner-section--style .planner-choice-grid .planner-choice-button,
.planner-section--budget .planner-choice-grid .planner-budget-button,
.chat-wizard-box .planner-choice-grid .planner-choice-button,
.chat-wizard-box .planner-choice-grid .planner-budget-button,
.chat-wizard-box .planner-budget-button {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 8px;
  border: 1px solid var(--Border-border-secondary, #dee2e6);
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  cursor: pointer;
}

#plannerStayTypeList .planner-choice-button {
  flex: 1 0 calc(25% - 9px);
}

.planner-section--style .planner-choice-grid .planner-choice-button:hover:not(.is-max-reached),
.planner-section--budget .planner-choice-grid .planner-budget-button:hover:not(.is-max-reached),
.chat-wizard-box .planner-choice-grid .planner-choice-button:hover:not(.is-max-reached),
.chat-wizard-box .planner-choice-grid .planner-budget-button:hover:not(.is-max-reached),
.chat-wizard-box .planner-budget-button:hover:not(.is-max-reached) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(112, 8, 231, 0.15);
  border-color: rgba(112, 8, 231, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__option,
.planner-section--budget .planner-budget-button .planner-budget-button__option,
.chat-wizard-box .planner-choice-button .planner-choice-button__option,
.chat-wizard-box .planner-budget-button .planner-budget-button__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  justify-content: center;
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__title,
.planner-section--budget .planner-budget-button .planner-budget-button__title,
.chat-wizard-box .planner-choice-button .planner-choice-button__title,
.chat-wizard-box .planner-budget-button .planner-budget-button__title {
  color: var(--Content-text-primary, #212529);
  /* Body/Large */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.5px;
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__description,
.planner-section--budget .planner-budget-button .planner-budget-button__description,
.chat-wizard-box .planner-choice-button .planner-choice-button__description,
.chat-wizard-box .planner-budget-button .planner-budget-button__description {
  color: var(--Content-text-primary, #212529);
  /* Body/Medium */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.25px;
  opacity: 0.6;
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__icon,
.chat-wizard-box .planner-choice-button .planner-choice-button__icon {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__icon.icon_beach,
.chat-wizard-box .planner-choice-button .planner-choice-button__icon.icon_beach {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path opacity="0.4" d="M9.61817 20C12.9112 20 15.882 20.8911 18.8153 21.7709C21.7168 22.6411 24.6193 23.5093 28.0001 23.6964C28.6456 23.7321 28.9684 23.75 29.1508 23.9428C29.3332 24.1356 29.3332 24.4459 29.3332 25.0667V28C29.3332 28.6285 29.3332 28.9428 29.1379 29.1381C28.9427 29.3333 28.6284 29.3333 27.9999 29.3333H3.99984C3.37129 29.3333 3.05702 29.3333 2.86176 29.1381C2.6665 28.9428 2.6665 28.6285 2.6665 28V21.956C2.6665 21.4903 2.6665 21.2573 2.80248 21.0785C2.93846 20.8996 3.15029 20.8409 3.57396 20.7233C3.89245 20.6349 4.21417 20.5568 4.54034 20.4887C5.72064 20.242 7.4349 20 9.61817 20Z" fill="%2317A2B8"/><path d="M15.633 2.38367C16.3412 2.18138 17.0792 2.59137 17.2814 3.29942C17.3944 3.69489 17.4817 3.77342 17.8957 3.72507C21.882 3.25959 25.6768 5.50205 27.4604 9.18057C27.6318 9.53347 27.8116 9.88839 27.9152 10.2685C28.0414 10.7315 28.0662 11.3264 27.6921 11.9067C27.289 12.5319 26.6781 12.7274 26.2072 12.7811C25.8406 12.8229 25.4058 12.7946 25.038 12.7707L23.1361 12.6485C22.9498 12.6365 22.9465 12.6375 22.7941 12.7452L21.1393 13.9146C20.9928 14.0182 20.9194 14.0699 20.8909 14.1486C20.8624 14.2272 20.8856 14.314 20.9318 14.4875L22.3308 19.7336C22.4397 20.1423 22.4942 20.3466 22.3818 20.4555C22.2693 20.5644 22.0669 20.5036 21.6618 20.3818L20.0042 19.8835C19.5862 19.7578 19.574 19.7451 19.4616 19.3235L18.4452 15.5122C18.3976 15.3335 18.3737 15.244 18.3073 15.1896C18.2409 15.1351 18.1486 15.1292 17.9641 15.1174L15.1561 14.937C14.9698 14.925 14.9665 14.926 14.8141 15.0336L13.2524 16.1372C12.9378 16.3599 12.5717 16.6191 12.231 16.7788C11.8 16.981 11.1502 17.1476 10.4605 16.7907C9.8193 16.4588 9.55435 15.8959 9.44826 15.4219C9.35965 15.026 9.3531 14.616 9.33926 14.2123C9.20419 10.3456 11.1838 6.64218 14.488 4.81995C14.8874 4.59958 14.8364 4.44874 14.7173 4.03201C14.515 3.32395 14.925 2.58598 15.633 2.38367Z" fill="%2317A2B8"/></svg>');
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__icon.icon_map,
.chat-wizard-box .planner-choice-grid .planner-choice-button .planner-choice-button__icon.icon_map {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><g opacity="0.4"><path d="M11.6663 22.9149C11.6663 23.1851 11.6663 23.3201 11.7299 23.4189C11.7934 23.5179 11.9256 23.578 12.1899 23.6985C12.485 23.8329 12.8593 24.0169 13.3645 24.2681L13.7632 24.4663C14.3141 24.7403 14.5896 24.8772 14.7229 24.7681C14.8563 24.6591 14.772 24.3449 14.6035 23.7168C14.1797 22.1371 14.2044 20.3493 15.034 18.4099C15.8012 16.6163 17.1232 15.1943 18.722 14.2597C18.8599 14.1791 18.9289 14.1388 18.9643 14.0771C18.9996 14.0155 18.9996 13.9388 18.9996 13.7855V5.44298C18.9996 5.20184 18.9996 5.08127 18.9396 4.98447C18.8796 4.88768 18.7717 4.834 18.5557 4.72664L14.8564 2.88718C13.9644 2.44364 13.2336 2.0803 12.6027 1.83686C12.2133 1.68662 12.0186 1.6115 11.8468 1.72418L11.8332 1.73352C11.6663 1.8532 11.6663 2.07852 11.6663 2.52916V22.9149Z" fill="%2328A745"/><path d="M30.3328 14.7991C30.3328 15.4029 30.3328 15.7048 30.1772 15.776C30.0216 15.8473 29.7806 15.6393 29.2986 15.2235C27.6535 13.8043 25.5179 13.0025 23.3348 13.0025C22.7764 13.0025 22.2211 13.0549 21.6763 13.1567C21.3535 13.2171 21.1922 13.2473 21.0958 13.1673C20.9995 13.0873 20.9995 12.9302 20.9995 12.6159V5.78865C20.9995 5.66261 21.1019 5.56056 21.228 5.56056L24.07 5.56055C25.267 5.56051 26.2672 5.56048 27.0616 5.66965C27.9028 5.78523 28.6602 6.03976 29.2666 6.65951C29.8699 7.2762 30.115 8.0414 30.2267 8.89056C30.333 9.69822 30.3328 10.7167 30.3328 11.9433V14.7991Z" fill="%2328A745"/><path d="M9.66626 2.61286C9.66626 2.17614 9.66626 1.95779 9.51179 1.83769C9.49399 1.82385 9.47002 1.8085 9.44998 1.79814C9.27618 1.70827 9.09291 1.79291 8.72638 1.96221C8.11194 2.24598 7.40534 2.65589 6.54258 3.15639L4.82453 4.15303C4.20042 4.51505 3.66955 4.82299 3.25405 5.12303C2.8109 5.44302 2.43566 5.79703 2.15957 6.28167C1.88413 6.76515 1.7693 7.27001 1.71621 7.81706C1.66622 8.33223 1.66625 8.95401 1.66626 9.68886V20.6743C1.66625 21.6464 1.66623 22.4503 1.72811 23.079C1.79062 23.7138 1.92861 24.3515 2.34403 24.8668C2.79695 25.4288 3.43543 25.8108 4.14658 25.9378C4.80406 26.0551 5.42719 25.8578 6.00159 25.5984C6.56949 25.342 7.33185 24.8998 8.15722 24.421C8.53471 24.202 8.87239 24.0062 9.18747 23.8434C9.42886 23.7186 9.54955 23.6562 9.60791 23.5604C9.66626 23.4646 9.66626 23.3384 9.66626 23.0863V2.61286Z" fill="%2328A745"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M23.3339 15C20.5944 15 17.9733 16.618 16.8719 19.1932C15.8412 21.6027 16.4131 23.6665 17.5481 25.3823C18.4608 26.7616 19.7925 27.9924 20.9439 29.0564C21.1605 29.2565 21.3707 29.4509 21.5705 29.6392L21.5728 29.6412C22.0503 30.0884 22.6823 30.3333 23.3339 30.3333C23.9856 30.3333 24.6176 30.0884 25.0951 29.6412C25.2847 29.4637 25.4832 29.2808 25.6876 29.0927C26.8505 28.0219 28.1997 26.7795 29.1219 25.3827C30.2555 23.6653 30.8253 21.5997 29.796 19.1932C28.6945 16.618 26.0735 15 23.3339 15ZM23.3213 19.3333C21.8551 19.3333 20.6665 20.5272 20.6665 22C20.6665 23.4728 21.8551 24.6667 23.3213 24.6667H23.3451C24.8113 24.6667 25.9999 23.4728 25.9999 22C25.9999 20.5272 24.8113 19.3333 23.3451 19.3333H23.3213Z" fill="%2328A745"/></svg>');
}

.planner-section--style .planner-choice-grid .planner-choice-button .planner-choice-button__icon.icon_lightning,
.chat-wizard-box .planner-choice-grid .planner-choice-button .planner-choice-button__icon.icon_lightning {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M19.1188 13.7812L19.12 13.7826H22.9707C23.9408 13.7826 24.5828 14.4659 24.8408 15.1427C25.1004 15.8238 25.0672 16.6969 24.5447 17.4013L16.5467 28.1807C15.9547 28.9786 15.0015 29.1906 14.2016 28.8326C13.439 28.4913 12.9457 27.7003 12.9457 26.7802V18.4367C12.9457 18.3253 12.9072 18.2518 12.8804 18.2201L19.1188 13.7812Z" fill="%23FFC107"/><path opacity="0.4" d="M17.7982 3.16816C18.5609 3.50947 19.0542 4.30043 19.0542 5.22052V13.5639C19.0542 13.6754 19.0926 13.7488 19.1194 13.7807L12.8809 18.2194L12.8798 18.218H9.02916C8.05898 18.218 7.41695 17.5348 7.15895 16.8579C6.89936 16.177 6.93256 15.3038 7.45511 14.5995L15.4531 3.82C16.0451 3.02211 16.9983 2.81016 17.7982 3.16816Z" fill="%23FFC107"/></svg>');
}

.planner-section .planner-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* C�c l?a ch?n d� b? kh�a khi vu?t qu� s? lu?ng t?i da */
.planner-choice-button.is-max-reached:not(.active),
.planner-chip-button.is-max-reached:not(.active),
.planner-budget-button.is-max-reached:not(.active),
.chat-wizard-box .planner-choice-button.is-max-reached:not(.active),
.chat-wizard-box .planner-chip-button.is-max-reached:not(.active),
.chat-wizard-box .planner-budget-button.is-max-reached:not(.active) {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--Background-bg-disabled, #e9ecef);
  color: #999;
}

.planner-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.planner-form-row .planner-form-group {
  width: 25%;
}

.planner-form-row .planner-form-group {
  display: flex;
  flex-direction: column;
}

#planner-stay .planner-form-row .planner-form-group:first-child,
#planner-service .planner-form-row .planner-form-group:first-child,
#planner-food .planner-form-row .planner-form-group:first-child {
  width: 50%;
}

#planner-stay .planner-form-row .planner-form-group,
#planner-service .planner-form-row .planner-form-group,
#planner-food .planner-form-row .planner-form-group {
  width: calc(50% / 3);
}

#planner-stay .planner-form-row--schedule,
#planner-service .planner-form-row--schedule,
#planner-food .planner-form-row--schedule {
  gap: 32px;
}

#planner-stay .planner-form-row--schedule .planner-form-group:first-child,
#planner-service .planner-form-row--schedule .planner-form-group:first-child,
#planner-food .planner-form-row--schedule .planner-form-group:first-child {
  flex: 1 1 0;
  width: auto;
  display: flex;
  flex-direction: column;
}

#planner-stay .planner-form-row--schedule .planner-form-group:nth-child(n + 2),
#planner-service .planner-form-row--schedule .planner-form-group:nth-child(n + 2),
#planner-food .planner-form-row--schedule .planner-form-group:nth-child(n + 2) {
  width: 164px;
  flex: 0 0 164px;
}

#planner-stay .planner-form-row--schedule .planner-day-picker,
#planner-service .planner-form-row--schedule .planner-day-picker,
#planner-food .planner-form-row--schedule .planner-day-picker {
  gap: 16px;
}

#planner-stay .planner-form-row--schedule .planner-day-picker .planner-day-display__label,
#planner-service .planner-form-row--schedule .planner-day-picker .planner-day-display__label,
#planner-food .planner-form-row--schedule .planner-day-picker .planner-day-display__label {
  display: none;
}

#planner-stay .planner-form-row--schedule .planner-day-picker .planner-day-display,
#planner-service .planner-form-row--schedule .planner-day-picker .planner-day-display,
#planner-food .planner-form-row--schedule .planner-day-picker .planner-day-display {
  min-width: 24px;
  text-align: center;
}

.planner-form-row .planner-form-group label {
  color: var(--Content-text-primary, #212529);
  font-family: "Roboto";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.15px;
  margin-bottom: 8px;
}

.planner-day-picker {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.planner-day-picker button {
  display: flex;
  width: 36px;
  height: 36px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--Border-border-secondary, #dee2e6);
  background: var(--Background-bg-white, #fff);
}

.planner-day-picker .planner-day-display {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.planner-day-picker .planner-day-display>* {
  color: var(--Content-text-primary, #212529);
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
}

.planner-form-row .planner-form-group .planner-field__input {
  padding: 8px 16px;
  align-items: center;
  align-self: stretch;
  border-radius: 999px;
  border: 1px solid var(--Border-border-secondary, #dee2e6);
  background: var(--Background-bg-white, #fff);
  color: var(--Content-text-primary, #212529);
  /* Body/Large */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.5px;
}

.planner-form-row .planner-form-group .planner-field__input::placeholder {
  color: var(--Content-text-tertiary, #a6a8a9);
  /* Body/Medium */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.25px;
}

.planner-language-switch {
  position: fixed;
  top: 8px;
  right: 20px;
  display: block;
  z-index: 99;
}

.planner-language-switch .select2,
.planner-language-switch-inline .select2 {
  width: 220px !important;
}

.planner-language-switch .select2-container .select2-selection,
.planner-language-switch-inline .select2-container .select2-selection {
  padding: 8px 30px 8px 16px !important;
}

.planner-language-switch .select2-container .select2-selection {
  background-color: #fff;
}

.img-flag {
  width: 32px;
  height: 24px;
  object-fit: cover;
  border-radius: 6px !important;
  overflow: hidden;
  margin-right: 4px;
}

.planner-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.planner-extra .planner-extra__toggle {
  border: none;
  background: none;
  outline: none;
  color: var(--Content-text-primary, #212529);
  text-align: center;
  font-family: "Roboto";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.15px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.planner-extra .planner-extra__toggle i {
  width: 24px;
  height: 24px;
  display: block;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M10.4107 19.9677C7.58942 17.858 2 13.0348 2 8.69444C2 5.82563 4.10526 3.5 7 3.5C8.5 3.5 10 4 12 6C14 4 15.5 3.5 17 3.5C19.8947 3.5 22 5.82563 22 8.69444C22 13.0348 16.4106 17.858 13.5893 19.9677C12.6399 20.6776 11.3601 20.6776 10.4107 19.9677Z" stroke="%23212529" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.planner-extra__content {
  margin-top: 16px;
}

/* ======================================================================
                     CHAT INTERFACE & BUBBLE STYLES
                     ====================================================================== */
.trip-chat-interface {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.chat-message-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 1rem 0.5rem;
  background: transparent;
  padding-bottom: 20px;
}

.chat-message-list::-webkit-scrollbar {
  width: 6px;
}

.chat-message-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* USER BUBBLE */
.chat-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-msg--user .chat-msg__bubble {
  background-color: #fff;
  color: #212529;
  border-radius: 16px 16px 0px 16px;
  padding: 12px 16px;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(182, 184, 210, 0.4);
  line-height: 1.5;
  white-space: pre-wrap;
  border: 1px solid rgba(182, 184, 210, 0.2);
}

.chat-msg--bot .chat-msg__text {
  background-color: #fff;
  color: #212529;
  border-radius: 16px 16px 16px 0px;
  padding: 12px 16px;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(182, 184, 210, 0.4);
  line-height: 1.5;
  white-space: pre-wrap;
  border: 1px solid rgba(182, 184, 210, 0.2);
}

body.is-itinerary-mode .chat-msg--bot .chat-msg__text {
  background-color: #fff;
  color: #1e293b;
  border-radius: 12px;
  padding: 24px;
  font-size: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #e2e8f0;
  line-height: 1.8;
}

/* BOT BUBBLE */
.chat-msg--bot {
  align-self: flex-start;
  align-items: flex-start;
  max-width: 100%;
}

.chat-msg--bot .chat-msg__text {
  color: #212529;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* SUMMARY CARD */
.chat-summary-card {
  background: #fff;
  border: 1px solid rgba(182, 184, 210, 0.4);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin-bottom: 1rem;
  width: 100%;
}

.chat-summary-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  row-gap: 0.75rem;
  column-gap: 1rem;
  font-size: 1rem;
}

.chat-summary-card dt {
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
}

.chat-summary-card dd {
  margin: 0;
  color: #212529;
  font-weight: 400;
}

/* ACTION BUTTON */
.chat-action-btn {
  background-color: #fff;
  color: #212529;
  border: 1px solid #e1e3e5;
  padding: 0.6rem 1.25rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-end;
  margin-top: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.chat-action-btn:hover {
  color: #ff5722;
  border-color: #ff5722;
  background-color: rgba(255, 87, 34, 0.05);
}

/* WIZARD & CHAT MARKDOWN (Phase Hybrid) */
.md-link {
  color: #0d6efd;
  text-decoration: underline;
}

.md-list {
  margin-bottom: 8px;
  padding-left: 20px;
}

.chat-wizard-box {
  background: #fff;
  border: 1px solid #d1d5dc;
  border-radius: 12px;
  padding: 16px;
}

.chat-wizard-title {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #1a1d20;
}

.chat-wizard-pills {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-wizard-tag {
  border-radius: 20px !important;
  font-size: 14px !important;
  color: #7008e7 !important;
  border-color: #7008e7 !important;
}

.chat-wizard-tag.active,
.chat-wizard-tag:hover {
  background-color: #7008e7 !important;
  color: #fff !important;
  border-color: #7008e7 !important;
}

.chat-wizard-actions {
  text-align: right;
  border-top: 1px solid #e9ecef;
  margin-top: 8px;
  padding-top: 16px;
}

.chat-wizard-submit {
  background-color: #7008e7 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 24px !important;
}

.chat-wizard-submit:disabled,
.chat-wizard-submit:disabled:hover {
  background-color: #a78cf0 !important;
  opacity: 0.8 !important;
}

.plantrip-summary-note {
  margin-bottom: 0;
}

.plantrip-summary-box {
  background-color: #e8f4fd;
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #1e293b;
  line-height: 1.6;
}

.plantrip-carousel-tip {
  font-size: 14px;
  color: #8a92a6;
  font-style: italic;
  margin-top: 12px;
}

.plantrip-slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 8px;
  border-radius: 999px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.plantrip-slick-prev {
  left: 0;
}

.plantrip-slick-next {
  right: 0;
}

.plantrip-slick-prev--offset {
  left: -8px;
}

.plantrip-slick-next--offset {
  right: -16px;
}

.chat-wizard-box-custom {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4.4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.planner-section.chat-wizard-section {
  padding: 12px 16px;
  border-bottom: none;
  background: transparent;
}

.chat-wizard-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16px;
}

.chat-wizard-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
  font-family: "Roboto", serif;
  display: block;
}

.plantrip-wiz-day-step {
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-weight: 500;
  font-size: 16px;
}

.plantrip-wiz-days-text {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}

.plantrip-wiz-date-input {
  height: 44px;
  border-radius: 24px;
  border: 1px solid #e5e7eb;
  padding: 0 20px;
  font-size: 14px;
  box-shadow: none;
}

.chat-wizard-actions-inline {
  margin-top: 0;
  padding: 12px 16px;
  border-top: 1px solid #eceff1;
  text-align: right;
}

.chat-wizard-action-btn-skip {
  border-radius: 8px;
  padding: 8px 24px;
  margin-right: 12px;
  background: var(--Background-bg-white, #fff);
  color: var(--Text-secondary, #4b5563);
  border: 1px solid var(--Border-divider, #e5e7eb);
  font-weight: 600;
}

.chat-wizard-action-btn-submit {
  background: var(--Primary-main, #7008e7);
  color: #fff;
  border-radius: 8px;
  padding: 8px 24px;
  font-weight: 600;
}

.plantrip-loc-unset {
  font-style: italic;
  color: #a0aec0;
}

.plantrip-inner-loc-title {
  font-size: 13.5px;
  font-weight: 500;
  font-style: italic;
  color: #7008e7;
}

.plantrip-inner-loc-list--compact {
  padding-top: 4px;
}

.plantrip-option-card-title {
  font-size: 20px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  line-height: 28px;
  color: #212529;
}

.chat-option-button {
  border-radius: 8px;
  font-weight: 500;
}

.chat-option-button-primary {
  background-color: #7008e7;
  border-color: #7008e7;
  color: #fff;
}

.plantrip-map-button {
  font-size: 14px;
  font-weight: 500;
  border-radius: 20px;
  background: #7c3aed;
  border: none;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4);
}

.plantrip-day-cost {
  font-size: 16px;
  color: #117937;
  margin-right: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.plantrip-day-cost-icon {
  font-size: 14px;
  position: relative;
  top: 2px;
  margin-right: 4px;
}

.plantrip-img-placeholder {
  background-color: #cbd5e1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ai-card__icon-wrapper.plantrip-budget-icon {
  color: #117937;
}

.ai-card__text-muted.plantrip-budget-label {
  color: #117937 !important;
  font-weight: 500;
}

.plantrip-draggable-card {
  cursor: grab;
  position: relative;
}

.plantrip-drag-handle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: grab;
}

.plantrip-drag-handle-icon {
  font-size: 16px;
  color: #4b5563;
  display: flex;
}

.plantrip-error-text {
  color: red;
}

.plantrip-chip-wrapper {
  padding: 4px 8px 4px 0;
}

.plantrip-header-clone {
  text-align: center;
  margin-bottom: 20px;
}

.plantrip-header-clone-title {
  color: #6d28d9;
  margin-bottom: 5px;
}

.plantrip-header-clone-desc {
  color: #555;
}

/* TYPING INDICATOR */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 16px 16px 16px 0px;
  box-shadow: 0 4px 12px rgba(182, 184, 210, 0.4);
  border: 1px solid rgba(182, 184, 210, 0.2);
  width: fit-content;
  margin-bottom: 0.75rem;
}

.typing-indicator span {
  width: 7px;
  height: 7px;
  background-color: #aeb1b4;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {

  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* CHAT OPTIONS NEW (CSS cho 3 Phuong �n) */
.chat-options-container {
  width: 100%;
}

.chat-options-container--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.chat-option-card-new {
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.chat-option-card-new:hover {
  border-color: #7008e7;
}

.chat-option-card-new.active {
  border-color: #7008e7;
  background-color: #f5f3ff;
  border-width: 1.5px;
}

.chat-option-card-new.disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.chat-option-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #212529;
  line-height: 20px;
}

.chat-option-card__list>li {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-option-card__list>li:last-child {
  margin-bottom: 0;
}

.chat-option-card__list>li strong {
  font-weight: 500;
  font-size: 16px;
  color: #212529;
}

.chat-option-card__list>li .co-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7008e7;
}

/* Ghi d� class cho svg */
.stroke-primary {
  stroke: #7008e7;
}

.inner-loc-list {
  list-style: disc;
  padding-left: 24px;
  margin: 0;
  margin-left: 8px;
  /* canh l? th�m x�u */
  width: 100%;
}

.inner-loc-list li {
  margin-bottom: 12px;
  color: #212529;
}

.inner-loc-list li:last-child {
  margin-bottom: 0;
}

.chat-options-action {
  display: flex;
  justify-content: flex-start;
}

.chat-option-card__list>li span.loc-names {
  word-wrap: break-word;
  display: block;
}

.chat-option-btn {
  margin-top: 16px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(90deg, #2f65f6 0%, #1e52db 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(47, 101, 246, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.chat-option-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(47, 101, 246, 0.4);
}

.chat-option-btn:disabled {
  background: #94a3b8 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* V�ng CSS hi?n th? List d?a di?m m?i cho Options */
.inner-loc-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inner-loc-list li {
  position: relative;
  padding-left: 14px;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.4;
  /* Override the global card list items */
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

.inner-loc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background-color: #212529;
  border-radius: 50%;
}

/* ======================== 
        PHASE 3 TIMELINE CSS 
======================== */
.chat-schedule-outer {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(182, 184, 210, 0.2);
  padding: 20px;
  border: 1px solid rgba(182, 184, 210, 0.4);
  margin-top: 15px;
}

.schedule-sticky-nav {
  position: sticky;
  top: -24px;
  z-index: 100;
  background-color: #f5f3ff;
  padding: 16px 0 8px 0;
  margin: -16px 0 16px 0;
}

.schedule-section {
  scroll-margin-top: 80px;
  outline: none;
}

.day-section-title {
  position: sticky;
  top: 30px;
  z-index: 90;
  background-color: #f5f3ff;
  padding: 16px 20px;
  margin: 0 -20px 16px -20px;
}

.schedule-tabs {
  margin-bottom: 0px;
  border-bottom: 1px solid transparent;
  gap: 12px;
}

.schedule-tabs .nav-link {
  color: #212529;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e1e5ea;
}

.schedule-tabs .nav-link.active {
  background-color: #7c3aed;
  /* Purple like image */
  color: #fff;
  border-color: #7c3aed;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

.overview-day-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  position: relative;
}

.overview-day-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.overview-day-path {
  font-size: 17px;
  color: #64748b;
  line-height: 1.6;
}

.overview-day-path .odc-arrow {
  padding: 0 8px
}

/* Timeline */
.tl-item {
  display: flex;
  margin-bottom: 20px;
  position: relative;
}

.tl-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 11px;
  width: 2px;
  height: calc(100% - 10px);
  background: #d1d5dc;
  z-index: 1;
}

.tl-time-box {
  width: 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

body.is-itinerary-mode .tl-icon-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.is-itinerary-mode .tl-icon-node svg {
  width: 24px;
  height: 24px;
}

.tl-icon-node svg {
  width: 16px;
  height: 16px;
}

.tl-content-box {
  flex-grow: 1;
  padding-bottom: 10px;
}

.tl-title-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  margin-top: 0;
}

.tl-pill-time {
  border-radius: 999px;
  border: 1px solid #d4edda;
  background: var(--Background-bg-success, #ecfdf5);
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: var(--State-success, #096);
  text-align: justify;
  flex-shrink: 0;
  /* Label/Large */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.1px;
}

.tl-activity-text {
  color: var(--Content-text-primary, #212529);
  text-align: justify;
  /* Title/Large */
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  /* 140% */
}

.tl-location-card {
  margin-bottom: 12px;
  box-shadow: none;
  border: none;
  display: flex;
  padding: 8px 16px 8px 8px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  background: var(--Background-bg-white, #fff);
  transition: all 0.2s ease;
}

.tl-location-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.tl-loc-img-placeholder {
  width: 90px;
  height: 90px;
  background: #cbd5e1 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>') no-repeat center center;
  border-radius: 8px;
  flex-shrink: 0;
  background-size: cover;
  background-color: #f1f5f9;
}

.tl-loc-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tl-loc-heading {
  color: var(--Content-text-primary, #212529);
  text-align: justify;
  margin-bottom: 4px;
  /* Title/Large */
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  /* 140% */
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-loc-heading .tl-loc-desc {
  margin-top: 4px;
}

.tl-loc-addr {
  color: var(--Content-text-secondary, #4d5154);
  /* Body/Medium */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.25px;
}

.tl-loc-addr .hgi-icon,
.tl-loc-desc .hgi-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
}

.tl-loc-desc {
  color: var(--Content-text-secondary, #4d5154);
  margin-bottom: 0;
  /* Body/Medium */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.25px;
  margin-bottom: 4px;
}

.tl-transit-bar {
  margin-bottom: 0;
  display: flex;
  background: none;
  border: none;
  padding: 0;
  color: var(--Content-text-secondary, #4d5154);
  /* Body/Medium */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.25px;
}

body.is-itinerary-mode .chat-message-list {
  max-height: none;
  height: 100%;
  padding: 0;
  padding-bottom: 20px;
}

body.is-itinerary-mode .chat-msg {
  max-width: 98%;
  margin-top: 12px;
}

body.is-itinerary-mode .chat-msg--bot .chat-msg__text {
  border-radius: 16px 16px 16px 0px;
  border: none;
  margin-bottom: 0;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.5px;
  background-color: #fff;
  color: #212529;
  padding: 12px 16px;
  font-size: 1rem;
  box-shadow: none;
  border: 1px solid rgba(182, 184, 210, 0.2);
  white-space: pre-wrap;
  margin-left: 8px;
  width: 100%;
}

body.is-itinerary-mode .chat-msg--user .chat-msg__text {
  background-color: #fff;
  color: #212529;
  border-radius: 16px 16px 0px 16px;
  padding: 12px 16px;
  font-size: 1rem;
  /* box-shadow: 0 4px 12px rgba(182, 184, 210, 0.4); */
  line-height: 1.5;
  white-space: pre-wrap;
  border: 1px solid rgba(182, 184, 210, 0.2);
  margin-right: 8px;
}

body.is-itinerary-mode .chat-msg--bot .chat-msg__text b {
  color: #0f172a;
  font-weight: 600;
}

body.is-itinerary-mode .chat-msg--bot .chat-msg__text p {
  margin-bottom: 16px;
}

body.is-itinerary-mode .trip-composer {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  border-radius: 0;
}

body.is-itinerary-mode .trip-composer__input {
  flex-grow: 1;
  margin-bottom: 8px;
  min-height: 50px;
}

/* ai-card BEM CSS */
.ai-card {
  background-color: #ffffff;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 8px 64px 8px 8px;
  position: relative;
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
}

.ai-card__image-container {
  background-color: #dde6ff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  flex-shrink: 0;
  width: 136px;
  height: 136px;
  align-self: stretch;
}

.ai-card__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 8px;
}

.ai-card__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
  position: relative;
}

.ai-card__info-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}

.ai-card__title-group {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}

.chat-ai-cards-container .ai-card__content .ai-card__title-group {
  flex-direction: column;
  align-items: flex-start;
}

body.is-itinerary-mode .chat-ai-cards-container .ai-card__content p {
  margin-bottom: 0;
}

.ai-card__title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #212529;
  font-size: 18px;
  text-align: justify;
  white-space: nowrap;
  margin: 0;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-card__review {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.ai-card__rate {
  background-color: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ai-card__rate-text {
  color: #ff6900;
  font-size: 0;
  margin: 0;
  white-space: nowrap;
}

.ai-card__rate-score {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  line-height: 24px;
  color: #7008e7;
  font-size: 16px;
  letter-spacing: 0.15px;
}

.ai-card__rate-max {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: #7008e7;
  font-size: 16px;
}

.ai-card__review-count {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: #212529;
  font-size: 16px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin: 0;
}

.ai-card__icon-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}

.ai-card__icon-wrapper {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit;
  margin: 0 !important;
}

.ai-card__icon-wrapper i {
  width: 20px;
  height: 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ai-card__text-muted {
  flex: 1 1 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 20px;
  min-width: 0;
  color: #4d5154;
  font-size: 14px;
  letter-spacing: 0.25px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-card__meta-group {
  display: flex;
  gap: 8px;
  height: 20px;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}

.ai-card__meta-item {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.ai-card__meta-item--highlight .ai-card__meta-text,
.ai-card__meta-item--highlight .ai-card__icon-wrapper {
  font-weight: 500;
  color: #ffb900;
  letter-spacing: 0.1px;
}

.ai-card__meta-text {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 20px;
  color: #4d5154;
  font-size: 14px;
  letter-spacing: 0.25px;
  white-space: nowrap;
  margin: 0;
}

.ai-card__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #4d5154;
  flex-shrink: 0;
}

.ai-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.ai-card__btn {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  position: relative;
  border-radius: 8px;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0.1px;
  white-space: nowrap;
  margin: 0;
  transition: all 0.2s ease;
  text-decoration: none;
}

.ai-card__btn:hover {
  background-color: #f1f5f9;
}

.ai-card__btn--detail {
  color: #1447e6;
}

.ai-card__btn--map {
  color: #009966 !important;
}

.ai-card__btn--change {
  color: #00a6f4;
}

.ai-card__btn--direction {
  color: #009966;
}

.ai-card__divider {
  width: 1px;
  height: 16px;
  background-color: #e0e0e0;
  flex-shrink: 0;
}

.ai-card__controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ai-card__control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  transition: all 0.2s ease;
  color: #64748b;
}

.ai-card__control-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #0f172a;
}

.ai-card__control-icon {
  width: 24px;
  height: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 20px;
}

/* Added for Chat AI Cards */
.chat-ai-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* Added for highlight target location card */
.highlight-loc-pulse {
  /* box-shadow: 0 0 0 2px #dc3545, 0 8px 16px rgba(220, 53, 69, 0.2) !important; */
  border: 2px dashed #dc3545 !important;
  background-color: #fff5f5 !important;
  transition: all 0.3s ease;
  animation: highlightPulse 1.5s infinite;
}

@keyframes highlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Drag and Drop AI Cards */
.ai-card.js-ai-drag-card {
  cursor: grab;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ai-card.js-ai-drag-card:active {
  cursor: grabbing;
}

.ai-card.js-ai-drag-card.is-dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.tl-item {
  transition:
    background-color 0.2s ease,
    border 0.2s ease;
}

.tl-item.pl-dropzone-active {
  border: 2px dashed #007bff;
  background-color: rgba(0, 123, 255, 0.05);
}

.tl-item.tl-item--locked {
  opacity: 0.85;
}

.tl-item.tl-item--locked .pl-drag-btn,
.tl-item.tl-item--locked .pl-delete-btn {
  cursor: not-allowed !important;
  opacity: 0.3;
  pointer-events: none;
}

.tl-item.pl-dropzone-hover {
  background-color: rgba(0, 123, 255, 0.2);
  border-color: #0056b3;
}

/* Extracted Inline Actions */
.chat-msg__confirm-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-card__btn--cancel {
  background: #ef4444 !important;
  color: white !important;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
}

.ai-card__btn--skip {
  background: #e2e8f0 !important;
  color: #1f2937 !important;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
}

/* ========================================================
   FLOATING AI & CHAT WINDOW
======================================================== */
.floating-ai {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1050;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.floating-ai:hover {
  transform: scale(1.05);
}

.floating-ai__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.floating-ai__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-ai__message {
  border-radius: 12px 12px 0 12px;
  padding: 12px 16px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  max-width: 250px;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  animation: slideInRight 0.5s forwards 1s;
  /* Auto show after 1s */
  background: #7008e7;
  color: #fff;
  bottom: 22px;
}

.floating-ai__message::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -8px;
  border-width: 8px 0 0 8px;
  border-style: solid;
  border-color: transparent transparent transparent #7008e7;
}

.floating-ai__message p {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 20px;
}

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

.floating-ai.is-hidden {
  display: none !important;
}

/* Chat Popup Window */
.floating-chat-window {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  height: 560px;
  background: #fff;
  border-radius: 24px;
  box-shadow:
    0px 0px 8px rgba(0, 39, 38, 0.12),
    0px 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1060;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 0.4s ease,
    height 0.4s ease,
    border-radius 0.4s ease;
}

.floating-chat-window.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.floating-chat-window.is-expanded {
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  border-radius: 12px;
}

@media (max-width: 575px) {
  .floating-chat-window.is-expanded {
    width: 100vw;
    height: 100vh;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }
}

/* Chat Header */
.fcw-header {
  background: #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 24px;
  height: 64px;
  z-index: 2;
}

.fcw-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.fcw-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.fcw-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fcw-header-title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #212529;
  margin: 0;
}

.fcw-header-actions {
  display: flex;
  align-items: center;
}

.fcw-header-btn {
  background: none;
  border: none;
  padding: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  color: #4d5154;
  transition: background 0.2s;
}

.fcw-header-btn:hover {
  background: #f3f4f6;
}

/* Chat Body (Messages) */
.fcw-body {
  flex: 1;
  background: #fff;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@keyframes chatMsgFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

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

@keyframes typingBounce {

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

  40% {
    transform: translateY(-5px);
  }
}

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #6c757d;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out both;
}

.fcw-msg-row {
  display: flex;
  width: 100%;
  gap: 8px;
  animation: chatMsgFadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.fcw-msg-row.ai-msg {
  justify-content: flex-start;
  padding-right: 24px;
}

.fcw-msg-row.user-msg {
  justify-content: flex-end;
  padding-left: 24px;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.fcw-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.fcw-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fcw-msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.fcw-bubble {
  padding: 6px 12px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  width: fit-content;
}

.ai-msg .fcw-bubble {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #212529;
  border-radius: 4px 16px 16px 16px;
}

.user-msg .fcw-bubble {
  background: #7008e7;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

.user-msg .fcw-bubble.middle {
  border-radius: 16px 4px 4px 16px;
  /* If there are middle messages */
}

/* Chat Footer (Input) */
.fcw-footer {
  height: auto;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcw-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.fcw-input {
  width: 100%;
  border: none;
  outline: none;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #212529;
  padding: 8px 0;
}

.fcw-input::placeholder {
  color: #a6a8a9;
}

.fcw-send-btn {
  background: none;
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #4d5154;
  transition: color 0.2s;
}

.fcw-send-btn:hover {
  color: #7008e7;
}

@media (max-width: 767.98px) {
  .floating-chat-window {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* GIAO DI?N LUU TR� (STAY) T? API LT_FIND (Ch? Update t? Bot) */

.chat-stay-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.chat-stay-carousel::-webkit-scrollbar {
  display: none;
}

.chat-stay-card {
  flex: 0 0 280px;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin: 8px 16px 8px 0;
  height: 100%;
  width: 280px;
}

.chat-stay-carousel-wrapper {
  width: 100%;
  max-width: 100%;
}

.chat-stay-intro-text {
  width: fit-content;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 0px;
}

.chat-stay-intro-text p {
  margin-bottom: 0;
}

.chat-stay-carousel {
  width: 100%;
  display: block;
  overflow-x: hidden;
  scroll-snap-type: none;
}

.chat-stay-carousel .slick-track {
  display: flex;
}

.chat-stay-carousel .slick-slide {
  height: auto;
  display: flex;
}

.chat-stay-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #7008e7;
  border-width: 2px;
}

.chat-stay-card__img-wrap {
  width: 100%;
  height: 160px;
  position: relative;
  background-color: #dde6ff;
}

.chat-stay-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-stay-card__content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.chat-stay-card__title {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-stay-card__row-title {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.chat-stay-card__review-block {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-stay-card__rate {
  background-color: #ede9fe;
  border-radius: 4px 4px 4px 0;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-stay-card__rate-val {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7008e7;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.chat-stay-card__rate-max {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #7008e7;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.chat-stay-card__reviews {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #212529;
  line-height: 20px;
  letter-spacing: 0.25px;
  white-space: nowrap;
}

.chat-stay-card__info-row {
  font-size: 14px;
  color: #4d5154;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 20px;
  letter-spacing: 0.25px;
  font-family: "Roboto", sans-serif;
}

.chat-stay-card__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-stay-card__icon i {
  font-size: 18px;
  color: #4d5154;
}

.chat-stay-slick-prev,
.chat-stay-slick-next {
  position: absolute;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 45%;
  border: none;
  cursor: pointer;
}

.chat-stay-slick-prev {
  left: -15px;
}

.chat-stay-slick-next {
  right: 5px;
}

.chat-stay-slick-prev i,
.chat-stay-slick-next i {
  color: #4d5154;
  font-size: 18px;
}

/* ======================================================================
   DOWNLOAD ITINERARY MODAL
   ====================================================================== */
#downloadItineraryModal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

#downloadItineraryModal .modal-header {
  background: #f8f9fa;
  border-bottom: 1px solid #edf1f5;
  padding: 20px 24px;
}

#downloadItineraryModal .modal-title {
  font-weight: 700;
  color: #2d3748;
  font-size: 1.15rem;
}

#downloadItineraryModal .modal-body {
  padding: 16px 24px 0 24px;
}

#downloadItineraryModal .form-label {
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

#downloadItineraryModal .form-control {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 12px 16px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

#downloadItineraryModal .form-control:focus {
  border-color: #7008e7;
  box-shadow: 0 0 0 3px rgba(112, 8, 231, 0.1);
}

#downloadItineraryModal .modal-footer {
  border-top: none;
  padding: 16px 24px 24px;
  gap: 12px;
}

#downloadItineraryModal .btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin: 0;
}

#downloadItineraryModal .btn-secondary {
  background: #edf2f7;
  color: #4a5568;
  border: none;
}

#downloadItineraryModal .btn-secondary:hover {
  background: #e2e8f0;
  color: #2d3748;
}

#downloadItineraryModal .btn-primary {
  background: #7008e7;
  color: #ffffff;
  border: none;
}

#downloadItineraryModal .btn-primary:hover {
  background: #5d06c4;
  box-shadow: 0 4px 12px rgba(112, 8, 231, 0.25);
}

/* ======================================================================
   RESELECT OPTION BUTTON (BACK TO CHAT)
   ====================================================================== */
.btn-reselect-option {
  white-space: nowrap;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-weight: 500;
  padding: 6px 14px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.btn-reselect-option:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}

.divider-reselect {
  width: 2px;
  opacity: 0.1;
  background-color: #000;
  height: 24px;
  align-self: center;
}

/* Footer Styles */
/* Footer Styles */
.trip-footer {
  text-align: center;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.trip-footer__copy {
  margin-bottom: 8px;
  color: var(--PlanTrip-950, #2F0D68);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.trip-footer__copy a {
  color: #4B316E;
  text-decoration: none;
}

.trip-footer__socials {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.trip-footer__social-link {
  color: #2F1D4F;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trip-footer__social-link:hover {
  opacity: 0.7;
}

/* Flex layout cho trang Home d? Footer lu�n n?m du?i */
.plantrip-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.plantrip-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.trip-main-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* ?n footer khi v�o ch? d? itinerary */
body.is-itinerary-mode .trip-footer {
  display: none !important;
}

/* --- Toast Notification for Save Itinerary --- */
.planner-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: #fff;
  color: #333;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  border-left: 4px solid #6366f1;
}

.planner-toast--show {
  transform: translateY(0);
  opacity: 1;
}

.planner-toast--success {
  border-left-color: #22c55e;
}

.planner-toast--error {
  border-left-color: #ef4444;
}

.planner-toast--warning {
  border-left-color: #f59e0b;
}

.planner-toast--info {
  border-left-color: #6366f1;
}

/* --- User Profile in Modal --- */
.pt-report-user-profile {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.pt-report-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-report-user-name {
  font-weight: 600;
  font-size: 16px;
  color: #1e293b;
  margin-bottom: 2px;
}

.pt-report-user-email {
  font-size: 13px;
  color: #64748b;
}