/*---=================================
<!----------RESPONSIVE MOBILE---------->
==================================---*/
@media (max-width: 768px){
.stories-container{
flex-direction: column;
}
}
@media (max-width: 320px){
.video-wrapper {
position: relative;
padding-bottom: 90%;
}
.story-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 10px 10px !important;
}
}
@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-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;
width:180px;
height: 70px;
}
/*---- breadcumb ----*/
.breadcumb-area {
height: 400px !important;
padding: 177px 0 20px !important;
}
.breadcumb-title h1 {
font-size: 35px !important;
}
/*=============== Thuyên ===============*/
.mt-check-availability .mt-price-btn{
padding: 6px;
font-size: 14px;
}
.accordion-item {
padding: 10px 0;
}
.t-wrapper.t-ask-away.faq-tours-detail{
padding-bottom:0;
padding-top:28px;
}
.accordion-title .icon {
width: 30px;
height: 30px;
padding: 5px;
margin-right:7px;
}
.accordion-title {
font-size: 18px;
padding: 10px 0;
}
.services-area .order-2{
margin-top:40px;
}
.mt-schedule .toggle-all {
margin-top: 0px;
}
.mt-check-availability .mt-price p{
margin: 0 0 10px 0;
font-size: 14px;
}
.mt-highlight {
margin-bottom: 0px;
}
.custom-booking-iframe {
height: 830px !important;
}
/*=============== HOME ===============*/
/*---- hero area ----*/
.hero-area {
align-items: end !important;
display: flex !important;
padding-top: unset;
height: 90vh !important;
}
.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 .main-title-2 {
font-size: 30px;
}
.mobile-hide {
display: none !important;
content-visibility: hidden !important;
}
.mt-title {
font-size: 30px !important;
}
.about-content p {
font-size: 16px !important;
}
.story-content {
padding-right: 50px;
}
.story-card h3 {
font-size: 20px !important;
font-weight: 500 !important;
}
.t-content p {
font-size: 17px;
}
.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;
}
.highlight-area {
padding: 48px 0 !important;
}
.mt-check-availability .mt-price{
padding: 10px 20px;
}
/*----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;
}
/*===== 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;
}
.mt-icon-live.mt-live-detail.mt-discover .stories-container, .tab-container-newpagev2 {
display: none;
}
.accordion-content {
padding: 0;
}
.accordion-item.active .accordion-content {
max-height: max-content;
}
.services-area.mt-icon-live.mt-live-detail.mt-discover {
padding-bottom: 0 !important;;
}
.mt-highlight ul li, .mt-includes ul li, .mt-excludes ul li {
font-size: 17px;
color: #374040;
}
.t-story-content {
padding-top: 80px;
}
.t-trust .col-lg-5 {
margin: 80px 0;
}
.highlight-area {
margin-top: 0px !important;
padding-top: 0 !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: 0px;
}
.t-wrapper.t-stay-info.blog-content-detail {
padding-top: 0px;
}
.note-livecam{
padding:200px 0;
}
@media (min-width: 320px) and (max-width: 479px) {
.note-livecam{
padding:30px 0 !important;
}
}
/*------table of content -----*/
.toc-toggle-container {
display: flex;
}
.toc-modal {
display: none;
}
.table-wrap {
padding: 10px;
}
.card-desktop{
display:none;
}
.card-mobile{
display:block;
}
.card-mobile .info-table tr {
margin-bottom: 5px;
}
.card-mobile .info-table th, .info-table td {
padding: 3px 10px;
}
.card-mobile .info-table {
font-size: 14px;
}
/* cusrom icon mobile */
.mt-highlight ul li:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='icomoon-ignore'%3E%3C/g%3E%3Cpath d='M16 2.672c-7.361 0-13.328 5.967-13.328 13.328s5.968 13.328 13.328 13.328c7.361 0 13.328-5.967 13.328-13.328s-5.967-13.328-13.328-13.328zM16 28.262c-6.761 0-12.262-5.501-12.262-12.262s5.5-12.262 12.262-12.262c6.761 0 12.262 5.501 12.262 12.262s-5.5 12.262-12.262 12.262z' fill='%23527752'%3E%3C/path%3E%3Cpath d='M22.667 11.241l-8.559 8.299-2.998-2.998c-0.312-0.312-0.818-0.312-1.131 0s-0.312 0.818 0 1.131l3.555 3.555c0.156 0.156 0.361 0.234 0.565 0.234 0.2 0 0.401-0.075 0.556-0.225l9.124-8.848c0.317-0.308 0.325-0.814 0.018-1.131-0.309-0.318-0.814-0.325-1.131-0.018z' fill='%23527752'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
margin: 0px 10px 0 0;
position: relative;
top: 5px;
}
.mt-includes ul li:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='icomoon-ignore'%3E%3C/g%3E%3Cpath d='M16 2.672c-7.361 0-13.328 5.967-13.328 13.328s5.968 13.328 13.328 13.328c7.361 0 13.328-5.967 13.328-13.328s-5.967-13.328-13.328-13.328zM16 28.262c-6.761 0-12.262-5.501-12.262-12.262s5.5-12.262 12.262-12.262c6.761 0 12.262 5.501 12.262 12.262s-5.5 12.262-12.262 12.262z' fill='%23527752'%3E%3C/path%3E%3Cpath d='M22.667 11.241l-8.559 8.299-2.998-2.998c-0.312-0.312-0.818-0.312-1.131 0s-0.312 0.818 0 1.131l3.555 3.555c0.156 0.156 0.361 0.234 0.565 0.234 0.2 0 0.401-0.075 0.556-0.225l9.124-8.848c0.317-0.308 0.325-0.814 0.018-1.131-0.309-0.318-0.814-0.325-1.131-0.018z' fill='%23527752'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
margin: 0px 10px 0 0;
position: relative;
top: 5px;
}
.mt-excludes ul li:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg fill='%23ff2626' width='16px' height='16px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M128,28.00012a100,100,0,1,0,100,100A100.113,100.113,0,0,0,128,28.00012Zm0,192a92,92,0,1,1,92-92A92.10446,92.10446,0,0,1,128,220.00012ZM162.82813,98.82873l-29.17139,29.17139,29.17139,29.17139a3.99992,3.99992,0,1,1-5.65625,5.65722L128,133.65686,98.82813,162.82873a3.99992,3.99992,0,0,1-5.65625-5.65722l29.17138-29.17139L93.17188,98.82873a3.99992,3.99992,0,0,1,5.65625-5.65722L128,122.34338l29.17188-29.17187a3.99992,3.99992,0,1,1,5.65625,5.65722Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
margin: 0px 10px 0 0;
position: relative;
top: 5px;
}
.accordion-item .accordion-title .icon:before {
content: "";
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg fill='%23527752' width='16px' height='16px' viewBox='0 0 14 14' role='img' focusable='false' aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 7,1 C 4.929086,1 3.25,2.67871 3.25,4.75 3.25,5.33008 3.381836,5.88013 3.617312,6.37012 3.630484,6.39796 7,13 7,13 L 10.34205,6.45215 C 10.60279,5.94166 10.75,5.36303 10.75,4.75 10.75,2.67871 9.07129,1 7,1 Z M 7,7 C 5.757437,7 4.75,5.99219 4.75,4.75 4.75,3.50781 5.757437,2.5 7,2.5 8.24219,2.5 9.25,3.50781 9.25,4.75 9.25,5.99219 8.24219,7 7,7 Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
z-index: 2
}
}/*--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 */
}
}
/* --- Mobile Carousel Thuyên --- */
@media (max-width: 768px) {
.gallery-grid {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 0;
}

.gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;               /* vẫn cần để scroll được */
  -webkit-overflow-scrolling: touch; /* mượt trên iOS */
  scroll-snap-type: x mandatory;  /* bắt buộc snap từng cái một */
  scroll-behavior: smooth;        /* lướt mượt hơn khi dùng nút hoặc JS */
  gap: 12px;
  padding: 0 16px;

  align-items: flex-start;        /* hoặc center tùy ý */

  /* Ẩn scrollbar trên các trình duyệt phổ biến */
  -ms-overflow-style: none;       /* Edge/IE */
  scrollbar-width: none;          /* Firefox */
}

