/* style.css or your custom stylesheet */

@font-face {
    font-family: 'Snell Roundhand Bold';
    font-style: normal;
    font-weight: bold;
    font-display: auto;
    src: url('/wp-content/uploads/2025/04/SVN-Snell-Roundhand-Script-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Snell Roundhand Bold';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('/wp-content/uploads/2025/04/SVN-Snell-Roundhand-Script.ttf') format('truetype');
}

/* Start Custom Fonts CSS */
@font-face {
    font-family: 'Savoye LET';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('/wp-content/uploads/2025/04/SavoyeLetPlainCC-02.ttf') format('truetype');
}

/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */
@font-face {
    font-family: 'MrsSaintDelafield-Regular';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('/wp-content/uploads/2025/04/MrsSaintDelafield-Regular.ttf') format('truetype');
}

/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */
@font-face {
    font-family: 'Montserrat-VariableFont_wght';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('/wp-content/uploads/2025/04/Montserrat-VariableFont_wght.ttf') format('truetype');
}

.my-stories-container {
    display: flex;
     /* Responsive grid with minimum 300px width */
    gap: 24px; /* Spacing between cards */
    padding: 20px;
	flex-wrap: wrap;
}

.story-card {
    border-radius: 25px;
    overflow: hidden; /* To contain rounded corners of image */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 31.333%;
}

.story-image {
    position: relative; /* For potential overlay or absolute positioning */
}

.story-image a {
    display: block; /* Make the link fill the image container */
}

.story-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

.story-content {
    /* padding: 15px; */
    position: relative;
	 background: #f2f2f2;
}
.story-content > img{
	width:100%;
}
h3.story-title:before {
    content: "";
    width: 34px;
    height: 34px;
    display: inline-block;
    background: #D1D1D1;
    border-radius: 20px;
        margin-right: 10px;
	border: 3px solid #B3B3B3;
}

.story-title {
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 1.2em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    padding: 15px 15px 15px 15px;
}

.story-title a {
    text-decoration: none;
    color: #333;
    font-family: "Montserrat";
    font-size: 12px;
	    font-weight: 600;
}

.story-title a:hover {
    color: #007bff;
}

.story-excerpt {
    color: #000000;
    font-size: 0.95em;
    margin-bottom: 0;
    width: 250px;
    height: 82px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element */
    background: rgb(255 255 255 / 86%);
    padding: 6px 10px 10px 10px;
    box-shadow: 0px 2px 6px #0000004d;
    line-height: 1.3;
}

.story-excerpt > p {
	margin:0;
    font-family: "Montserrat";
    font-size: 14px;
}

.story-actions {
    display: flex;
    padding: 10px 15px;
}

.story-actions button {
    background: none;
    border: none;
       padding: 5px 5px;
    margin-right: 0;
    cursor: pointer;
    color: #777;
    font-size: 1em;
}

.story-actions button i {
    margin-right: 5px;
}

.story-actions button:hover {
    color: #333;
}

i.far.fa-bookmark{
	content:url("/wp-content/themes/hello-elementor/assets/images/bookmark.png")
}

i.far.fa-comment{
	content:url("/wp-content/themes/hello-elementor/assets/images/comment.png")
}

i.far.fa-share{
	content:url("/wp-content/themes/hello-elementor/assets/images/share.svg")
}

i.far.fa-heart{
	content:url("/wp-content/themes/hello-elementor/assets/images/like.svg")
}

.story-actions > button:last-child{
    /*flex: 1;*/
    text-align: right;
    margin-right: 0;
}

/****/
.form-stepl {
  background-color: #f9f9f9;
      padding: 20px 40px 40px 40px;
  border-radius: 8px;
  font-family: sans-serif;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
      max-width: 50%;
	      margin: 0 auto;
}
.form-stepl form {
    width: 100%;
}

.form-stepl label[for="story"] {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-size: 0.9em;
  font-family: 'Montserrat';
    font-size: 14px;
    font-weight: bold;
}

.form-stepl textarea#story {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 1em;
}

