@charset "utf-8";
/* Intro */
.intro{position: relative; margin: 0 -65px 120px;}
.intro-inner{position: relative; z-index: 1;}

.intro-head{background: url("../img/history/bg-title.webp") no-repeat top left/100% 100%; width: 727px; height: 284px; margin: 0 0 23px;}
.intro-tit{font-family: "Kaisei HarunoUmi", serif; font-size: 5.2rem; font-weight: 500; line-height: 1.2em; padding: 8% 0 0 20%;}
.intro-tit span{font-size: 7.8rem; line-height: 1.2em; display: inline-block;}
.intro-txt{margin-left: 114px; font-size: 1.8rem; font-weight: 500; line-height: 2em;}
.intro-txt span{display: inline-block;}
.intro-img{position: absolute; top: 45px; right: 0; line-height: 1; width: 790px; transform: translateX(8.2%);}
.intro-img .cap{position: absolute; top: 90%; left: 14%;}

@media (max-width: 1350px) and (min-width: 1001px){
    .intro{margin: 0 -10px 120px;}
    .intro-head{width: 50vw; height: 19.53vw;}
    .intro-tit{font-size: 3.5vw;}
    .intro-tit span{font-size: 5.7vw;}
    .intro-txt{margin-left: 5%; margin-right: 52%;}
    .intro-img{width: 55vw; transform: translateX(0);}
}

@media (max-width: 1000px){
    .intro{margin: 0 auto 80px; max-width: 790px; width: 100%;}
    .intro-head{margin: 0 auto 20px; width: 100%; max-width: 727px;}
    .intro-img{position: static; transform: translateX(0); width: 100%; margin: 50px 0 0 0;}
}

@media (max-width: 768px){    
    .intro-head{height: 36vw;}
    .intro-tit{font-size: 6.5vw; padding: 8.5% 0 0 20%;}
    .intro-tit span{font-size: 9.7vw;}
    .intro-txt{font-size: 1.6rem; text-align: center; margin: 0;}
    .intro-txt p{display: inline-grid; text-align: left;}
    .intro-img{margin: 30px -20px 0; width: calc(100% + 40px);}
    .intro-img .cap{left: 20px;}
}

/* Part */
.part-list{width: 100%; display: flex; flex-wrap: wrap;}
.part-list .item{position: relative; text-align: center; display: flex;}
.part-list .item a{width: 100%; padding: 44px 40px; position: relative; z-index: 1;
background-image: url("../img/history/frame-top.webp"), url("../img/history/frame-bottom.webp");
background-repeat: no-repeat, no-repeat;
background-size: 100% 23px;
background-position: top left, bottom left;}
.part-list .item a::after{content: ''; width: 100%; position: absolute; top: 23px; bottom: 23px; left: 0; background: url("../img/history/frame-center.webp") repeat-y top left/100% auto; z-index: -1;}
.part-list .num{width: 89px; height: 47px; position: absolute; top: -19px; left: 0; right: 0; margin: 0 auto; background: url("../img/history/bg-number.webp") no-repeat top left/100% 100%; font-size: 1.6rem; line-height: 1.2em; font-weight: bold; display: flex; justify-content: center; align-items: center; font-family: "Kaisei HarunoUmi", serif; text-align: center; padding-bottom: 4px;}

.part-list .tit{min-height: 120px; display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; font-size: 1.8rem; line-height: 1.5em; font-weight: 200; padding: 10px 0; transition: .3s;}
.part-list .titM{font-size: 2rem; line-height: 1.5em; display: inline-block;}
.part-list .titB{font-size: 2.4rem; line-height: 1.5em; display: inline-block; font-weight: bold;}

