@charset "UTF-8";

/* ==========================================================================
   1. BENESSE HEADER & FOOTER MOBILE (SCOPED)
   ========================================================================== */
@media screen and (max-width: 768px) {
    #campaign-web-sp .info { width: 100% !important; margin: 0 !important; overflow-x: hidden !important; }
    #campaign-web-sp .section-campaign-mobile { position: relative !important; background-color: #ffffff !important; z-index: 1 !important; }
    #campaign-web-sp .KV-mobile { position: relative !important; width: 100% !important; line-height: 0 !important; }
    #campaign-web-sp .kv-main-img { width: 100% !important; height: auto !important; position: relative !important; z-index: 1 !important; }    
    #campaign-web-sp .bg-layer-top { position: absolute !important; z-index: 99 !important; top: 775px !important; left: 0px !important; width: 100% !important; height: 77% !important; display: block !important; max-width: none !important; object-fit: contain !important; pointer-events: none !important; transform: scale(2.6) !important; transform-origin: top center !important; }
#campaign-web-sp .KV_CTA_mobile {
    position: absolute !important;
    z-index: 100 !important;      /* Đảm bảo nổi lên trên cùng */
    
    /* Căn giữa màn hình */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* Vị trí từ dưới lên (bạn có thể chỉnh số % này nếu muốn cao/thấp hơn) */
    bottom: 18% !important; 
    
    /* Độ rộng của nút so với màn hình */
    width: 60% !important;        
    
    display: block !important;
    text-align: center !important;
}
#campaign-web-sp .KV_CTA_mobile img {
    width: 100% !important;       /* Chiếm hết chiều rộng của khung cha */
    height: auto !important;      /* Giữ tỷ lệ ảnh */
    display: block !important;
    margin: 0 auto !important;
}
    #campaign-web-sp .character-intro-mobile { position: relative !important; width: 100% !important; z-index: 10 !important; margin-top: 150px !important; }
    #campaign-web-sp .kv-char-img-flow { display: block !important; position: relative !important; z-index: 1 !important; width: 75% !important; margin: 0 auto !important; margin-top: -100px !important; }
    #campaign-web-sp .green-box-sp { background-color: #e1f0d4 !important; width: 100% !important; padding: 25px 0 !important; display: flex !important; justify-content: center !important; margin-top: 50px !important; }
    
    /* FIX: Định dạng cho các phần tử bên trong khối text */
    #campaign-web-sp .green-box-sp img, 
    #campaign-web-sp .img-spacing, 
    #campaign-web-sp .cta-sp {
    position: relative !important;
    width: 84% !important;        /* Độ rộng chuẩn của mobile */
    margin: 30px auto 0 !important; /* Canh giữa và cách trên 30px */
    display: block !important;
}
    
    /* FIX: Đảm bảo ảnh bên trong thẻ div .cta-sp luôn full 100% của cha nó */
    #campaign-web-sp .cta-sp img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

    #campaign-web-sp .img-spacing, 
    #campaign-web-sp .cta-sp { margin-top: 30px !important; }
    #campaign-web-sp .notes-mobile { background-color: #5ab533 !important; color: #ffffff !important; padding: 30px 20px !important; box-sizing: border-box !important; text-align: left !important; }
    #campaign-web-sp .notes-title-sp { color: #ffffff !important; font-size: 18px !important; font-weight: bold !important; margin-bottom: 10px !important; text-align: center !important; border: none !important; }
    #campaign-web-sp .notes-list-sp { list-style: none !important; padding: 0 !important; margin: 0 !important; font-size: 10px !important; line-height: 1.5 !important; color: #ffffff !important; }
    #campaign-web-sp .notes-list-sp li { margin-bottom: 5px !important; text-align: left !important; padding-left: 1em !important; text-indent: -1em !important; }
    #campaign-web-sp .notes-list-sp li::before { content: "※"; color: #ffffff !important; margin-right: 5px; font-weight: bold; }
    
    /* Footer & Header adjustments */
    #benesse-footer { display: none !important; }
    #campaign-web-sp footer.ms-footer { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; background-color: #ffffff !important; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 9999 !important; height: auto !important; }
    #campaign-web-sp footer.ms-footer .innerWrap, 
    #campaign-web-sp footer.ms-footer .footer-bottom { background-color: #ffffff !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
    #campaign-web-sp .footer-bottom__wrap.style-benesse { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 30px 20px !important; gap: 15px !important; height: auto !important; background-color: #ffffff !important; width: 100% !important; box-sizing: border-box !important; }
    #campaign-web-sp .footer-bottom__wrap.style-benesse * { color: #333333 !important; text-align: left !important; float: none !important; line-height: 1.5 !important; }
    #campaign-web-sp .footer-logo-wrap { margin-bottom: 10px !important; width: 100% !important; display: block !important; }
    #campaign-web-sp .footer-logo-wrap img { width: 130px !important; height: auto !important; display: block !important; }
    #campaign-web-sp .footer-bottom__list.vertical-links { display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
    #campaign-web-sp .footer-bottom__list.vertical-links li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    #campaign-web-sp .footer-bottom__list.vertical-links li a { color: #0070cb !important; text-decoration: underline !important; font-size: 14px !important; font-weight: normal !important; padding-left: 15px !important; position: relative !important; background: none !important; display: inline-block !important; }
    #campaign-web-sp .footer-bottom__list.vertical-links li a::before { content: "→" !important; font-family: sans-serif !important; position: absolute !important; left: 0 !important; top: 0px !important; color: #0070cb !important; font-weight: bold !important; font-size: 12px !important; }
    #campaign-web-sp .copy { margin-top: 15px !important; color: #666666 !important; font-size: 12px !important; display: block !important; }
    
    #campaign-web-sp .footer-logo-wrap, 
    #campaign-web-sp .footer-logo-wrap a { text-align: left !important; display: block !important; width: 100% !important; }
    #campaign-web-sp .footer-logo-wrap img { margin-left: 0 !important; margin-right: auto !important; margin-top: 0 !important; display: inline-block !important; }
}

