/*
Theme Name: Flatsome Child
Theme URI: http://flatsome.uxthemes.com/
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Author URI: http://www.uxthemes.com/
Template: flatsome
Version: 3.0
*/

/* Custom Main Content Padding to account for absolute header */

/* 
 * Custom Full-Page Scroll (Front Page)
 */
html.casitek-scroll-locked,
body.casitek-scroll-locked {
    height: 100% !important;
    overflow: hidden !important;
}

body.is-front-page #wrapper {
    overflow: visible !important;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: transform;
}

body.is-front-page .fp-section {
    position: relative !important;
    width: 100vw !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important; /* Handle dynamic mobile viewport addresses bars */
    min-height: 100vh !important;
    overflow: hidden !important; /* Gọt sạch mọi phần thừa ngoài Viewport */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important; /* Triệt tiêu padding mặc định của Flatsome */
}

/* Ensure inner rows/columns within the .fp-section are centered but respect boundaries */
body.is-front-page .fp-section .row {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- CRITICAL FIX FOR DOWNLOAD CENTER VIEWPORT OVERFLOW --- */
body.is-front-page .fp-section.casitek-home-download-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 85px !important; /* Nhích lên gần Header hơn để nhường chỗ cho phần đáy */
    padding-bottom: 24px !important;
}

/* Ép thu nhỏ mạnh tay hơn */
body.is-front-page .fp-section.casitek-home-download-center .section-content {
    transform: scale(0.8); /* Thu nhỏ 28% thay vì 15% */
    transform-origin: top center;
    width: 100%;
}

/* Triệt tiêu hoàn toàn khoảng trắng vô ích dưới chữ Download Center */
body.is-front-page .casitek-home-download-center .casitek-download-center-title {
    margin-bottom: 0px !important; 
}
body.is-front-page .casitek-home-download-center .casitek-download-center-title h2 {
    font-size: clamp(24px, 3vw, 36px) !important;
}

/* Thu hẹp Row Headers (Datasheet, Catalogue...) */
body.is-front-page .casitek-home-download-center .casitek-download-row-header {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}
body.is-front-page .casitek-home-download-center .casitek-download-row-header h3 {
    font-size: 18px !important;
}
body.is-front-page .casitek-home-download-center .casitek-download-grid {
    margin-bottom: 8px !important;
}

/* Ép nhỏ kích thước Card để nhét vừa 3 hàng */
body.is-front-page .casitek-home-download-center .casitek-download-card__image {
    aspect-ratio: auto !important;
    height: 100px !important; /* Fix cứng chiều cao ảnh */
}
body.is-front-page .casitek-home-download-center .casitek-download-card__content {
    padding: 12px 16px !important;
}
body.is-front-page .casitek-home-download-center .casitek-download-card__content h4 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
}
body.is-front-page .casitek-home-download-center .casitek-download-card__content .subtitle {
    margin-bottom: 10px !important;
    font-size: 12px !important;
}
body.is-front-page .casitek-home-download-center .casitek-btn-download,
body.is-front-page .casitek-home-download-center .casitek-download-btn-detail {
    min-height: 36px !important;
}

/* --- FIX DOWNLOAD BUTTON RESPONSIVE & WPAUTOP ISSUE --- */
body.is-front-page .casitek-home-download-center .casitek-btn-download {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important; /* Khoảng cách giữa cục Text và cục Arrow */
    width: 100% !important;
}

/* Triệt tiêu thẻ <br> rác tự động sinh của WordPress */
body.is-front-page .casitek-home-download-center .casitek-btn-download br {
    display: none !important;
}

