/* =============================================================================
 * add.css — CSS override thủ công cho Lace (nạp SAU bundle cursor-lace.css).
 *
 * Dùng khi cần style mới mà class Tailwind KHÔNG có trong bundle build sẵn
 * (Tailwind đã bị purge trong dist -> class mới sẽ im lặng vô tác dụng).
 * Quy ước: class tự viết prefix `fx-`. Không đẻ class Tailwind mới ở đây.
 * ========================================================================== */

/* Light-hero (archive danh mục, liên hệ, chính sách) dùng .fx-page-hero. Các class
   pt-24 / pb-12 / lg:pt-[26vh] / lg:pb-[8vh] BỊ PURGE khỏi bundle -> title không có
   khoảng cách trên (đè header) VÀ chiều cao section lệch -> nền [data-section=page-hero]
   (gradient + static.jpg) scale sai -> để lại VỆT RANH. Ép ĐÚNG padding gốc để khớp. */
.fx-page-hero {
  padding-top: 6rem;    /* pt-24 */
  padding-bottom: 3rem; /* pb-12 */
}
@media (min-width: 1024px) {
  .fx-page-hero {
    padding-top: 26vh;   /* lg:pt-[26vh] */
    padding-bottom: 8vh; /* lg:pb-[8vh] */
  }
}


/* Mô tả khối explore: nội dung editor bọc <p> — bỏ margin thừa, canh giữa. */
.fx-explore-desc p{margin:0 auto;}
.fx-explore-desc p + p{margin-top:1em;}


/* KIRKI FONT FIX: Flatsome/Kirki Customizer ép body -> Lato, đè font bundle.
   Trả lại font thiết kế (Segoe UI) cho toàn site. Tiêu đề vẫn .oai-agnifa. */
body{font-family:var(--font-body,"Segoe UI",ui-sans-serif,system-ui,sans-serif)!important;}


/* OAI WEIGHT FIX: Kirki ép h1..h6 font-weight:700 -> OAI Agnifa (chỉ có 1 nét 400) bị fake bold.
   Trả weight 400 cho mọi tiêu đề .oai-agnifa (đúng thiết kế, nét thanh). */
.oai-agnifa{font-weight:400!important;}


/* CF7 SELECT FIX: CF7 bọc <span.wpcf7-form-control-wrap> (inline) quanh input/select
   -> ép block full-width để underline + chevron .fx-contact-select khớp thiết kế. */
.fx-contact-field .wpcf7-form-control-wrap{display:block;width:100%;}


/* CF7 SELECT CHEVRON: canh chevron GIỮA dòng select (không neo đáy div -> thẳng hàng text).
   Ẩn chevron cũ (.fx-contact-select::after) khi có wrap CF7, vẽ lại giữa ô select. */
.fx-contact-select:has(.wpcf7-form-control-wrap)::after{display:none;}
.fx-contact-select .wpcf7-form-control-wrap{position:relative;}
.fx-contact-select .wpcf7-form-control-wrap::after{content:"";position:absolute;right:0.2rem;top:50%;width:0.6rem;height:0.6rem;border-right:1.5px solid color-mix(in srgb,var(--color-ink) 50%,transparent);border-bottom:1.5px solid color-mix(in srgb,var(--color-ink) 50%,transparent);transform:translateY(-70%) rotate(45deg);pointer-events:none;}


/* EXPLORE CLICK-THROUGH: khối ảnh sticky (.fx-explore-images) phủ màn hình đè caption
   -> bắt mất click nút "Xem thêm". Cho vùng ảnh xuyên chuột, chỉ giữ nút carousel + link ảnh. */
[data-section="explore"] .fx-explore-imgwrap{pointer-events:none;}
[data-section="explore"] .fx-explore-imgwrap a,
[data-section="explore"] .fx-explore-imgwrap button{pointer-events:auto;}


/* ALBUM-SUB WEIGHT: mô tả teaser album (home) vốn weight 400 (nặng) — đồng bộ về
   font-light (300) cho khớp mô tả explore/love (image chuẩn user chọn). */
