/**
 * Footer Widget - Logos Styles
 * Class prefix: fw- (footer-widget) để tránh conflict với style.css
 * Version: 2.1
 * Updated: 2026-01-30
 */

/* ============================================
   FOOTER TOP AREA - WIDTH 1920px
   ============================================ */

.l-footer .c-mainframe--w1000 {
    max-width: 1920px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

/* ============================================
   FOOTER CONTENT WRAPPER - TỈ LỆ %
   ============================================ */

.fw-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 100px !important;
    padding: 20px 0 !important;
    width: 100% !important;
}

/* ============================================
   NAVIGATION - 70% WIDTH, CHIA ĐỀU 4 TEXT
   ============================================ */

.fw-content .l-footer__nav {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    display: flex !important;
    align-items: center !important;
}

.fw-content .l-footer__nav__list {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fw-content .l-footer__nav__inner {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    list-style: none !important;
}

.fw-content .l-footer__nav__link--title--noItem {
    display: flex !important;
    align-items: center !important;
}

.fw-content .l-footer__nav__title {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* ============================================
   LOGOS CONTAINER - 30% WIDTH, PADDING 30px (DESKTOP)
   ============================================ */

.fw-logos {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* ============================================
   KUME DESIGN ASIA LOGO - 50% của 30%
   ============================================ */

.fw-logo-kda {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.fw-logo-kda a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.3s ease !important;
}

.fw-logo-kda a:hover {
    opacity: 0.7 !important;
}

.fw-logo-kda img {
    height: 60px !important;
    width: auto !important;
    max-width: 100% !important;
}

/* ============================================
   KUME SEKKEI LOGO - 50% của 30%
   ============================================ */

.fw-logo-sekkei {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.fw-logo-sekkei a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.3s ease !important;
}

.fw-logo-sekkei a:hover {
    opacity: 0.7 !important;
}

.fw-logo-sekkei img {
    height: 60px !important;
    width: auto !important;
    max-width: 100% !important;
}

/* ============================================
   RESPONSIVE - LARGE TABLET (1150px)
   ============================================ */

@media screen and (max-width: 1150px) {
    .fw-content .l-footer__nav {
        flex: 0 0 65% !important;
        max-width: 65% !important;
    }
    
    .fw-logos {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        padding: 0 20px !important;
    }
    
    .fw-logo-kda img,
    .fw-logo-sekkei img {
        height: 55px !important;
    }
}

/* ============================================
   RESPONSIVE - TABLET (PADDING 20px)
   ============================================ */

@media screen and (max-width: 1024px) {
    .l-footer .c-mainframe--w1000 {
        padding: 0 30px !important;
    }
    
    .fw-content .l-footer__nav {
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    
    .fw-logos {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        padding: 0 15px !important;
    }
    
    .fw-logo-kda img,
    .fw-logo-sekkei img {
        height: 50px !important;
    }
}

/* ============================================
   RESPONSIVE - SMALL TABLET
   ============================================ */

@media screen and (max-width: 900px) {
    .l-footer .c-mainframe--w1000 {
        padding: 0 20px !important;
    }
    
    .fw-content .l-footer__nav {
        flex: 0 0 55% !important;
        max-width: 55% !important;
    }
    
    .fw-logos {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding: 0 10px !important;
    }
    
    .fw-content .l-footer__nav__title {
        font-size: 12px !important;
    }
    
    .fw-logo-kda img,
    .fw-logo-sekkei img {
        height: 45px !important;
    }
}

/* ============================================
   RESPONSIVE - SMALLER TABLET
   ============================================ */

@media screen and (max-width: 850px) {
    .fw-content .l-footer__nav {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .fw-logos {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 10px !important;
    }
    
    .fw-content .l-footer__nav__title {
        font-size: 11px !important;
    }
    
    .fw-logo-kda img,
    .fw-logo-sekkei img {
        height: 42px !important;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (2 DÒNG, PADDING 20px)
   ============================================ */

@media screen and (max-width: 768px) {
    .l-footer .c-mainframe--w1000 {
        width: 100% !important;
        padding: 0 15px !important;
    }
    
    .fw-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 25px !important;
    }
    
    /* Menu items - full width */
    .fw-content .l-footer__nav {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .fw-content .l-footer__nav__list {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .fw-content .l-footer__nav__inner {
        flex: none !important;
        width: 100% !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .fw-content .l-footer__nav__link--title--noItem {
        width: 100% !important;
        padding: 18px 10px !important;
        justify-content: space-between !important;
    }
    
    .fw-content .l-footer__nav__link--title--noItem::after {
        content: '>' !important;
        color: #999 !important;
        font-size: 14px !important;
        margin-left: 20px !important;
    }
    
    .fw-content .l-footer__nav__title {
        flex: 1 !important;
        font-size: 14px !important;
    }
    
    /* Logos - full width, space-around */
    .fw-logos {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        justify-content: space-around !important;
        padding: 25px 20px !important;
    }
    
    .fw-logo-kda,
    .fw-logo-sekkei {
        flex: none !important;
        justify-content: center !important;
    }
    
    .fw-logo-kda img,
    .fw-logo-sekkei img {
        height: 55px !important;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (PADDING 10px)
   ============================================ */

@media screen and (max-width: 480px) {
    .fw-content .l-footer__nav__link--title--noItem {
        padding: 15px 5px !important;
    }
    
    /* Logos - PADDING 10px */
    .fw-logos {
        padding: 20px 10px !important;
    }
    
    .fw-logo-kda img,
    .fw-logo-sekkei img {
        height: 50px !important;
    }
}