@media (min-width: 1440px) {
	.top-video h1 {
		transform: translateX(30%);
	}
}
@media (max-width: 1440px) {
    .hero-title {
        font-size: clamp(80px, 15vw, 240px);
    }
    .elephant-wrap {
        max-width: 700px;
    }
    /* close-home-page */
	/* product */
    .product-banner .hero-title {
        font-size: clamp(100px, 12vw, 164px);
    }
	/* detail-product */
    .product-info-box {
        padding-left: 30px;
    }
	/* close-detail-product */
}
@media (max-width: 1320px) {
	.widget_media_image {
		width: 100%;
		margin-bottom: 40px;
	}
}
@media only screen and (max-width: 1290px) {
	/* contact */
	.story-section .main-title {
		font-size: 4vw;
	}
	/* close-contact */
}
@media (max-width: 1200px) {
	/* home-page */
    .about-section ul li {
        width: 350px;
    }
    .about-section ul:before {
        width: 250px;
        height: 270px;
        background-size: contain;
    }
    .historical {
        height: auto;
        flex-direction: column;
        background-size: contain;
        gap: 30px;
    }
    .historical-item {
        width: fit-content;
        margin: 0 auto;
    }
    .historical-flower-bg {
        left: 95%;
    }
    .site-footer .d-flex {
        column-gap: 20px;
    }
	/* close-home-page */
	/* product */
    .product-banner .hero-title {
        font-size: clamp(80px, 10vw, 140px);
    }
    .product-banner .img-elephant {
        max-width: 300px;
        left: 35%;
        top: 100px;
    }
	.product-grid-section .row{
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	/* close-product */
	/* contact */
    .contact-form {
        padding: 0 50px;
    }
    .contact-scroll-wrapper {
        max-width: 100%;
    }
    .contact-scroll-wrapper.active .scroll-body {
        width: calc(100vw - 220px);
    }
    .left-roller {
        transform: translateX(calc(50vw - 51px));
    }
    .right-roller {
        transform: translateX(calc(-50vw + 51px)) rotate(180deg);
    }
	/* close-contact */
	/*single-post */
	   .single-post-article .entry-title {
        font-size: 54px;
    }
    .content-grid {
        gap: 30px;
    }
	/* close-single-post */
	/* detail-product */
    .product-info-box {
        padding-left: 20px;
    }
    .current-price {
        font-size: 40px;
    }
	/* close-detail-product */
}
@media only screen and (max-width: 1110px) {
    .story-section .main-title.style2 {
        font-size: 4vw;
        margin-bottom: 32px;
    }
	/* close-home-page */
}
@media (max-width: 1024px) {
	/* home-page */
	 .hero-title {
        font-size: clamp(70px, 12vw, 200px);
    }
    .elephant-wrap {
        max-width: 600px;
        top: 60%;
    }
    .about-section ul:before {
        top: unset;
        bottom: 0;
        left: 50%;
        transform: translate(-61%, 87%);
    }
    .about-section ul li:nth-child(3),
    .about-section ul li:nth-child(4) {
        transform: none;
    }
    .aspect-section:before {
        width: 100%;
        left: 0;
    }
    .aspect:before {
    top: 40%;
    }
	/* close-home-page */
	/* product */
    .product-banner .hero-title {
        font-size: clamp(70px, 12vw, 120px);
    }
    .product-banner .img-elephant {
        max-width: 280px;
        left: 33%;
        top: 80px;
    }
	.product-grid-section .row{
		grid-template-columns: repeat(3, 1fr);
	}
	.journey-banner .hero-title {
        font-size: clamp(70px, 12vw, 200px);
    }
	/* close-product */
	
	/* detail-product */
    .product-info-box {
        padding-left: 15px;
    }
    .current-price {
        font-size: 36px;
    }
	/* close-detail-product */
}
@media only screen and (max-width: 990px) {
	.main-menu > .container {
		position: relative;
	}
	.menu-main {
		position: absolute;
		top: calc(50% + 16px);
		right: 0;
		min-width: 270px;
		max-width: 350px;
        background: #FFF2D2;
        padding: 16px;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		opacity: 0;
		visibility: hidden;
        flex-direction: column;
        gap: 16px;
	}
	.main-menu ul li {
		display: block;
        padding: 0;
        margin: 0;
        width: 100%;
	}
    .main-menu ul li:not(:last-child) {
        border-bottom: solid 1px #5C392224;
    }
	.main-menu.open .menu-main {
		opacity: 1;
		visibility: visible;
		margin-top: 0;
	}
	.main-menu .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		margin-top: 0;
		visibility: visible;
		background: rgba(255, 255, 255, 0.1);
	}
	.main-menu .sub-menu li a {
		font-size: 13px;
		padding-left: 25px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.main-menu .arrow {
		display: block;
	}
	.mobile-menu {
		display: inline-block;
	}   
    
    .top-video {
        min-height: unset;
        height: calc(100vh - 150px);
        margin-bottom: 40px;
    }
    .video-cover2 {
        position: relative;
        transform: none;
        margin: 0 auto;
        top: unset;
        left: unset;
    }
    .aspect-section::before,
    .aspect-section::after,
    .fog:before, .fog:after, .fog span:before, .fog span:after {
        top: 80%;
    }
    .about-section ul {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 20px;
    }
    .aspect-section .main-title {
        margin-bottom: 60px;
    }
    .about-section ul li {
        width: auto;
        padding: 0 15px;
    }

    .about-section ul li:nth-child(1),
    .about-section ul li:nth-child(5),
    .about-section ul li:nth-child(2),
    .about-section ul li:nth-child(6) {
        transform: none;
    }
    /* close-home-page */
	/* hanh-trinh */
	.journey-post .row{
		display: flex;
		justify-content: center;
		gap: 25px;
	}
	 .journey-post .post-right {
        padding-left: 15px;
    }
	/* close-hanh-trinh */
	.recent-posts .row {
        margin-left: -15px;
        margin-right: -15px;
	}
	.recent-posts-title {
        text-align: center;
        font-size: 40px;
        margin-bottom: 30px;
    }
    .recent-posts .post-column {
        margin-bottom: 30px;
    }
    .post-card h3.post-title{
        font-size: 20px;
        line-height: 30px;
    }
    .pagination-wrapper {
        margin-top: 30px;
    }
    .pagination-wrapper .page-numbers {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
		/* product */
	.product-banner .hero-title {
        font-size: clamp(60px, 12vw, 100px);
        transform: translateY(-40px);
    }
    .product-banner .img-elephant {
        max-width: 250px;
       	left: 40%;
        top: 197px;
    }
    .product-grid-section {
        padding: 60px 0;
    }
	/* close-product  */
	/*single-post */
	.single-post-wrapper {
        padding-top: 120px;
    }
    .single-post-article .entry-title {
		text-align: left;
        font-size: 48px;
        margin-bottom: 40px;
    }
    .content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .intro-text {
        font-size: 18px;
    }
	/* close-single-post */
	/* detail-product */
    .product-info-box {
        padding-left: 0 !important;
        margin-top: 30px;
        text-align: left;
    }
    .price-container {
        justify-content: flex-start;
    }
	/* close-detail-product */
	/* contact */
     .contact-form {
        padding: 0 30px;
    }
    .contact-page-section .story-wrap {
        height: auto;
        min-height: 600px;
        margin: 0 15px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .contact-page-section .story-wrap:before,
    .contact-page-section .story-wrap:after {
        min-height: unset;
    }
    .contact-page-section .story-wrap:before {
        left: -10px;
    }
    .contact-page-section .story-wrap:after {
        right: -10px;
    }
	/* close-contact */
	footer .widget_nav_menu {
		min-width: 150px;
	}
}

@media only screen and (max-width: 768px) {
	.widget_media_image {
		margin-bottom: 0;
	}
    .main-menu li a {
        font-size: 16px;
        line-height: 24px;
        padding: 8px 16px;
    }
    .main-title {
        font-size: 40px;
    }
	.recent-posts .row {
		grid-template-columns: repeat(2, 1fr);
	}
	.site-brand,
	.right-header {
		text-align: center;
	}
	.left-thumb .post-thumb {
		float: none;
		width: auto;
		max-width: 400px;
		margin-right: 0;
	}
	.site-footer {
		text-align: center;
	}
	.site-footer .socials {
		padding: 10px 0;
		text-align: center;
	}
	/* hanh-trinh */
	.journey-post .row{
		display: block;
	}
	.journey-post {
        padding: 60px 0;
    }
    .journey-title-post {
        font-size: 28px;
    }
	/* close-hanh-trinh */
	.site-header {
        padding: 10px 0;
    }
    .site-header:before {
        display: none;
    }
    .site-brand img {
        max-height: 60px;
    }    
    .top-video {
        min-height: unset;
        height: auto;
        margin-bottom: 40px;
    }
    .top-video h1 {
        position: relative;
        font-size: 64px;
        margin-bottom: 24px;
    }
    .top-video .video-cover {
        position: relative;
    }
    .hero-title {
        font-size: clamp(50px, 15vw, 80px);
    }
    .elephant-wrap {
        max-width: 450px;
        top: 65%;
    }
    .top-video img.img2, .top-video img.img3, .top-video img.img4, .top-video img.img5 {
        width: 30%;
    }

    .about-section {
        padding-bottom: 0;
    }
    .about-section ul {
        grid-template-columns: 1fr 1fr;
    }
    .video-cover2 {
        width: 100%;
    }
    .aspect-section::before,
    .aspect-section::after,
    .fog.bottom-img span:before, 
    .fog.bottom-img span:after{
        height: 100%;
        width: 100%;
        top: 51%;
        left: 0;
        right: 0;
        overflow: hidden;
    }
    .about-section ul li {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        padding: 0;
    }
    .about-section h3 {
        font-size: 26px;
    }
    /* home-page */
    .story-section {
        padding-left: 15px;
        padding-right: 15px;
    }
    .story-inner {
        width: calc(100vw - 40px);
        margin: 70px auto 0;
    }
    .story-wrap {
        height: 500px;
        background: url(../images/assets/story-bg-mobile.svg) no-repeat center;
    }
    .story-wrap:before, .story-wrap:after {
        background: url(../images/assets/roller_mobile.svg) no-repeat center;
        height: 400px;
        width: 29px;
        background-size: cover;
    }
    
    .story-section .main-title.style2 {
        margin-bottom: 16px;
        line-height: 1.5;
    }
    .story-inner .entry-content {
        height: 200px;
        font-size: 12px;
    }
    .historical-section {
        padding: 60px 0 300px;
    }
    .historical-item .entry-content {
        background-size: 100% 100%;
        background: url(../images/assets/historical-roller-bg-mobile.svg) no-repeat center center;
        height: 630px;
        padding: 30px 25px 5px 35px;
        width: calc(100vw - 30px);
        max-width: 371px;
        font-size: 12px;
    }
    .historical-item {
        padding: 40px 0;
    }
    .historical-item-content {
        height: 100%;
    }
    .historical-item:before, .historical-item:after {
        width: 370px;
        background: url(../images/assets/roller-vertical-mobile.svg) no-repeat center center;
        background-size: contain;
        height: 46px;
        left: 50%;
        transform: translateX(-50%);
    }

    .historical-flower-bg {
        display: none;
        width: 150px;
        left: 85%;
    }

    .historical-section img {
        width: 100%;
    }

    .flower-bg {
        height: 250px;
    }

    .historical-section .main-title:before,
    .flower-bg::before,
    .flower-bg::after {
        min-width: 85px;
    }
    .aspect {
        text-align: center;
        margin: auto;
        position: relative;
    }
    .aspect-section {
        padding: 50px 0;
    }
   
    .aspect.d-flex {
        display: flex;               
        flex-wrap: nowrap;          
        justify-content: flex-start; 
        overflow-x: auto;           
        overflow-y: hidden;         
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        gap: 20px;
        position: relative;
        min-height: 120px;           
    }
    .aspect {
        background: 
            url(../images/assets/line.svg) top 19px left no-repeat,
            url(../images/assets/line.svg) bottom 91px center no-repeat;
        background-size: contain, contain; 
    }
    .aspect.d-flex::-webkit-scrollbar {
        display: none;
    }
    .aspect-item {
        width: auto;
        flex: 0 0 44%;
        scroll-snap-align: start;
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 0;
    }
    .historical-section {
        position: relative;
        overflow-x: hidden;
        padding: 90px 0 300px;
    }
    .aspect-section .main-title {
        margin-bottom: 40px;
    }
    .aspect-section:before {
        width: 60% !important;
        left: 0;
    }
    .aspect-section:before {
        top: 18%;
    }
    .expression {
        gap: 20px;
    }
    .expression-item {
        flex: 0 0 calc((100% - 20px) / 2);
    }
    /* close-home-page */
    .site-footer {
        padding-bottom: 200px;
    }
    .site-footer .d-flex {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        row-gap: 24px;
    }
	/* product */
	 .product-banner {
        min-height: auto;
        height: auto;
        padding: 60px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #F6D098;
    }
	.product-grid-section .row{
		grid-template-columns: repeat(2, 1fr);
	}
    .product-banner .hero-content {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }
    .product-banner .hero-title {
        font-size: clamp(40px, 12vw, 70px);
        transform: translateY(0);
    }
    .product-banner .img-elephant {
        max-width: 200px;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 0 auto;
    }
    .product-banner .hero-bg-elements {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }
	.product-banner .img-mountain {
		position: absolute;
		bottom: -66px;
	}
    .product-card {
        padding: 15px 10px 20px;
    }
    .product-title {
        font-size: 18px;
    }
    .product-desc {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
	/* close-product */
	/* contact */
     .contact-form {    
        padding: 0;
    }
    .contact-header {
        flex-direction: column;
        gap: 15px;
    }
    .contact-form .row,
    .contact-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
    .contact-form .form-row .form-group.half-width {
        width: 100%;
    }
    .contact-page-section .story-wrap {
		padding: 0;
        border-radius: 20px;
        overflow: hidden;
        background: #FFF2D2;
    }
    .contact-page-section .story-wrap:before,
    .contact-page-section .story-wrap:after {
        display: none;
    }
	.contact-page-section {
        border-radius: 20px;
	}
    .contact-page-section .story-wrap.aos-animate {
        transition: none!important;
    }
    .contact-page-section .story-inner {
        margin: 0 auto;
    }
    .contact-page-section.story-section .main-title.style2 {
        font-size: 24px;
    }
    .contact-page-section .contact-form input, .contact-page-section .contact-form textarea {
        font-size: 14px;
        color: #896D19;
    }
    .contact-page-section .contact-form input::placeholder, .contact-page-section .contact-form textarea::placeholder {
        color: #896D19;
    }
	.submit-btn {
    padding: 15px 30px;
	}
    .motif {
        width: 50px;
    }
	/* close-contact */
	/* product-detail */
	.product-detail-wrapper {
        padding: 40px 0;
        overflow-x: hidden;
    }
    .thumbnail-wrapper {
        padding: 0 20px;
    }
    .current-price {
        font-size: 32px;
    }
    .product-detail-title {
        font-size: 30px;
    }
    .product-accordion-container {
        margin-top: 40px;
    }
    .accordion-header {
        padding: 15px 20px;
        font-size: 14px;
    }
    .accordion-content p {
        font-size: 14px;
    }
    .faq-item h3 {
        font-size: 16px;
    }
	/* close-product-detail */
	.journey-banner {
        min-height: 600px;
    }
    .journey-banner .hero-title {
        font-size: clamp(50px, 15vw, 100px);
    }
    .journey-banner .hero-description {
        font-size: 16px;
        padding: 0 20px;
    }
	/*single-post */
	 .single-post-article .entry-title {
        font-size: 28px;
        margin-bottom: 30px;
    }.recent-posts-title{
		font-size: 36px;
	}
    .single-post-article .sub-title {
        font-size: 28px;
    }
    .intro-text {
        font-size: 16px;
    }
    .content-grid-item h3 {
        font-size: 20px;
    }
    .content-section {
        margin-bottom: 50px;
    }
	/* close-single-post */
	/* detail-product */
    .product-info-box {
        padding-left: 0 !important;
        margin-top: 20px;
        text-align: left;
    }
    .price-container {
        justify-content: flex-start;
    }
    .current-price {
        font-size: 28px;
    }
    .old-price {
        font-size: 18px;
    }
    .discount-badge {
        padding: 2px 8px;
        font-size: 14px;
    }
	/* close-detail-product */
    .widget.widget_newsletterwidget {
        width: 100%;
    }

    .widget_newsletterwidget .tnp-subscription .tnp-email {
        width: 100%;
    }

    .product-gallery .main-image-container {
        flex-direction: column;
        align-items: center;    
    }

    .main-image-container .img-col, .main-image-container .info-col {
        width: 100%;
    }

    .post-card .post-excerpt {
        font-size: 14px;
    }

    .journey-post {
        display: none;
    }

    .journey-post .post-left {
        width: 100%;
        text-align: center;
    }
    
    .product-card .product-content {
        padding: 0 20px;
    }
}
@media (max-width: 629px) {
        .aspect.d-flex {
            gap: 10px;
        }
}
@media (max-width: 575px) {
    .main-title.style2:before, .main-title.style2:after {
        margin: auto;
    }
	.recent-posts .row {
		grid-template-columns:1fr;
	}
	.recent-posts-title{
		font-size: 26px;
	}
	.single-post-article .sub-title{
		font-size: 22px;
	}
	.post-card  h3.post-title{
        font-size: 18px;
	 }
	.post-card  .post-excerpt p{
        font-size: 14px;
	 }
    .post-card {
        margin-bottom: 20px;
    }
	.recent-posts .row {
        margin-left: -15px;
        margin-right: -15px;
	}
    .recent-posts .post-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
	#content h3{
    font-size: 22px;
	}
	#content h4{
		font-size: 18px;
	}
	#content p{
		font-size: 14px;
	}
    .product-column {
        margin-bottom: 24px;
    }
    /* home-page */
    .historical-section {
        padding: 90px 0 200px;
    }
    /* close-home-page  */
	/* close-product */
	/* detail-product */
    .current-price {
        font-size: 26px;
    }
	/* close-detail-product */
	/* contact */
	.submit-btn {
		padding: 15px 30px;
	}
	.main-title.style2 {
        font-size: 32px;
    }
    .motif {
        width: 40px;
    }
	/* close-contact */
    /* footer */
    .site-footer {
        padding-bottom: 150px;
    }
    /* close-footer */
}

@media (max-width: 450px) {
    .product-grid-section .row{
		grid-template-columns: 1fr;
	}
}
@media (max-width: 400px) {
    /* footer */
    .site-footer .d-flex {
        column-gap: 10px;
    }
    .site-footer {
        padding-bottom: 75px;
    }
    /* close-footer */
    /* home-page */
    .historical-section {
        padding: 90px 0 180px;
    }

    /* close-home-page  */
    .story-section .main-title.style2 {
        margin-bottom: 0px;
        line-height: 1.5;
    }
    .story-inner {
        margin: 0 auto;
    }
    .story-wrap {
        height: fit-content;
        background: url(../images/assets/story-bg-mobile2.svg) no-repeat center;
    }
    .story-wrap:before, 
    .story-wrap:after{
        height: 250px;
    }
    .story-inner .entry-content {
        height: 130px;
    }
    .historical-section {
        padding: 0px 0 150px;
    }
    .email-form input[type="email"] {
        max-width: 255px;
        width: 100%;

    }

}