.elementor-kit-17234{--e-global-color-primary:#1D1D1F;--e-global-color-secondary:#86868B;--e-global-color-text:#000000;--e-global-color-accent:#0066CC;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;color:#1D1D1F;font-family:"Inter", Sans-serif;font-size:19px;}.elementor-kit-17234 e-page-transition{background-color:#FFBC7D;}.elementor-kit-17234 a{font-family:"Inter", Sans-serif;}.elementor-kit-17234 h1{font-family:"Inter", Sans-serif;}.elementor-kit-17234 h2{font-family:"Inter", Sans-serif;}.elementor-kit-17234 h3{font-family:"Inter", Sans-serif;}.elementor-kit-17234 h4{font-family:"Inter", Sans-serif;}.elementor-kit-17234 h5{font-family:"Inter", Sans-serif;}.elementor-kit-17234 h6{font-family:"Inter", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1510px;}.e-con{--container-max-width:1510px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1400px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}}@media(max-width:1200px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:960px;}.e-con{--container-max-width:960px;}}@media(max-width:992px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:720px;}.e-con{--container-max-width:720px;}}@media(max-width:768px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:540px;}.e-con{--container-max-width:540px;}}@media(max-width:575px){.elementor-kit-17234{font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:10px;--container-default-padding-right:10px;--container-default-padding-bottom:10px;--container-default-padding-left:10px;}}/* Start custom CSS *//* ==========================================================================
   MASTER CSS - APPLE X VINCI VIBE (MINIMALIST & CINEMATIC)
   ========================================================================== */

/* 1. IMPORT FONT INTER (Google Fonts - Bản dupe hoàn hảo của Apple San Francisco) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 2. KHAI BÁO HỆ THỐNG BIẾN MÀU SẮC & FONT - TONE VÀNG ĐỒNG / KHAKI */
:root {
    --apple-text-main: #1D1D1F;      /* Xám đen - Tiêu đề */
    --apple-text-muted: #86868B;     /* Xám nhạt - Text phụ */
    --apple-accent: #988a65;         /* Vàng đồng/Khaki - Nút/Link (Tone custom) */
    --apple-accent-hover: #a69771;   /* Vàng đồng sáng - Hover */
    --apple-bg-white: #FFFFFF;       /* Nền trắng */
    --apple-bg-gray: #F5F5F7;        /* Nền xám nhạt phân cách section */
    
    --apple-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --apple-line-height: 1.6;        /* Đồng bộ line-height 1.6 cho toàn site */
}

/* 3. TYPOGRAPHY CƠ BẢN & SCALE CHUẨN TỶ LỆ VÀNG */
body, p, .elementor-widget-text-editor, .elementor-text-editor {
    font-family: var(--apple-font-family) !important;
    color: var(--apple-text-main);
    line-height: var(--apple-line-height) !important;
    font-weight: 400;
    font-size: 17px; /* Apple chuộng base size to, rõ ràng */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, 
.elementor-heading-title {
    font-family: var(--apple-font-family) !important;
    color: var(--apple-text-main) !important;
    line-height: var(--apple-line-height) !important;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em; /* Ép khít chữ tạo khối */
}

/* Kích thước chữ tự động thu phóng (Responsive) từ Mobile đến Desktop */
h1 { 
    font-size: clamp(40px, 6vw, 64px) !important; 
    font-weight: 700 !important; 
    letter-spacing: -1.5px !important; 
}
h2 { 
    font-size: clamp(32px, 5vw, 48px) !important; 
    font-weight: 600 !important; 
    letter-spacing: -0.8px !important;
}
h3 { 
    font-size: clamp(24px, 4vw, 32px) !important; 
    font-weight: 500 !important; 
}

p {
    color: var(--apple-text-muted);
    margin-bottom: 1.5rem;
}

/* Tối ưu chữ trên Mobile */
@media (max-width: 767px) {
    body, .elementor-widget-text-editor, .elementor-text-editor {
        font-size: 16px; 
    }
    h1, h2 {
        line-height: 1.3 !important; /* Mobile nên để hẹp lại một chút tránh loãng */
    }
}

/* 4. TÍNH NĂNG SMART COLOR (TỰ NHẬN DIỆN NỀN ĐEN/TRẮNG) */
.apple-text-smart {
    color: #FFFFFF !important; 
    mix-blend-mode: difference !important; 
}

.section-dark-mode h1,
.section-dark-mode h2,
.section-dark-mode h3,
.section-dark-mode p {
    color: #FFFFFF !important;
}

/* 5. SET UP NÚT BẤM (Buttons - Dạng Pill shape bo tròn) */
.elementor-button {
    font-family: var(--apple-font-family) !important;
    background-color: var(--apple-accent) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    line-height: 1.2 !important; /* Riêng nút bấm nên để line-height thấp để chữ cân đối giữa nút */
    border-radius: 980px !important; 
    padding: 14px 28px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: none !important; 
    letter-spacing: 0;
}

.elementor-button:hover {
    background-color: var(--apple-accent-hover) !important;
    transform: scale(1.02); 
}

/* 6. THANH HEADER TRONG SUỐT & STICKY CHUẨN (Glassmorphism) */
.apple-header {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    
    position: -webkit-sticky !important; 
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; 
    transition: background-color 0.5s ease;
}

/* Fix lỗi tràn viền ngang làm hỏng layout */
html, body {
    overflow-x: hidden; 
}

/* ==========================================================================
   7. UTILITY CLASSES (CLASS TIỆN ÍCH CHO LAYOUT & KHÔNG GIAN)
   ========================================================================== */

/* Thêm class 'apple-section' vào Container để tự động set khoảng trắng lớn, sang trọng */
.apple-section {
    padding: 140px 5% !important;
}

/* Thêm class 'apple-text-box' vào Container chứa Text để giới hạn độ rộng, dễ đọc */
.apple-text-box {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
}

/* Thêm class 'apple-soft-shadow' vào Ảnh/Cột chứa ảnh để tạo hiệu ứng nổi, lơ lửng */
.apple-soft-shadow img, 
.apple-soft-shadow .elementor-widget-container {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important; /* Bo góc mượt mà cho ảnh/video */
    transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}

.apple-soft-shadow:hover img, 
.apple-soft-shadow:hover .elementor-widget-container {
    transform: translateY(-5px);
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.08) !important;
}

/* Điều chỉnh khoảng trắng (Padding) tự động gỡ rối trên Tablet và Mobile */
@media (max-width: 1024px) {
    .apple-section { padding: 80px 5% !important; }
}
@media (max-width: 767px) {
    .apple-section { padding: 60px 16px !important; }
}

/* ==========================================================================
   APPLE WHITESPACE - TỰ ĐỘNG TẠO KHOẢNG CÁCH GIỮA CÁC SECTION
   ========================================================================== */

/* Áp dụng cho cả cấu trúc Section cũ và Flexbox Container mới của Elementor */
.elementor-section.elementor-top-section:not(:last-child),
.e-con.e-parent:not(:last-child) {
    margin-bottom: 140px; /* Desktop: Khoảng trắng siêu lớn để "thở" */
    transition: margin-bottom 0.3s ease;
}

/* Responsive cho màn hình Tablet (iPad) */
@media (max-width: 1024px) {
    .elementor-section.elementor-top-section:not(:last-child),
    .e-con.e-parent:not(:last-child) {
        margin-bottom: 90px;
    }
}

/* Responsive cho màn hình Mobile (iPhone) */
@media (max-width: 767px) {
    .elementor-section.elementor-top-section:not(:last-child),
    .e-con.e-parent:not(:last-child) {
        margin-bottom: 60px; /* Mobile thu gọn lại để không bị vuốt rỗng quá nhiều */
    }
}

/* --------------------------------------------------------------------------
   CLASS NGOẠI LỆ (EXCEPTION)
   Thêm class 'apple-no-gap' vào Section/Container nếu bạn muốn nó dính chặt 
   vào Section bên dưới (Dùng khi 2 section có màu nền khác nhau muốn nối liền)
   -------------------------------------------------------------------------- */
.apple-no-gap {
    margin-bottom: 0 !important;
}/* End custom CSS */