/* Căn giữa chữ Download */
body.is-front-page .casitek-home-download-center .casitek-btn-download .text {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Khóa cứng kích thước cục mũi tên, chống bóp méo trên Mobile/Tablet */
body.is-front-page .casitek-home-download-center .casitek-btn-download .arrow {
    flex: 0 0 36px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#header {
    z-index: 99999 !important;
}

.casitek-main {
    padding-top: 100px;
}

/* Custom Nav Menu Styling (Figma) */
ul.casitek-header-nav {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

ul.casitek-header-nav > li {
    margin: 0;
    padding: 0;
    position: relative;
}

ul.casitek-header-nav > li > a {
    color: #1E1E1E !important;
    font-weight: 400 !important;
    text-transform: none !important;
    font-size: 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

ul.casitek-header-nav > li.current-menu-item > a,
ul.casitek-header-nav > li > a:hover {
    color: #F36F21 !important;
    font-weight: 600 !important;
}

/* Active Indicator Line */
ul.casitek-header-nav > li.current-menu-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #F36F21;
}

/* Hover Indicator Line */
ul.casitek-header-nav > li:hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #F36F21;
}
ul.casitek-header-nav > li.current-menu-item:hover::after {
    background-color: #F36F21; /* Giữ màu cam nếu đang ở trang hiện tại */
}


:root {
    --casitek-header-caret-icon: url("data:image/svg+xml,%3Csvg width=%228%22 height=%226%22 viewBox=%220 0 8 6%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M3.48099 4.92617L0.172037 1.14392C-0.218469 0.69891 0.0989034 2.53695e-07 0.691562 2.53695e-07H7.30947C7.4421 -0.000113467 7.57196 0.0380073 7.68349 0.109798C7.79502 0.181588 7.88349 0.284005 7.93831 0.404783C7.99313 0.525561 8.01198 0.659582 7.99259 0.790794C7.9732 0.922006 7.9164 1.04485 7.82899 1.14461L4.52004 4.92548C4.45528 4.99959 4.37542 5.05898 4.28581 5.09968C4.19621 5.14037 4.09893 5.16143 4.00051 5.16143C3.9021 5.16143 3.80482 5.14037 3.71522 5.09968C3.62561 5.05898 3.54575 4.99959 3.48099 4.92548V4.92617Z%22 fill=%22%231E1E1E%22/%3E%3C/svg%3E");
}

ul.casitek-header-nav > li > a:is([href$="/products/"], [href$="/products"], [href*="/products/?"], [href$="/news/"], [href$="/news"], [href*="/news/?"])::after {
    content: "";
    width: 8px;
    height: 6px;
    flex: 0 0 8px;
    background-color: currentColor;
    -webkit-mask: var(--casitek-header-caret-icon) center / contain no-repeat;
    mask: var(--casitek-header-caret-icon) center / contain no-repeat;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

ul.casitek-header-nav > li:hover > a:is([href$="/products/"], [href$="/products"], [href*="/products/?"], [href$="/news/"], [href$="/news"], [href*="/news/?"])::after,
ul.casitek-header-nav > li:focus-within > a:is([href$="/products/"], [href$="/products"], [href*="/products/?"], [href$="/news/"], [href$="/news"], [href*="/news/?"])::after {
    transform: rotate(180deg);
}
/* Custom Casitek Split Button */
.casitek-split-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none !important;
}

.casitek-split-btn .btn-text {
    background-color: #F36F21;
    color: #fff;
    padding: 0 20px;
    height: 38px;
    line-height: 38px;
    border-radius: 4px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}

.casitek-split-btn .btn-icon {
    background-color: #F36F21;
    color: #fff;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.casitek-split-btn:hover .btn-text,
.casitek-split-btn:hover .btn-icon {
    background-color: #D65A15;
    box-shadow: 0 4px 10px rgba(243, 111, 33, 0.4);
}

/* Custom Slider Pagination (Dash Lines) */
.flickity-page-dots {
    bottom: 10% !important;
}

.flickity-page-dots .dot {
    width: 200px !important;
    height: 2px !important;
    border-radius: 2px !important;
    border-color: #D9D9D9 !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
}

.flickity-page-dots .dot.is-selected {
    width: 200px !important;
    border-color: #F36F21 !important;
}

.flickity-prev-next-button {
    display: none !important;
}
/* Sticky CASITEK header override.
   This file loads after Flatsome, so keep the fixed positioning here. */
#header.casitek-header.casitek-custom-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: none;
}

.admin-bar #header.casitek-header.casitek-custom-header {
    top: 0 !important;
}

