.hover-card{
    position: relative;
    overflow: hidden;
}

.hover-card .card-front,
.hover-card .card-back{
    transition: all .4s ease;
}

.hover-card .card-back{
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);
}

.hover-card:hover .card-front{
    opacity: 0;
    transform: scale(.95);
}

.hover-card:hover .card-back{
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}
/* =========================================================
   MODAL KHÁCH SẠN - Whale Odyssey
   Bảng màu suy ra từ thiết kế:
   - nền kem   : #f4efe6
   - xanh navy : #1c3a5e  (tiêu đề)
   - cam/đỏ    : #d9603b  (icon / accent)
   ========================================================= */

:root {
  --wo-cream:  #f4efe6;
  --wo-navy:   #1c3a5e;
  --wo-accent: #d9603b;
  --wo-text:   #4a4a4a;
  --wo-radius: 16px;
}

/* ---------- LỚP MODAL ---------- */
.wo-modal {
  display: none;               /* ẩn mặc định */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  padding: 24px;
  /* căn giữa box */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* mở modal bằng :target (khi URL có #popup-khachsan) */
.wo-modal.is-open {
  display: flex;
}

.wo-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 30, .78);
  display: block;
}

/* ---------- HỘP NỘI DUNG ---------- */
.wo-modal__box {
  position: relative;
  z-index: 2;
  width: 70%;
  max-width: 1600px;
  max-height: 100vh;
  
  background: var(--wo-cream);
  border-radius: var(--wo-radius);
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  -webkit-overflow-scrolling: touch;
}

/* nút đóng */
.wo-modal__close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 44px;
  height: 44px;
  background: var(--wo-navy);
  color: #fff;
  border-radius: 0px 15px 0px 15px;
  font-size: 26px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  z-index: 5;
  transition: background .2s;
}
.wo-modal__close:hover { background: var(--wo-accent); }

/* ---------- LƯỚI 2 CỘT ---------- */
.wo-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}

/* ---------- GALLERY ---------- */
.wo-gallery__main {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--wo-radius);
  overflow: hidden;
  background: #ddd;
}
.wo-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wo-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.wo-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  aspect-ratio: 1 / 1;
  transition: border-color .2s;
}
.wo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wo-thumb.is-active { border-color: var(--wo-accent); }