.form-stepl fieldset {
  border: none;
  padding: 0;
  margin-bottom: 15px;
}

.form-stepl fieldset legend {
  font-size: 1em;
  color: #555;
  margin-bottom: 10px;
  padding: 0;
  font-family: 'Montserrat';
    font-size: 14px;
    font-weight: bold;
}

.form-stepl .image-upload {
  background-color: #fff;
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.form-stepl .image-upload .placeholder img {
  max-width: 60px;
  height: auto;
  opacity: 0.7;
}

.form-stepl .image-upload .placeholder p {
  color: #777;
  font-size: 0.85em;
  margin-top: 5px;
  margin-bottom: 5px;
}

.form-stepl .image-upload .placeholder button {
  background-color: #e0f7fa;
  color: #00bcd4;
  border: 1px solid #b2ebf2;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
}

.form-stepl .image-upload .placeholder button:hover {
  background-color: #b2ebf2;
}

.form-stepl .theme-selection {
  display: flex;
  gap: 10px;
}

.form-stepl .theme-selection label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
      font-size: 13px;
    font-family: 'Montserrat';
    color: grey;
}

.form-stepl .theme-selection label input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.form-stepl .theme-selection label img {
  width: 50px;
  height: 50px;
  border: 2px solid transparent;
  border-radius: 8px;
  margin-bottom: 5px;
  opacity: 0.7;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

.form-stepl .theme-selection label input[type="radio"]:checked + img {
  border-color: #29b6f6; /* Highlight selected */
  opacity: 1;
}

.form-stepl .theme-selection label span {
  font-size: 0.8em;
  color: #555;
}

.form-stepl button#submit-step1 {
  background-color: #80cbc4;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 25px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: fit-content;
  margin: 15px auto 0;
  display: block;
}

.form-stepl button#submit-step1:hover {
  background-color: #4db6ac;
}

/**upload image**/
.upload-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0; /* Adjust as needed */
  /* background-color: #f7f7f7; */ /* Optional background for the container */
  border-radius: 8px; /* Optional rounded corners */
  margin-bottom: 10px;
}

.drop-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 40px;
  border: 2px dashed #BDBDBD;
  border-radius: 8px;
  background-color: #f2f2f2;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.drop-area.dragover {
  border-color: #4CAF50; /* Highlight color when dragging over */
}

.upload-icon {
  margin-bottom: 0;
}

.upload-text-primary {
  color: #2196F3;
  font-size: 1em;
  margin-bottom: 5px;
  margin-top: 0;
}

.upload-text-secondary {
  color: #757575;
  font-size: 0.8em;
  margin: 0;
}

.preview-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.preview-item {
  position: relative;
  width: 80px; /* Adjust as needed */
  height: 80px; /* Adjust as needed */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 0.7em;
  text-align: center;
  line-height: 1.5; /* Adjust as needed */
}

.progress-bar {
  background-color: #4CAF50;
  height: 5px; /* Adjust as needed */
  width: 0%; /* Updated dynamically */
}

.add-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; /* Adjust as needed */
  height: 80px; /* Adjust as needed */
  border: 1px dashed #BDBDBD;
  border-radius: 4px;
  background-color: #eee;
  color: #BDBDBD;
  cursor: pointer;
  font-size: 1.5em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.add-more:hover {
  background-color: #ddd;
  color: #757575;
}

/*beauty form*/
.form-step2 input[type="text"],.form-step2 input[type="email"],.form-step2 input[type="tel"] {
  width: calc(100% - 12px); /* Adjust for padding */
  padding: 15px 10px;
  border: 1px solid #000;
  border-radius: 25px; /* Creates the rounded ends */
  font-size: 1rem;
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  margin-bottom: 18px;
}

.form-step2 input[type="text"]:focus {
  outline: none;
  border-color: #007bff; /* Highlight on focus */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-step2 .radio-group {
  display: flex;
  gap: 15px; /* Adjust spacing between radio buttons and labels */
  margin-bottom: 15px; /* Add some space below the group */
}