/* Ẩn scrollbar trên Chrome, Safari, Opera, Edge mới */
.gallery-grid::-webkit-scrollbar {
  display: none;
}

/* Các item bên trong (ảnh hoặc wrapper của ảnh) */
.gallery-grid > * {
  flex: 0 0 auto;                 /* không co giãn */
  scroll-snap-align: start;       /* snap ở đầu mỗi hình → lướt từng cái một */
  /* hoặc scroll-snap-align: center; nếu muốn căn giữa */

  max-width: 89vw;                /* mỗi hình không quá rộng màn hình */
  height: auto;
}

/* Nếu item là <img> trực tiếp thì thêm */
.gallery-grid img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;              /* hoặc contain tùy nhu cầu */
}

.gallery-item { min-width: 100%; scroll-snap-align: start; }
.thumb-img { aspect-ratio: 1/1; border-radius: 0; border-radius: 8px;}
.nav-controls {
position: absolute; top: 50%; width: 100%;
display: flex; justify-content: space-between;
transform: translateY(-50%); pointer-events: none; z-index: 10;
}
.arrow {
pointer-events: auto; background: white; width: 40px; height: 40px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin: 0 10px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
user-select: none;
}
}
@media (min-width: 769px) { .nav-controls { display: none; } }
/*---=================================
<!----------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;
}
}
/* ===== RESPONSIVE ===== */
@media(max-width:768px){
.cards-tour{grid-template-columns:1fr}
.card-image-tour img{height:250px}
.card-meta{
flex-direction:column;
align-items:flex-start;
gap:6px;
}
.cards-live{grid-template-columns:1fr}
.card-live img{height:250px}
.title-live{font-size:28px}
}
}