/* ---------- NỘI DUNG ---------- */
.wo-title {
  color: var(--wo-navy);
  font-size: 2.2rem;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700;
}
.wo-title-form {
  color: #333;
  font-size: 1.2rem;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700;
}
.wo-meta {
  display: flex;
  gap: 40px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wo-meta__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wo-meta__icon { width: 34px; height: 34px; }
.wo-meta__text { display: flex; flex-direction: column; line-height: 1.3; }
.wo-meta__label { color: var(--wo-navy); font-size: .82rem; font-weight: 600; }
.wo-meta__value { color: var(--wo-text); font-size: .9rem; }
.wo-meta__value strong { color: var(--wo-navy); font-size: 1.05rem; }

.wo-subtitle {
  color: var(--wo-navy);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 24px 0 12px;
}
.wo-desc {
  color: var(--wo-text);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0 0 14px;
}

/* ---------- TIỆN ÍCH ---------- */
.wo-amenities {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.wo-amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.wo-amenity img { width: 40px; height: 40px; }
.wo-amenity span { color: var(--wo-text); font-size: .82rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet: về 1 cột */
@media (max-width: 860px) {
  .wo-modal__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .wo-gallery__main { aspect-ratio: 16 / 10; }
  .wo-title { font-size: 1.9rem; }
}

/* Mobile */
@media (max-width: 520px) {
  .wo-modal { padding: 6px; align-items: flex-start; }

  .wo-modal__box {
    width: 100%;
    max-width: 100%;        /* BỎ giới hạn -> box rộng bằng màn hình trừ padding */
    padding: 20px 16px;
    max-height: 75vh;
    margin: 4vh auto 0;
    overflow-y: auto;
  }

  .wo-modal__close { top: 0px; right: 0px; width: 36px; height: 36px; line-height: 36px; font-size: 22px; }
  .wo-title { font-size: 1.6rem; }
  .wo-meta { gap: 24px; }
  .wo-amenities { gap: 20px; justify-content: space-between; }
  .wo-gallery__thumbs { gap: 8px; }
}
/* =========================================================
   THÊM cho MODAL NHÀ HÀNG (popup-nhahang)
   ---------------------------------------------------------
   File CSS popup-khách sạn (.wo-modal, .wo-modal__box,
   .wo-modal__overlay, .wo-modal__close, .wo-title, .wo-desc,
   .wo-content + responsive) ĐÃ dán ở Custom CSS -> KHÔNG lặp lại.
   Dưới đây CHỈ là phần khác biệt.
   ========================================================= */

/* Ảnh đơn (modal nhà hàng không có gallery/thumbnail) */
.wo-modal__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #ddd;
}
.wo-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Phụ đề (khách sạn không có dòng này) */
.wo-subtitle {
  color: var(--wo-navy);
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 22px;
}

/* Modal nhà hàng canh giữa dọc 2 cột cho cân (khách sạn canh top) */
#popup-nhahang .wo-modal__grid { align-items: center; }

/* Mobile: grid chung đã lo; chỉ chỉnh cỡ subtitle */
@media (max-width: 520px) {
  .wo-subtitle { font-size: 1.02rem; }
  #popup-nhahang .wo-modal__grid { align-items: start; }
}
/* =========================================================
   THÊM cho MODAL TƯ VẤN (popup-tuvan)
   ---------------------------------------------------------
   Đã có sẵn ở Custom CSS (từ khách sạn + nhà hàng):
   .wo-modal, .wo-modal__box, .wo-modal__overlay, .wo-modal__close,
   .wo-modal__grid, .wo-title, .wo-desc, .wo-content, .wo-modal__media
   -> KHÔNG lặp lại. Dưới đây chỉ phần khác biệt của modal này.
   ========================================================= */

/* Font chữ cam (đã upload trong plugin Custom Fonts) */
:root {
  --wo-font-script: 'SVNRedtowns', cursive;
}

/* --- Box: bỏ padding để ảnh xé tràn sát mép trái --- */
.wo-modal--contact .wo-modal__box {
  padding: 0;
  overflow: hidden;                 /* cắt gọn ảnh theo bo góc box */
}

/* Grid: ảnh trái sát mép, nội dung phải có padding riêng */
.wo-modal--contact .wo-modal__grid {
  gap: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

/* --- CỘT TRÁI: ảnh xé mép sẵn --- */
.wo-modal__torn {
  position: relative;
  min-height: 100%;
}
.wo-modal__torn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- CỘT PHẢI: có padding vì box đã bỏ padding --- */
.wo-content--contact {
  padding: 48px 48px 40px;
}

/* Chữ cam "Contact" kiểu viết tay */
.wo-eyebrow {
  display: block;
  font-family: var(--wo-font-script);
  color: var(--wo-accent);
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 6px;
}

/* Tiêu đề xanh -> giữ font mặc định (không đổi), chỉ chỉnh spacing chút */
.wo-modal--contact .wo-title { margin-bottom: 16px; }

/* Nhãn nhóm: "Thông tin của bạn", "Số lượng khách"
   (nếu Forminator tự render label thì bỏ qua; đây phòng khi bro
   để label bằng HTML) */
.wo-group-label {
  display: block;
  color: var(--wo-navy);
  font-weight: 700;
  font-size: 1rem;
  margin: 22px 0 12px;
}

/* --- Vùng form --- */
.wo-form { margin-top: 18px; }

/* --- KẾT NỐI (Zalo / WhatsApp) --- */
.wo-connect {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.wo-connect__label {
  color: var(--wo-navy);
  font-weight: 700;
  font-size: .95rem;
  margin-right: 4px;
}
.wo-connect__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
.wo-connect__btn:hover { transform: translateY(-2px); }
.wo-connect__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* /* ========== RESPONSIVE: form trên, ảnh dưới ========== */
@media (max-width: 860px) {
  .wo-modal--contact .wo-modal__grid {
    grid-template-columns: 1fr;   /* 1 cột */
  }

  /* đảo thứ tự: form lên trước, ảnh xuống sau */
  .wo-modal--contact .wo-content--contact { order: 1; }
  .wo-modal__torn                          { order: 2; }

  /* ảnh thành banner ngang dưới cùng */
  .wo-modal__torn {
    min-height: 200px;
    max-height: 260px;
  }
  .wo-content--contact { padding: 32px; }
	.wo-modal--contact {
    align-items: flex-start !important;   /* căn lên trên, không giữa */
  }
  .wo-modal--contact .wo-modal__box {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* grid không được tự tạo chiều cao cứng chặn cuộn */
  .wo-modal--contact .wo-modal__grid {
    align-items: start !important;
  }
}

@media (max-width: 520px) {
  .wo-content--contact { padding: 24px 18px; }
	.wo-modal--contact {
    align-items: flex-start !important;   /* căn lên trên, không giữa */
  }
  .wo-modal--contact .wo-modal__box {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* grid không được tự tạo chiều cao cứng chặn cuộn */
  .wo-modal--contact .wo-modal__grid {
    align-items: start !important;
  }
  .wo-eyebrow { font-size: 1.5rem; }
  .wo-modal__torn { min-height: 160px; max-height: 200px; }

  /* form về 1 field/hàng cho dễ bấm trên mobile (tùy chọn) */
  #popup-tuvan .forminator-col {
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   (TÙY CHỌN) style nhẹ cho field Forminator khớp thiết kế
   -> chỉ dùng nếu bro muốn ép field bo tròn giống hình.
      Xóa cả block này nếu đã style trong Forminator Appearance.
   ========================================================= */
#popup-tuvan .forminator-input,
#popup-tuvan .forminator-select,
#popup-tuvan select {
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(28,58,94,.35) !important;
  padding: 12px 18px !important;
}
#popup-tuvan .forminator-button-submit {
  border-radius: 999px !important;
  background: var(--wo-accent) !important;
  border: none !important;
}
/* =========================================================
   MODAL TƯ VẤN (#popup-tuvan) - STYLE FORMINATOR HOÀN CHỈNH
   Gộp: icon field + màu input + button submit + kết nối + độ rộng
   Màu: input #E8E4DA | placeholder #333
        button nền #E07A5F, chữ #EDE3C8
   ========================================================= */

/* ---------- KHUNG INPUT / SELECT ---------- */
#popup-tuvan .forminator-input,
#popup-tuvan input[type="text"],
#popup-tuvan input[type="email"],
#popup-tuvan input[type="tel"],
#popup-tuvan input[type="number"],
#popup-tuvan input[type="date"] {
  background-color: #E8E4DA !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  color: #333 !important;
  font-size: .95rem !important;
}

/* màu chữ placeholder */
#popup-tuvan ::placeholder { color: #333 !important; opacity: 1 !important; }

/* ---------- ĐỘ RỘNG 2 CỘT (giống hình) ---------- */
/* mỗi field chiếm nửa hàng, cách nhau đều */
#popup-tuvan .forminator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;                 /* khoảng cách giữa 2 cột */
  margin-bottom: 16px !important;
}
#popup-tuvan .forminator-col {
  flex: 1 1 calc(50% - 8px) !important; /* 2 cột đều, trừ nửa gap */
  min-width: 0 !important;
  padding: 0 !important;                /* bỏ padding cột mặc định */
}
#popup-tuvan .forminator-col input,
#popup-tuvan .forminator-col .forminator-input {
  width: 100% !important;               /* field full chiều rộng cột */
  box-sizing: border-box !important;
}

/* =========================================================
   ICON TRÁI TỪNG FIELD (icon to 22px) + mũi tên phải
   ========================================================= */
#popup-tuvan .name input,
#popup-tuvan .email input,
#popup-tuvan .phone input,
#popup-tuvan .datepicker input,
#popup-tuvan .nguoilon input,
#popup-tuvan .treem input {
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 22px 22px !important;
  padding-left: 52px !important;
}