.form-step2 .radio-group label {
  display: flex;
  align-items: center; /* Vertically align the radio button and label text */
  color: #495057; /* Adjust label text color */
  cursor: pointer; /* Make the label clickable */
  font-size: 13px;
    font-family: 'Montserrat';
}

.form-step2 .radio-group input[type="radio"] {
  appearance: none; /* Remove default radio button styling */
  width: 16px; /* Set the size of the custom radio button */
  height: 16px;
  border: 1px solid #ced4da; /* Border color */
  border-radius: 50%; /* Make it a circle */
  outline: none; /* Remove default focus outline */
  cursor: pointer;
  margin-right: 8px; /* Space between the radio button and label text */
  background-color: #fff; /* Background color of the radio button */
}

.form-step2 .radio-group input[type="radio"]:checked {
  background-color: #28a745; /* Background color when checked */
  border-color: #28a745; /* Border color when checked */
  position: relative; /* For the inner circle */
}

.form-step2 .radio-group input[type="radio"]:checked::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; /* Size of the inner filled circle */
  height: 8px;
  background-color: white; /* Color of the inner filled circle */
  border-radius: 50%;
}

.form-step2 .radio-group input[type="radio"]:focus-visible {
  border-color: #007bff; /* Highlight border on focus */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add a focus shadow */
}

button#submit-cau-chuyen {
  background-color: #80cbc4;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 25px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: fit-content;
  margin: 15px auto 0;
  display: block;
}

.form-step2 .radio-group p {
    color: #495057;
    font-size: 13px;
    font-family: 'Montserrat';
}

/***********/
.comment-list {
  list-style: none;
  padding: 20px;
  
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center; /* Center the list items */
  
  min-height: 555px;
}

.comment-item {
  /* background-color: #fff; */
    border-radius: 15px;
    /* padding: 10px 15px; */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
    display: flex
;
    align-items: flex-start;
    /* width: fit-content; */
    max-width: 350px;
}


.comment-item:nth-child(2n) {
  max-width: 300px;
}

.comment-item:nth-child(3n + 1) {
  max-width: 400px;
}

.comment-item.d-none{
	display:none
}

.comment-item.highlighted {
  background-color: #e9ecef; /* Light gray for highlighted */
}

.review-cm-list {
    position: relative;
    margin: 0px 0px 50px 0;
}

ul.comment-list {
   display:none;
}

li.comment-item:not(.show) {
    visibility: hidden;
}

.profile-info {
  width: 17%;
  height: auto;
  border-radius: 50%;
  margin-right: 8px;
  overflow: hidden; /* Clip image to the circle */
}

.profile-info img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */ /* Ensure image fills the circle */
  display: block; /* Prevent extra space below image */
}

.comment-content {
  /* flex-grow: 1; */ /* Allow text to take up remaining space */

}

.comment-text {
  color: #333;
  line-height: 1.4;
  font-size: 0.95em;
  margin-bottom: 0;
  margin-top: 0;
}

/* Basic styling for emojis */
.comment-text img {
      border-radius: 15px;
  vertical-align: middle;
}

.comment-item.show {
	 pointer-events: auto; /* Make the comment item interactive */
            position: absolute; /* Make each comment positioned absolutely */
          
        }
		li.comment-item.show{
			opacity: 0; /* Initially invisible */
  transform: translateY(20px); /* Start a little below its final position */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition for opacity and transform */
  z-index:9 !important;
		}
		
li.comment-item.show-pos1 {
    left: 18%;
    top: 20%;
	  

}
		
li.comment-item.show.show-pos2 {
    right: 18%;
    top: 45%;
}


li.comment-item.show-pos3 {
    left: 10%;
    top: 55%;
	  

}
		
li.comment-item.show.show-pos4 {
    right: 10%;
    top: 18%;
}



li.comment-item.show.fade-in-up {
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Move to its original position */
}

/*ul.comment-list:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 50%);
	z-index:2;
top:0;
}*/

footer#site-footer {
    display: none;
}

button.like-btn.favorite-button.favorite > i {
    content:url("/wp-content/themes/hello-elementor/assets/images/like_active.svg")
}

