/* ================= DESKTOP ONLY ================= */
@media (min-width: 768px){
  .lat-hero-wrap-des{
    position: relative;
    overflow: visible !important;

    --hero-top-gap-des: 60px;
    padding-top: var(--hero-top-gap-des) !important;

    --coa-left-des: 20px;
    --flag-right-des: 20px;

    --coa-w-des: 22vw;
    --flag-w-des: 22vw;
  }

  /* ===== NEO CHUẨN THEO TÂM BG ===== */
  .lat-hero-wrap-des .BG-COA-lat-destop,
  .lat-hero-wrap-des .BG-lat-flag-destop{
    position: absolute !important;
    top: calc(var(--banner-top-des,0px) + var(--banner-h-des,0px) * 0.5);
    height: auto !important;
    max-width: none !important;
    pointer-events: none;
    will-change: transform, opacity;

    transform:
      translateY(-50%)
      translateY(var(--slideY,0)) !important;
  }

  /* ===== QUỐC HUY – TRÁI – TRÊN ↓ GIỮA ↓ ĐI TIẾP ===== */
  .lat-hero-wrap-des .BG-COA-lat-destop{
    z-index: 3;
    left: var(--coa-left-des);
    width: var(--coa-w-des) !important;

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

  /* ===== LÁ CỜ – PHẢI – DƯỚI ↑ GIỮA ↑ ĐI TIẾP ===== */
  .lat-hero-wrap-des .BG-lat-flag-destop{
    z-index: 2;
    right: var(--flag-right-des);
    left: auto;
    width: var(--flag-w-des) !important;

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

  /* ===== IN: DỪNG CHÍNH GIỮA BG ===== */
  .lat-hero-wrap-des.is-active .BG-COA-lat-destop{ opacity:1; --slideY:0; }
  .lat-hero-wrap-des.is-active .BG-lat-flag-destop{ opacity:1; --slideY:0; }

  /* ===== OUT: ĐI TIẾP & BIẾN MẤT ===== */
  .lat-hero-wrap-des.is-out .BG-COA-lat-destop{ opacity:0; --slideY: 90vh; }
  .lat-hero-wrap-des.is-out .BG-lat-flag-destop{ opacity:0; --slideY:-90vh; }

  /* reset */
  .lat-hero-wrap-des.no-anim .BG-COA-lat-destop,
  .lat-hero-wrap-des.no-anim .BG-lat-flag-destop{ transition:none !important; }

  .lat-hero-wrap-des.reset-start .BG-COA-lat-destop{ opacity:0; --slideY:-70vh; }
  .lat-hero-wrap-des.reset-start .BG-lat-flag-destop{ opacity:0; --slideY: 70vh; }
  
    /* Text overlay desktop – nằm trên cùng & giữa banner */
    /* =========================
       LAT – Text overlay desktop
    ========================= */
    .lat-hero-wrap-des .lat-text-destop{
      position: absolute;
      z-index: 50;                 /* cao hơn ảnh */
      left: 50%;
    
      /* canh GIỮA banner theo biến JS */
      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;
    }
}

/* ================= MOBILE ONLY ================= */
@media (max-width: 767px){
  .lat-hero-wrap{
    --hero-top-gap-mb: 20px;
    padding-top: var(--hero-top-gap-mb) !important;

    --coa-left: 20px;
    --flag-right: 20px;

    --coa-w: 40vw;
    --flag-w: 48vw;
  }

  .lat-hero-wrap .BG-COA-lat-mobile,
  .lat-hero-wrap .BG-lat-flag-mobile{
    position:absolute !important;
    top: calc(var(--banner-top,0px) + var(--banner-h,0px) * 0.5);
    height:auto !important;
    max-width:none !important;
    pointer-events:none;
    will-change: transform, opacity;

    transform:
      translateY(-50%)
      translateY(var(--slideY,0)) !important;
  }

  .lat-hero-wrap .BG-COA-lat-mobile{
    z-index:3;
    left: var(--coa-left);
    width: var(--coa-w) !important;

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

  .lat-hero-wrap .BG-lat-flag-mobile{
    z-index:2;
    right: var(--flag-right);
    left:auto;
    width: var(--flag-w) !important;

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

  /* IN */
  .lat-hero-wrap.is-active .BG-COA-lat-mobile{ opacity:1; --slideY:0; }
  .lat-hero-wrap.is-active .BG-lat-flag-mobile{ opacity:1; --slideY:0; }

  /* OUT */
  .lat-hero-wrap.is-out .BG-COA-lat-mobile{ opacity:0; --slideY: 90vh; }
  .lat-hero-wrap.is-out .BG-lat-flag-mobile{ opacity:0; --slideY:-90vh; }

  .lat-hero-wrap.no-anim .BG-COA-lat-mobile,
  .lat-hero-wrap.no-anim .BG-lat-flag-mobile{ transition:none !important; }

  .lat-hero-wrap.reset-start .BG-COA-lat-mobile{ opacity:0; --slideY:-70vh; }
  .lat-hero-wrap.reset-start .BG-lat-flag-mobile{ opacity:0; --slideY: 70vh; }
  
      /* =========================
       LAT – Text overlay mobile
       (giống USA)
    ========================= */
    .lat-hero-wrap .lat-text-mobile{
      position: absolute;
      z-index: 50;
      left: 50%;
    
      /* canh GIỮA banner theo biến JS */
      top: calc(var(--banner-top,0px) + var(--banner-h,0px) * 0.5);
    
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: auto;
    
      font-size: clamp(20px, 7vw, 36px);
      line-height: 1.1;
    }
}



/* =========================
   LAT Tooltip (DESKTOP)
========================= */
.lat-hero-wrap-des .lat-coa-tip{
  position: absolute;
  z-index: 999999;
  left: var(--coa-cx, 0px);
  top:  calc(var(--coa-bottom, 0px) + 10px);
  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
}
.lat-hero-wrap-des.coa-stopped .lat-coa-tip{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.lat-hero-wrap-des .lat-coa-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);
}
.lat-hero-wrap-des .lat-coa-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);
}

/* =========================
   LAT Tooltip (MOBILE)
========================= */
.lat-coa-tip-mb{
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  transform: translate(var(--tip-tx, -50%), 0);
  opacity: 0;
  pointer-events: none;
  max-width: min(92vw, 360px);
}
.lat-coa-tip-mb.is-show{ opacity: 1; }
.lat-coa-tip-mb .bubble{
  position: relative;
  background: #1e4f86;
  color: #fff;
  border: 2px solid #000;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  max-width: 100%;
  overflow: visible !important;
  text-overflow: ellipsis;
}
.lat-coa-tip-mb .bubble::after{
  content:"";
  position:absolute;
  left: var(--arrow-x, 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);
}


html.apini-dark h2 {
  color: #fff !important;
}