/* input text */
#popup-tuvan .name input  { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91.png') !important; }
#popup-tuvan .email input { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-1.png')   !important; }
#popup-tuvan .phone input { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-2.png') !important; }

/* date: icon trái + chevron-down phải */
#popup-tuvan .datepicker input {
  background-image:
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-3.png'),
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/chevron-down.png') !important;
  background-position: 18px center, right 18px center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 22px 22px, 16px 16px !important;
  padding-right: 46px !important;
}

/* number: icon trái + chevron-selector phải */
#popup-tuvan .nguoilon input,
#popup-tuvan .treem input {
  background-position: 18px center, right 18px center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 22px 22px, 16px 16px !important;
  padding-right: 46px !important;
}
#popup-tuvan .nguoilon input {
  background-image:
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-4.png'),
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/chevron-selector-vertical.png') !important;
}
#popup-tuvan .treem input {
  background-image:
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-92.png'),
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/chevron-selector-vertical.png') !important;
}

/* ẩn spinner mặc định của input number */
#popup-tuvan .nguoilon input::-webkit-inner-spin-button,
#popup-tuvan .nguoilon input::-webkit-outer-spin-button,
#popup-tuvan .treem input::-webkit-inner-spin-button,
#popup-tuvan .treem input::-webkit-outer-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
}
#popup-tuvan .nguoilon input,
#popup-tuvan .treem input { -moz-appearance: textfield !important; }

