/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme của Astra
Author: Webtop
Template: astra
Version: 1.0.5
*/

/* ================================================================
   1. Google Fonts Import (Saira + Source Sans Pro)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@600;700;800;900&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

/* ================================================================
   2. Typography Mặc định: 
      - H1 & H2: Saira
      - Tất cả phần tử còn lại (H3-H6, p, body, v.v.): Source Sans Pro
   ================================================================ */
:root {
  --wt-font-main: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --wt-font-heading: 'Saira', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Áp dụng Source Sans Pro cho toàn bộ trang */
html,
body,
button,
input,
select,
textarea,
p,
span,
a,
li,
div,
.uagb-desc-text,
.entry-content p {
  font-family: var(--wt-font-main) !important;
}

/* Mặc định thẻ p & nội dung mô tả: font-weight Regular (400) */
p,
.uagb-desc-text,
.entry-content p {
  font-weight: 400 !important;
}

/* CHỈ áp dụng font Saira cho thẻ H1 và H2 */
h1,
h2,
.h1,
.h2,
.entry-title {
  font-family: var(--wt-font-heading) !important;
  font-weight: 800 !important;
}

/* Tất cả các thẻ Heading còn lại (H3, H4, H5, H6) dùng Source Sans Pro Bold (700) */
h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--wt-font-main) !important;
  font-weight: 700 !important;
}

#primary {
  margin: 0 !important;
}

.wt-sticky {
  position: sticky;
  top: 120px;
}

.uagb-marketing-btn__link.wp-block-button__link {
  box-shadow: none !important;
}