/* ==========================================================================
   1. FIX HEADER SP (HEADER NGANG & MŨI TÊN TAM GIÁC)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Reset body để full màn hình */
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* --- KHUNG HEADER --- */
    div#benesse-header-sp {
        background-color: #fff !important;
        border-bottom: 1px solid #ccc !important;
        width: 100% !important;
        position: relative !important;
        z-index: 10000 !important;
        display: block !important;
        box-sizing: border-box !important;
        font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif !important;
    }

    /* --- NỘI DUNG HEADER (LOGO TRÁI - LINK PHẢI) --- */
    div#benesse-header-sp .benesse-header__inner {
        display: flex !important;
        justify-content: flex-start !important; /* Căn trái để dính gần nhau */
        align-items: center !important;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* LOGO */
    div#benesse-header-sp .benesse-header__logo {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }
    div#benesse-header-sp .benesse-header__logo img {
        width: 110px !important;
        height: auto !important;
        display: block !important;
        border: none !important;
    }

    /* LINK LIST */
    div#benesse-header-sp .benesse-header__link {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin: 0 0 0 40px !important; /* Khoảng cách chuẩn với Logo */
        padding: 0 !important;
        list-style: none !important;
    }
    div#benesse-header-sp .benesse-header__link li {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* STYLE CHỮ LINK (Size nhỏ & Mũi tên CSS) */
    div#benesse-header-sp .benesse-header__link li a {
        font-size: 10px !important;
        color: #0070cb !important;
        text-decoration: underline !important;
        white-space: nowrap !important;
        position: relative !important;
        padding-left: 10px !important;
        background: none !important; /* Bỏ ảnh nền cũ */
        display: inline-block !important;
        line-height: 1.2 !important;
        font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif !important;
    }

    /* TẠO MŨI TÊN BẰNG CSS (Luôn hiển thị) */
    div#benesse-header-sp .benesse-header__link li a::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0 !important;
        height: 0 !important;
        border-top: 3px solid transparent !important;
        border-bottom: 3px solid transparent !important;
        border-left: 5px solid #0070cb !important;
    }
}