/* =========================================================
   NÚT SUBMIT - "Để Whale Odyssey dẫn đường"
   ========================================================= */
#popup-tuvan .forminator-button-submit,
#popup-tuvan button[type="submit"] {
  background-color: #E07A5F !important;
  color: #EDE3C8 !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  padding: 0 32px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: filter .2s !important;
}
#popup-tuvan .forminator-button-submit:hover,
#popup-tuvan button[type="submit"]:hover { filter: brightness(1.05) !important; }

/* icon paper-plane trước chữ nút (dùng ::before) */
#popup-tuvan .forminator-button-submit::before,
#popup-tuvan button[type="submit"]::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  background: url('https://whale-odyssey.com/wp-content/uploads/2026/07/send-email-paper-plane-1-Streamline-Freehand.png') no-repeat center / contain !important;
  display: inline-block !important;
}

/* =========================================================
   KẾT NỐI - Zalo / WhatsApp(phone)
   (áp cho HTML .wo-connect trong modal-tuvan.html)
   ========================================================= */
#popup-tuvan .wo-connect__btn img { width: 100%; height: 100%; object-fit: contain; }
/* =========================================================
   POPUP THIẾT KẾ (#popup-thietke) - STYLE FORMINATOR HOÀN CHỈNH
   Sao y bản popup-tuvan bro đã canh icon -> chỉ đổi selector.
   Màu: input #E8E4DA | placeholder #333
        button nền #E07A5F, chữ #EDE3C8
   ========================================================= */

/* ---------- KHUNG INPUT / SELECT ---------- */
#popup-thietke .forminator-input,
#popup-thietke input[type="text"],
#popup-thietke input[type="email"],
#popup-thietke input[type="tel"],
#popup-thietke input[type="number"],
#popup-thietke input[type="date"] {
  background-color: #E8E4DA !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  color: #333 !important;
  font-size: .95rem !important;
}

/* màu chữ placeholder */
#popup-thietke ::placeholder { color: #333 !important; opacity: 1 !important; }

