/**
 * KUME PARENT COMPANY COMPONENTS
 * Version: 1.4
 * Date: 2024
 * 
 * FIX v1.4: Tăng specificity để override style.css gốc
 */

/* ============================================
   PC VERSION (>768px)
============================================ */

.p-homeBottom__item.kp-homeParent {
    width: 100% !important;
    height: 70px !important;
    margin-bottom: 25px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Link - specificity cao hơn */
.p-homeBottom__item.kp-homeParent > a.kp-homeParent__link,
.kp-homeParent .kp-homeParent__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    background-color: rgba(255,255,255,0.1) !important;
}

.kp-homeParent .kp-homeParent__link:hover {
    background-color: rgba(255,255,255,0.3) !important;
}

/* Logo */
.kp-homeParent .kp-homeParent__logo,
.kp-homeParent--sp .kp-homeParent__logo {
    display: block !important;
    height: 24px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
    flex-shrink: 0 !important;
}

/* Text */
.kp-homeParent .kp-homeParent__text,
.kp-homeParent--sp .kp-homeParent__text {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.kp-homeParent__text strong {
    font-weight: 500 !important;
    color: #fff !important;
}

.kp-homeParent__text span {
    margin-left: 15px;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
}

/* ============================================
   TABLET (768px - 1024px)
============================================ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .p-homeBottom__item.kp-homeParent {
        width: 100% !important;
        height: 60px !important;
        margin-bottom: 20px !important;
    }
    
    .kp-homeParent .kp-homeParent__link {
        gap: 15px !important;
    }
    
    .kp-homeParent .kp-homeParent__logo {
        height: 20px !important;
    }
    
    .kp-homeParent .kp-homeParent__text {
        font-size: 12px !important;
    }
    
    .kp-homeParent__text span {
        margin-left: 10px;
        font-size: 11px !important;
    }
}

/* ============================================
   MOBILE (<=768px)
============================================ */
@media only screen and (max-width: 768px) {
    /* Ẩn PC version */
    .p-homeBottom__item.kp-homeParent {
        display: none !important;
    }
    
    /* Mobile version */
    .p-homeBottom__item.kp-homeParent--sp {
        display: block !important;
        width: 100% !important;
        height: 36.267vw !important;
        margin-bottom: 8.889vw !important;
        border: rgba(255,255,255,.7) 1px solid !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Link - specificity cao */
    .p-homeBottom__item.kp-homeParent--sp > a.kp-homeParent__link,
    .kp-homeParent--sp .kp-homeParent__link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3vw !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
        background-color: rgba(255,255,255,0.1) !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__logo {
        display: block !important;
        height: 6vw !important;
        width: auto !important;
        filter: brightness(0) invert(1) !important;
        opacity: 0.9 !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__text {
        display: block !important;
        font-size: 3.8vw !important;
        text-align: center !important;
        color: #fff !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__text strong {
        display: block !important;
        color: #fff !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__text span {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 1.5vw !important;
        font-size: 3.2vw !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
}

/* ============================================
   MOBILE SMALL (<400px)
============================================ */
@media only screen and (max-width: 400px) {
    .p-homeBottom__item.kp-homeParent--sp {
        height: 40vw !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__link {
        gap: 4vw !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__logo {
        height: 7vw !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__text {
        font-size: 4vw !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__text span {
        font-size: 3.5vw !important;
    }
}

/* ============================================
   TABLET MODE (is-tablet class)
============================================ */
.is-tablet .p-homeBottom__item.kp-homeParent--sp {
    height: 16.267vw !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__link {
    flex-direction: row !important;
    gap: 15px !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__logo {
    height: 3.5vw !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__text {
    font-size: 2.5vw !important;
    text-align: left !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__text strong {
    display: inline !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__text span {
    display: inline !important;
    margin-left: 10px !important;
}

/* ============================================
   TABLET (768px - 1024px)
   PC version nhưng width nhỏ hơn
============================================ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .p-homeBottom__item.kp-homeParent {
        width: 100% !important;
        height: 60px !important;
        margin-bottom: 20px !important;
        transform: none !important;
    }
    
    .kp-homeParent .kp-homeParent__link {
        gap: 15px;
    }
    
    .kp-homeParent__logo {
        height: 20px;
    }
    
    .kp-homeParent__text {
        font-size: 12px;
    }
    
    .kp-homeParent__text span {
        margin-left: 10px;
        font-size: 11px;
    }
}

/* ============================================
   MOBILE (<=768px)
   Ẩn PC, hiện Mobile version trong p-homeBottom--sp
============================================ */
@media only screen and (max-width: 768px) {
    /* Ẩn PC version */
    .p-homeBottom__item.kp-homeParent {
        display: none !important;
    }
    
    /* Mobile version - QUAN TRỌNG: luôn hiển thị */
    .p-homeBottom__item.kp-homeParent--sp {
        display: block !important;
        width: 100% !important;
        height: 36.267vw !important;
        margin-bottom: 8.889vw !important;
        border: rgba(255,255,255,.7) 1px solid !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Link - dùng selector mạnh */
    .p-homeBottom__list--sp .p-homeBottom__item.kp-homeParent--sp .kp-homeParent__link,
    .p-homeBottom__item.kp-homeParent--sp a.kp-homeParent__link,
    .kp-homeParent--sp .kp-homeParent__link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3vw !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(255,255,255,0.1) !important;
        text-decoration: none !important;
    }
    
    /* Logo - selector mạnh */
    .p-homeBottom__item.kp-homeParent--sp img.kp-homeParent__logo,
    .kp-homeParent--sp .kp-homeParent__logo,
    img.kp-homeParent__logo {
        display: block !important;
        visibility: visible !important;
        opacity: 0.9 !important;
        height: 6vw !important;
        width: auto !important;
        filter: brightness(0) invert(1) !important;
        max-width: 150px !important;
    }
    
    /* Text container - selector mạnh */
    .p-homeBottom__item.kp-homeParent--sp .kp-homeParent__text,
    .kp-homeParent--sp .kp-homeParent__text,
    div.kp-homeParent__text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 3.8vw !important;
        text-align: center !important;
        color: #fff !important;
    }
    
    /* Text strong */
    .kp-homeParent--sp .kp-homeParent__text strong,
    .kp-homeParent__text strong {
        display: block !important;
        color: #fff !important;
        font-weight: 500 !important;
    }
    
    /* Text span */
    .kp-homeParent--sp .kp-homeParent__text span,
    .kp-homeParent__text span {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 1.5vw !important;
        font-size: 3.2vw !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
}

/* ============================================
   MOBILE SMALL (<400px)
============================================ */
@media only screen and (max-width: 400px) {
    .p-homeBottom__item.kp-homeParent--sp {
        height: 40vw !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__link {
        gap: 4vw;
    }
    
    .kp-homeParent--sp .kp-homeParent__logo {
        height: 7vw !important;
    }
    
    .kp-homeParent--sp .kp-homeParent__text {
        font-size: 4vw;
    }
    
    .kp-homeParent--sp .kp-homeParent__text span {
        font-size: 3.5vw;
    }
}

/* ============================================
   TABLET MODE (is-tablet class)
============================================ */
.is-tablet .p-homeBottom__item.kp-homeParent--sp {
    height: 16.267vw !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__link {
    flex-direction: row !important;
    gap: 15px;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__logo {
    height: 3.5vw !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__text {
    font-size: 2.5vw;
    text-align: left;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__text strong {
    display: inline !important;
}

.is-tablet .kp-homeParent--sp .kp-homeParent__text span {
    display: inline !important;
    margin-left: 10px;
}