/* ==========================================================================
   2. FIX PHẦN THÂN TRANG (MAIN CONTENT - LẤY TỪ CSS GỐC)
   ========================================================================== */
/* Lưu ý: Đã đổi #campaign-web-sp thành #campaign-web để khớp với HTML */
@media screen and (max-width: 768px) {
    
    #campaign-web .info { 
        width: 100% !important; 
        margin: 0 !important; 
        overflow-x: hidden !important; 
    }
    #campaign-web .section-campaign-mobile { 
        position: relative !important; 
        background-color: #ffffff !important; 
        z-index: 1 !important; 
    }

    /* --- KEY VISUAL (KV) --- */
    #campaign-web .KV-mobile { 
        position: relative !important; 
        width: 100% !important; 
        line-height: 0 !important; 
    }
    #campaign-web .kv-main-img { 
        width: 100% !important; 
        height: auto !important; 
        position: relative !important; 
        z-index: 1 !important; 
    }    
    
    /* Ảnh nền layer (Giữ nguyên thông số gốc 775px như file cũ) */
    #campaign-web .bg-layer-top { 
        position: absolute !important; 
        z-index: 99 !important; 
        top: 775px !important; 
        left: 0px !important; 
        width: 100% !important; 
        height: 77% !important; 
        display: block !important; 
        max-width: none !important; 
        object-fit: contain !important; 
        pointer-events: none !important; 
        transform: scale(2.6) !important; 
        transform-origin: top center !important; 
    }

    #campaign-web .KV_CTA_mobile {
        position: absolute !important;
        z-index: 100 !important;
        bottom: 18% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60% !important; /* Độ rộng nút */
        display: block !important;
        text-align: center !important;
    }
    #campaign-web .KV_CTA_mobile img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* --- CHARACTER INTRO --- */
    #campaign-web .character-intro-mobile { 
        position: relative !important; 
        width: 100% !important; 
        z-index: 10 !important; 
        margin-top: 150px !important; 
    }
    #campaign-web .kv-char-img-flow { 
        display: block !important; 
        position: relative !important; 
        z-index: 1 !important; 
        width: 75% !important; 
        margin: 0 auto !important; 
        margin-top: -100px !important; 
    }
    
    /* --- KHUNG TEXT XANH --- */
    #campaign-web .green-box-sp { 
        background-color: #e1f0d4 !important; 
        width: 100% !important; 
        padding: 25px 0 !important; 
        display: flex !important; 
        justify-content: center !important; 
        margin-top: 50px !important; 
    }
    
    #campaign-web .green-box-sp img, 
    #campaign-web .img-spacing, 
    #campaign-web .cta-sp {
        position: relative !important;
        width: 84% !important;
        margin: 30px auto 0 !important;
        display: block !important;
    }
    #campaign-web .cta-sp img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    #campaign-web .img-spacing, 
    #campaign-web .cta-sp { 
        margin-top: 30px !important; 
    }

    /* --- NOTES SECTION --- */
    #campaign-web .notes-mobile { 
        background-color: #5ab533 !important; 
        color: #ffffff !important; 
        padding: 30px 20px !important; 
        box-sizing: border-box !important; 
        text-align: left !important; 
    }
    #campaign-web .notes-title-sp { 
        color: #ffffff !important; 
        font-size: 18px !important; 
        font-weight: bold !important; 
        margin-bottom: 10px !important; 
        text-align: center !important; 
        border: none !important; 
    }
    #campaign-web .notes-list-sp { 
        list-style: none !important; 
        padding: 0 !important; 
        margin: 0 !important; 
        font-size: 10px !important; 
        line-height: 1.5 !important; 
        color: #ffffff !important; 
    }
    #campaign-web .notes-list-sp li { 
        margin-bottom: 5px !important; 
        text-align: left !important; 
        padding-left: 1em !important; 
        text-indent: -1em !important; 
    }
    #campaign-web .notes-list-sp li::before { 
        content: "※"; 
        color: #ffffff !important; 
        margin-right: 5px; 
        font-weight: bold; 
    }
}