/* ---------- ĐỘ RỘNG 2 CỘT (giống hình) ---------- */
#popup-thietke .forminator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
#popup-thietke .forminator-col {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 0 !important;
  padding: 0 !important;
}
#popup-thietke .forminator-col input,
#popup-thietke .forminator-col .forminator-input {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   ICON TRÁI TỪNG FIELD (icon 22px) + mũi tên phải
   ========================================================= */
#popup-thietke .name input,
#popup-thietke .email input,
#popup-thietke .phone input,
#popup-thietke .datepicker input,
#popup-thietke .nguoilon input,
#popup-thietke .treem input {
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 22px 22px !important;
  padding-left: 52px !important;
}

/* input text */
#popup-thietke .name input  { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91.png') !important; }
#popup-thietke .email input { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-1.png')   !important; }
#popup-thietke .phone input { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-2.png') !important; }

/* date: icon trái + chevron-down phải */
#popup-thietke .datepicker input {
  background-image:
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-3.png'),
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/chevron-down.png') !important;
  background-position: 18px center, right 18px center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 22px 22px, 16px 16px !important;
  padding-right: 46px !important;
}

/* number: icon trái + chevron-selector phải */
#popup-thietke .nguoilon input,
#popup-thietke .treem input {
  background-position: 18px center, right 18px center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 22px 22px, 16px 16px !important;
  padding-right: 46px !important;
}
#popup-thietke .nguoilon input {
  background-image:
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-4.png'),
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/chevron-selector-vertical.png') !important;
}
#popup-thietke .treem input {
  background-image:
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-92.png'),
    url('https://whale-odyssey.com/wp-content/uploads/2026/07/chevron-selector-vertical.png') !important;
}

/* ẩn spinner mặc định của input number */
#popup-thietke .nguoilon input::-webkit-inner-spin-button,
#popup-thietke .nguoilon input::-webkit-outer-spin-button,
#popup-thietke .treem input::-webkit-inner-spin-button,
#popup-thietke .treem input::-webkit-outer-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
}
#popup-thietke .nguoilon input,
#popup-thietke .treem input { -moz-appearance: textfield !important; }

/* =========================================================
   NÚT SUBMIT
   ========================================================= */
#popup-thietke .forminator-button-submit,
#popup-thietke button[type="submit"] {
  background-color: #E07A5F !important;
  color: #EDE3C8 !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  padding: 0 32px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: filter .2s !important;
}
#popup-thietke .forminator-button-submit:hover,
#popup-thietke button[type="submit"]:hover { filter: brightness(1.05) !important; }

/* icon paper-plane trước chữ nút */
#popup-thietke .forminator-button-submit::before,
#popup-thietke button[type="submit"]::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  background: url('https://whale-odyssey.com/wp-content/uploads/2026/07/send-email-paper-plane-1-Streamline-Freehand.png') no-repeat center / contain !important;
  display: inline-block !important;
}

/* =========================================================
   KẾT NỐI - Zalo / phone
   ========================================================= */
#popup-thietke .wo-connect__btn img { width: 100%; height: 100%; object-fit: contain; }
#wo-form-source-tuvan,
#wo-form-source-thietke {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
}
/* /* =========================================================
   PHONG BÌ v3 - Whale Odyssey (dùng @keyframes, KHÔNG transition)
   -> tránh bị theme/Elementor đè transition trên WordPress.
   Xếp lớp: open-1 -> open-3 -> thư -> open-2
   ========================================================= */

.wo-scene {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}
.wo-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  transform-origin: center bottom;
}

/* chữ trên */
.wo-quote {
  margin: 0 0 4% 8%;
  color: #5b7fa6;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.35;
}
/* fade chữ bằng animation */
.wo-stage.opened .wo-quote { animation: wo-quote-out .6s ease forwards; }
@keyframes wo-quote-out { from{opacity:1;} to{opacity:0;} }

.wo-postmark { position:absolute; left:-15%; top:52%; width:30%; height:auto; z-index:8; }

.wo-env { position: relative; width: 100%; aspect-ratio: 819 / 598; }

