/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1764752955
Updated: 2025-12-03 16:09:15

*/

/* Hiệu ứng kính mờ cao cấp cho The Harmonie */
/* Container hiệu ứng gương trên nền xanh */

.glass-card-harmonie {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
             
    /* Đổ bóng sâu để tạo cảm giác khối nổi */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden; /* Đảm bảo góc lật không bị tràn ra ngoài */
    
}

/* Ẩn mặc định để tránh giật hình, nhưng không dùng opacity:0 quá nặng 
body:not(.elementor-editor-active) .harmonie-split-text {
    visibility: hidden;
}

body.elementor-editor-active .harmonie-split-text,
.harmonie-split-text.is-split {
    visibility: visible !important;
}

/* Đảm bảo khi animation kết thúc, chữ không bị "nhảy" 1px
.harmonie-split-text .word {
    display: inline-block !important;
    vertical-align: baseline;
    line-height: inherit;
}

.harmonie-split-text .letter {
    display: inline-block !important;
    opacity: 0;
    /* KHÔNG dùng translateZ(0) ở trạng thái tĩnh vì nó gây mờ font trên iOS
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Sửa lỗi rớt dòng cho các thẻ span bọc màu
.harmonie-split-text span {
    display: inline;
    white-space: normal;
}
*/
.page-id-3073 .page-header .entry-title{
    display: none;
}
.page-id-3073 .formtuvan {
    display: none;
}

/* Để Lenis tự xử lý cuộn (tránh xung đột với native smooth) */
.lenis.lenis-smooth { scroll-behavior: auto; }

/* Tối ưu vẽ mượt hơn */
.header-hero { will-change: transform; }

/* Tránh scroll container ngoài ý muốn */
html, body { height: auto; }

/* Nếu theme/section nào đang set overflow: hidden toàn trang, bỏ ra */

html { scroll-behavior: auto; }

/* Tối ưu phần tử sticky/parallax hay rung */
.header-hero, .sticky, .parallax { will-change: transform; transform: translateZ(0); }

/* -------------------------------------
  Hiệu ứng mask hình và text 
  The Regency – Scroll Reveal Mask
   Applies to Elementor widgets (Image, Heading, Text)
-------------------------------------- */
.reveal-mask {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

/* for image widget */
.reveal-mask img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 900ms cubic-bezier(.2,.9,.3,1);
  transform-origin: center;
}

/* for headings/text */
.reveal-mask .elementor-widget-container,
.reveal-mask .elementor-heading-title,
.reveal-mask .elementor-widget-container * {
  position: relative;
  z-index: 1;
}

/* Reveal mask with customizable color */
body:not(.elementor-editor-active) .reveal-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--mask-color, #FDFAF8); /* mặc định màu #EEE1CF */
  transform: translateX(0%);
  transition: transform 1.6s cubic-bezier(.2,.9,.3,1);
  will-change: transform;
}


/* Directions */
.reveal-mask.reveal-ltr::before { transform: translateX(0%); transform-origin: left; }
.reveal-mask.visible.reveal-ltr::before { transform: translateX(100%); }

.reveal-mask.reveal-rtl::before { transform: translateX(0%); transform-origin: right; }
.reveal-mask.visible.reveal-rtl::before { transform: translateX(-100%); }

 /* subtle zoom */
.reveal-mask:not(.visible) img { transform: scale(1.03); }
.reveal-mask.visible img { transform: scale(1); }

 /* delay helpers */
.reveal-mask.delay-0::before { transition-delay: 0ms; }
.reveal-mask.delay-150::before { transition-delay: 150ms; }
.reveal-mask.delay-300::before { transition-delay: 300ms; }
.reveal-mask.delay-500::before { transition-delay: 500ms; }

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal-mask::before,
  .reveal-mask img {
    transition: none !important;
    transform: none !important;
  }
  .reveal-mask::before { opacity: 0; }
}

/* --------------------------
   Optional: ensure editor preview safety (extra guards)
   -------------------------- */
.elementor-editor .reveal-mask::before,
body.elementor-editor-active .reveal-mask::before {
  display: none !important;
  pointer-events: none !important;
}

/* Disable reveal overlay inside Elementor editor so admin UI is visible */
html.elementor-editor-active .reveal-mask::before,
body.elementor-editor-active .reveal-mask::before,
.elementor-editor .reveal-mask::before,
.elementor-editor-preview .reveal-mask::before,
.elementor-editor-active .reveal-mask::before {
  display: none !important;
  pointer-events: none !important;
}

