/* ===========================================
   KAI HOUSE THEME - CUSTOM STYLES
   =========================================== */

/* ===========================================
   UTILITIES
   =========================================== */

.text-justify {
    text-align: justify;
}

/* ===========================================
   BODY & THEME BASE
   =========================================== */

body {
    font-family: var(--font-family);
    transition: background .3s, color .3s;
    background: var(--dynamic-bg) !important;
    background-attachment: var(--background-attachment, fixed);
    background-size: var(--background-size, cover);
    background-position: var(--background-position, center);
    background-repeat: var(--background-repeat, no-repeat);
}

body.dark {
    color: var(--content-color);
    background: var(--dynamic-bg) !important;
    background-attachment: var(--background-attachment, fixed);
    background-size: var(--background-size, cover);
    background-position: var(--background-position, center);
    background-repeat: var(--background-repeat, no-repeat);
}

body.dark .logo-light {
    display: none !important;
}

body.dark .logo-dark {
    display: inline;
}
/* ===========================================
   HEADER & NAVIGATION
   =========================================== */

.main-header {
    background: var(--header-bg);
    padding: 0;
    border-bottom: 1.5px solid var(--header-border);
    box-shadow: var(--main-shadow);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
}

.menu-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.main-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.main-nav .menu {
    list-style: none;
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 0;
}

.menu li a {
    text-decoration: none;
    color: var(--header-text);
    font-family: var(--header-font-family);
    font-weight: var(--header-font-weight);
    font-size: var(--header-font-size);
    border-radius: 8px;
    transition: background .25s, color .25s, box-shadow .2s;
    position: relative;
    z-index: 1;
}

.menu li a:hover,
.menu li.active > a {
    background: none;
    color: red;
}

.has-submenu {
    position: relative;
}
.has-submenu > a::after {
    content: " \f078";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .7em;
    margin-left: 7px;
    transition: transform .3s;
    display: inline-block;
}

.has-submenu.open > a::after,
.has-submenu:hover > a::after {
    transform: rotate(-180deg);
}

.submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px) scaleY(.98);
    transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s, transform .3s;
    background: var(--submenu-bg);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    position: absolute;
    top: 135%;
    left: 0;
    min-width: 250px;
    z-index: 20;
    padding: 10px 0;
    border-top: 2px solid red;
    pointer-events: auto;
}

.has-submenu.open .submenu,
.has-submenu:hover .submenu {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
}

.submenu li a {
    display: block;
    color: var(--submenu-text);
    background: none;
    border-radius: 0;
    font-family: var(--header-font-family);
    font-weight: var(--header-font-weight);
    font-size: var(--header-font-size);
    transition: background .2s, color .2s;
}
.submenu li a:hover {
    background: none;
    color: var(--submenu-hover);
}

.icons {
    display: flex;
    gap: 18px;
    align-items: center;
}

.icons button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--header-text);
    border-radius: 50%;
    padding: 7px 10px;
    transition: background .2s, color .2s, box-shadow .2s;
    box-shadow: none;
}

.icons button:active,
.icons button:focus {
    color: var(--header-text);
    outline: none;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width .4s, opacity .3s;
    background: var(--submenu-bg);
    border-radius: 8px;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(60,80,180,.07);
}
.search-wrapper.active {
    max-width: 200px;
    opacity: 1;
}

#search-input {
    padding: 6px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    margin-left: 8px;
    background: var(--submenu-bg);
    color: var(--search-input-bg);
    transition: border .2s;
}

#search-input:focus {
    border: 1.5px solid var(--logo-color);
}

/* ===========================================
   MOBILE MENU - HAMBURGER
   =========================================== */