.story-content a, .story-content img {
    width: 100%;
}

.story-card .story-readmore{
display:none
}

.story-card:last-child .story-readmore{
display:block
}

.story-readmore {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 color: white;
  /* Add any other styling you need for the button/element */
  /* For example: */
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* color: white; */
  /* padding: 10px 20px; */
  /* border-radius: 5px; */
  /* text-decoration: none; */
z-index:3
}

.story-card {
    position: relative;
}

.story-readmore p {
    color: #fff;
	 font-family: "Montserrat";
}

.story-card:last-child .story-content:before {
    position: absolute;
    content: "";
    background: rgb(0 0 0 / 50%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.single-wrapper {
    margin: 0 auto;
    max-width: 1000px;
    box-shadow: 0px 2px 6px rgb(0 0 0 / 10%);
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
background:white;
}


body.cau-chuyen-cua-toi-template-default.single.single-cau-chuyen-cua-toi,body.page-template-custom-page,body.page-template-custom-page-bs,body.page-template-custom-page-nhanvien,body.page-template-custom-page-bn {
    background-image: linear-gradient(360deg, #FFF5EE 11%, #A0C9C5 82%);
}

 .elementor-custom-heading-title {
    font-family: "Snell Roundhand Bold", Sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    color: #2D2D2D;
    text-align: center;
}

.preview-container:not(.have-preview-item) .add-more {
    display: none;
}

.page-container{
    max-width: 1170px; 
    margin: 0 auto;
	 display: flex; 
}

 .column-7 {
    flex: 66.33; /* Chiếm 7 phần trong tổng số phần */
    
  }

  .column-3 {
    flex: 33.66; /* Chiếm 3 phần trong tổng số phần */
  
  }
    .column-7 .story-card{
	  width:48%
  }
  .column-3 .story-card{
	  width:100%
  }
  
    .column-7 .my-stories-container{
		padding:20px 10px 20px 20px;
	}
	
	  
    .column-3 .my-stories-container{
		padding:20px 20px 20px 10px;
	}
	
	.columns-sticky{
		padding: 10px;
		/* Thuộc tính cho sticky */
		position: sticky;
		top: 0; /* Dính vào đầu viewport khi cuộn */
		height: fit-content; /* Điều chỉnh chiều cao theo nội dung */
	}
	
	/********VIDEO MODAL**********************/
	
	#videoModal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 5; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        #videoModal .modal-content {
            background-color: #fefefe;
            margin: 7% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 60%; /* Could be more or less, depending on screen size */
            position: relative;
        }

        #videoModal .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        #videoModal .close-button:hover,
        #videoModal .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        #videoModal .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
            height: 0;
            overflow: hidden;
            margin-top: 20px;
        }

        #videoModal .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
		
/****offcanvas******************/		
	
	 .offcanvas-menu {
            height: 100%;
            width: 0;
            position: fixed;
               z-index: 9;
            top: 0;
            left: 0;
            background-color: transparent;
            overflow-x: hidden;
            transition: 0.5s;
                padding-top: 22px;
			
			
        }
		
		body:not(.home) .offcanvas-menu{
			top:55px;
		}

        .offcanvas-menu a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 18px;
            color: #818181;
            display: block;
            transition: 0.3s;
			    color: #fff;
        }

        .offcanvas-menu a:hover {
            color: #000;
        }

        .offcanvas-menu .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
            text-decoration: none;
            color: #000;
			display:none;
        }
		
		
		 .offcanvas-menu	nav.elementor-nav-menu__container {
    background: rgb(255 255 255 / 20%);
    color: #fff;
}

	 .offcanvas-menu a.elementor-item.elementor-item-anchor {
		color: #fff;
		display: flex;
	}

	 .offcanvas-menu a.elementor-item.elementor-item-active {
    background: transparent !important;
}

	 .offcanvas-menu .elementor-nav-menu li{
    border-bottom:0.1px solid #fff
}
 .offcanvas-menu .elementor-nav-menu ul {
    display: none;
    background: rgb(255 255 255 / 20%) !important;
}
 .offcanvas-menu  .elementor-nav-menu--dropdown .elementor-item.highlighted{
	 background: rgb(255 255 255 / 20%) !important;
}