#header.casitek-header.casitek-custom-header .header-wrapper {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    pointer-events: auto;
}

#header.casitek-header.casitek-custom-header .casitek-header-inner {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(209, 209, 209, 0.78) !important;
    box-shadow: 0 10px 30px rgba(23, 23, 23, 0.08);
}

#header.casitek-header.casitek-custom-header.scrolled .casitek-header-inner,
#header.casitek-header.casitek-custom-header.header-dark .casitek-header-inner {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 16px 42px rgba(23, 23, 23, 0.14) !important
}

/* Animation Concept - Zoom-in Masking */
.zm-wrapper {
  position: relative;
  height: 200vh;
}

.zm-section-1 {
  position: sticky !important;
  top: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zm-section-2 {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  transition: opacity 0.3s ease;
}

.zm-section-2.is-active {
  pointer-events: auto;
}

.zm-section-1 > .row {
  transition: opacity 0.3s ease;
  width: 100%;
}

/* Glassmorphism Sticky Main Header */
#header {
    position: sticky !important;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.admin-bar #header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar #header {
        top: 46px !important;
    }
}

.header-bg, .header-main {
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .header-bg, .header-main {
        background-color: #ffffff !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Smooth transition on scroll */
.is-sticky .header-bg, .is-sticky .header-main,
.stuck .header-bg, .stuck .header-main {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .is-sticky .header-bg, .is-sticky .header-main,
    .stuck .header-bg, .stuck .header-main {
        background-color: #ffffff !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.admin-bar #header.casitek-header.casitek-custom-header {
    top: 32px !important;
    z-index: 99990 !important;
}

@media screen and (max-width: 782px) {
    .admin-bar #header.casitek-header.casitek-custom-header {
        top: 46px !important;
        z-index: 99990 !important;
    }
}

/* SVG Responsive Banner Override */
.casitek-svg-responsive-banner {
    height: auto !important;
    padding-top: 0 !important; /* Triệt tiêu hoàn toàn padding 500px cố định */
}

.casitek-svg-responsive-banner .banner-inner {
    position: relative !important;
    height: auto !important;
    /* top: -140px; */
}

.casitek-svg-responsive-banner .banner-layers,
.casitek-svg-responsive-banner .text-box.banner-layer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important; /* Xóa bỏ transform dịch chuyển của Flatsome */
    width: 100% !important;
    height: auto !important;
}

.casitek-svg-responsive-banner svg {
    width: 100% !important;
    max-width: 1024px; /* Giới hạn đúng chiều ngang gốc của thiết kế SVG */
    height: auto !important;
    display: block;
}

/* --- NETFLIX ZOOM-THROUGH EFFECT --- */
body.is-front-page .casitek-netflix-stage .casitek-svg-responsive-banner {
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1.2s ease !important;
    transform-origin: 45% 45% !important; /* Lệch tâm chữ C */
    will-change: transform, opacity;
    z-index: 2;
}
body.is-front-page .casitek-netflix-stage.step-0 .casitek-svg-responsive-banner {
    transform: scale(1) translate(0, 0) !important;
    opacity: 1 !important;
}
body.is-front-page .casitek-netflix-stage.step-1 .casitek-svg-responsive-banner {
    transform: scale(1.55) translate(6%, -12%) !important; /* Đẩy mạnh sang phải 6% để cân bằng */
    opacity: 0.45 !important;
}
body.is-front-page .casitek-netflix-stage.step-2 .casitek-svg-responsive-banner {
    transform: scale(20) translate(2%, -25%) !important; /* Tinh chỉnh lại điểm lao vào của camera */
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Industry homepage */