.part-list .btn{font-family: "Zen Antique Soft", serif; font-size: 1.8rem; line-height: 1.2em; font-weight: 200; width: 100%; max-width: 209px; height: 42px; border-radius: 5px; margin: 0 auto; background: #E57129; display: flex; justify-content: center; align-items: center; transition: .3s;}
.part-list .btn::after{content: ''; margin-left: 15px; width: 7px; height: 11px; background: url("../img/history/ic-arrow.svg") no-repeat top left/100% 100%; display: block;}

.part-list .item.soon{pointer-events: none;}
.part-list .item.soon .img{background: #DADADA; aspect-ratio: 308 / 162; display: block;}
.part-list .item.soon a{opacity: .4;}
.part-list .item.soon::before{content: 'Coming soon'; font-family: "EB Garamond" , sans-serif; font-size: 3rem; line-height: 1.4em; font-weight: 600; position: absolute; top: 44px; left: 40px; right: 40px; aspect-ratio: 308 / 162; margin: 0 auto; display: flex; justify-content: center; align-items: center; z-index: 2;}

.part-list .modalopen{cursor: pointer;}
.part-list .modalopen:hover .btn{color: #DF2525; background: #fff;}
.part-list .modalopen:hover .btn::after {
     mask: url(../img/history/ic-arrow.svg) no-repeat center center/100% 100%;
    -webkit-mask: url(../img/history/ic-arrow.svg) no-repeat center center/100% 100%;
    background: #DF2525;
}

@media (min-width: 1001px){
    .part-list .item{width: 32.334%; margin: 0 1.499% 50px 0;}
    .part-list .item:nth-of-type(3n){margin-right: 0;}
}

@media (max-width: 1000px) and (min-width: 769px){
    .part-list .item{width: 49%; margin: 0 2% 50px 0;}
    .part-list .item:nth-of-type(2n){margin-right: 0;}
    .part-list .img img{width: 100%;}

    .part-list .tit{font-size: min(2.2vw,1.8rem);}
    .part-list .titM{font-size: min(2.4vw,2rem);}
    .part-list .titB{font-size: min(2.9vw,2.4rem);}
}
.slide-list-img{display: flex;gap: 10px;}
@media (max-width: 768px){
    .part-list{max-width: 388px; margin: 0 auto;}
    .part-list .item{width: 100%; margin: 0 0 50px;}
    .part-list .item:last-of-type{margin: 0;}
    .part-list .item a{padding: 44px min(9vw,40px);}

    .part-list .tit{font-size: min(4.2vw,1.8rem); min-height: min(28vw,120px);}
    .part-list .titM{font-size: min(4.6vw,2rem);}
    .part-list .titB{font-size: min(5.6vw,2.4rem);}

    .part-list .btn{font-size: min(4.2vw,1.8rem); height: min(10vw,42px); max-width: min(50vw,209px);}

    .part-list .item.soon::before{font-size: min(7vw,3rem);}
}

/* Modal */
html.modal-fixed{overflow: hidden; position: relative; height: 100%;}

.modal{position: fixed; z-index: 999999; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; padding: 3%; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; opacity: 0; background: rgba(42, 42, 42, 0.9); pointer-events: none; visibility: hidden;}
.modal.is-active{opacity: 1; pointer-events: auto; visibility: visible;}

.modal-overlay{position: absolute; width: 100%; height: 100%; cursor: pointer;}
.modal-wrap{background: #FFF8F2; color: #2A2A2A; position: relative; max-width: 780px; width: 100%; border-radius: 6px; overflow: hidden;}
.modal-content{width: 100%; position: relative;}

.modal-slide{box-sizing: border-box; overflow-y: scroll; height: 90vh; height: 90dvh; max-height: 900px; width: 100%; scrollbar-gutter: stable;}

/* Thanh scroll luon hien thi (khong tu an) - mau mac dinh */
.modal-slide::-webkit-scrollbar{width: 15px; -webkit-appearance: none; appearance: none;}
.modal-slide::-webkit-scrollbar-track{background: #f1f1f1;}
.modal-slide::-webkit-scrollbar-thumb{background: #c1c1c1; border-radius: 8px; border: 4px solid #f1f1f1;}
.modal-slide::-webkit-scrollbar-thumb:hover{background: #a8a8a8;}

.modal-close{width: 200px; height: 42px; cursor: pointer; z-index: 10; background: #E57129; color: #fff; display: flex; justify-content: center; align-items: center; font-family: "Zen Antique Soft", serif; font-size: 1.8rem; line-height: 1.2em; font-weight: 400; border-radius: 5px;}
.modal-close::after{content: ''; width: 11px; height: 11px; background: url("../img/history/ic-close.svg") no-repeat top left/100% 100%; margin-left: 12px; margin-top: 3px;}
.modal-close:hover{background: #2A2A2A;}

@media (max-width: 768px){
	.modal{padding: 20px;}

    .modal-close{max-width: 120px; width: calc(100% - 140px); height: 36px; font-size: 1.6rem;}
}

/* Swiper */
.swiper-button-controls{display: flex; justify-content: space-between; height: 110px; align-items: center; padding: 30px 50px 40px; position: absolute; bottom: 0; left: 0; width: 100%; background: #FFF8F2; z-index: 10;}
.swiper-button-controls > div{cursor: pointer; display: flex; align-items: center; width: auto !important; height: 42px !important; position: static; margin: 0; padding: 0;}
.swiper-button-controls svg{display: none;}
.swiper-button-controls span{font-size: 1.8rem; font-weight: 400; line-height: 1.2em; color: #2A2A2A; font-family: "Zen Antique Soft", serif;}

.swiper-button-next::after,
.swiper-button-prev::before{content: ''; width: 20px; height: 20px;}

.swiper-button-prev::before{background: url("../img/history/btn-prev.svg") no-repeat top left/100% 100%; margin-right: 12px;}
.swiper-button-next::after{background: url("../img/history/btn-next.svg") no-repeat top left/100% 100%; margin-left: 12px;}
.swiper-button-next:hover span,
.swiper-button-prev:hover span{color: #E57129;}
.swiper-button-controls > div.swiper-button-disabled{cursor: auto; opacity: .35; pointer-events: none;}
.swiper-button-controls > div.swiper-button-disabled:hover span{color: #2A2A2A;}

@media (max-width: 768px){
    .swiper-button-controls{padding: 20px 20px 24px; height: 80px;}
    .swiper-button-controls > div{height: 36px !important;}
    .swiper-button-controls span{font-size: 1.6rem;}
    .swiper-button-next::after,
    .swiper-button-prev::before{width: 18px; height: 18px;}    
}

.slide-content{padding: 35px 50px 120px;}

.slide-head{margin: 0 0 25px; display: flex; align-items: center;}
.slide-head .num{width: 119px; height: 63px; background: url("../img/history/bg-number_modal.webp") no-repeat top left/100% 100%; margin-right: 20px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 2rem; line-height: 1.2em; font-weight: bold; font-family: "Kaisei HarunoUmi", serif; color: #fff; padding-bottom: 5px;}
.slide-head .tit{font-size: 2.4rem; line-height: 1.24em; font-weight: 600;}
.slide-head .tit span{font-size: 3.4rem; line-height: 1.24em; display: inline-block;}

.slide-img{margin: 0 0 20px;}

.slide-box{margin: 30px -20px 0; display: flex; justify-content: center;}
.slide-item{margin: 0 20px;}
.slide-item .tit{font-size: 1.8rem; line-height:2; font-weight: 600; margin: 5px 0;}
.slide-item .tit.tit-mark{margin: 10px 0 8px;}

.slide-item .tit .txt-bg{font-size: 1.4rem;padding: 6px;background: #2A2A2A;color: #fff;margin-right: 8px;}
.slide01 .slide-item:nth-of-type(1){width: 187px;}
.slide01 .slide-item:nth-of-type(2){width: 180px;}

@media screen and (max-width: 768px) {
	.slide-content{padding: 30px 20px 90px;}

    .slide-head{margin: 0 0 20px; display: block;}
    .slide-head .num{width: 96px; height: 50px; font-size: 1.6rem; margin: 0 auto 15px;}
    .slide-head .tit{font-size: 1.8rem; line-height: 1.4; text-align: center;}
    .slide-head .tit span{font-size: 2.4rem; line-height: 1.4;}

    .slide-box{margin: 20px -10px 0;}
    .slide-item{margin: 0 10px 20px;}
    .slide-item .tit{font-size: 1.6rem;}
    .slide-item .tit .txt-bg{font-size: 1.2rem;padding: 4px 6px;margin-right: 4px;}

}

/* Fix: fade effect stacks slides and can block links on underlying elements.
Allow pointer events only on the active slide and raise its z-index. */
.swiper-slide{pointer-events: none; position: relative; z-index: 1;}
.swiper-slide-active{pointer-events: auto; z-index: 10;}
.swiper-slide-active a,
.swiper-slide-active button{pointer-events: auto;}

/* If any other overlaying element still blocks clicks, ensure wrapper allows pointer events. */
.swiper-wrapper{pointer-events: auto;}

/* Ensure modal children do not receive pointer events when modal is hidden */
.modal:not(.is-active) .modal-wrap,
.modal:not(.is-active) .modal-overlay,
.modal:not(.is-active) .modal-content{pointer-events: none;}

/* slide02 */
@media screen and (max-width: 480px){
    .slide-box {
        flex-wrap: wrap;
    }

    .slide02 .slide-item {
        width: 100%;
    }

    .slide02 .slide-item:first-child {
        width: 187px;
    }
}