/* CSS chỉ dành cho trang giới thiệu Canada, xuống= in, lên= out */




@media (min-width:768px){
  /* wrap phải cho phép BG tràn full màn hình */
  .can-hero-wrap-des{
    position: relative;
    overflow: hidden; /* cắt BG tràn */
  }

  /* Khóa BG full ngang theo viewport */
  .can-hero-wrap-des .can-hero.BG-can-destop{
    width: 100vw !important;
    max-width: 100vw !important;

    /* kéo BG ra giữa màn hình */
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* bạn muốn cao 650px cố định */
    height: 650px !important;
  }

  /* nếu bên trong có img cover thì ép cover */
  .can-hero-wrap-des .can-hero.BG-can-destop img,
  .can-hero-wrap-des .can-hero.BG-can-destop .bg{
    width:100% !important;
    height:100% !important;
    object-fit: cover !important;
  }
}

@media (min-width: 768px){
  /* Section cha */
  .can-hero-wrap-des{
    position: relative;
    overflow: visible !important;

    /* Biến chỉnh nhanh cho desktop (giữ giống Mỹ) */
    --gap-bottom-des: 0px;

    --flag-w-des:  clamp(520px, 52vw, 980px);
    --crest-w-des: clamp(220px, 22vw, 520px);

    --crest-w-des: 18vw;        /* kích thước QUỐC HUY (tương đương Liberty) */
    --crest-left-des: 14vw;      /* vị trí quốc huy từ mép trái */

    --hero-top-gap-des: 60px;
    
    --crest-anchor-px: 20px;
    padding-top: var(--hero-top-gap-des) !important;
  }

  /* Banner desktop (div.banner với class "can-hero ...") */
  .can-hero-wrap-des .can-hero{
    position: relative;
    overflow: visible !important;
    -webkit-clip-path:none !important; clip-path:none !important;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
   /* Phá inline của flatsome */
    .can-hero-wrap-des .BG-can-flag-destop,
    .can-hero-wrap-des .BG-quochuy-can-destop{
      width: auto !important;     /* reset inline */
      max-width: none !important; /* bạn đã có */
    }
  /* 2 ảnh đứng CÙNG CẤP banner, neo vào đáy banner */
  .can-hero-wrap-des .BG-can-flag-destop,
  .can-hero-wrap-des .BG-quochuy-can-destop{
    position: absolute !important;
    top: calc(var(--banner-top-des, 0px) + var(--banner-h-des, 0px));
    left: 0;
    transform: translateY(calc(-100% + var(--gap-bottom-des,0))) translateX(var(--slide,0)) !important;
    height: auto !important; max-width: none !important;
    pointer-events: none;
    will-change: transform, opacity;
  }

  /* ===== LÁ CỜ (z-index 2) — đi sau quốc huy ===== */
  .can-hero-wrap-des .BG-can-flag-destop{
    z-index: 2;
    left: var(--flag-left-des);
    width: var(--flag-w-des) !important;

    opacity: 0;

    /* vào từ trái giống Mỹ */
    --slide: -30%; 

    transition:
      opacity .6s ease,
      transform 1000ms cubic-bezier(.3,0,.2,1);

    /* ✅ đi sau quốc huy một nhịp */
    transition-delay: 140ms;
  }

  /* ===== QUỐC HUY (z-index 3) — đi trước ===== */
  .can-hero-wrap-des .BG-quochuy-can-destop{
    z-index: 3;
    left: var(--crest-left-des);
    width: var(--crest-w-des) !important;

    opacity: 0;

    /* vào từ trái giống Liberty */
     --slide: -120%; 

    transition:
      transform 1000ms cubic-bezier(.3,0,.2,1),
      opacity .6s ease;

    transition-delay: 0ms;
  }

  /* LẦN 1: vào và dừng cùng 1 chỗ */
  .can-hero-wrap-des.is-active .BG-can-flag-destop{ opacity:1; --slide:0; }
  .can-hero-wrap-des.is-active .BG-quochuy-can-destop{ opacity:1; --slide: 20%; }

  /* LẦN 2: cả 2 chạy qua phải để biến mất (giống Mỹ) */
  .can-hero-wrap-des.is-out .BG-can-flag-destop{ opacity:0; --slide: 150%;  transition-delay: 80ms; }
  .can-hero-wrap-des.is-out .BG-quochuy-can-destop{ opacity:0; --slide: 130%; transition-delay: 0ms; }

  /* Reset tức thời về trái để lần sau luôn chạy từ trái */
  .can-hero-wrap-des.no-anim .BG-can-flag-destop,
  .can-hero-wrap-des.no-anim .BG-quochuy-can-destop{ transition:none !important; }

  .can-hero-wrap-des.reset-left .BG-can-flag-destop{ opacity:0; --slide:-10vw; }
  .can-hero-wrap-des.reset-left .BG-quochuy-can-destop{ opacity:0; --slide:-60vw; }

  /* Text overlay desktop – dùng chung class của Mỹ */
  .can-hero-wrap-des .usa-text-destop{
    position: absolute;
    z-index: 50;
    left: 50%;
    top: calc(var(--banner-top-des,0px) + var(--banner-h-des,0px)*0.5);
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: auto;
    font-size: clamp(20px, 7vw, 36px);
    line-height: 1.1;
  }
}


/* ===== Tooltip giới thiệu Quốc huy Canada ===== */
/* ===== Tooltip giới thiệu Quốc huy Canada (bám dưới crest 2px) ===== */
.can-hero-wrap-des .can-crest-tip{
  position: absolute;
  z-index: 99; /* để cao */
  left: var(--crest-cx, 0px);

  /* ✅ kéo lên theo anchor (để xử lý PNG trong suốt) */
  top: calc(var(--crest-bottom, 0px) - var(--crest-anchor-px, 120px) + 15px);

  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
}

/* Chỉ hiện khi crest đã dừng */
.can-hero-wrap-des.crest-stopped .can-crest-tip{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.can-hero-wrap-des .can-crest-tip .bubble{
  position: relative;
  background: #1e4f86;
  color: #fff;
  border: 2px solid #000;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* Mũi tên chỉ lên crest */
.can-hero-wrap-des .can-crest-tip .bubble::after{
  content:"";
  position:absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #1e4f86;
  filter: drop-shadow(0 -2px 0 #000);
}


/* ============================= */
/* ===== CANADA – MOBILE ===== */
/* ============================= */

@media (max-width: 767px){

/* ===== Section cha ===== */
.can-hero-wrap{
  position: relative;
  overflow: visible !important;

  /* biến tinh chỉnh */
  --flag-w-mb: 58vw; /* lá cờ */
  --crest-w-mb: 42vw;/* quốc huy */

  /* vị trí dừng (tinh chỉnh lệch trái/phải) */
  --flag-stop-mb: 0vw;
  --crest-stop-mb: 2vw; /* chỉnh cho quốc huy lệch trái thêm */

  --hero-top-gap-mb: 36px;
  padding-top: var(--hero-top-gap-mb);
}

/* ===== Banner nền ===== */
.can-hero-wrap .can-hero-banner-mobile{
  position: relative;
  width: 100vw;
  height: 520px;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}

.can-hero-wrap .can-hero-banner-mobile img,
.can-hero-wrap .can-hero-banner-mobile .bg{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===== Lá cờ & Quốc huy (cùng tầng) ===== */
.can-hero-wrap .BG-can-flag-mobile,
.can-hero-wrap .BG-quochuy-can-mobile{
  position:absolute;
  bottom:0;
  left:50%;
  pointer-events:none;
  will-change: transform, opacity;
  opacity:0;

  transition:
    transform 900ms cubic-bezier(.3,0,.2,1),
    opacity .5s ease;
}
  .can-hero-wrap .BG-quochuy-can-mobile,
  .can-hero-wrap .BG-quochuy-can-mobile img{
    width: var(--crest-w-mb) !important;
    height: auto !important;
  }
/* ===== Lá cờ ===== */
.can-hero-wrap .BG-can-flag-mobile{
  width: var(--flag-w-mb);
  z-index:2;
  transform: translateX(-160%); /* mặc định nằm trái (để lần đầu chạy từ trái) */
  transition-delay:120ms;
}

/* ===== Quốc huy ===== */
.can-hero-wrap .BG-quochuy-can-mobile{
  z-index:3;
  transform: translateX(-180%); /* mặc định nằm trái (để lần đầu chạy từ trái) */
  transition-delay:0ms;
}

/* ===== TRẠNG THÁI IN (đứng giữa) ===== */
.can-hero-wrap.is-active .BG-can-flag-mobile{
  opacity:1;
  transform: translateX(calc(-50% + var(--flag-stop-mb)));
}
.can-hero-wrap.is-active .BG-quochuy-can-mobile{
  opacity:1;
  transform: translateX(calc(-50% + var(--crest-stop-mb)));
}

/* ===== TRẠNG THÁI OUT (chạy qua phải) ===== */
.can-hero-wrap.is-out .BG-can-flag-mobile{
  opacity:0;
  transform: translateX(180%);
}
.can-hero-wrap.is-out .BG-quochuy-can-mobile{
  opacity:0;
  transform: translateX(160%);
}

/* ===== RESET: ép ngay lập tức về trái (chỉ dùng cho lần đầu) ===== */
.can-hero-wrap.no-anim .BG-can-flag-mobile,
.can-hero-wrap.no-anim .BG-quochuy-can-mobile{ transition:none !important; }

.can-hero-wrap.reset-left .BG-can-flag-mobile{ opacity:0; transform: translateX(-160%); }
.can-hero-wrap.reset-left .BG-quochuy-can-mobile{ opacity:0; transform: translateX(-180%); }

/* ===== RESET: ép ngay lập tức về phải (dùng cho các lần IN sau) ===== */
.can-hero-wrap.reset-right .BG-can-flag-mobile{ opacity:0; transform: translateX(180%); }
.can-hero-wrap.reset-right .BG-quochuy-can-mobile{ opacity:0; transform: translateX(160%); }

/* ===== Text CANADA ===== */
.can-hero-wrap .can-text-mobile{
  position:absolute;
  z-index:50;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  font-size: clamp(22px, 7vw, 32px);
  line-height:1.1;
  pointer-events:auto;
}

/* =========================
   TOOLTIP MOBILE (fixed + đè section dưới)
========================= */
.can-crest-tip-mb{
  position: fixed;
  z-index: 2147483647; /* đè mọi thứ */
  left: 0;
  top: 0;
  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
}
.can-crest-tip-mb.is-show{
  opacity: 1;
}

.can-crest-tip-mb .bubble{
  position: relative;
  background: #1e4f86;
  color: #fff;
  border: 2px solid #000;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.can-crest-tip-mb .bubble::after{
  content:"";
  position:absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #1e4f86;
  filter: drop-shadow(0 -2px 0 #000);
}

}