.wo-layer {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; height: auto;
  object-fit: contain;
}

.wo-close  { z-index: 5; opacity: 1; }
.wo-open1  { z-index: 1; opacity: 0; }
.wo-open3  { z-index: 2; opacity: 0; }
.wo-open2  { z-index: 4; opacity: 0; }

.wo-paper {
  z-index: 3;
  width: 100%;
  bottom: auto; top: 0;
  transform: translate(-50%, 42%);
  opacity: 0;
}

.wo-seal { position:absolute; left:50%; top:50%; width:20%; transform:translate(-50%,-50%); z-index:7; }

.wo-labels {
  position:absolute; left:8%; right:8%; bottom:6%;
  display:flex; justify-content:space-between; align-items:center;
  color:#d9603b; font-size:.72rem; letter-spacing:.05em; z-index:6;
}
.wo-labels span:nth-child(2){ font-weight:600; }

/* =========================================================
   1) LẮC (đã chạy tốt)
   ========================================================= */
.wo-stage.shake { animation: wo-shake 1.4s ease-in-out; }
@keyframes wo-shake {
  0%{transform:rotate(0);} 15%{transform:rotate(-4deg);}
  35%{transform:rotate(3.5deg);} 55%{transform:rotate(-2.5deg);}
  75%{transform:rotate(1.5deg);} 90%{transform:rotate(-.6deg);} 100%{transform:rotate(0);}
}

/* =========================================================
   2) MỞ - tất cả bằng @keyframes forwards (giữ trạng thái cuối)
   ========================================================= */
/* lớp đóng: fade out */
.wo-stage.opened .wo-close { animation: wo-fade-out .35s ease forwards; }
/* open-1 & open-2: fade in nhanh */
.wo-stage.opened .wo-open1 { animation: wo-fade-in .35s ease forwards; }
.wo-stage.opened .wo-open2 { animation: wo-fade-in .35s ease .05s forwards; }
/* open-3: fade in chậm hơn */
.wo-stage.opened .wo-open3 { animation: wo-fade-in .9s ease .2s forwards; }

@keyframes wo-fade-out { from{opacity:1;} to{opacity:0;} }
@keyframes wo-fade-in  { from{opacity:0;} to{opacity:1;} }

/* thư: bước 1 - hiện + trượt vào miệng (chỉ khi opened mà CHƯA risen) */
.wo-stage.opened:not(.risen) .wo-paper {
  animation: wo-paper-in 1.2s cubic-bezier(.25,.1,.25,1) .35s forwards;
}
@keyframes wo-paper-in {
  0%   { opacity:0; transform: translate(-50%, 0%); }
  25%  { opacity:1; transform: translate(-50%, 0%); }
  100% { opacity:1; transform: translate(-50%, 0%); }
}

/* =========================================================
   3) THƯ TRỒI CAO (bước 2) - trượt mượt bằng keyframes
   ========================================================= */
.wo-stage.risen .wo-paper {
  opacity: 1;
  animation: wo-paper-rise 1.8s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes wo-paper-rise {
  0%   { opacity:1; transform: translate(-50%, 0%); }
  100% { opacity:1; transform: translate(-50%, -50%); }
}

/* fallback (không JS): hiện trạng thái cuối */
.wo-stage.opened.risen .wo-close { opacity: 0; }

/* responsive */
@media (max-width: 768px) {
  .wo-stage { max-width: 90%; }
  .wo-quote { font-size: 1.05rem; }
  .wo-labels { font-size: .58rem; }
}
@media (max-width: 480px) {
  .wo-quote { font-size: .9rem; }
  .wo-labels { font-size: .48rem; }
}
/* =========================================================
   FORM TƯ VẤN NGOÀI TRANG (#form-tuvan) - STYLE FORMINATOR
   Copy style modal cũ (nền kem, nút cam, icon) + thêm diachi, loinhan
   Field: name, phone, email, diachi (input) | loinhan (textarea)
   ========================================================= */
 
/* ---------- KHUNG INPUT + TEXTAREA ---------- */
#form-tuvan .forminator-input,
#form-tuvan input[type="text"],
#form-tuvan input[type="email"],
#form-tuvan input[type="tel"],
#form-tuvan textarea {
  background-color: #E8E4DA !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  color: #333 !important;
  font-size: .95rem !important;
}
 