.fx-album-sub{font-weight:300;}


/* SERVICE-TT WEIGHT: 3 đoạn text quanh thẻ dịch vụ (home Services) vốn weight 400
   -> đồng bộ font-light (300) như mô tả explore/album. */
.fx-service-tt{font-weight:300;}


/* DESC WEIGHT SYNC: đồng bộ các đoạn MÔ TẢ còn weight 400 về font-light 300
   (đoạn trích Feedback + mô tả chi tiết váy) — khớp explore/album/service. */
.fx-feedback-quote p{font-weight:300;}
[data-section="dress-detail"] .fx-rte{font-weight:300;}


/* DRESS DETAIL LIGHTBOX: ảnh váy Bridal khi zoom cần dùng gần trọn màn hình.
   Scope theo single dress để không làm thay đổi lightbox album/story. */
body.single-dress .fx-lightbox-stage{
  padding:clamp(.75rem,2vw,1.5rem) clamp(3.75rem,6vw,6rem);
}
body.single-dress .fx-lightbox-img{
  max-width:calc(100vw - clamp(7.5rem,12vw,12rem));
  max-height:calc(100vh - clamp(1.5rem,4vw,3rem));
  width:auto;
  height:auto;
  object-fit:contain;
}
body.single-dress .fx-lightbox-thumbs,
body.single-dress .fx-lightbox-counter{
  display:none;
}

@media (max-width: 767px){
  body.single-dress .fx-lightbox-stage{
    padding:3.75rem .75rem 1rem;
  }
  body.single-dress .fx-lightbox-img{
    max-width:calc(100vw - 1.5rem);
    max-height:calc(100vh - 4.75rem);
  }
}


/* MENU OVERLAY FIT: menu nav canh giữa full màn hình, contact lại neo đáy nên ở
   viewport thấp item cuối dễ đè số điện thoại. Chừa vùng đáy cho contact và co
   nhịp chữ theo chiều cao màn hình. */
.fx-menu-nav{
  bottom:clamp(7.75rem,18vh,11rem);
  gap:clamp(.15rem,1.1vh,.75rem);
}
.fx-menu-link{
  white-space:nowrap;
}
.fx-menu-contact{
  bottom:clamp(1.25rem,4.5vh,3.25rem);
}

@media (max-height: 560px){
  .fx-menu-nav{
    bottom:clamp(5.75rem,16vh,8rem);
    gap:.05rem;
  }
  .fx-menu-link{
    font-size:clamp(1.25rem,9vh,3.1rem);
    line-height:.94;
  }
  .fx-menu-contact{
    gap:.45rem;
    bottom:1rem;
  }
}

@media (max-height: 360px){
  .fx-menu-nav{
    bottom:5.25rem;
  }
  .fx-menu-link{
    font-size:clamp(1.1rem,8.5vh,2.2rem);
    line-height:.9;
  }
  .fx-menu-contact{
    gap:.25rem;
    bottom:.65rem;
  }
  .fx-menu-social svg{
    width:17px;
    height:17px;
  }
}

@media (max-width: 640px){
  .fx-menu-nav{
    bottom:clamp(6.5rem,17vh,9rem);
  }
  .fx-menu-link{
    font-size:clamp(1.9rem,14vw,3.7rem);
  }
}


/* MENU BRAND BACKGROUND: menu overlay dung mau cam thuong hieu cua Lace. */
.fx-menu{
  background:var(--color-brand);
}
.fx-menu-veil{
  background:var(--color-brand)!important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.fx-menu-blob{
  background:var(--color-brand)!important;
}
.fx-header-nav-label,
.fx-menu-link,
.fx-menu-phone,
.fx-menu-social,
.fx-header-x{
  color:var(--color-paper)!important;
}
.fx-menu-social a{
  color:var(--color-paper)!important;
}
.fx-menu-social a:hover,
.fx-menu-social a:focus-visible{
  color:var(--color-bronze)!important;
}