/*
 * Mobile Khonggian Fix - 2025-10-10
 * Super mobile-friendly UI for box_khonggian sections
 * MOBILE ONLY (max-width: 480px)
 */

@media only screen and (min-width: 320px) and (max-width: 480px) {

    /* ===== CONTAINER ===== */
    .box_khonggian {
        float: left !important;
        width: 100% !important;
        position: relative !important;
        margin: 40px 0 0 !important;
        padding: 0 !important;
    }

    .box_khonggian_content {
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin: 0 16px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ===== TITLE ===== */
    .box_khonggian .box_title {
        margin: 0 0 20px 0 !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }

    .box_khonggian .title_text {
        width: 100% !important;
        font-size: 22px !important;
        text-transform: none !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: #191919 !important;
        display: block !important;
    }

    .box_khonggian .box_title_sub {
        width: 100% !important;
        font-size: 14px !important;
        text-transform: none !important;
        line-height: 1.6 !important;
        color: #666 !important;
        font-weight: 400 !important;
        display: block !important;
    }

    /* ===== MAIN CONTAINER ===== */
    .box_khonggian_infor {
        float: none !important;
        width: 100% !important;
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
    }

    /* Remove desktop gradient overlay inside info container on mobile */
    .box_khonggian_infor::before {
        display: none !important;
    }




    /* ===== CONTENT AREA ===== */
    .khonggian_infor,
    .khonggian_infor.tabcontent {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        /* Let inline styles control visibility; do not force display here */
        float: none !important;
        z-index: 1 !important;
    }

    /* ===== IMAGES ===== */
    .khonggian_img,
    .khonggian_infor .khonggian_img {
        width: 100% !important;
        height: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        border-radius: 5px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: block !important;
        float: none !important;
    }

    .khonggian_img img,
    .khonggian_infor .khonggian_img img {
        width: 100% !important;
        height: auto !important;

        display: block !important;
        object-fit: cover !important;
        border-radius: 5px !important;
    }

    /* ===== Screenshot-styled vertical tab list ===== */
    .khonggian_tab {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 16px 0 20px 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .khonggian_tab_item {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .khonggian_tab_item a,
    .khonggian_tab_item a.tablinks {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 1px solid #e0e0e0 !important;
        color: #c4c4c4 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        text-align: left !important;
        padding: 8px 0 8px 16px !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        border-radius: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        position: relative !important;
        transition: none !important;
        text-transform: none !important;
        cursor: pointer !important;
    }

    .khonggian_tab_item a:hover,
    .khonggian_tab_item a.tablinks:hover {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border-left: 1px solid #e0e0e0 !important;
    }

    .khonggian_tab_item a.img_active,
    .khonggian_tab_item a.tablinks.img_active {
        color: #2d2d2d !important;
        font-weight: 500 !important;
        border-left: 2px solid #c9a86a !important;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .khonggian_tab_item a.img_active:hover,
    .khonggian_tab_item a.tablinks.img_active:hover {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Paragraph below image – like screenshot (no grey box) */
    .khonggian_text,
    .khonggian_infor .khonggian_text {
        background: transparent !important;
        padding: 0 0px !important;
        margin: 20px 0 30px 0 !important;
        color: #b0b0b0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: left !important;
        height: auto !important;
    }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .khonggian_infor.tabcontent {
        animation: fadeInUp 0.4s ease !important;
    }

    /* ===== EXTRA SMALL SCREENS ===== */
    @media only screen and (max-width: 374px) {
        .box_khonggian {
            margin: 30px 0 0 !important;
        }

        .box_khonggian_content {
            width: calc(100% - 24px) !important;
            margin: 0 12px !important;
        }

        .box_khonggian .title_text {
            font-size: 20px !important;
        }

        .box_khonggian .box_title_sub {
            font-size: 13px !important;
        }

        .khonggian_tab {
            flex-direction: column !important;
            gap: 10px !important;
        }

        .khonggian_tab_item {
            width: 100% !important;
            flex: 1 1 100% !important;
        }

        .khonggian_tab_item a {
            font-size: 14px !important;
            padding: 14px 12px !important;
            min-height: 50px !important;
        }

        .khonggian_text {
            font-size: 13px !important;
            padding: 12px !important;
        }
    }

}