.elementor-nav-menu li a{
    font-family: "Montserrat" !important;
    font-size:12px
}


.more-posts h4{
    font-family: 'Montserrat';
    font-size: 19px;
    text-align: center;
}

h1.entry-title,.page-content ,.page-content p{
	font-family: 'Montserrat';
}

.abouttext,.text {
            /* initial height of the text */
           
            overflow: hidden;
            position: relative;
            transition: height 0.3s ease-out; /* smooth transition */
	    font-family: "Savoye LET", Sans-serif;
    font-weight: 400;
    color: #000000;
        }
        .abouttext.expanded {
            /* expanded height */
            height: auto;
        }
        .read-more-button {
           font-family: "Savoye LET", Sans-serif;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 10px;
            display: inline-block; /* Important for correct margin/padding */
			display:none;
        }
        .read-more-button:hover {
           
        }
        /* CSS Gradient for fading effect */
        
		
		.column-12 {
    width: 100%;
}


#loading-overlay {
  position: fixed; /* Cố định trên màn hình */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Nền mờ */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Đảm bảo hiển thị trên cùng */
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




.story-content img {
    /*max-height: 348px;
    overflow: hidden;
	object-fit: contain;*/
	
}

.thumb-wrap {
    display: flex;
}
.story-content img {
    width: auto;
       align-self: center;
    margin: 0 auto !important;
    display: block;
}

.story-excerpt{
	display:none;
}

body:not(.home) .elementor-nav-menu--main .elementor-item,body:not(.home)  .elementor-nav-menu--dropdown a {
    color: #000 !important;
}


.page-content img {
    width: 100%;
    height: auto;
}

body:not(.home) .openMobileMenu i.fas.fa-bars {
    color: #000;
}

body .gt_float_switcher,.gt_float_switcher .gt-selected{
	    box-shadow: unset !important;
    background: unset !important;
}

.gt_float_switcher img {
width: 28px !important;
    margin: 0 0px 0 0 !important;

}

.gt_float_switcher{ 
	font-size:15px !important;
}

img.frame-img {
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.modal.form-step2 .modal-content {
    width: 550px;
}

body .htslider-slider .slick-arrow{
	border: 0;
    background: unset;
}
.frame-cm-mobile{
		display:none;
	}
	
	#section-hover-video:hover{
		    z-index: 3 !important;
	}
	
	#video-frame{
		background-color: #000;
    border: none;
    display: flex
;
    height: 100%;
    width: 100%;
	}
	
	#video-frame-wrapper {
    --video-aspect-ratio: 1.77777;
	    aspect-ratio: 1.77777;
	}
body{
	background:#000;
}

#top-header p {
	margin:0 !important;
}

#top-header a{
	color:#000;
}

/* .story-content:before {
    content: "";
    width: 110%;
    top: 0;
    left: -5%;
    height: 100px;
    display: block;
    position: absolute;
    background: rgb(233 233 233 / 90%);
    filter: blur(8px);
}

.story-content:after {
    content: "";
    width: 110%;
    bottom: 0;
    left: -5%;
    height: 100px;
    display: block;
    position: absolute;
    background: rgb(233 233 233 / 90%);
    filter: blur(8px);
} */

/***********************Mobile style********/
		@media (min-width:768px) and (max-width:1600px){
			section#section-gioi-thieu-desktop {
				height: 110vh;
			}
		}