/* textarea (lời nhắn): cao hơn + bo góc mềm (không tròn hẳn) */
#form-tuvan .loinhan textarea {
  border-radius: 24px !important;
  height: auto !important;
  min-height: 120px !important;
  padding-top: 16px !important;
  resize: vertical !important;
}
 
/* placeholder */
#form-tuvan ::placeholder { color: #333 !important; opacity: 1 !important; }
 
/* ---------- ĐỘ RỘNG CỘT ----------
   Họ tên: full | SĐT + Email: 2 cột | Địa chỉ: full | Lời nhắn: full */
#form-tuvan .forminator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
#form-tuvan .forminator-col {
  min-width: 0 !important;
  padding: 0 !important;
}
/* field full width mặc định */
#form-tuvan .forminator-col-12 { flex: 1 1 100% !important; }
/* field nửa (SĐT, Email) */
#form-tuvan .forminator-col-6 { flex: 1 1 calc(50% - 8px) !important; }
 
#form-tuvan .forminator-col input,
#form-tuvan .forminator-col textarea,
#form-tuvan .forminator-col .forminator-input {
  width: 100% !important;
  box-sizing: border-box !important;
}
 
/* =========================================================
   ICON TRÁI TỪNG FIELD (22px)
   -> thay link icon cho đúng field. Đang để placeholder chung.
   ========================================================= */
#form-tuvan .name input,
#form-tuvan .phone input,
#form-tuvan .email input,
#form-tuvan .diachi input,
#form-tuvan .loinhan textarea {
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 22px 22px !important;
  padding-left: 52px !important;
}
/* textarea: icon căn TRÊN (không giữa) vì ô cao */
#form-tuvan .loinhan textarea {
  background-position: 18px 16px !important;
}
 
/* gán icon từng field - THAY link thật của bạn */
#form-tuvan .name input   { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91.png') !important; }
#form-tuvan .phone input  { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-2.png') !important; }
#form-tuvan .email input  { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-1.png') !important; }
#form-tuvan .diachi input { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-6.png') !important; }
#form-tuvan .loinhan textarea { background-image: url('https://whale-odyssey.com/wp-content/uploads/2026/07/Frame-91-5.png') !important; }
 
/* =========================================================
   NÚT SUBMIT (cam)
   ========================================================= */
#form-tuvan .forminator-button-submit,
#form-tuvan button[type="submit"] {
  background-color: #E07A5F !important;
  color: #EDE3C8 !important;
  border: none !important;
  border-radius: 999px !important;
  height: 56px !important;
  padding: 0 32px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}
#form-tuvan .forminator-button-submit:hover,
#form-tuvan button[type="submit"]:hover { filter: brightness(1.05) !important; }
 
/* icon paper-plane trước chữ nút (nếu muốn giống cũ) */
#form-tuvan .forminator-button-submit::before,
#form-tuvan button[type="submit"]::before {
  content: "" !important;
  width: 20px !important; height: 20px !important;
  background: url('https://whale-odyssey.com/wp-content/uploads/2026/07/send-email-paper-plane-1-Streamline-Freehand.png') no-repeat center / contain !important;
  display: inline-block !important;
}
 
/* responsive: về 1 cột trên mobile */
@media (max-width: 600px) {
  #form-tuvan .forminator-col-6 { flex: 1 1 100% !important; }
}
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-mobile-position-inline-start .elementor-icon-box-wrapper {
    display: flex !important;
    align-items: center !important;
}

.elementor-widget-icon-box .elementor-icon-box-icon {
    flex: 0 0 auto;
    margin-right: 12px;
}