/* also hide inner .mask (if using .mask element variant) */
html.elementor-editor-active .reveal-mask .mask,
body.elementor-editor-active .reveal-mask .mask {
  display: none !important;
  pointer-events: none !important;
}
/*   end Hiệu ứng mask hình và text */



/* 1. Xóa bỏ nội dung icon font trong các thẻ giả */
.harmonie-arrows .elementor-swiper-button-prev::before,
.harmonie-arrows .elementor-swiper-button-prev::after,
.harmonie-arrows .elementor-swiper-button-next::before,
.harmonie-arrows .elementor-swiper-button-next::after {
    content: none !important;
    display: none !important;
}

/* 2. Xóa bỏ icon font bên trong thẻ i (nếu có) */
.harmonie-arrows .elementor-swiper-button-prev i,
.harmonie-arrows .elementor-swiper-button-next i {
    display: none !important;
}

/* 3. Chèn lại file SVG của bạn vào Background */
.harmonie-arrows .elementor-swiper-button-prev {
    background: url('https://phumyhung.vn/harmonie/wp-content/uploads/2026/01/arrowlui.png') no-repeat center !important;
    background-size: contain !important;
    opacity: 1 !important;
}

.harmonie-arrows .elementor-swiper-button-next {
    background: url('https://phumyhung.vn/harmonie/wp-content/uploads/2026/01/arrowtoi.png') no-repeat center !important;
    background-size: contain !important;
    opacity: 1 !important;
}

/* 4. Đảm bảo nút bấm có kích thước để hiển thị SVG */
.harmonie-arrows .elementor-swiper-button {
    width: 40px !important;
    height: 40px !important;
}


/* hieu ưng cho map*/
 /* Hiệu ứng trượt cho 2 Line trắng */
      #line1, #line2 {
        fill: none;
        stroke: #ffffff !important;
        stroke-width: 3px;
        stroke-linecap: round;
        stroke-dasharray: 12 12 !important; 
      }

      #line1 { animation: animate-line-forward 1s linear infinite; }
      #line2 { animation: animate-line-backward 1s linear infinite; }

      @keyframes animate-line-forward {
        from { stroke-dashoffset: 24; }
        to { stroke-dashoffset: 0; }
      }
      @keyframes animate-line-backward {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: 24; }
      }

      /* HIỆU ỨNG NHÚN CHO PIN LOCATION */
      #pin-location {
        animation: float-pin 3s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
      }

      @keyframes float-pin {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); } /* Nhún lên nhẹ nhàng 15px */
        100% { transform: translateY(0px); }
      }
/* End hieu ưng cho map*/

/* Accordion thiet ke*/
      /* --- 1. THIẾT LẬP CHUNG --- */
.harmonie-architecture-wrapper {
    display: flex;
    gap: 15px;
    height: 600px;
    width: 100%;
    box-sizing: border-box;
}

.arch-item {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    border: none !important;
    background-color: #06231d;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.arch-item.active { flex: 3; }

/* Lớp ảnh nền - Luôn ở dưới cùng */
.arch-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 0; /* Tầng đáy */
}
.arch-item.active .arch-bg { transform: scale(1.1); }

/* --- 2. NỘI DUNG VĂN BẢN (Nổi trên cùng) --- */
.arch-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(6, 35, 29, 0.95)); 
    color: #ffffff !important; /* Ép màu trắng cho chữ */
    z-index: 10; /* Tầng cao nhất để không bị mất chữ */
    box-sizing: border-box;
}

.arch-number {
    font-size: 40px;
    font-weight: 800;
    opacity: 0.4;
    display: block;
    color: #fff !important;
}

.arch-title {
    font-family: Fahkwang;
    font-size: 18px;
    font-weight: 900;
    margin: 10px 0;
    white-space: nowrap;
    color: #FFFDEE !important;
    text-transform: uppercase;
}

.arch-desc {
    font-family: 'Afacad', sans-serif;
    font-size: 18px;
    line-height: 22px !important;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.3s;
}

.arch-item.active .arch-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Chữ xoay đứng Desktop */
.arch-item:not(.active) .arch-title {
    transform: rotate(-90deg);
    transform-origin: left bottom;
    position: absolute;
    bottom: 100px;
    left: 55px;
}

/* --- 3. HIỆU ỨNG OVERLAY (Dành cho Tablet/Mobile và Hover Desktop) --- */
.arch-item:not(.active)::before {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(7, 102, 83, 0.85) 0%, transparent 100%);
    transition: bottom 0.4s ease;
    z-index: 5; /* Nằm dưới arch-content (10) và trên arch-bg (0) */
}
.arch-item:not(.active):hover::before { bottom: 0; }

