.elementor-136 .elementor-element.elementor-element-9e8e278{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-136 .elementor-element.elementor-element-9e8e278.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-136 .elementor-element.elementor-element-3de3b36{width:100%;max-width:100%;}.elementor-136 .elementor-element.elementor-element-3de3b36 > .elementor-widget-container{margin:-10px -10px -10px -10px;}.elementor-136 .elementor-element.elementor-element-3de3b36.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-136 .elementor-element.elementor-element-9e8e278{--width:100%;}}@media(max-width:1024px){.elementor-136 .elementor-element.elementor-element-9e8e278{--min-height:100vh;}.elementor-136 .elementor-element.elementor-element-3de3b36 > .elementor-widget-container{margin:-10px -10px -10px -10px;}}@media(max-width:767px){.elementor-136 .elementor-element.elementor-element-9e8e278{--flex-wrap:nowrap;}.elementor-136 .elementor-element.elementor-element-3de3b36{width:100%;max-width:100%;}.elementor-136 .elementor-element.elementor-element-3de3b36 > .elementor-widget-container{margin:-10px -10px -10px -10px;}.elementor-136 .elementor-element.elementor-element-3de3b36.elementor-element{--order:99999 /* order end hack */;}}/* Start custom CSS for wp-widget-custom_html, class: .elementor-element-3de3b36 *//* --- RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    background: #F7F3E8;
    overflow-x: hidden;
}
/* --- DESKTOP --- */
.container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #F7F3E8;
}
.left, .right {
    width: 40%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.center {
    width: 20%;
    background: #F7F3E8 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.logo-link {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    transition: all 0.8s;
}
.logo {
    width: 90px;
}
.menu-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: auto;
    z-index: 10;
}
.menu {
    list-style: none;
    width: 100%;
}
.menu li {
    margin: 25px 0;
    position: relative;
    white-space: nowrap;
    display: flex;
    justify-content: center;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 10px 0;
}
.center.idle .logo-link {
    top: 50%;
    transform: translate(-50%, -50%);
}
.center.idle .menu-wrapper {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    filter: blur(8px);
    pointer-events: none;
}
.center.idle .logo {
    animation: flipLogo 2s ease-in-out infinite;
}
@keyframes flipLogo {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.bottom {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}
/* === DESKTOP SOCIAL ICONS - ĐÃ CHỈNH SỬA === */
.desktop-social {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* Xít lại gần nhau hơn */
    align-items: center;
    z-index: 5;
}
.desktop-social a {
    width: 42px; /* Tăng kích thước icon */
    height: 42px;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.desktop-social a:hover {
    opacity: 1;
    transform: translateY(-3px);
}
.desktop-social a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* === CỘT PHẢI (PREVIEW AREA) - CỐ ĐỊNH TUYỆT ĐỐI === */
.right-default {
    position: absolute;
    inset: 0;
    transition: opacity 0.5s ease;
}
.right-default img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.right-default.hidden {
    opacity: 0;
    pointer-events: none;
}
.right-preview-panel {
    position: absolute;
    inset: 0;
    background: #F7F3E8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.right-preview-panel.visible {
    opacity: 1;
    pointer-events: auto;
}
/* 1. Cố định vùng chứa Text */
.text-container {
    width: 95%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.right-preview-text {
    font-family: 'Noto Serif', serif;
    font-size: 19px;
    letter-spacing: 0.55px;
    color: #642E00FC;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    text-shadow: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}
.right-preview-panel.visible .right-preview-text {
    opacity: 1;
    transform: translateY(0);
}
/* 2. Cố định vùng chứa Ảnh */
.right-preview-frame {
    width: 95%;
    height: 260px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.preview-badge {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.right-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));
    transition: opacity 0.4s ease;
}
/* --- MOBILE & IPAD --- */
.mobile-wrapper { display: none; }

@media screen and (max-width: 1024px) {

    #desktopContainer { display: none !important; }
    .mobile-wrapper { display: block; width: 100%; height: 100vh; position: relative; overflow: hidden; background: #000; }

    .mobile-slideshow-container { position: absolute; width: 100%; height: 100%; z-index: 1; }
    .slide { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease; }
    .slide.active { opacity: 1; }
    .mobile-slideshow-container::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); z-index: 2; }

    .mobile-content-overlay {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        z-index: 10; color: #fff; text-align: center; width: 85%; pointer-events: none;
        height: 150px;
    }
    .text-slide {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .text-slide.active { opacity: 1; visibility: visible; }
    .text-slide.active .welcome-text { animation: mFadeUp 1s ease forwards 0.3s; }
    .text-slide.active .sub-text { animation: mFadeUp 1s ease forwards 0.6s; }
    .welcome-text { font-size: 32px; letter-spacing: 2px; font-weight: 300; margin-bottom: 10px; opacity: 0; transform: translateY(30px); }
    .sub-text { font-size: 14px; letter-spacing: 1px; max-width: 300px; line-height: 1.6; font-weight: 300; opacity: 0; transform: translateY(20px); }
    @keyframes mFadeUp { to { opacity: 1; transform: translateY(0); } }

    .mobile-logo-btn {
        position: fixed; top: 20px; right: 20px; z-index: 80;
        width: 50px; height: 50px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .mobile-logo-btn img { width: 85%; height: 85%; object-fit: contain; animation: flipLogo 3s ease-in-out infinite; }

    .menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.25); z-index: 90; opacity: 0; pointer-events: none; transition: 0.4s; }
    .menu-backdrop.active { opacity: 1; pointer-events: auto; }

    .mobile-menu-side {
        position: fixed; top: 0; right: -75%; width: 70%; height: 100%;
        background: #F7F3E8; z-index: 100;
        transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex; flex-direction: column;
        padding: 20px 30px;
    }
    .mobile-menu-side.open { right: 0; }

    .close-menu-btn {
        font-size: 24px; color: #333; cursor: pointer;
        position: absolute; top: 20px; right: 20px;
        z-index: 101;
    }

    .menu-header-logo {
        text-align: left;
        margin: 0 0 20px 0;
        display: flex; align-items: center;
        min-height: 30px;
    }
    .menu-header-logo img { width: 70px; }

    .mobile-nav-list { list-style: none; margin-top: 10px; flex: 1; }
    .mobile-nav-list li {
        margin: 20px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding-bottom: 10px;
        opacity: 0; transform: translateX(20px); transition: 0.4s ease-out;
    }
    .mobile-menu-side.open .mobile-nav-list li { opacity: 1; transform: translateX(0); }
    .mobile-menu-side.open li:nth-child(1) { transition-delay: 0.1s; }
    .mobile-menu-side.open li:nth-child(2) { transition-delay: 0.2s; }
    .mobile-menu-side.open li:nth-child(3) { transition-delay: 0.3s; }
    .mobile-menu-side.open li:nth-child(4) { transition-delay: 0.4s; }
    .mobile-menu-side.open li:nth-child(5) { transition-delay: 0.5s; }
    .mobile-menu-side.open li:nth-child(6) { transition-delay: 0.6s; }

    .mobile-nav-list a { text-decoration: none; color: #224811; font-weight: 600; font-size: 16px; letter-spacing: 1px; }

    /* Bottom area đẩy xuống đáy */
    .mobile-bottom-area {
        margin-top: auto;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-gtranslate { text-align: left; }

    /* Dropdown gtranslate trong menu mobile mở lên trên */
    .mobile-bottom-area .gtranslate_wrapper ul,
    .mobile-bottom-area div[class*="gtranslate"] ul {
        bottom: 100% !important;
        top: auto !important;
        max-height: 110px !important;
        overflow-y: auto !important;
    }

    /* Mobile social icons - tăng lên 42px */
    .social-mxh { display: flex; gap: 16px; }
    .social-mxh a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
    .social-mxh a img { width: 100%; height: 100%; object-fit: contain; }
}/* End custom CSS */