/* Fusion Life demo page styles
 * Tach tu page-fusionlifedemo.php (inline <style>) sang file rieng.
 * Enqueue trong functions.php: theme_style() -> is_page_template('page-fusionlifedemo.php')
 */



      :root {
        --bg: #faf4ec;
        --orange: #faa85f;
        --orange-dark: #faa85f;
        --green: #8db08d;
        --blue: #658ea4;
        --gold: #cc902a;
        --text-grey: #5a5a5a;
      }

      .hero a:hover {
        color: #fff
      }

      .page-template-page-fusionlifedemo #checkrates-mob {
        display: none;
      }

      body {
        font-family: "Montserrat", sans-serif;
        background: var(--bg);
        color: var(--text-grey);
        -webkit-font-smoothing: antialiased;
      }

      /* ---------- Top banner ---------- */
      .top-banner {
        display: block;
        width: 100%;
        max-width: 1280px;
        height: auto;
        margin: 0 auto;
      }
      .page-template-page-fusionlifedemo #menu-mobile,
      .page-template-page-fusionlifedemo #menu {
        position: static !important;
        background: #faa760;
      }

      .wrapper {
        max-width: 1040px;
        margin: 0 auto;
        padding: 55px 40px 70px;
      }

      /* ---------- Heading ---------- */
      .headline h3 strong,
      .headline {
        text-align: center;
        color: var(--orange);
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 0.5px;
      }
      .subheadline p,
      .subheadline {
        text-align: center;
        font-family: "Kokomo Breeze", cursive;
        font-size: 70px;
        color: #4A4A4A;
        margin-top: 2px;
      }

      .intro {
        text-align: center;
        max-width: 560px;
        margin: 34px auto 0;
        font-size: 12px;
        line-height: 1.9;
      }
      .intro .lead {
        color: #3a3a3a;
        font-weight: 500;
        margin-bottom: 16px;
      }

      /* ---------- Benefits icons ---------- */
      .benefits {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        margin-top: 55px;
      }
      .benefit {
        text-align: center;
      }
      .benefit .icon {
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--orange);
        margin-bottom: 14px;
      }
      .benefit .icon svg,
      .benefit .icon img {
        width: 46px;
        height: 46px;
        object-fit: contain;
      }
      .benefit h4 {
        color: var(--orange);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        line-height: 1.3;
      }
      .benefit p {
        font-size: 12px;
        line-height: 1.6;
      }

      /* ---------- Tabs ---------- */
      .tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 35px;
        position: relative;
        z-index: 3;
        align-items: stretch; /* 4 tab cao bằng nhau dù text ngắn hay dài */
      }
      .tab {
        border: none;
        cursor: pointer;
        padding: 18px 18px;
        border-radius: 8px;
        text-align: center;
        color: #fff !important;
        font-family: inherit;
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          opacity 0.18s ease;
      }
      .tab h3 {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
      }
      .tab p {
        font-size: 12px;
        line-height: 1.5;
        opacity: 0.92;
      }

      .tab[data-tier="fusionlifer"] {
        background: var(--orange);
      }
      .tab[data-tier="premier"] {
        background: var(--green);
      }
      .tab[data-tier="prestige"] {
        background: var(--blue);
      }
      .tab[data-tier="elite"] {
        background: var(--gold);
      }

      .tab.active {
        opacity: 1;
        border-radius: 8px 8px 0 0; /* active: bo 2 góc trên, vuông 2 góc dưới */
        position: relative;
        z-index: 4;
      }
      /* đoạn "cổ" nối tab active xuống block, chỉ rộng ~80% */
      .tab.active::after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: 12px;
        background: inherit; /* lấy đúng màu của tab đang active */
        z-index:-1
      }
      .tab:not(.active):hover {
        opacity: 1;
        transform: translateY(-3px);
      }

      /* ---------- Content panel ---------- */
      .panel-area {
        position: relative;
        z-index: 2;
        margin-top: 12px; /* chừa chỗ cho đoạn cổ; cổ (40px) chồm xuống liền mạch */
      }
      .panel {
        display: none;
        overflow: hidden;
      }
      /* khung nội dung luôn rộng bằng 3 tab (3 cột + 2 gap) = calc(75% - 2.5px) */
      .panel[data-tier="fusionlifer"] {
        margin-left: 0;
        width: calc(75% - 2.5px);
        width: 100%;
      }
      .panel[data-tier="premier"] {
        margin-left: calc(25% + 2.5px); /* bắt đầu từ cột 2 */
        width: calc(75% - 2.5px);
      }
      .panel[data-tier="prestige"] {
        margin-left: 0; /* kết thúc ở mép phải cột 3, text nằm bên phải */
        width: calc(75% - 2.5px);
        flex-direction: row-reverse;
      }
      .panel[data-tier="elite"] {
        /*margin-left: calc(25% + 2.5px); /* kết thúc ở mép phải cột 4 */
        width: calc(75% - 2.5px);
        flex-direction: row-reverse;
        width: 100%;
      }

      .panel.active {
        display: flex;
        animation: fade 0.35s ease;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      /* 2 tab cuối nối ở góc trên-PHẢI: bo góc trên-trái, vuông góc trên-phải */
      .panel[data-tier="prestige"].active,
      .panel[data-tier="elite"].active {
        border-top-left-radius: 10px;
        border-top-right-radius: 0;
      }
      @keyframes fade {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .panel-left {
        flex: 0 0 65%;
        position: relative;
        padding: 28px 30px;
        color: #fff;
        overflow: hidden;
      }
      /* Tagline mô tả trong panel: mặc định ẩn (desktop), chỉ hiện ở mobile */
      .panel__tagline {
        display: none;
      }
      /* decorative concentric rings + bird (Group.png)
         Desktop: chim chiếm 40% chiều ngang ô màu, nội dung 60% (tỷ lệ 4|6) */
      .panel-left::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0; /* mặc định chim nằm bên PHẢI (fusionlifer & premier) */
        width: 200px;
        background-image: url("http://fusionhotelgroup.com/wp-content/uploads/2026/07/Bird-only_white-oapcity-30.png");
        background-repeat: no-repeat;
        background-size: 75% auto; /* 75% của cột 40% -> chim luôn nằm gọn trong phần 4 */
        background-position: center;
        opacity: 0.4;
        pointer-events: none;
      }
      .panel-left ul {
        position: relative;
        z-index: 1;
        list-style: none;
        width: 60%;
      }
      .panel-left li {
        font-size: 12px;
        line-height: 1.4;
        padding-left: 14px;
        padding-bottom: 9px;
        margin-bottom: 9px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      }
      .panel-left li:last-child {
        border-bottom: none; /* dòng cuối không có đường kẻ */
        padding-bottom: 0;
        margin-bottom: 0;
      }
      .panel-left li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: -1px;
      }

      /* fusionlifer & premier: nội dung (6) bên TRÁI, chim (4) bên PHẢI
         -> dùng đúng vị trí mặc định của .panel-left::before ở trên */

      /* prestige & elite: TRUOC DAY dao nguoc (chim TRAI, noi dung PHAI).
         27/08 khach yeu cau doi lai cho giong 2 tab dau
         -> bo phan dao nguoc, dung luon bo cuc mac dinh o tren:
            noi dung (6) ben TRAI, chim (4) ben PHAI. */

      .panel-right {
        flex: 1 1 58%;
        background-size: cover;
        background-position: center;
        min-height: 300px;
      }

      .panel[data-tier="fusionlifer"] .panel-left {
        background: var(--orange);
      }
      .panel[data-tier="premier"] .panel-left {
        background: var(--green);
      }
      .panel[data-tier="prestige"] .panel-left {
        background: var(--blue);
      }
      .panel[data-tier="elite"] .panel-left {
        background: var(--gold);
      }
      @media (max-width: 425px) {
        .hero__cta {
          bottom: -4% !important;
        }
        .subheadline {
        line-height: 40px;
        }

            
      }
      @media (max-width: 1024px) {
        .wrapper {
          padding: 40px 16px 50px; /* giảm lề để có chỗ cho 4 tab */
        }
        /* 5 icon: hàng trên 3, hàng dưới 2 (căn giữa) */
        .benefits {
          grid-template-columns: repeat(6, 1fr);
          row-gap: 26px;
        }
        .benefit {
          grid-column: span 2;
        }
        .benefit:nth-child(4) {
          grid-column: 2 / span 2;
        }
        .benefit:nth-child(5) {
          grid-column: 4 / span 2;
        }
        /* giữ nguyên 4 tab / dòng trên điện thoại */
        .tabs {
          grid-template-columns: repeat(4, 1fr);
          gap: 6px;
        }
        .tab {
          padding: 10px 8px;
        }
        .tab h3 {
          font-size: 11px;
          margin-bottom: 0;
        }
        /* Mobile: bỏ chữ mô tả trong tab (chỉ để lại tên hạng cho gọn) */
        .tab p {
          display: none;
        }
        /* Mobile: chữ mô tả chuyển XUỐNG panel, nằm trên danh sách quyền lợi */
        .panel__tagline {
          display: block;
          position: relative;
          z-index: 1;
          font-size: 12px;
          line-height: 1.6;
          font-weight: 500;
          margin-bottom: 16px;
        }
        /* block nội dung full chiều rộng, bỏ ảnh, giữ ô màu + text + hình con chim */
        .panel[data-tier] {
          margin-left: 0;
          width: 100%;
        }
        /* full width -> chỗ nối tab nằm giữa block nên bo tròn cả 4 góc */
        .panel[data-tier].active {
          border-radius: 10px;
        }
        .panel-right {
          display: none;
        }
        .panel-left {
          flex: 1 1 100%;
          padding-bottom: 16px; /* padding dưới nhỏ hơn */
        }
        .panel-left ul {
          width: calc(50% - 3px); /* text rộng bằng 2 ô tab */
        }
        /* Mobile: chim chiếm đúng phần trống còn lại cạnh danh sách,
           căn giữa trong phần đó (fusionlifer & premier: 50% bên phải) */
        .panel-left::before {
          left: auto;
          right: 0;
          width: calc(50% - 3px);
          width: 150px;
          background-size: 70% auto;
          background-position: center;
        }
        /* 27/08: doi chim sang PHAI cho giong 2 tab dau.
           Van giu be rong 25% vi danh sach cua 2 tab nay rong 75%. */
        .panel[data-tier="prestige"] .panel-left::before,
        .panel[data-tier="elite"] .panel-left::before {
          left: auto;
          right: 0;
          width: calc(25% - 1.5px);
          background-size: 90% auto;
        }
        /* 2 tab cuối nội dung dài hơn -> text rộng bằng 3 ô tab */
        .panel[data-tier="prestige"] .panel-left ul,
        .panel[data-tier="elite"] .panel-left ul {
          width: calc(75% - 1.5px);
        }
      }

      .page-template-page-fusionlifedemo #checkrates {
        display: none !important;
      }

      /* ---------- Top banner ---------- */
      .hero {
        position: relative;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
      }
      .top-banner {
        display: block;
        width: 100%;
        height: auto;
      }
      /* Nút Enroll now đè lên banner (chỉnh 'bottom' để dịch lên/xuống) */
      .hero__cta {
        position: absolute;
        left: 50%;
        bottom: 4%;
        transform: translateX(-50%);
        background: var(--orange);
        color: #fff;
        text-decoration: none;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: clamp(11px, 1.5vw, 16px);
        padding: clamp(9px, 1.2vw, 15px) clamp(24px, 3.5vw, 50px);
        border-radius: 40px;
        white-space: nowrap;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease;
      }
      .hero__cta:hover {
        background: #f2923f;
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
      }

      /* Banner desktop / mobile: ẩn-hiện theo màn hình (ngưỡng 768px) */
      .top-banner--mobile {
        display: none;
      }

              .intro .lead {
        color: #3a3a3a;
        font-weight: 500;
        margin-bottom: 16px;
      }
      /* Rich text: bỏ margin thừa của <p> do editor sinh ra (giữ layout cũ) */
      .headline p,
      .subheadline p,
      .intro p {
        margin: 0;
      }
      /* Desktop / mobile riêng cho vùng heading (ngưỡng 768px) */
      .fl2-mob {
        display: none;
      }

     

      /* Chống nền trắng / viền lạ do dán định dạng vào rich text */
      .headline, .headline *,
      .subheadline, .subheadline *,
      .intro, .intro * {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }
      @media (max-width: 768px) {
        .fl2-dsk {
          display: none;
        }
        .fl2-mob {
          display: block;
        }
        .lead span{
          font-size:16px;
        }
      }

      /* ---------- Benefits icons ---------- */

      @media (max-width: 768px) {
        .top-banner--desktop {
          display: none;
        }
        .top-banner--mobile {
          display: block;
        }

        .page-template-page-fusionlifedemo #menu-mobile {
          height: 100%
        }

        .page-template-page-fusionlifedemo .menu-dropdown {
          margin: 0px;
        }

        .subheadline {
          font-size: 50px;
        }

        .panel-area .panel:first-child {
          border-top-left-radius: 0px !important;
         }

         .panel-area .panel:last-child {
          border-top-right-radius: 0px !important;
         }
}