.hamburger {
    width: 32px;
    height: 24px;
    position: relative;
    display: none;
    cursor: pointer;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 30;
    border-radius: 8px;
    padding: 4px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

.hamburger:hover {
    background: rgba(255,255,255,0.15);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hamburger span {
    background: var(--menu-text);
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    border-radius: 2px;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.hamburger span:nth-child(1) {
    top: 4px;
}

.hamburger span:nth-child(2) {
    top: 12px;
}

.hamburger span:nth-child(3) {
    top: 20px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
    background: var(--logo-color);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
    background: var(--logo-color);
}

/* ===========================================
   MOBILE OVERLAY
   =========================================== */

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 15;
    opacity: 0;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-active .mobile-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Body scroll lock when menu is open */
.mobile-menu-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 1024px) {
    .main-nav .menu {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .main-nav {
        display: none !important;
    }
    
    .hamburger {
        display: block;
    }
    
    .logo {
        font-size: 22px;
    }
    
    .menu-container {
        height: 60px;
    }
  
  /* Force hide desktop menu - use off-canvas instead */
    .mobile-menu-active .main-nav {
        display: none !important;
    /* OLD MOBILE MENU DISABLED - Use off-canvas menu instead */
  }
  
  /* OLD MOBILE MENU STYLES DISABLED */
    .mobile-menu-active .main-nav::before {
        display: none !important;
  }

  /* Logo trong mobile menu */
    .mobile-menu-active .main-nav .logo {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
    }

    .mobile-menu-active .main-nav .logo img {
        height: 30px;
        width: auto;
  }

  /* Close button cho mobile menu */
  .mobile-menu-close{
    position:absolute;
    top:25px;
    right:20px;
    width:32px;
    height:32px;
    background:#ffffff;
    border:1px solid #dee2e6;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2;
    transition:all 0.3s ease;
  }

  .mobile-menu-close:hover{
    background:#f8f9fa;
    transform:scale(1.1);
  }

  .mobile-menu-close::before,
  .mobile-menu-close::after{
    content:'';
    position:absolute;
    width:16px;
    height:2px;
    background:#666666;
    transform:rotate(45deg);
  }

  .mobile-menu-close::after{
    transform:rotate(-45deg);
  }
  
  @keyframes slideInMenu{
    from{
      left:-100vw;
      opacity:0;
    }
    to{
      left:0;
      opacity:1;
    }
  }
  
  .mobile-menu-active .menu{
    flex-direction:column;
    padding:20px 16px;
    gap:8px;
    justify-content:flex-start;
  }
  
  .main-nav .menu{
    width:100%;
  }
  
  .main-nav .menu li{
    width:100%;
    margin:0;
    opacity:0;
    transform:translateX(-30px);
    animation:slideInMenuItem 0.3s ease forwards;
  }
  
  .main-nav .menu li:nth-child(1){animation-delay:0.1s}
  .main-nav .menu li:nth-child(2){animation-delay:0.15s}
  .main-nav .menu li:nth-child(3){animation-delay:0.2s}
  .main-nav .menu li:nth-child(4){animation-delay:0.25s}
  .main-nav .menu li:nth-child(5){animation-delay:0.3s}
  .main-nav .menu li:nth-child(6){animation-delay:0.35s}
  
  @keyframes slideInMenuItem{
    to{
      opacity:1;
      transform:translateX(0);
    }
  }
  
  .main-nav .menu li a{
    width:100%;
    display:flex;
    align-items:center;
    gap:16px;
    text-align:left;
    padding:18px 20px;
    box-sizing:border-box;
    color:rgba(255,255,255,0.95);
    font-size:1.1rem;
    border-radius:12px;
    line-height:1.4;
    font-weight:500;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.15);
  }
  
  .main-nav .menu li a::before{
    content:"\f105";
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    color:rgba(255,255,255,0.7);
    font-size:1rem;
    transition:all 0.3s ease;
  }
  
  .main-nav .menu li a::after{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition:left 0.5s ease;
  }
  
  .main-nav .menu li a:hover::after{
    left:100%;
  }
  
  .main-nav .menu li a:hover{
    background:rgba(255,255,255,0.15);
    color:white;
    transform:translateX(8px);
    box-shadow:0 8px 25px rgba(0,0,0,0.2);
    border-color:rgba(255,255,255,0.3);
  }
  
  .main-nav .menu li a:hover::before{
    color:white;
    transform:translateX(4px);
  }
  
  .main-nav .menu li + li a{
    border-top:none;
  }
  
  .main-nav .menu li a:active,
  .main-nav .menu li a:focus{
    outline:none;
    background:rgba(255,255,255,0.2);
    transform:scale(0.98);
  }
  
  /* Enhanced Submenu */
  .submenu{
    position:static;
    box-shadow:none;
    padding:16px 0 16px 32px; /* Tăng padding để có khoảng cách đẹp */
    border-radius:0;
    background:#f8f8f8; /* Nền submenu nhẹ */
    min-width:0;
    top:auto;
    left:auto;
    border-left:3px solid #e0e0e0; /* Viền trái nhẹ */
    margin-top:12px; /* Tăng khoảng cách với menu chính */
    border-radius:8px;
    margin-left:16px; /* Thêm margin trái */
    overflow:hidden;
    transition:all 0.3s ease;
  }
  
  .submenu li a{
    padding:14px 16px !important;
    font-size:0.95rem !important;
    color:rgba(255,255,255,0.9) !important;
    border-radius:8px !important;
    margin:4px 0 !important;
  }
  
  .submenu li a:hover{
    background:rgba(255,255,255,0.1) !important;
    color:white !important;
    transform:translateX(4px) !important;
  }
  
  .submenu li a{padding:12px 12px 12px 28px;font-size:1rem}
  .submenu li a::before{content:"\f111";font-family:'Font Awesome 6 Free';font-weight:900;color:var(--menu-text);font-size:.4rem;margin-right:8px}
  .submenu li a:hover{color:var(--submenu-hover)}
  /* Hiệu ứng mở submenu */
  .has-submenu.open .submenu{
    display:block;
    max-height:600px;
    opacity:1;
    transform:translateY(0) scaleY(1);
    pointer-events:auto;
    animation:slideDownSubmenu 0.4s ease forwards;
    background:#f8f8f8;
    border-left-color: var(--accent-color); /* Màu viền trái khi mở */
  }

  /* Hiệu ứng đóng submenu */
  .has-submenu:not(.open) .submenu{
    max-height:0;
    opacity:0;
    transform:translateY(-10px) scaleY(0.8);
    pointer-events:none;
  }

  /* Arrow indicator cho submenu */
  .has-submenu > a::after{
    content:"\f078";
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:0.8em;
    margin-left:auto; /* Đẩy arrow sang phải */
    color: var(--content-color);
    transition:all 0.3s ease;
  }

  .has-submenu.open > a::after{
    transform:rotate(180deg);
    color: var(--accent-color);
  }
  
  @keyframes slideDownSubmenu{
    from{
      opacity:0;
      transform:translateY(-10px) scaleY(0.8);
    }
    to{
      opacity:1;
      transform:translateY(0) scaleY(1);
    }
  }
  #search-toggle,.search-wrapper{display:none}
}
@media (min-width:769px){.main-nav .menu{align-items:center}.main-nav .menu li{display:flex;align-items:center}}
@media (max-width:480px){.logo{font-size:18px}.hide-description-mobile{display:none}}

/* Footer extracted from includes/footer.php */
.footer-section{color:#fff;font-family:'Arial',sans-serif;background-color:#000}
.footer-container{width:100%}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;padding:50px 100px}
.footer-info{max-width:100%;text-align:left}
.footer-logo img{max-width:150px;margin-bottom:10px}
.company-description{color:#b3b3b3;line-height:1.6;margin-bottom:20px}
.social-links{display:flex;gap:15px}
.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:#333;border-radius:50%;color:#fff;text-decoration:none;transition:all .3s ease}
.social-link:hover{background-color:#007bff;transform:translateY(-3px)}
.footer-links{text-align:left}
.footer-links h3,.footer-contact h3,.footer-newsletter h3{color:#b3b3b3;margin-bottom:20px;font-size:1.5rem}
.footer-links ul{list-style:none;padding:0}
.footer-links ul li{margin-bottom:10px}
.footer-links ul li a{color:#b3b3b3;text-decoration:none;transition:color .3s ease}
.footer-links ul li a:hover{color:#007bff}
.footer-contact{text-align:left}
.footer-contact ul{list-style:none;padding:0}
.footer-contact ul li{display:flex;align-items:center;margin-bottom:15px;color:#b3b3b3}
.footer-contact ul li i{margin-right:10px;color:#007bff;font-size:18px}
.footer-newsletter{text-align:left}
.newsletter-form{display:flex;gap:10px}
.newsletter-form input{flex:1;padding:12px;border:none;border-radius:5px;background-color:#333;color:#fff}
.newsletter-form button{padding:12px 25px;border:none;border-radius:5px;background-color:#007bff;color:#fff;cursor:pointer;transition:background-color .3s ease}
.newsletter-form button:hover{background-color:#0056b3}
.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--border-color)}
.footer-bottom-links{display:flex;gap:20px;padding-right:100px}
.copyright{padding-left:100px}
.footer-bottom-links a{color:#b3b3b3;font-size:var(--content-font-size);text-decoration:none;transition:color .3s ease}
.footer-bottom-links a:hover{color:#007bff}
.text-title-footer{position:relative;display:inline-block;font-family:var(--font-family);font-size:1.5rem;color:#b3b3b3;font-weight:800;padding-bottom:10px;margin-bottom:20px}
.text-title-footer::after{content:"";position:absolute;bottom:0;left:15%;transform:translateX(-50%);width:30%;height:5px;background-color:red}
.fa-regular{padding-right:10px}
@media (max-width:575.98px){.footer-contact ul li{width:100%;font-size:1.1rem}.footer-content{gap:10px;padding:50px 10px 10px 10px}.copyright{width:100%;text-align:center;padding:0}.footer-bottom-links{display:none}.footer-links,.footer-newsletter,.footer-info{display:none}}
@media (min-width:576px) and (max-width:767.98px){.footer-logo img{max-width:180px;margin-bottom:15px}.footer-content{grid-template-columns:1fr;padding:20px;gap:20px}.footer-bottom{flex-direction:column;text-align:center;gap:20px}.newsletter-form{flex-direction:column}.copyright{text-align:center;padding:0}.footer-bottom-links{display:none}.footer-links,.footer-newsletter,.footer-info{display:none}.company-description{font-size:1.4rem;text-align:justify}.footer-contact{font-size:1.2rem}.footer-contact ul li i{font-size:1.4rem}.text-title-footer span{width:100%}}

/* Sidebar customer form extracted */
.form-label{font-family: var(--font-family);font-size: var(--content-font-size);}
.form-control,.form-select{transition:box-shadow var(--transition-speed);font-size: var(--content-font-size);font-family: var(--font-family);padding:6px 10px;background-color:none;border:1px solid #3c454e}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.25);font-size:1rem}
.btn-primary{color:var(--content-color);transition:background-color var(--transition-speed),transform var(--transition-speed)}
.btn-primary:hover{transform:translateY(-2px)}
@media (max-width:991.98px){.sticky-sidebar{position:relative;top:0;max-height:none}}

/* Intro module - MOVED to assets/css/modules/cml-intro.css */
/* Old styles commented out to prevent conflicts */

/* Giới thiệu page specific extracted */
.cml-main-content{width:70%!important}
.cml-sidebar-customer{width:30%!important}
.cmlgioithieu{background:#fff;border:1px solid rgba(0,0,0,.125);border-radius:.375rem;box-shadow:0 .125rem .25rem rgba(0,0,0,.075);padding:1.5rem;margin-bottom:1.5rem}
.hero{background:#32353f;background-size:cover;color:#fff;padding:5px}
.hero h1{font-family:var(--font-family);font-size:2rem;font-weight:800;letter-spacing:2px}
.hero .lead{font-size:2rem;margin-top:1.5rem;line-height:1;font-weight:400}
.section{padding:20px 0}
.section p,.section ul{font-family:var(--font-family);font-size:var(--content-font-size);line-height:1.7}
.team img{max-width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(25,118,210,.08)}
.core-values li{font-family:var(--font-family);margin-bottom:.7rem;font-size:var(--content-font-size)}
.sidebar-wrapper{position:sticky;height:fit-content;padding:0 20px}
@media (max-width:575.98px){.cml-main-content,.cml-sidebar-customer{width:100%!important}.section{padding:10px 20px}.section p,.section ul li{font-size:1.2rem}.sidebar-wrapper{position:relative;top:0}.hero .lead{font-size:1.4rem}}

/* Liên hệ page extracted */
.bg-light{background:#f5f7fa!important}
section.bg-white{transition:box-shadow .3s,transform .3s}
section.bg-white:hover{box-shadow:0 8px 32px rgba(25,118,210,.1),0 1.5px 6px rgba(0,0,0,.04);transform:translateY(-4px) scale(1.01)}
.ratio iframe{border-radius:1rem}

/* Bài viết (post.php) extracted */
.container{max-width:1250px;margin:0 auto;padding:5px}
.cml-breadcrumb{padding-top: 10px;height:30px;display:flex;align-items:center}
.breadcrumb{font-size:0.75rem;font-style:italic;color:var(--content-color);margin:0 auto}
.breadcrumb-item+.breadcrumb-item::before{content:">";padding-right:8px;color:var(--content-color);font-weight:700}
.breadcrumb-item.active{color:var(--main-color-text)}
.breadcrumb a{text-decoration:none;color:var(--main-color-text)}
.project-title h1{font-size:32px;margin-bottom:10px;padding:10px;border-top:2px solid rgba(25,118,210,.1);color:var(--heading-color)}
.project-info ul{list-style:none;padding:0;display:flex;gap:40px;font-size:16px}
.project-info li{font-weight:500}
.main-content{margin-top:2px;font-size:var(--content-font-size);border-bottom:2px solid rgba(25,118,210,.1)}
.main-content img{max-width:100%;height:auto;display:block;margin:0 auto}
.content-image{max-width:100%;height:auto;border-radius:10px}
.two-columns{display:flex;gap:20px;flex-wrap:nowrap}
.bai-viet-lien-quan{flex:1 1 70%;min-width:0;padding:20px;box-shadow:0 0 5px rgba(0,0,0,.05)}
.sidebar{flex:1 1 30%;min-width:0;box-shadow:0 0 5px rgba(0,0,0,.05);padding-top:20px}
.sidebar ul{list-style:none}
.sidebar a{text-decoration:none;color: var(--content-color)}
@media (max-width:767px){.two-columns{flex-direction:column}.bai-viet-lien-quan,.sidebar{flex:0 0 100%;max-width:100%;padding:10px 0}}
@media (min-width:768px) and (max-width:1024px){.two-columns{display:flex;flex-wrap:nowrap;gap:20px}.bai-viet-lien-quan,.sidebar{flex:0 0 50%;max-width:50%;padding:10px;box-sizing:border-box}}
.partners{background:#f1f1f1;padding:40px 20px;margin-top:40px}
.partners h2{margin-bottom:20px}
.site-footer{background:#222;color:#ccc;text-align:center;padding:0;font-size:14px}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.text-wrapper{padding:0 10px;text-align:justify}
.text-line{display:inline}
.more-text.hidden{display:none}
.toggle-btn{display:inline;background:0 0;color: var(--content-color);border:none;padding:0 4px;cursor:pointer;font-size:var(--content-font-size)}

/* Video section - MOVED to assets/css/modules/video-section.css.php */

/* Slider post module - MOVED to assets/css/modules/slider-post.css.php */
/* Related posts module - MOVED to assets/css/modules/related_posts.css.php */

/* Cards section - MOVED to assets/css/modules/cards-section.css.php */

/* Our services module */
.our-services-content{margin-bottom:5px}

/* Du-an-cml module - MOVED to assets/css/modules/du-an-cml.css.php */

/* Responsive improvements */
@media (max-width:480px){
  .mobile-menu-active .main-nav{
    width:100vw;
    max-width:100vw;
  }
  
  .mobile-menu-active .menu{
    padding:20px 12px;
    gap:8px;
  }
  
  .main-nav .menu li a{
    padding:18px 20px;
    font-size:1rem;
  }
  
  .submenu{
    padding:12px 0 12px 24px;
    margin-left:12px;
  }
  
  .submenu li a{
    padding:14px 16px !important;
    font-size:0.95rem !important;
  }
}

/* Dark theme support */
body.dark .mobile-menu-active .main-nav{
  background:#1a1a1a;
  border-right-color:#333333;
}

body.dark .mobile-menu-active .main-nav::before{
  background:linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-bottom-color:#4a5568;
}

body.dark .main-nav .menu li a{
  color:#e2e8f0;
  border-color:#4a5568;
}

body.dark .main-nav .menu li a:hover{
  color:var(--hover-color);
  border-color:#718096;
}

body.dark .submenu{
  background:#2d3748;
  border-left-color:#4a5568;
}

body.dark .submenu li a{
  color:#a0aec0;
  border-color:#4a5568;
}

body.dark .submenu li a:hover{
  color:var(--hover-color);
  border-color:#718096;
}

/* Post two-columns strict layout (fix sidebar wrapping) */
.container.two-columns{display:flex;align-items:flex-start;gap:20px;flex-wrap:nowrap}
.container.two-columns .bai-viet-lien-quan{flex:0 0 70%;max-width:70%;min-width:0}
.container.two-columns .sidebar{flex:0 0 30%;max-width:30%;min-width:0}
@media (max-width: 991.98px){
  .container.two-columns{flex-direction:column;gap:10px}
  .container.two-columns .bai-viet-lien-quan,
  .container.two-columns .sidebar{flex:0 0 100%;max-width:100%}
}

/* Use grid on desktop to prevent wrapping regardless of content width */
@media (min-width: 992px){
  .container.two-columns{display:grid;grid-template-columns: 1fr 360px;gap:20px;align-items:flex-start}
  .container.two-columns .bai-viet-lien-quan{min-width:0;max-width:100%}
  .container.two-columns .sidebar{min-width:0;max-width:100%}
}

/* ===========================================
   HIỆU ỨNG ĐẶC BIỆT
   =========================================== */

/* Hiệu ứng tuyết rơi */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    color: white;
    font-size: 1em;
    user-select: none;
    pointer-events: none;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Hiệu ứng hạt bay */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.1;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.3;
    }
}

/* Background animations */
body[data-bg-animation="fade"] {
    animation: bgFade 10s ease-in-out infinite;
}

body[data-bg-animation="pulse"] {
    animation: bgPulse 4s ease-in-out infinite;
}

@keyframes bgFade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes bgPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Parallax effect */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Responsive adjustments for effects */
@media (max-width: 768px) {
    .snowflake {
        font-size: 0.8em;
    }
    
    .particle {
        display: none; /* Hide particles on mobile for performance */
    }
}

/* ===========================================
   CSS TÙY CHỈNH CỦA BẠN - THÊM VÀO ĐÂY
   =========================================== */

/* Thêm CSS của bạn vào đây */