@media(max-width:1024px){
	.single-wrapper iframe {
    width: 100%;
}
	body{
		width:100%;
		overflow-x:hidden
	}
.column-7 {
		width: 100%;
		flex: 100%;
	}

	.column-3 {
		display: none;
	}
	
	.my-stories-container {
		 justify-content: center;
	}
	.column-7 .my-stories-container ,.column-12 .my-stories-container {
/* 		padding: 0; */
       
	}
	
	.column-7 .story-card ,.column-12 .story-card{
		width: 46%;
	}
	
	.form-stepl{
		max-width:80%;
	}
	
	body.cau-chuyen-cua-toi-template-default.single.single-cau-chuyen-cua-toi, body.page-template-custom-page, body.page-template-custom-page-bs, body.page-template-custom-page-nhanvien, body.page-template-custom-page-bn{
		    background-image: linear-gradient(360deg, #FFF5EE 11%, #A0C9C5 82%);
    background-repeat: no-repeat;
    background-color: #a5c8c5;
	}
	#thankYouModal .modal-content{
		    width: 100%;
	}

}

@media (max-width:821px){
	.story-card {
		width: 47%;
	}
}

@media(max-width:767px){
	.frame-cm-desktop{
		display:none
	}
	
	.frame-cm-mobile{
		display:block;
	}
	
	    .elementor-206 .elementor-element.elementor-element-71a844a {
        padding: 20% 0% 0% 0% !important;
    }
	
}

@media(max-width:567px){
	.my-stories-container {
		padding: 10px;
	}
	
	.story-card{
		width: 100% !important;
	}
	
	.story-content img {
		/*max-height: 430px !important;*/
	}
	
	li.comment-item.show{
		right:0% !important;
		left:0% !important;
	}
}

@media(max-width:480px){
	
	.gt_float_switcher .gt-selected .gt-current-lang {
    padding: 0px 15px !important;
	}
	.my-stories-container {
		padding: 10px;
	}
	
	.story-card{
		width: 100% !important;
	}
	
	.story-content img {
		/*max-height: 430px !important;*/
	}
	.story-actions button {
		background: none;
		border: none;
		padding: 5px 1px;
		margin-right: 11px;
		cursor: pointer;
		color: #777;
		font-size: 1p;
	}
	.story-actions button i {
		margin-right: 5px;
		        width: 20px;
	}
	.story-excerpt {
		width: 100%;
	}
	.story-excerpt > p {
		margin: 0;
		font-family: "Montserrat";
		font-size: 12px;
	}
	
	.form-stepl{
		max-width: 99%;
	}
	
	.form-step2 .radio-group label,.form-step2 .radio-group p{
		font-size:12px;
	}
	
.comment-item:not(.show){
		
		overflow:hidden
	}
	.comment-item{
		  max-width: 100%;
		 width:100%;
	}
	
.comment-text{
	line-height:1.3;
	 font-size:11px;
}

    #homesection76 p {
        text-align: center !important;
    }
	
	.banner-video-mobile iframe{
		min-height:400px;
	}
	.abouttext{
		height:300px
	}
	.abouttext::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px; /* adjust as needed */
           /* background: linear-gradient(transparent, #fff);  fade to white, adjust color if needed */
            pointer-events: none; /* Makes the fade area not interfere with clicks */
        }
        .abouttext.expanded::after {
            display: none; /* Hide fade when expanded */
        }
	
	.read-more-button{
		display:block
	}
	
	.elementor-custom-heading-title{
		font-size:28px;
	}
h1.entry-title, .page-content, .page-content p {
    font-family: 'Montserrat';
    font-size: 18px;
}

.single-wrapper {
    margin: 10px 10px;
}
}

@media(min-width:480px) and (max-width:992px){
	.offcanvas-menu{
		top:55px;
	}
	
	
}


@media(max-width:391px){
	.column-7 .story-card, .column-12 .story-card{
		width:100%;
	}
	    .column-7 .my-stories-container, .column-12 .my-stories-container {
        padding: 15px;
    }
	
	.elementor-custom-heading-title{
		    font-size: 28px;
	}
	
	    .my-stories-container {
        padding: 10px;
    }
	
	.story-card{
		width:100%;
	}
	
	.form-step2 .radio-group p {
		width: 100%;
	}
	
	.form-step2 .radio-group {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
		flex-wrap: wrap;
	}
	
	#thankYouModal .modal-content{
		width:100%;
	}
}

@media (min-width: 1026px) {
    .lang-desktop {
        top: 30px !important;
    }
}