.view-detail-link {
    color: #FFFDEE !important; /* Màu vàng kem */
    text-decoration: underline;
    font-weight: 700;
    font-style: italic;
    margin-left: 5px;
    display: inline-block;
    cursor: pointer;
}

.view-detail-link:hover {
    color: #ffffff !important;
    text-decoration: none;
}
/* --- 4. FIX TABLET & MOBILE (Dưới 1024px) --- */
@media (max-width: 1024px) {
    .harmonie-architecture-wrapper {
        flex-direction: column !important;
        height: auto !important;
        gap: 12px !important;
        padding: 0 15px !important;
    }

    .arch-item {
        flex: none !important;
        width: 100% !important;
        height: 75px !important; /* Độ cao thanh thu gọn */
    }

    .arch-item.active {
        height: 400px !important;
    }

    .arch-content {
        padding: 20px !important;
        position: absolute !important;
        bottom: 0 !important;
    }

    .arch-title {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 5px 0 !important;
        font-size: 16px !important;
        white-space: normal !important;
    }

    .arch-number {
        font-size: 18px !important;
        margin: 0 !important;
    }

    .arch-desc {
        display: none;
    }

    .arch-item.active .arch-desc {
        display: block !important;
        font-size: 18px !important;
        line-height: 20PX;
        margin-top: 10px !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/*End  Accordion thiet ke*/

/* css re animation chống giật*/
/* Không ép ẩn hoàn toàn, để Elementor tự quản lý trạng thái ban đầu */
.re-animate {
    transition: opacity 0.3s ease; /* Thêm chuyển tiếp nhẹ để không bị khựng */
    will-change: transform, opacity;
}

/* Chỉ can thiệp opacity khi không ở trong Editor để tránh lỗi widget bị ẩn */
body:not(.elementor-editor-active) .re-animate:not(.elementor-animated) {
    opacity: 0;
}

body:not(.elementor-editor-active) .re-animate.elementor-animated {
    opacity: 1;
}

/* thay doi nút toggle mobile menu*/
/* 1. Ẩn trên Desktop */
@media (min-width: 1025px) {
    .elementor-menu-toggle { display: none !important; }
}

/* 2. Cấu hình cho Mobile & Tablet */
@media (max-width: 1024px) {
    /* Ẩn sạch các thành phần mặc định của Elementor */
    .elementor-menu-toggle i, 
    .elementor-menu-toggle svg,
    .elementor-menu-toggle span {
        display: none !important;
    }

    .elementor-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important; /* Căn phải để tạo độ lệch */
        justify-content: center !important;
        gap: 7px !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    /* VẠCH 1 (TRÊN) VÀ VẠCH 2 (GIỮA) nằm trong cùng ::before */
    .elementor-menu-toggle::before {
        content: "" !important;
        display: block !important;
        height: 11px !important; /* Độ cao bao phủ cả 2 vạch và khoảng cách */
        width: 32px !important; /* Chiều dài vạch 1 (Dài nhất) */
        /* Vẽ vạch 1 ở trên và vạch 2 ngắn hơn ở dưới bằng Gradient */
        background: 
            linear-gradient(#f9eda2, #f9eda2) no-repeat top right / 32px 2px, /* Vạch 1: 32px */
            linear-gradient(#f9eda2, #f9eda2) no-repeat bottom right / 20px 2px; /* Vạch 2: 20px */
        transition: all 0.3s ease !important;
    }

    /* VẠCH 3 (DƯỚI CÙNG) */
    .elementor-menu-toggle::after {
        content: "" !important;
        display: block !important;
        height: 2px !important;
        width: 12px !important; /* Vạch 3: Ngắn nhất */
        background-color: #f9eda2 !important; /* Màu vàng yêu cầu */
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    /* 3. Hiệu ứng khi Active (Biến thành dấu X) */
    .elementor-menu-toggle.elementor-active::before {
        height: 2px !important;
        background: #f9eda2 !important; /* Chỉ giữ lại 1 vạch để làm dấu X */
        transform: translateY(4.5px) rotate(45deg) !important;
        width: 28px !important;
    }
    .elementor-menu-toggle.elementor-active::after {
        transform: translateY(-4.5px) rotate(-45deg) !important;
        width: 28px !important;
    }
}

/* VIDEO PRELOADER */
#video-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff; /* nền web */
  overflow: hidden;
}

/* VIDEO BASE */
#video-preloader video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* DESKTOP + TABLET (>= 768px) */
@media (min-width: 768px) {
  #video-preloader .video-desktop {
    display: block;
  }
}

/* MOBILE (< 768px) */
@media (max-width: 767px) {
  #video-preloader .video-mobile {
    display: block;
  }
}

/* FADE OUT */
#video-preloader.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}