.wt-w-full {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

@media (max-width: 977px) {
  .wt-no-sticky {
    position: relative !important;
    top: 0 !important;
  }
}

.wt-img-w-full figure,
.wt-img-w-full img {
  width: 100% !important;
}

.wt-check-list>div {
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.wt-check-list .wp-block-uagb-icon-list-child::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("/wp-content/uploads/2026/07/check-1.png") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

.wt-check-list .wp-block-uagb-icon-list-child {
  display: flex !important;
  align-items: center !important;
  position: relative;
  padding-left: 32px !important;
  margin: 0 !important;
}


@media (max-width: 977px) {
  .wt-grid-span-2 {
    grid-column: span 2 !important;
  }
}

/* WT Slide Procedure Gap Arrow */
.wt-slide-procedure>.wp-block-uagb-container,
.wt-slide-procedure>div {
  position: relative;
}

.wt-slide-procedure>.wp-block-uagb-container:not(:last-child)::after,
.wt-slide-procedure>div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  right: -14px;
  transform: translate(50%, -50%);
  width: 28px;
  height: 28px;
  background: url("assets/images/next.svg") no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}

/* WT Slide Procedure - 3 Item Horizontal Slider on <= 976px */
@media (max-width: 976px) {
  .wt-slide-procedure {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    column-gap: 20px !important;
    row-gap: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }

  .wt-slide-procedure::-webkit-scrollbar {
    display: none;
  }

  .wt-slide-procedure.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    user-select: none;
  }

  .wt-slide-procedure>.wp-block-uagb-container,
  .wt-slide-procedure>div {
    flex: 0 0 calc((100% - 40px) / 3) !important;
    min-width: calc((100% - 40px) / 3) !important;
    max-width: calc((100% - 40px) / 3) !important;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  /* Ẩn icon/mũi tên trước sản phẩm đầu tiên */
  .wt-slide-procedure>.wp-block-uagb-container:first-child::before,
  .wt-slide-procedure>div:first-child::before {
    display: none !important;
    content: none !important;
  }
}

/* WT Slide Procedure - 2 Item Horizontal Slider on <= 600px */
@media (max-width: 600px) {
  .wt-slide-procedure {
    column-gap: 24px !important;
    padding-right: 24px !important;
  }

  .wt-slide-procedure>.wp-block-uagb-container,
  .wt-slide-procedure>div {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    min-width: calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}



/* ================================================================
   Swap Indicator (mobile/tablet guide)
   ================================================================ */
.wt-slide-procedure-wrap {
  position: relative !important;
  width: 100%;
}

.tva-swap-indicator-container {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  pointer-events: none;
  width: 152px;
  height: 52px;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 30px;
  box-sizing: border-box;
}

@media (max-width: 976px) {
  .tva-swap-indicator-container {
    display: block !important;
  }
}

.tva-hand-icon {
  animation: tva-hand-swipe 1.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tva-hand-swipe {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-8px);
  }

  50% {
    transform: translateX(0);
  }

  75% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ================================================================
   CTA Home Section - Overlay Blur Backgrounds
   ================================================================ */
.wt-cta-home {
  position: relative;
  overflow: hidden;
}

/* Overlay Blur 1 (Glow bên trái - Top/Left như Hình 1) */
.wt-cta-home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 352px;
  height: 216px;
  background-image: url('./assets/images/Overlay+Blur-1.svg');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Overlay Blur 2 (Glow bên phải - Top/Right như Hình 2) */
.wt-cta-home::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 352px;
  height: 288px;
  background-image: url('./assets/images/Overlay+Blur-2.svg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Đảm bảo nội dung (text, button) bên trong CTA luôn hiển thị phía trên lớp overlay */
.wt-cta-home>* {
  position: relative;
  z-index: 2;
}

/* Responsive: Vị trí ảnh overlay blur khi màn hình < 977px */
@media (max-width: 976px) {

  /* Ẩn hình 1 khi màn hình < 976px */
  .wt-cta-home::before {
    display: none;
  }

  /* Overlay Blur 2 (Góc trên bên phải, chiều cao 288px mờ dần mịn màng) */
  .wt-cta-home::after {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: 352px;
    max-width: 100%;
    height: 288px;
    transform: none;
    background-position: right top;
    background-size: contain;
  }

}

/* ================================================================
   Hero Home Supplementary Images (.wt-posi-hero-home)
   ================================================================ */
.wt-posi-hero-home {
  position: relative;
}

/* Ảnh 1 (supplementary-images-1.svg): Sát góc dưới bên phải, co giãn mượt mà theo tỉ lệ */
.wt-posi-hero-home::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  max-width: 672px;
  aspect-ratio: 48 / 37;
  background-image: url('/wp-content/uploads/2026/09/day-dien-hero-scaled.webp');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  pointer-events: none;
  z-index: 1;
}

/* Ảnh 2 (supplementary-images-2.svg): Nằm cạnh cụm cáp bên phải, gối nhẹ phía sau */
.wt-posi-hero-home::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 36%;
  width: 30%;
  max-width: 456px;
  aspect-ratio: 6 / 5;
  background-image: url('/wp-content/uploads/2026/09/day-cuon-dien-hero.webp');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Đảm bảo nội dung chính của Hero nằm nổi lên trên 2 ảnh nền */
.wt-posi-hero-home>* {
  position: relative;
  z-index: 2;
}

/* Trường hợp chèn trực tiếp thẻ <img> bên trong .wt-posi-hero-home */
.wt-posi-hero-home img.supplementary-img-1,
.wt-posi-hero-home .supplementary-img-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 50%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.wt-posi-hero-home img.supplementary-img-2,
.wt-posi-hero-home .supplementary-img-2 {
  position: absolute;
  bottom: 0;
  right: 36%;
  max-width: 30%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* ================================================================
   Hero Home Supplementary Images - Responsive (Mobile & Tablet)
   ================================================================ */
@media (max-width: 976px) {

  /* Tạo khoảng đệm phía dưới để hiển thị trọn vẹn ảnh, giữ nguyên cấu trúc layout của Astra */
  .wt-posi-hero-home {
    padding-bottom: clamp(200px, 62vw, 560px) !important;
  }

  /* Ẩn ảnh 2 (before) và các thẻ img rời nếu có */
  .wt-posi-hero-home::before,
  .wt-posi-hero-home img.supplementary-img-1,
  .wt-posi-hero-home .supplementary-img-1,
  .wt-posi-hero-home img.supplementary-img-2,
  .wt-posi-hero-home .supplementary-img-2 {
    display: none !important;
    content: none !important;
  }

  /* Dùng ảnh hero-home-mobile.webp căn giữa chính xác ở đáy, cách đều 2 bên 20px, giữ nguyên tỉ lệ không vỡ */
  .wt-posi-hero-home::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    aspect-ratio: 1360 / 872;
    height: auto;
    background-image: url('/wp-content/uploads/2026/09/hero-home-mobile.webp');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
  }

  /* Đưa thẻ strong trong h1 của .wt-up-h-b về dạng chữ bình thường trên mobile */
  .wt-up-h-b h1 strong {
    text-transform: none;
  }
}

.wt-h-img-full figure,
.wt-h-img-full img {
  height: 100% !important;
}

@media (min-width: 767px) {
  .hide-mobile-767 {
    display: none !important;
  }
}

/* ================================================================
   Image Hover Zoom Animation
   ================================================================ */
.wt-hover-img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.wt-hover-img .wp-block-uagb-image__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.wt-hover-img .wp-block-uagb-image__figure img {
  display: block;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.wt-hover-img:hover .wp-block-uagb-image__figure img {
  transform: scale(1.05);
}

.wt-bg-linner {
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.80) 0%, rgba(2, 6, 23, 0.70) 74.15%, rgba(2, 6, 23, 0.00) 100%);
  opacity: 0.9;
}

@media (min-width: 977px) {
  .max-width-487px {
    max-width: 487px !important;
  }
}

.wt-slide-w-full>.swiper-content,
.wt-slide-w-full>.swiper-content figure,
.wt-slide-w-full>.swiper-content img {
  width: 100% !important
}

.wt-img-16-10 img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  display: block !important;
}

