/*---=================================
<!----------RESPONSIVE MOBILE---------->
==================================---*/
@media (min-width: 320px) and (max-width: 768px) {
	.container {
    	padding: 24px !important;
    }
    .t-wrapper {
    	padding: 48px 0px 48px;
    }
    .t-align-left, .t-align-right, .t-align-center {
    	margin-bottom: 24px;
    }
    .t-align-bottom {
		justify-content: flex-start;
		padding-bottom: 0px;
    }
    .section-title.left {
        margin-bottom: 24px !important;
    }
    .about-area.home-two.about-live-detail, .services-area.mt-live-video, .about-area.home-two, .services-area.mt-live-video.mt-tours, .highlight-area, .t-wrapper.t-ask-away.faq-tours-detail, .t-wrapper.t-lens.mt-gallery, .services-area.mt-icon-live  {
        padding: 48px 0px;
    }
    /*----- logo mobile ----*/
    .mean-container .mean-bar::before {
        background-image: url(/uploads/2025/10/katien-logo1__638959320210720325.png) !important;
		height:70px;
		width:170px;
    }
    /*---- breadcumb ----*/
    .breadcumb-area {
        height: 400px !important;
    }
    .breadcumb-title h1 {
        font-size: 40px !important;
    }

    /*=============== HOME ===============*/
    /*---- hero area ----*/
    .hero-area {
        align-items: end !important;
        display: flex !important;
		padding-top: unset;
    }
    .hero-area .col-lg-6 {
        padding: 0px;
    }
.hero-bg.bg-mobile {
    display: block;
}
.hero-bg.bg-desktop {
    display: none;
}
    .echofy-button.one {
        margin-top: 20px;
    }
    .echofy-button.two {
        margin-top: 20px;
	}
    .hero-content h1.main-title-2 {
        font-size: 30px;
    }
    .mt-title {
        font-size: 30px !important;
    }
    .about-content p {
        font-size: 16px !important;
    }
    .story-content {
        padding-right: 50px !important;
    }
    .story-card h3 {
        font-size: 20px !important;
        font-weight: 500 !important;
    }
    .t-content p {
        font-size: 16px;
    }
    .hero-area .row.align-items-center {
        text-align: center !important;
    }
    .hero-content {
        text-align: center !important;
    }
    .echofy-button a {
        font-size: 12px !important;
        padding: 3px 5px !important;
    }
    .echofy-button.two a {
        padding: 3px 5px !important;
    }

    /*--- price area ---*/
    .price-area {
        padding: 48px 0 !important;
    }
    /*--- services area ----*/
    .services-area {
        padding: 48px 0 !important;
    }
    /*----about area---*/
    .about-area {
        padding: 48px 0 !important;
    }
    .about-thumb {
        padding-top: 24px !important;
        padding-bottom: 0px !important;
    }
    .tour-slider-container {
        width: 100% !important;
    }
    .t-donation-list {
        padding-left: 38%;
    }
    .t-single-donation-box.t-image-small .t-donation-list {
        padding-left: 25%;
    }
    .t-hided-dt {
        display: none;
    }
    .t-hided-mb {
        display: block;
    }
    /*----- Katien lodge -----*/
    .tour-slide {
        flex: 0 0 calc((100% / 2) - 10px);
    }
    .tour-slide {
        min-width: 176px !important;
    }
    /*---- Through our lens ----*/
    .t-lens .t-align-right.t-align-bottom {
        padding-bottom: 0px;
        margin-top: -10px;
        text-align: center;
    }
    /*---- Ask away ----*/
    .faq-singular .faq-question:before {
        content: "" !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2735px%27%20height%3D%2735px%27%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%275%27%20x2%3D%2712%27%20y2%3D%2719%27%20stroke%3D%27%23505E5E%27%20stroke-width%3D%272%27/%3E%3Cline%20x1%3D%275%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27%20stroke%3D%27%23505E5E%27%20stroke-width%3D%272%27/%3E%3C/svg%3E);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        right: 0 !important;
        font-size: 35px !important;
    }
    /*---- Stay informed daily ----*/
    .t-stay-info .t-blog-content {
        height: auto;
    }
    .t-stay-info .t-blog-title a {
        padding: 8px 0px 8px;
    }
    .t-stay-info .t-blog-content a {
        font-size: 20px;
    }
	
	.table-wrap {
    padding: 10px;
	}
    /*===== ABOUT US =======*/
    /*------Trust the experts ------*/
    h4.t-subtitle {
        font-size: 12px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #527752;
    }
    h2.t-title {
        font-size: 30px;
        font-weight: 300;
        line-height: 1.25em;
        color: #272D2D;
        letter-spacing: -1px;
    }
    .t-card {
        height: auto;
    }
    .t-story-card.t-safari {
        height: 500px;
        margin-top: 24px;
    }
    .profile-card {
        height: 350px;
    }
    .info-box h3 {
        font-size: 22px;
    }
    .t-image-tes {
        margin-top: 24px;
    }
    .t-client-tes {
        background-color: #F3F6F3;
    }
    /*=== CONTACT US ====*/
    .t-ask-away .t-align-right.t-align-bottom {
        margin-top: -16px;
        text-align: left;
    }
    .t-faqs-pdr {
        padding-right: 0px;
    }
    .t-faqs-pdl {
        padding-left: 0px;
    }
    .faq-singular .faq-question {
        padding: 12px 25px 12px 0px !important;
        font-size: 16px !important;
    }
    .faq-singular.active .faq-question {
        font-weight: 400 !important;
    }
    .faq-singular {
        margin-bottom: 0px !important;
    }
    .faq-answer {
        padding: 0px 0px 24px !important;
    }
    .faq-answer .desc {
        font-size: 16px;
    }
    .t-maps .google-map {
        height: 350px;
        margin-top: 24px;
    }
    .t-title-mask {
        font-size: 22px;
        font-weight: 300;
        margin-bottom: 8px;
    }
    .t-align-bottom-button {
        height: auto;
        padding-bottom: 24px;
    }
    /*==== BLOG DETAIL ===*/
    /*==== FOOTER ===*/
    .t-wrapper.t-footer-area {
        background: #1B2020;
        padding: 48px 0px 10px;
    }
    .t-footer-area .footer-social-icon ul li.text {
        width: 100%;
        margin-bottom: 12px;
    }
    .t-footer-bottom-content h4 {
        text-align: left;
    }
	/*======== LIVE VIDEO ==========*/
	.home-two .about-thumb {
        padding-top: 0px !important;
        margin-top: 24px;
    }
    .about-area.home-two {
        background-color: #F3F6F3;
    }
	/*====== TOUR ========*/
	.services-area.mt-live-video.mt-tours {
		background-color: #F3F6F3;
    }
	*======= TOUR SAFARI DETAIL ======*/