.wt-img-3-2 img {
  width: 100% !important;
  aspect-ratio: 3 / 1.5 !important;
  object-fit: cover !important;
  display: block !important;
}

.wt-img-4-3 img{
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block !important;
}

.wt-border-gap>.uagb-container-inner-blocks-wrap>div {
  position: relative;
}

.wt-border-gap>.uagb-container-inner-blocks-wrap>div:not(:first-child)::before {
  content: "";
  position: absolute;

  top: calc(var(--wt-real-gap, 0px) / -2);

  left: 0;
  width: 100%;
  height: 1px;

  background: rgba(84, 100, 114, 0.45);

  pointer-events: none;
  z-index: 10;
}

.wt-flex-button-col > div:first-child {
    display:flex !important;
	flex-direction:column !important;
	align-items:start !important;
}

.wt-flex-button-col a {
  transition: color 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Loại bỏ border/outline/box-shadow khi focus hoặc active */
.wt-flex-button-col a:focus,
.wt-flex-button-col a:focus-visible,
.wt-flex-button-col a:active,
.wt-flex-button-col .wp-block-button__link:focus,
.wt-flex-button-col .wp-block-button__link:focus-visible,
.wt-flex-button-col .uagb-buttons-repeater:focus,
.wt-flex-button-col .uagb-buttons-repeater:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Đổi màu text thành #EE0000 khi link/button đang active, hover hoặc focus */
.wt-flex-button-col .wp-block-uagb-buttons-child a.active,
.wt-flex-button-col .wp-block-uagb-buttons-child a.active .uagb-button__link,
.wt-flex-button-col .wp-block-uagb-buttons-child a.is-active,
.wt-flex-button-col .wp-block-uagb-buttons-child a.is-active .uagb-button__link,
.wt-flex-button-col .wp-block-uagb-buttons-child.active a,
.wt-flex-button-col .wp-block-uagb-buttons-child.active .uagb-button__link,
.wt-flex-button-col .wp-block-uagb-buttons-child.is-active a,
.wt-flex-button-col .wp-block-uagb-buttons-child.is-active .uagb-button__link,
.wt-flex-button-col a:hover,
.wt-flex-button-col a:hover .uagb-button__link,
.wt-flex-button-col a:focus,
.wt-flex-button-col a:focus .uagb-button__link,
.wt-flex-button-col a:active,
.wt-flex-button-col a:active .uagb-button__link {
  color: #EE0000 !important;
}

/* ================================================================
   Xử lý Slider Spectra (UAGB) theo tỉ lệ 16:7 (Aspect Ratio 16/7)
   ================================================================ */

/* 1. Thiết lập tỉ lệ 16:7 cho toàn bộ khối Slider & Swiper */
.wp-block-uagb-slider:has(.wt-slide-w-full),
.wp-block-uagb-slider:has(.wt-slide-w-full) .uagb-slides,
.wp-block-uagb-slider:has(.wt-slide-w-full) .swiper {
  width: 100% !important;
  aspect-ratio: 16 / 7.5 !important;
  height: auto !important;
}

/* 2. Thiết lập swiper-wrapper và slide kế thừa 100% chiều cao của tỉ lệ 16:7 */
.wp-block-uagb-slider:has(.wt-slide-w-full) .swiper-wrapper,
.wp-block-uagb-slider:has(.wt-slide-w-full) .swiper-slide,
.wt-slide-w-full {
  height: 100% !important;
  min-height: 100% !important;
}

/* 3. Ép thẻ bọc nội dung swiper-content giãn full 100% và hiển thị dạng Flexbox */
.wp-block-uagb-slider .wt-slide-w-full .swiper-content {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 4. Cho phép Container con bên trong slide giãn full 100% */
.wp-block-uagb-slider .wt-slide-w-full .swiper-content > .wp-block-uagb-container,
.wp-block-uagb-slider .wt-slide-w-full .swiper-content > .wp-block-uagb-container > .uagb-container-inner-blocks-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 5. Đảm bảo slide hình ảnh phủ kín toàn bộ slide theo tỉ lệ 16:7 */
.wp-block-uagb-slider .wt-slide-w-full .swiper-content figure.wp-block-image,
.wp-block-uagb-slider .wt-slide-w-full .swiper-content figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
}

/* 6. Trên màn hình di động (<= 767px), giữ min-height để nội dung chữ và nút bấm luôn vừa vặn */
@media (max-width: 767px) {
  .wp-block-uagb-slider:has(.wt-slide-w-full),
  .wp-block-uagb-slider:has(.wt-slide-w-full) .uagb-slides,
  .wp-block-uagb-slider:has(.wt-slide-w-full) .swiper {
/*     min-height: 380px !important; */
    aspect-ratio: auto !important;
  }
}

.wt-p-font-weight-700 p {
	font-weight:700 !important;
}

.wt-img-h-full img{
	height:100% !important;
}

.wt-img-h-full img{
	height:100% !important;
}



.wt-bg-over {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}