.services-area.mt-icon-live.mt-live-detail.mt-discover {
    background: red !important;
}
    .highlight-area {
        margin-top: -0px !important;
    }
    .t-wrapper.t-ask-away.faq-tours-detail {
        background-color: #F3F6F3;
    }
	/*====== BLOG DETAIL ========*/
    .t-wrapper.t-blogdetails {
        padding: 48px 0px;
    }
	.t-content-detail h2 {
		font-size: 30px;
    }
    .t-content-detail h3 {
        font-size: 20px;
    }
	.t-blogdetails .card {
    margin-bottom: 25px;
	}
.t-wrapper.t-stay-info.blog-content-detail {
    padding-top: 0px;
}
/*------table of content -----*/
.toc-toggle-container {
display: flex;
}
.toc-modal {
    display: none;
}
}/*--close responsive--*/

/* CSS riêng cho iPhone (iOS Safari) - Fix icon size jitter */
@supports (-webkit-touch-callout: none) and (max-width: 812px) {
    .faq-singular .faq-question:before {
        content: "" !important;
        background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2735px%27%20height%3D%2735px%27%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%275%27%20x2%3D%2712%27%20y2%3D%2719%27%20stroke%3D%27%23505E5E%27%20stroke-width%3D%272%27/%3E%3Cline%20x1%3D%275%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27%20stroke%3D%27%23505E5E%27%20stroke-width%3D%272%27/%3E%3C/svg%3E) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 24px 24px !important; /* Fixed size nhỏ hơn, tránh scale động trên iOS */
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) rotate(0deg) !important; /* Sửa rotate(0deg) để giữ nguyên dấu + (không xoay) */
        width: 35px !important; /* Fixed width để tránh jitter */
        height: 35px !important; /* Fixed height */
        will-change: transform !important; /* Optimize GPU rendering trên iOS */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth easing, tránh nhảy */
        z-index: 1; /* Đảm bảo layer đúng */
    }

    .faq-singular.active .faq-question:before {
        background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2735px%27%20height%3D%2735px%27%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cline%20x1%3D%275%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27%20stroke%3D%27%23505E5E%27%20stroke-width%3D%272%27/%3E%3C/svg%3E") !important;
        transform: translateY(-50%) rotate(0deg) !important; /* Chỉ rotate, giữ translateY nhất quán */
        /* Giữ nguyên width/height/background-size/will-change/transition từ trên */
    }

    /* Đảm bảo parent (.faq-question) có position relative để absolute positioning ổn định */
    .faq-singular .faq-question {
        position: relative !important;
        padding-right: 45px !important; /* Thêm padding để icon không bị cắt */
    }

    /* Fix active state border/color để tránh reflow */
    .faq-singular.active .faq-question {
        border-style: none !important; /* Giữ nguyên nếu cần, nhưng tránh thay đổi layout */
    }
}

/*---=================================
<!----------RESPONSIVE TABLET AIR---------->
==================================---*/
@media (min-width: 768px) and (max-width: 991px) {
.mean-container .mean-bar::before {
        background-image: url(/uploads/2025/10/katien-logo1__638959320210720325.png) !important;
    }
/*--- home ---*/
    .hero-area {
        background: none !important;
        align-items: end !important;
        display: flex !important;
        text-align: center;
}
.about-right {
    padding-left: 0px;
}
.about-thumb {
    padding: 0px;
}
.mt-slider {
    display: none;
}
/*--- live video ---*/
.about-area.home-two .about-thumb {
    margin-right: 0px;
}
/*--- live video detail ---*/
.about-area.home-two.about-live-detail .about-video {
        top: 40% !important;
}
}
/*---=================================
<!----------RESPONSIVE TABLET PRO---------->
==================================---*/
@media (min-width: 768px) and (max-width: 1199px) {
/*---- home ----*/
	.mt-title {
    font-size: 30px;
}
h2.t-title {
    font-size: 30px;
}
.t-donation-list {
    padding-left: 30%;
}
/*---- tour safari detail ----*/
.mt-icon-live.mt-live-detail .story-background .story-content h3 {
    font-size: 20px;
}
.faq-singular .faq-question {
font-size: 20px;
}
}